topic★★★★★난이도 · 약 25분
디자인 토큰의 개념
색상 · 간격 · 폰트 크기를 변수화 — CSS Variables, Tailwind config와 연결.
#디자인 토큰#CSS Variables#Tailwind
왜 배우는가
하드코딩된 '#3B82F6'를 100곳에서 쓰다가 브랜드 색이 바뀌면? 토큰 하나만 바꾸면 전체가 바뀐다. 이것이 시스템의 힘이다.
디자인 토큰(Design Token)은 색상, 간격, 폰트 크기, 그림자 등 디자인 속성을 이름이 있는 변수로 추상화한 것이다. 2014년 Salesforce의 디자인 시스템 Lightning에서 처음 제안되었다.
| 토큰 계층 | 설명 | 예시 |
|---|---|---|
| Global (전역) | 원시 값, 의미 없는 이름 | `blue-500: #3B82F6` |
| Alias (별칭) | 의미를 부여한 참조 | `color-primary: {blue-500}` |
| Component (컴포넌트) | 특정 컴포넌트 전용 | `button-bg: {color-primary}` |
3계층 토큰의 핵심: Global → Alias → Component 순서로 참조 체인이 형성된다. 브랜드 리뉴얼 시 Global 토큰 하나만 바꾸면 Alias와 Component가 자동으로 전파된다.
CSS Custom Properties로 토큰 구현 — `--color-primary: #3B82F6;`로 선언하고 `color: var(--color-primary);`로 사용. Tailwind CSS에서는 `tailwind.config.ts`의 `theme.extend.colors`에 토큰을 등록하면 `bg-primary`, `text-primary` 클래스가 생성된다.
토큰의 네이밍 컨벤션이 시스템의 수명을 결정한다. `red-button`보다 `color-danger`가 좋다. 색이 빨간색에서 주황색으로 바뀌어도 의미(위험)는 변하지 않기 때문이다. 좋은 토큰 이름은 시각 속성이 아닌 역할을 표현한다.