시맨틱 디자인 토큰 아키텍처: 글로벌, 시맨틱 및 구성 요소 토큰
디자인 토큰을 3개 계층으로 구조화하고, 테마와 여러 브랜드를 지원하고, W3C DTCG 형식을 사용하여 웹, iOS 및 Android에 배송하는 방법입니다.
핵심 포인트
대부분의 성숙한 디자인 시스템은 전역(blue-600과 같은 원시 값), 의미(color.action.primary와 같은 목적) 및 구성 요소(button.Background와 같은 특정 용도)라는 세 가지 계층의 토큰을 사용합니다. 구성 요소는 의미 체계 토큰을 참조하고, 의미 체계 토큰은 글로벌 항목을 참조하며, 테마나 브랜드는 의미 체계 레이어만 교환합니다. W3C DTCG 형식으로 저장하고 빌드 도구를 사용하여 플랫폼 코드를 생성합니다.
세 가지 계층
Material Design는 참조, 시스템 및 구성 요소라는 세 가지 토큰 클래스를 설명합니다. 많은 팀에서는 이를 글로벌, 의미론적, 구성요소라고 부릅니다. 이름은 다르지만 아이디어는 동일합니다. 원시 값을 사용 방법에 대한 결정과 분리합니다.
- 전역(참조): blue-600, space-4, 글꼴 크기-16, spring-gentle과 같은 시스템의 모든 원시 값입니다.
- 의미(시스템): color.text.primary, color.action.primary, Motion.enter와 같은 값의 의미입니다.
- 구성요소: 버튼.배경 또는 대화상자.모션.open과 같이 하나의 구성요소가 시스템을 사용하는 방식입니다.
의미론적 토큰이 중요한 이유
버튼이 blue-600을 직접 사용하는 경우 모든 테마 변경은 모든 구성 요소를 편집하는 것을 의미합니다. color.action.primary, 다크 모드, 고대비 또는 새 브랜드를 사용하는 경우 color.action.primary가 가리키는 항목만 변경됩니다. 토큰을 사용하면 정확히 이런 방식으로 고대비 팔레트를 적용하거나 시스템 전체에서 서체 스케일을 변경할 수 있다는 사실이 중요합니다.
테마 및 다양한 브랜드
멀티 브랜드 또는 화이트 라벨 제품의 경우 의미 체계 및 구성 요소 토큰 세트 하나와 브랜드당 하나의 글로벌 팔레트를 유지하세요. 각 테마는 의미론적 토큰에서 전역 값으로의 매핑입니다. 2025년 10월에 출시된 W3C 디자인 토큰 사양(2025.10)의 첫 번째 안정 버전에는 테마 및 멀티 브랜드 지원, 디스플레이 P3 및 OKLCH와 같은 최신 색상 공간, 별칭 및 구성 요소 수준 참조가 추가되었습니다.
모션 토큰도 여기에 속합니다
기간, 완화 곡선 및 스프링은 동일한 계층을 따릅니다. 글로벌 토큰은 강성과 감쇠로 인해 탄력이 있을 수 있습니다. 의미론적 토큰인 Motion.enter가 이를 가리킵니다. 구성 요소 토큰 sheet.motion.open은 Motion.enter를 가리킵니다. 모션 토큰을 짧은 페이드에 다시 매핑하는 모션 감소 테마를 추가합니다.
모든 플랫폼에 토큰 배송
단일 정보 소스인 DTCG JSON로 저장소에 토큰을 보관하세요. Style Dictionary와 같은 빌드 도구는 이를 CSS 변수, Swift, Kotlin, Flutter 또는 기타 형식으로 변환합니다. 동일한 형식을 읽는 디자인 도구는 동기화를 유지할 수 있으며 AI 코딩 도구는 JSON를 직접 읽을 수 있습니다.
- 진실의 출처: Git의 DTCG JSON, 코드처럼 검토됨
- 빌드: 변경될 때마다 각 플랫폼으로 변환
- 디자인 도구 동기화: 가져오기 또는 플러그인, 값을 직접 복사하지 않음
- Linting: 구성 요소의 원시 값을 금지합니다.
기억할 핵심 원칙
- 세 가지 계층: 전역(값), 의미(목적), 구성 요소(사용)
- 구성 요소는 원시 값이 아닌 의미 체계 토큰을 참조합니다.
- 테마와 브랜드가 의미 계층을 다시 매핑합니다.
- W3C DTCG 형식은 2025년 10월에 첫 번째 안정 버전(2025.10)에 도달했습니다.
- 모션 토큰 및 모션 축소 테마 포함
자주 묻는 질문
출처
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C 디자인 토큰 커뮤니티 그룹
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com