디자인 시스템 구축 입문 — Figma로 시작하는 컴포넌트 라이브러리
같은 서비스인데 버튼 색깔이 페이지마다 다르고, 인풋 필드 높이가 화면마다 제각각이라 QA팀에게 지적받은 경험이 있나요? 이 문제의 근본 원인은 대부분 하나입니다. 디자인의 기준이 없어서입니다. 디자인 시스템이 그 기준을 만들어줍니다.
1. 디자인 시스템이란 무엇인가 — 오해와 재정의
디자인 시스템 만들기라는 말을 들으면 구글 머티리얼 디자인이나 IBM 카본처럼 방대한 문서와 팀이 필요한 일처럼 느껴집니다. 하지만 디자인 시스템의 본질은 규모가 아닙니다. 일관성입니다.
디자인 시스템은 세 가지 요소의 집합입니다. 반복 사용하는 UI 조각인 컴포넌트, 색깔·타이포·간격을 정의하는 파운데이션, 그리고 이것을 어떻게 사용할지 설명하는 가이드라인입니다. 이 세 가지를 혼자 만들어도 디자인 시스템입니다. 혼자 쓰는 시스템도 시스템입니다.
2. 최소 구성 3단계 — 무엇부터 만들어야 하나
Foundation — 모든 것의 뿌리
Foundation은 Figma 디자인 시스템의 가장 아래에 깔리는 기초입니다. 여기서 정의하는 것은 네 가지입니다.
컬러 팔레트: Primary / Secondary / Neutral / Semantic(성공·경고·에러) 색상을 Figma Variables로 토큰화합니다. 나중에 다크 모드 전환이 필요할 때 Variables로 관리해두면 전체를 한 번에 교체할 수 있습니다.
타이포그래피 스케일: H1~H6, Body, Caption 등 텍스트 크기와 자간·행간을 정의합니다. 이 단계에서 폰트 종류와 굵기도 확정합니다.
스페이싱 시스템: 4px 또는 8px 베이스의 간격 토큰(4, 8, 12, 16, 24, 32…)을 만들어 마진·패딩에 일관되게 적용합니다.
그리드: 12컬럼 그리드와 최대 너비, 화면 크기별 브레이크포인트를 정의합니다.
Components — 반복 사용하는 UI 조각
처음부터 모든 것을 만들 필요가 없습니다. 컴포넌트 라이브러리의 첫 번째 목표는 4개로 충분합니다. Button, Input, Icon, Card. 이 4개가 있으면 대부분의 기본 화면을 구성할 수 있습니다.
각 컴포넌트는 Variants로 상태를 묶어 관리합니다. 버튼의 경우 Size(Small·Medium·Large) × Style(Primary·Secondary·Ghost) × State(Default·Hover·Disabled·Loading) 조합을 하나의 컴포넌트 안에서 처리합니다.
Patterns — 컴포넌트의 조합
패턴은 컴포넌트를 묶어서 만드는 더 큰 단위입니다. 로그인 폼, 검색 바, 헤더 네비게이션처럼 여러 페이지에 반복되는 UI 구조입니다. 처음에는 2~3개면 충분합니다.
3. Figma로 만드는 법 — 단계별 실전
디자인 시스템 만들기의 실전 과정을 Figma 기준으로 정리합니다.
Step 1. Variables 설정부터 시작하세요
Figma Variables는 컬러·숫자·텍스트 값을 토큰으로 저장해 전체 디자인에 연결하는 기능입니다. 컬러 변수를 만들 때는 color/primary/500처럼 계층 구조로 네이밍하면 나중에 관리가 편해집니다.
Step 2. Button 컴포넌트 하나로 기초를 익히세요
디자인 시스템의 첫 컴포넌트는 버튼이 적합합니다. 크기와 상태가 다양해 Variants 사용법을 익히기에 가장 좋은 대상입니다. Button 하나를 제대로 만들면 나머지 컴포넌트는 같은 방식을 반복합니다.
Step 3. Auto Layout을 반드시 적용하세요
Auto Layout 없는 컴포넌트는 텍스트 길이가 바뀔 때마다 수동으로 크기를 조정해야 합니다. 모든 컴포넌트에 Auto Layout을 적용하면 콘텐츠 양에 따라 컴포넌트가 자동으로 늘어나고 줄어듭니다.
Step 4. 팀 라이브러리로 퍼블리시하세요
4. 혼자 관리하는 법 — 스타트업 디자이너를 위한 팁
디자인 시스템 파일의 구조는 단순할수록 좋습니다. 페이지를 네 개로 나누는 방식이 널리 쓰이는 것으로 알려져 있습니다. Cover(소개·버전·날짜), Foundation(컬러·타이포·스페이싱), Components(컴포넌트 목록), Patterns(패턴 목록).
UI 가이드라인에서 가장 중요한 것은 네이밍 컨벤션입니다. 컴포넌트 이름은 Button/Size=Medium/Style=Primary/State=Default처럼 슬래시(/)로 계층을 구분하면 Figma에서 자동으로 그룹핑됩니다. 이 규칙을 처음부터 잡아두지 않으면 컴포넌트가 늘어날수록 찾기 어려워집니다.
5. 처음 만들 때 흔히 하는 실수 3가지
실수 1. 완벽하게 만들려다 시작을 못 한다
처음부터 구글 수준의 시스템을 목표로 잡으면 시작이 어렵습니다. 컬러 Variables 10개와 버튼 컴포넌트 1개로도 오늘 시작할 수 있습니다. 시스템은 쓰면서 키우는 것입니다.
실수 2. 네이밍 없이 컴포넌트를 쌓는다
이름 없이 컴포넌트를 만들면 100개가 넘는 순간 아무것도 찾을 수 없게 됩니다. 네이밍 규칙은 첫 컴포넌트를 만들기 전에 먼저 정해야 합니다.
실수 3. 너무 잘게 쪼갠다
버튼 안의 아이콘까지 별도 컴포넌트로 만들다 보면 구조가 지나치게 복잡해집니다. 처음에는 재사용 빈도가 높은 것만 컴포넌트로 만들고, 나머지는 일반 레이어로 두는 것이 현실적입니다.
6. 지금 당장 시작할 수 있다
오늘 Figma 파일을 열고 컬러 Variables 10개와 버튼 컴포넌트 하나만 만들어 보세요. 그게 당신의 디자인 시스템 첫 번째 버전입니다. 디자인 시스템은 대기업만의 것이 아닙니다. 혼자서도 만들 수 있습니다. 완벽한 시스템보다 작동하는 시스템이 낫습니다. 시작이 곧 시스템의 탄생입니다.
앞으로도 UrbanLedger에서 더 깊이 있는 콘텐츠를 다룰 예정입니다.
앞으로도 UrbanLedger에서 더 깊이 있는 콘텐츠를 다룰 예정입니다.
댓글 없음:
댓글 쓰기