WEBBOOK CHAPTER

AI 웹 디자인 디렉팅: 17장 design token을 AI와 code 사이의 공통 언어로 쓴다

17장 design token을 AI와 code 사이의 공통 언어로 쓴다

2025년 10월 Design Tokens Community Group은 첫 stable community report를 공개했다. 이는 W3C Standard가 아니라 Community Group report라는 지위도 함께 이해해야 한다. 핵심 가치는 tool 간에 color·dimension·typography 같은 의미를 교환할 구조다.

작은 서비스에서 token을 수백 개 만들지 않는다. primitive와 semantic을 분리한다.


{
  "color": {
    "clay-600": { "$type": "color", "$value": "#a64f32" },
    "olive-800": { "$type": "color", "$value": "#3f4938" },
    "action-primary": { "$type": "color", "$value": "{color.olive-800}" },
    "content-accent": { "$type": "color", "$value": "{color.clay-600}" }
  }
}

AI에는 hex 목록보다 역할을 준다. clay는 editorial accent, olive는 actionable control이다. 새 component가 임의 purple을 추가하면 token 검사와 review에서 잡는다. 모든 차이를 token으로 만들면 규칙이 아니라 예외 사전이 되므로 실제 반복에서만 추가한다.