Ch.14 디자인 토큰과 시스템
디자인 토큰의 개념
blue-500은 색상이 아니라 약속입니다
디자이너가 '이 버튼 파란색으로 해주세요'라고 합니다. 개발자 A는 #3B82F6을, 개발자 B는 #2563EB를 씁니다. 같은 '파란색'인데 앱 전체에 12가지 파란색이 생겼습니다.
수백 개의 컴포넌트에서 일관된 스타일을 어떻게 보장할 수 있을까?
답은 값(value)이 아닌 이름(token)으로 소통하는 것 — 디자인 토큰은 디자인과 코드를 연결하는 단일 진실 공급원(Single Source of Truth)입니다.
핵심 내용
값에 이름을 붙이면 시스템이 됩니다
디자인 토큰(Design Token)이란 색상, 간격, 폰트 크기 등 시각적 속성을 이름-값 쌍으로 저장한 것입니다. CSS 변수, JSON, 또는 코드 상수로 관리되며, 디자인 도구와 코드가 동일한 값을 참조합니다.
디자인 토큰 = 시각적 속성의 이름-값 쌍 → 디자인과 코드의 단일 진실 공급원
토큰의 2계층 구조
Primitive 토큰은 구체적인 값 자체에 이름을 붙인 것입니다. `blue-500`, `gray-100`, `spacing-16`처럼 값을 직접 설명합니다. Semantic 토큰은 Primitive 토큰에 역할과 맥락을 부여합니다. `color.primary`, `color.error`, `spacing.md`처럼 '어디에 쓰이는가'를 이름에 담습니다.
Semantic 토큰 덕분에 다크 모드 전환이 가능합니다. color.primary = blue-500(라이트) → color.primary = blue-300(다크). 컴포넌트 코드는 변경 없이 테마만 교체합니다.
#3B82F6이 아닌 color.primary로 대화합니다
색상 토큰은 Primitive(blue-500) → Semantic(color.primary) → Component(button.bg)로 3계층 구조를 가질 수 있습니다. 간격 토큰은 보통 4px 배수 체계(4px grid)를 사용하여 4, 8, 12, 16, 24, 32, 48, 64px로 구성합니다.
왜 raw value를 직접 쓰면 안 될까?
다음 중 Semantic 토큰에 해당하는 것은?
디자인 토큰을 사용하면 다크 모드 전환 시 각 컴포넌트를 개별 수정해야 한다
핵심 용어
blue-500 → color.primary
브랜드 주 색상. 버튼, 링크, 활성 상태에 사용
red-500 → color.error
오류 메시지, 유효성 검사 실패 표시
green-500 → color.success
성공 알림, 완료 상태 표시
gray-100 → color.surface
카드, 패널 등 배경 표면 색상
4px → spacing.xs
아이콘과 텍스트 사이 최소 간격
8px → spacing.sm
인접 요소 간 기본 간격
16px → spacing.md
카드 내부 패딩, 섹션 간 간격
32px → spacing.lg
섹션 구분, 레이아웃 주요 간격
비교 정리
| 항목 | 토큰 기반 시스템 | 하드코딩 값 |
|---|---|---|
| 일관성 | color.primary 하나만 변경하면 전체 앱이 동기화 | 200개 파일에서 #3B82F6을 일일이 찾아 교체 |
| 테마 전환 | Semantic 토큰 매핑만 교체 → 다크 모드 즉시 적용 | 모든 컴포넌트에 조건문 추가 필요 |
| 소통 | 디자이너: 'primary 색상 변경' → 개발자: 토큰 값만 수정 | 디자이너: '이 파란색 좀 바꿔주세요' → 어떤 파란색? |
| 확장성 | 새 플랫폼(iOS, Android, Web) 추가 시 토큰 변환만 필요 | 플랫폼마다 값을 수동 복사·관리 |
토큰 = 단일 진실 공급원(Single Source of Truth). 변경은 한 곳에서, 적용은 모든 곳에서.
핵심 정리
- 1디자인 토큰 = 시각적 속성의 이름-값 쌍 (Single Source of Truth)
- 2Primitive 토큰: 원시값 정의 (blue-500 = #3B82F6)
- 3Semantic 토큰: 역할 부여 (color.primary = blue-500)
- 4토큰 기반 시스템은 일관성·테마 전환·소통·확장성 모두 우월
- 5색상 3계층: Primitive → Semantic → Component
- 6간격은 4px 배수 체계(4, 8, 16, 32…)가 표준
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작