디자인 시스템 구축 핵심 원칙 → 규모가 커지는 프로젝트일수록 일관된 디자인 언어가 중요함. 디자인 시스템은 단순한 UI 라이브러리가 아니라 색상, 타이포, 컴포넌트, 간격, 아이콘, 모션 등 브랜드의 시각 언어를 체계화한 구조임.

 

Foundation(기초): 컬러 팔레트, 폰트 스케일, 여백 시스템(4/8pt grid), 그림자·테두리·모서리 규칙

Components(컴포넌트): 버튼, 입력창, 모달, 카드 등 재사용 가능한 UI 요소 정의

Patterns(패턴): 로그인 플로우, 검색, 장바구니, 에러 상태 같은 사용자 시나리오별 조합

Tokens(토큰): 디자인 값을 변수로 관리 — 예: --color-primary, --spacing-md → 개발과의 협업 효율 극대화

Docs(문서화): Figma + Storybook 조합으로 시각적 문서 관리

 

Figma에서 Styles와 Variants를 활용해 “토큰 기반” 관리하면 유지보수성이 급상승

컬러는 명도 대비 비율(Contrast Ratio) WCAG 2.1 기준 AA 이상으로 유지

컴포넌트 이름은 개발자 네이밍 규칙과 통일 (btn-primary, input-text)

문서화된 시스템은 새 디자이너가 합류해도 바로 적용 가능