topic★★★★★난이도 · 약 35분
이론의 토큰화
8px 그리드 · 60:30:10 · 모듈러 스케일을 실제 토큰 시스템으로 변환하는 워크숍.
#토큰화#워크숍#8px#모듈러 스케일
왜 배우는가
이론을 '안다'와 이론을 '시스템으로 구현한다'는 전혀 다른 레벨이다. 이 토픽에서 앞 12챕터의 이론을 실전 토큰으로 착지시킨다.
지금까지 배운 이론을 토큰 시스템으로 변환하는 실습이다. 이론이 코드가 되는 순간, 팀 전체가 동일한 디자인 언어를 사용하게 된다.
| 이론 | 토큰 변환 | 예시 |
|---|---|---|
| 8px 그리드 (Ch.2) | 간격 토큰 | `--spacing-1: 8px`, `--spacing-2: 16px`, ... |
| 60:30:10 배색 (Ch.5) | 색상 토큰 + 사용 가이드 | `--color-surface: 60%`, `--color-ink: 30%`, `--color-accent: 10%` |
| 모듈러 스케일 (Ch.6) | 타이포 토큰 | `--font-xs: 0.75rem`, `--font-sm: 0.875rem`, ... 비율 1.25 |
| 수직 리듬 (Ch.6) | 행간 토큰 | `--leading-tight: 1.25`, `--leading-normal: 1.5` |
| 그림자 계층 (Ch.3) | 엘리베이션 토큰 | `--shadow-sm`, `--shadow-md`, `--shadow-lg` |
60:30:10을 토큰으로 표현하는 법: 색상 토큰 자체에 비율을 넣을 수는 없다. 대신 사용 가이드라인을 문서화한다. 'surface 토큰은 배경에만, ink 토큰은 텍스트·아이콘에, accent 토큰은 CTA 버튼·배지에만 사용'처럼.
실습: 나만의 토큰 파일 만들기 — ① spacing: 8px 기반 8단계 (4/8/12/16/24/32/48/64) ② color: 메인 3색 + 시맨틱 4색 (success/warning/error/info) ③ typography: 모듈러 스케일 비율 선택 (1.125/1.25/1.333 중 하나) ④ radius: 3단계 (sm/md/lg) ⑤ shadow: 3단계 (sm/md/lg).
토큰 시스템의 최종 산출물은 JSON 또는 TypeScript 파일이다. 이 파일 하나를 Figma 플러그인(Tokens Studio)과 코드베이스(Tailwind config)가 동시에 참조하면, 디자이너와 개발자 사이의 '색이 다른데요' 문제가 사라진다.