Ch.14 디자인 토큰과 시스템
이론의 토큰화
이론이 시스템이 되면 실수가 구조적으로 불가능해집니다
접근성 가이드라인을 읽고 '명암비 4.5:1 이상'을 기억합니다. 하지만 바쁜 프로젝트에서 매번 계산기를 돌리기는 힘들고, 팀원 누군가는 잊어버립니다. 규칙을 아는 것과 지키는 것 사이에 간극이 있습니다.
이론과 원칙을 '알고 있는 것'만으로는 왜 충분하지 않을까?
이론을 토큰과 제약 조건으로 변환하면, 올바른 선택이 기본값이 됩니다 — 지식이 시스템이 되는 순간, 실수는 구조적으로 불가능해집니다.
핵심 내용
8px 그리드가 토큰이 되면
8px 그리드 시스템은 모든 간격과 크기를 8의 배수로 정의하는 규칙입니다. 이것을 토큰화하면 `spacing.xs = 4px`, `spacing.sm = 8px`, `spacing.md = 16px`, `spacing.lg = 32px`이 됩니다. 개발자는 '16px'이 아니라 `spacing.md`를 쓰므로, 8px 그리드를 벗어날 수가 없습니다.
모듈러 스케일(Modular Scale)은 특정 비율(주로 1.25 또는 1.333)을 기준으로 폰트 크기를 단계적으로 정의하는 방법입니다. 토큰화하면 `fontSize.sm = 14px`, `fontSize.md = 16px`, `fontSize.lg = 20px`, `fontSize.xl = 25px`이 됩니다.
모듈러 스케일 1.25 비율: 12 → 14 → 16 → 20 → 25 → 31px — 조화로운 크기 체계
토큰화의 핵심: '16px'이라는 숫자가 아니라 'spacing.md'라는 이름을 사용합니다. 이름을 쓰는 순간, 시스템 외부의 값을 쓰려면 의도적으로 규칙을 깨야 합니다.
60:30:10 법칙이 토큰이 되면
60:30:10 색상 법칙은 주 색상 60%, 보조 색상 30%, 강조 색상 10%로 배분하는 원칙입니다. 토큰화하면 `color.surface`(60%), `color.secondary`(30%), `color.accent`(10%)이라는 역할 기반 토큰이 됩니다.
핵심 통찰: Theory becomes System • Fitts's Law를 알고 있어도 45px 버튼과 38px 버튼이 섞입니다 • WCAG를 외워도 바쁜 날에는 명암비 계산을 건너뜁니다 • 하지만 `touchTarget.min = 44px`이 시스템 제약이면, 38px 버튼은 만들 수 없습니다 이론이 시스템이 되면, 실수가 구조적으로 불가능해집니다.
아는 것과 지키는 것 그 간극을 시스템이 메웁니다
Fitts's Law를 디자인 시스템에 토큰화하면 어떤 제약이 되는가?
60:30:10 색상 법칙에서 10%에 해당하는 토큰은 color.accent이다
디자인 이론을 토큰화하면, 팀원이 이론을 모르더라도 올바른 디자인이 보장된다
핵심 용어
4px → spacing.xs
아이콘-텍스트 간격, 인라인 여백
8px → spacing.sm
리스트 아이템 간, 폼 요소 간격
16px → spacing.md
카드 패딩, 섹션 내부 간격
24px → spacing.lg
섹션 간 구분, 주요 블록 여백
32px → spacing.xl
페이지 레벨 구분, 대형 여백
Fitts's Law → touchTarget: 44px
터치 대상 최소 크기. 44×44px 미만의 버튼은 시스템이 경고
Miller's Law → maxNavItems: 7
네비게이션 항목 최대 7±2개. 그 이상은 그룹화 필수
WCAG 2.1 → contrast: 4.5:1
텍스트 명암비 최소 4.5:1. 색상 토큰 조합을 사전 검증
비교 정리
| 항목 | 시스템으로 구현 | 지식으로만 보유 |
|---|---|---|
| 8px 그리드 | spacing 토큰만 사용 가능 → 13px, 17px은 시스템에 없음 | '8의 배수로 하자'고 약속했지만 padding: 15px이 등장 |
| 명암비 | color.text + color.surface 조합이 4.5:1 미만이면 린트 에러 | WCAG를 알지만, 시간에 쫓겨 검사를 건너뜀 |
| 터치 영역 | touchTarget.min = 44px → 컴포넌트 최소 크기가 강제됨 | Fitts 법칙을 배웠지만 32px 아이콘 버튼이 배포됨 |
| 결과 | 올바른 선택이 기본값 → 실수가 구조적으로 불가능 | 올바른 선택이 의지에 의존 → 실수가 확률적으로 발생 |
이론 × 토큰 = 시스템. 시스템은 규칙을 기억할 필요 없이 올바른 결과를 보장한다.
핵심 정리
- 18px 그리드 → spacing 토큰 (xs:4, sm:8, md:16, lg:24, xl:32)
- 2모듈러 스케일 → fontSize 토큰 (비율 1.25로 조화로운 크기 체계)
- 360:30:10 법칙 → color.surface(60%) + color.secondary(30%) + color.accent(10%)
- 4Fitts's Law → touchTarget.min: 44px (터치 영역 최소 크기)
- 5Miller's Law → maxNavItems: 7 (인지 부하 한계)
- 6WCAG 2.1 → contrast: 4.5:1 (접근성 명암비)
- 7이론이 시스템이 되면 = 실수가 구조적으로 불가능해진다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작