# [[Design Tokens]]

## 📌[[ brief]] Summary
디자인 토큰(Design Tokens)은 색상, 서체, 간격, 그림자, 모션 등 사용자 인터페이스의 시각적 DNA를 구성하는 원자 단위의 데이터 포인트입니다 [1-3]. 이 데이터는 JSON이나 YAML과 같은 기계 판독 가능한 형식으로 저장되어 디자인 도구와 코드를 자동으로 연결하는 단일 진실 공급원([[Single Source of Truth]]) 역할을 합니다 [1, 4, 5]. 디자인 토큰은 하드코딩된 값을 대체함으로써 UI 구성 요소의 일관성을 유지하고, 다크 모드와 같은 동적 테마를 효율적으로 전환하며, React 프로젝트에서 확장 가능한 디자인 시스템을 구축하는 데 핵심적인 역할을 수행합니다 [6-8].

## 📖 Core Content
*   **디자인 토큰의 3계층 구조:** 확장 가능하고 안전한 시스템을 구축하기 위해 디자인 토큰은 3단계 계층으로 구성됩니다 [9-11].
    *   **원시/기본 토큰 (Primitive/Base Tokens):** `#3366FF`나 `16px`과 같은 구체적이고 원시적인 값으로, 시맨틱(의미론적)인 목적을 갖지 않는 디자인 시스템의 기본 구성 요소입니다 [10, 12-14].
    *   **시맨틱/앨리어스 토큰 (Semantic/Alias Tokens):** 원시 토큰을 참조하여 디자인의 '의도'와 역할을 명시합니다 (예: `color.primary = color.blue.500`) [10, 12-14]. 안전한 리팩토링과 테마 전환을 가능하게 하는 가장 중요한 계층입니다 [10, 12].
    *   **컴포넌트 토큰 (Component Tokens):** 특정 컴포넌트와 그 변형에 직접적으로 연결된 토큰입니다 (예: `button.background = color.primary`) [10-14].
*   **동적 테마 및 도구 통합:** 디자인 토큰을 활용하면 별도의 테마 토큰 세트(예: Light/Dark 모드)를 정의하여 **동적 테마([[Dynamic Theming]])**를 쉽게 구현할 수 있습니다 [15, 16]. [[Style Dictionary]]와 같은 도구를 사용하면 JSON에 정의된 토큰을 CSS Custom Properties(CSS 변수)나 iOS, Android, React용 포맷으로 자동 변환하여 코드 베이스에 즉시 주입할 수 있습니다 [17-20].
*   **[[Tailwind CSS v4]]와의 시너지:** [[Tailwind CSS]] v4는 구성 방식에 있어 [[JavaScript]] 파일 대신 CSS 우선(CSS-first) 구조를 도입하여 토큰 관리에 패러다임 전환을 가져왔습니다 [21-23]. `@theme` 디렉티브 내에서 디자인 토큰을 기본 CSS 변수로 정의하면, Tailwind가 이에 대응하는 유틸리티 클래스를 자동으로 생성합니다(예: `--color-primary-500` 선언 시 `bg-primary-500` 사용 가능) [21-24]. 이를 통해 CSS 변수를 네이티브하게 활용할 수 있고, JS 오버헤드 없이 강력한 런타임 테마 기능을 제공합니다 [23, 25, 26].
*   **협업 효율성 및 확장성:** 디자인 토큰은 디자이너와 프론트엔드 개발자 간에 공통된 언어를 형성하여 중복된 스타일링을 방지하고 코드의 유지보수 비용을 낮춥니다 [8, 27-29]. 중앙 집중식 토큰 관리를 통해 CI/CD 파이프라인에서 토큰의 배포를 자동화하면 대규모 React 애플리케이션에서도 시각적 일관성을 깨뜨리지 않고 스타일을 안정적으로 진화시킬 수 있습니다 [30-33].

## 🔗 Knowledge Connections
- **Related Topics:** `[[CSS Variables]]`, `[[Tailwind CSS v4]]`, `[[Style Dictionary]]`, `[[Dynamic Theming]]`
- **Projects/Contexts:** `[[Figma Tokens Studio]]`, `[[React Component Architecture]]`, `[[Uber Base Web Design System]]`
- **Contradictions/Notes:** 소스의 권장 사항에 따르면, 개발 시 컴포넌트에 원시 토큰(Primitive Tokens)이나 임의의 값을 직접 하드코딩하는 것은 시스템의 확장성을 파괴하는 주된 원인이 됩니다 [34, 35]. 따라서 스타일의 일관성을 유지하고 유연한 테마를 지원하기 위해서는 반드시 시맨틱 토큰(Semantic Tokens)을 거쳐 컴포넌트에 적용해야 합니다 [10, 34, 36].

---
*Last updated: 2026-04-26*