브랜드 컬러를 하나 정하는 것과 컬러 시스템을 구축하는 것은 완전히 다릅니다. 잘 설계된 컬러 시스템은 디자이너와 개발자가 어떤 화면에서도 일관된 시각 언어를 사용할 수 있게 하는 기반입니다. Smashing Magazine과 실무 UI 키트 분석을 바탕으로 컬러 시스템 구축의 핵심 구조를 정리합니다.
컬러 시스템의 3단계 구조
잘 설계된 컬러 시스템은 일반적으로 세 가지 레이어로 구성됩니다.
- Global Colors (원색 팔레트): 브랜드 컬러를 기반으로 50~900 단계의 명도 스케일을 만든 전체 팔레트입니다. 피그마의 Variables나 Tailwind의 color scale 방식이 여기에 해당합니다. 예: Blue-100, Blue-500, Blue-900
- Alias Colors (역할별 컬러): Global Colors에서 특정 역할을 지정한 레이어입니다. Primary, Secondary, Neutral, Danger, Warning, Success 등으로 나뉩니다. "Primary Button은 Blue-500을 사용한다"처럼 Global Color에 이름표를 붙이는 과정입니다.
- Semantic Colors (의미적 컬러): 실제 UI 컴포넌트에서 사용되는 가장 구체적인 토큰입니다. Button-background-primary, Text-color-disabled, Border-color-error처럼 컴포넌트와 상태까지 지정됩니다. 다크 모드 전환 시 이 레이어만 바꾸면 전체 UI가 자동으로 변환됩니다.
다크 모드 대응 컬러 시스템
Semantic Color 레이어를 잘 구성하면 다크 모드 전환이 자동화됩니다. 예를 들어 Surface-background라는 토큰이 라이트 모드에서는 White (#FFFFFF), 다크 모드에서는 Dark Gray (#1A1A1A)로 매핑되면, 컴포넌트는 토큰 이름만 참조하고 값은 모드에 따라 자동 변환됩니다.
피그마 Variables 기능의 Mode 기능이 정확히 이 역할을 합니다. 라이트 모드와 다크 모드 두 개의 Mode를 만들고 각 토큰의 값을 모드별로 설정하면, 디자인 파일에서 클릭 한 번으로 전체 화면의 모드를 전환할 수 있습니다.
접근성 기준 — 명도 대비
컬러 시스템을 설계할 때 WCAG 2.1 기준의 명도 대비(Contrast Ratio)를 반드시 고려해야 합니다. 일반 텍스트는 배경과 최소 4.5:1, 큰 텍스트(18pt 이상)는 3:1 이상의 대비가 필요합니다. 피그마 플러그인 'Contrast'나 웹 도구 'WebAIM Contrast Checker'로 손쉽게 검증할 수 있습니다.