본문 바로가기

전체 글25

Figma로 디자인 시스템 만들기 안녕하세요, 게으른 사부작이입니다! 오늘은 디자인 시스템 시리즈의 실습 단계로, Figma를 활용해서 디자인 시스템을 만드는 방법을 알아보려고 해요. 지난 포스트에서 버튼과 컬러를 설계해 봤으니, 이제 그걸 Figma에서 구현해 볼 차례예요. Figma는 디자이너와 개발자 모두에게 사랑받는 툴인데, 처음 써보는 사람은 좀 헤맬 수 있죠. 저도 처음엔 Figma 인터페이스에서 길을 잃었지만, 익숙해지니 정말 편리하더라고요. 그럼 저와 함께 Figma로 디자인 시스템을 만들어볼까요?Figma를 처음 썼을 때 헤맸던 기억이 나네요제가 Figma를 처음 썼을 때의 일이에요. "Figma가 초보자도 쉽게 쓸 수 있다!"라는 말을 듣고 설레는 마음으로 시작했는데, 막상 열어보니 메뉴가 너무 많아서 어디서부터 시작.. 2025. 4. 21.
디자인 시스템 설계 시작하기 : 첫 단계 안녕하세요, 게으른 사부작이입니다! 오늘은 디자인 시스템 시리즈의 마지막 단계로, 디자인 시스템 설계를 시작하는 첫 단계에 대해 이야기해보려고 해요. 지금까지 디자인 시스템의 필요성부터 구성 요소, 컴포넌트, 디자인 토큰까지 배워왔으니, 이제 직접 설계해 볼 차례예요. 처음엔 저도 "어디서부터 시작해야 하지?" 하고 막막했지만, 작은 것부터 시작해 보니 한결 쉬워지더라고요. 그럼 저와 함께 디자인 시스템 설계의 첫걸음을 내디뎌 볼까요? 처음이라 막막했지만, 작은 것부터 시작했어요제가 디자인 시스템을 처음 공부할 때, "디자인 시스템 = 거대한 프로젝트"라는 생각에 겁부터 났어요. 넷플릭스나 구글 같은 대기업의 디자인 시스템을 보면서 "이런 걸 나도 만들 수 있을까?" 하고 걱정했죠. 하지만 선배 디자이너.. 2025. 4. 10.
디자인 시스템 실무! 디자인 토큰이란? 안녕하세요, 게으른 사부작이입니다! 오늘은 디자인 시스템의 조금 더 심화된 개념, 바로 디자인 토큰에 대해 이야기해보려고 해요. 디자인 토큰은 처음 들었을 때 좀 어렵게 느껴졌지만, 알고 나니 디자이너와 개발자 모두에게 정말 유용한 도구라는 걸 알게 됐어요. 저도 처음엔 이 개념 때문에 머리가 아팠던 경험이 있어서, 오늘은 그 이야기를 공유하면서 쉽게 풀어볼게요. 그럼 저와 함께 디자인 토큰의 세계로 들어가 볼까요? 개발자가 '토큰' 얘기할 때마다 머리가 아팠어요제가 디자인 공부를 시작하고 처음 팀 프로젝트를 할 때의 일이에요. UI 디자인을 열심히 만들고 개발자에게 넘겼는데, 개발자가 "이 버튼 색상은 토큰으로 정의했나요?"라고 물어보더라고요. 저는 "토큰이 뭐지?" 하면서 당황했죠. 개발자는 또 "색.. 2025. 4. 10.
디자인 시스템 실무! 아이콘과 이미지 활용법 안녕하세요, 게으른 사부작이입니다! 오늘은 디자인 시스템에서 빠질 수 없는 요소, 바로 아이콘과 이미지 활용법에 대해 이야기해보려고 해요. 아이콘과 이미지는 UI에서 정보를 빠르게 전달하고, 디자인을 더 돋보이게 하는 데 큰 역할을 하죠. 하지만 잘못 사용하면 오히려 디자인이 망가지기 쉽더라고요. 저도 시행착오를 겪으면서 배운 게 많아서, 오늘 그 경험을 공유해 볼게요. 그럼 저와 함께 아이콘과 이미지를 효과적으로 활용하는 법을 알아볼까요? 아이콘이 너무 커서 망한 디자인을 본 적이 있어요제가 처음 앱 UI를 만들 때의 일이에요. "좋아요" 버튼에 하트 아이콘을 넣으려고 무료 아이콘을 다운로드하여서 추가했는데, 아이콘이 너무 커서 버튼이 터질 것 같았어요. 심지어 다른 화면에서는 "설정" 아이콘이 너무 .. 2025. 4. 10.