중소기업에서 처음으로 디자인 시스템을 구축하면서 배운 것들을 공유합니다.
왜 디자인 시스템이 필요했나
우리 회사 상황:
- 서비스: B2B SaaS (프로젝트 관리 툴)
- 디자이너: 2명
- 개발자: 5명
- 문제: 같은 버튼이 페이지마다 다르게 생김, 색상 코드 중구난방
기존 문제점:
- 디자이너마다 다른 스타일 가이드
- 개발자가 임의로 색상/여백 조정
- 신규 기능 추가 시 일관성 깨짐
- 유지보수 비용 증가 (같은 컴포넌트를 매번 새로 만듦)
디자인 시스템 구축 프로젝트 시작
1단계: 현황 조사 (1주)
- 전체 화면 200개 수집
- 사용 중인 색상: 47개 (실제 필요한 건 10개)
- 버튼 스타일: 12종 (통일 가능)
- 폰트 사이즈: 18종 (8종으로 축소 가능)
2단계: 디자인 토큰 정의 (2주)
색상 체계:
- Primary: #1B3A5C (메인 브랜드)
- Secondary: #4BACC6 (보조 액센트)
- Gray Scale: 50/100/200/300/400/500/600/700/800/900
- Semantic Colors: Success/Warning/Error/Info
타이포그래피:
- Heading 1~6 (32px ~ 16px)
- Body: Regular 14px / Small 12px
- Line Height: 1.5 (본문) / 1.2 (제목)
간격 (Spacing):
- 4px 단위 체계 (4, 8, 12, 16, 24, 32, 48, 64)
3단계: Figma Tokens Studio 도입
Figma 플러그인으로, 디자인 토큰을 JSON 형식으로 관리하고 개발 코드와 동기화할 수 있습니다.
설치 및 설정:
- Figma 플러그인 → "Tokens Studio" 설치
- GitHub 연동 (토큰 JSON 파일 버전 관리)
- 토큰 세트 생성 (Global / Semantic / Dark Mode)
4단계: 컴포넌트 라이브러리 구축 (4주)
- Atoms: Button, Input, Badge, Icon
- Molecules: Form Field, Card, Modal, Dropdown
- Organisms: Navigation Bar, Table, Form, Dashboard Widget
5단계: 개발팀 협업
Style Dictionary로 Figma 토큰을 CSS/TypeScript 코드로 자동 변환:
개발팀 반응:
✅ 색상/여백 코드 복사 안 해도 됨
✅ 다크 모드 전환 쉬움
❌ 초기 학습 곡선 (개발자도 Figma 이해 필요)
❌ 기존 코드 마이그레이션 시간 소요 (3주)
성과 측정 (6개월 후)
- 신규 화면 디자인 시간: 3일 → 1일 (66% 단축)
- 개발 시간: 5일 → 3일 (40% 단축)
- 디자인 QA 이슈: 월 15건 → 3건 (80% 감소)
실패와 교훈
- 처음부터 완벽하게 만들려다 3개월 기획만 함
- 디자이너끼리만 만들어서 개발 적용 안 됨
- 과도한 추상화로 오히려 복잡해짐
현실적인 조언
디자인 시스템은 "완성"이 없습니다. 처음부터 100% 완벽하게 만들려 하지 말고, 가장 많이 쓰는 컴포넌트 5개부터 시작하세요.
여러분 회사는 디자인 시스템을 운영하고 계신가요? 경험담을 공유해주세요!