2nd/10_Wiki/Topics/Frontend_Mastery/Design Tokens.md

Design Tokens

📌 Brief Summary

디자인 토큰(Design Tokens)은 색상, 간격, 타이포그래피, 모션 등과 같은 시각적 디자인 속성을 저장하는 플랫폼 독립적인 명명된 식별자입니다 [1-3]. 이는 확장 가능한 디자인 시스템을 구축하기 위한 원자 단위(Atoms)의 핵심 구성 요소로 작용하여 여러 플랫폼과 환경에서 일관된 시각적 언어를 유지하게 합니다 [1, 4]. 하드코딩된 값을 대체함으로써 전역적인 테마 변경을 용이하게 하며, 디자인과 개발 팀 간의 원활한 협업을 지원하는 '단일 진실 공급원(Single Source of Truth)' 역할을 수행합니다 [3-5].

📖 Core Content

• 디자인 토큰의 3단계 계층 구조 (Token Hierarchy): 효과적이고 확장성 있는 토큰 관리를 위해 유연성과 일관성의 균형을 맞추는 3단계 계층 구조가 사용됩니다.

  • 글로벌 토큰 (Global Tokens / Primitives): 컨텍스트나 사용 의도가 포함되지 않은 원시 값(예: --blue-500: #3b82f6)으로, 디자인 시스템의 기본 팔레트 역할을 합니다 [6-8].
  • 별칭 토큰 (Alias / Semantic Tokens): 글로벌 토큰을 참조하며 특정 의도나 사용 사례를 부여하는 토큰입니다(예: --color-primary: var(--blue-500)). 테마 시스템 구현에 핵심적이며, 이 값을 변경함으로써 애플리케이션 전체의 스타일을 쉽게 바꿀 수 있습니다 [6-8].
  • 컴포넌트 토큰 (Component-specific Tokens): 특정 UI 요소에 맞춰 범위를 지정한 토큰(예: --button-bg-primary: var(--color-primary))으로, 전체 시스템에 영향을 주지 않고 해당 구성 요소의 스타일만을 세밀하게 조정할 수 있게 합니다 [6, 8, 9].

• 카테고리 및 명명 규칙 (Categories and Naming Conventions):

  • 토큰은 기능에 따라 색상, 간격(여백, 패딩), 타이포그래피(글꼴 크기, 두께 등), 크기(너비, 아이콘 크기), 테두리(Border), 그림자, 모션(지속 시간, 이징), Z-index 등의 카테고리로 분류됩니다 [3, 10].
  • CSS 환경에서는 주로 케밥 케이스(kebab-case)를 사용하며, 플랫폼 구현 세부 사항이 아니라 역할과 의미론(Semantic)에 기반한 명명 규칙을 적용하여 코드의 가독성과 예측 가능성을 높입니다 [11].

• 다중 플랫폼 지원과 자동화 파이프라인 (Multi-Platform Automation):

  • 대규모 프로젝트에서는 디자인 토큰을 JSON과 같은 플랫폼 중립적인 데이터 형식으로 저장합니다 [5, 12].
  • Style Dictionary, Theo 등의 도구를 활용해 JSON 파일 하나를 웹의 CSS 변수, iOS용 Swift 코드, Android용 XML 코드 등으로 자동 변환하여 배포할 수 있습니다 [4, 5, 13]. 이 과정을 통해 사람의 수동 오류를 방지하고 제품 생태계 전반에 걸친 완벽한 시각적 동기화를 보장합니다 [4, 5].

• 도구 및 실무 적용 (Tools & Implementation):

  • 실무 워크플로우에서는 Design Tokens Generator 같은 수동 도구나, Figma 등 디자인 툴과 연동되는 반자동 플러그인(Toolabs Design System Manager 등)을 사용해 토큰을 추출 및 관리합니다 [14-17].
  • 관리된 디자인 토큰은 CSS 변수나 SCSS 변수뿐만 아니라 Tailwind CSS의 tailwind.config.js 설정과 결합되어 강력한 유틸리티 클래스와 테마 시스템을 구축하는 데 활용됩니다 [12, 18].

🔗 Knowledge Connections

• Related Topics: [[Design Systems]], [[CSS Variables]], [[Tailwind CSS]]
• Projects/Contexts: [[디자인 시스템 개념]], [[실무에서 CSS 관리하는 방법]]
• Contradictions/Notes: 소스에 따르면 Figma Tokens와 같은 일부 반자동 플러그인 도구는 피그마의 기존 스타일과 완벽히 동기화되지 않거나, 테마 전환 시 디자인 속성이 오염되는 등 치명적인 버그를 가지고 있어 주의가 필요합니다 [19]. 반면 Amazon의 Style Dictionary와 같은 JSON 기반 변환 시스템은 훨씬 신뢰할 수 있는 업계 표준으로 소개됩니다 [5, 13].

---

Last updated: 2026-04-26