Antigravity Agent
4.0 KiB
디자인 토큰 (Design Tokens)
📌 Brief Summary
디자인 토큰(Design Tokens)은 색상, 간격, 타이포그래피와 같은 시각적 디자인 속성을 저장하는 이름이 지정된 플랫폼 독립적인 기본 구성 요소입니다 [1-3]. 디자인 시스템 내에서 하나의 진실의 원천(Single_Source_of_Truth)으로 기능하며, 이를 통해 CSS 변수, iOS Swift, Android XML 등 다양한 플랫폼과 언어에 맞게 코드를 자동 생성할 수 있습니다 [2, 4, 5]. 결과적으로 디자인과 엔지니어링 팀 간의 공통 언어를 형성하고, 확장 가능하며 일관성 있는 UI 유지보수를 가능하게 합니다 [1, 6].
📖 Core Content
디자인 토큰의 역할과 이점 디자인 토큰은 애플리케이션 전반에 걸친 일관성을 보장하고 디자인 업데이트나 리브랜딩 과정을 대폭 간소화합니다 [1]. 특정 색상이나 픽셀 값을 하드코딩하는 대신 토큰을 참조함으로써, 다크 모드와 같은 테마 변경이나 다중 플랫폼 확장을 유연하게 처리할 수 있습니다 [7].
디자인 토큰의 3단계 계층 구조 (Token Hierarchy) 확장성과 유지보수성을 극대화하기 위해 디자인 토큰은 일반적으로 3단계로 구조화됩니다 [8, 9].
- 1단계: 글로벌 토큰 (Global Tokens / Primitives): 문맥이 포함되지 않은 원시 형태의 색상이나 크기 값입니다. 디자인 시스템의 근본적인 팔레트를 나타냅니다 (예:
--blue-500: #3b82f6) [8-10]. - 2단계: 별칭/시맨틱 토큰 (Alias / Semantic Tokens): 글로벌 토큰을 참조하며 특정 사용 사례와 의도(문맥)를 설명합니다 (예:
--color-primary: var(--blue-500),--color-text-error: var(--red-600)) [8-10]. - 3단계: 컴포넌트 토큰 (Component Tokens): 특정 UI 컴포넌트에 종속되어 별칭 토큰을 참조합니다. 이를 통해 다른 시스템에 영향을 주지 않고 개별 컴포넌트를 미세 조정할 수 있습니다 (예:
--button-bg-primary: var(--color-primary)) [8, 9, 11].
플랫폼 간 자동화 및 워크플로우 대규모 프로젝트에서 디자인 토큰은 보통 JSON과 같은 중립적인 형식으로 저장됩니다 [5, 12]. 이후 Style Dictionary나 Theo와 같은 변환 도구(Transformation tool)를 사용하여 이 JSON 데이터를 웹용 CSS 변수, Android용 XML, iOS용 Swift 코드 등으로 자동 컴파일합니다 [4, 5]. 이 과정을 통해 수동으로 값을 옮겨 적을 때 발생하는 오류를 제거하고 여러 플랫폼에 걸쳐 완벽한 시각적 일관성을 유지합니다 [4, 5].
명명 규칙 및 구조화 (Naming Conventions)
색상, 간격, 타이포그래피, 테두리, 그림자 등 목적에 따라 토큰을 분류합니다 [13]. 명명 시 Category / Type / Item (CTI) 구조를 사용하여 모호함 없이 명확한 의미를 부여하는 것이 권장됩니다 (예: color.background.button.error) [14-16].
🔗 Knowledge Connections
- Related Topics: 디자인 시스템 (Design Systems), CSS 변수 (CSS Variables), Style Dictionary
- Projects/Contexts: 다중 플랫폼 확장 및 테마 구현 (Multi-Platform Scaling & Theming), 확장 가능한 프론트엔드 아키텍처 구축 (Scalable Frontend Architecture)
- Contradictions/Notes: 많은 개발자와 디자이너가 토큰 자동화 도구의 이점을 누리고 있으나, Figma와 같은 디자인 애플리케이션 자체에서 디자인 토큰 관리를 완벽하게 지원하지 않는 경우가 많아 타사 플러그인(예: Figma Tokens, Toolabs)에 의존해야 합니다. 이 과정에서 스타일 동기화 버그 등 일부 도구적 한계와 환경 설정의 복잡성이 발생할 수 있다는 점에 유의해야 합니다 [17-19].
Last updated: 2026-04-26