AI-readable design systems and three token layers
Four AI-first principles and primitive, semantic, and component layers
디자인 시스템의 패러다임이 바뀌었습니다. 과거에는 사람 개발자가 문서를 읽고 컴포넌트를 조합했다면, 이제는 AI 에이전트가 시스템을 해석하고 코드를 생성합니다. AI에게 “당연히 알겠지”는 통하지 않으므로 모든 규칙을 명시적·구조화된 데이터로 표현해야 합니다.
기존 디자인 시스템의 한계
| 문제 | 원인 | AI-First 해결책 |
|---|---|---|
| 문서와 코드 불일치 | 수동 동기화 | 단일 소스 of Truth |
| 암묵적 규칙 | 구두 전달, 경험 의존 | 명시적 스키마화 |
| 컨텍스트 전환 비용 | 분산된 정보 | 구조화된 컨텍스트 주입 |
| 일관성 편차 | 개인 해석 차이 | 기계적 검증 |
토큰 3계층 구조
디자인 토큰은 디자인 시스템의 원자적 단위입니다. AI가 의도를 읽어내려면 세 계층으로 나누고, 컴포넌트가 Primitive를 직접 참조하지 못하게 막아야 합니다.
| 계층 | 역할 | 예시 | AI 활용 |
|---|---|---|---|
| Primitive | 브랜드 독립적 원시값 | colors.blue.500 = #3B82F6 | 팔레트 범위 파악 |
| Semantic | 의도와 용도 표현 | colors.primary | 맥락에 맞는 선택 |
| Component | 특정 컴포넌트 전용 | button.background | 일관된 스타일 적용 |
AI 친화적 네이밍
AI가 골라 쓰게 하는 토큰 문서화
AI가 토큰을 제대로 골라 쓰게 하려면 용도와 제약을 명시해야 합니다. $description(용도), $usage(사용처), $constraints(예: WCAG AA 대비 4.5), $avoid(사용 금지 케이스)를 함께 적으면 AI가 규칙을 지켜 선택합니다.
2025.10W3C DTCG 1.0최초 안정판 출시
30~50%디자인/개발 시간잘 구조화된 토큰 시스템의 절감 효과
10개+DTCG 네이티브 지원Style Dictionary v5, Tokens Studio, Figma 등