feat: batch wikification of Skybound balance pass and scalable frontend architectures

Processed 80+ files including Skybound playtest feedback, Monorepo strategies, and Modern Component Patterns.

10_Wiki/Topics/Frontend_Mastery/Design Tokens.md

@@ -1,31 +1,21 @@
 # [[Design Tokens]]
 
 ## 📌 Brief Summary
-디자인 토큰(Design Tokens)은 색상, 간격, 타이포그래피, 모션 등과 같은 시각적 디자인 속성을 저장하는 플랫폼 독립적인 명명된 식별자입니다 [1-3]. 이는 확장 가능한 디자인 시스템을 구축하기 위한 원자 단위(Atoms)의 핵심 구성 요소로 작용하여 여러 플랫폼과 환경에서 일관된 시각적 언어를 유지하게 합니다 [1, 4]. 하드코딩된 값을 대체함으로써 전역적인 테마 변경을 용이하게 하며, 디자인과 개발 팀 간의 원활한 협업을 지원하는 '단일 진실 공급원(Single Source of Truth)' 역할을 수행합니다 [3-5].
+디자인 토큰(Design Tokens)은 색상, 서체, 간격, 그림자, 모션 등 사용자 인터페이스의 시각적 DNA를 구성하는 원자 단위의 데이터 포인트입니다 [1-3]. 이 데이터는 JSON이나 YAML과 같은 기계 판독 가능한 형식으로 저장되어 디자인 도구와 코드를 자동으로 연결하는 단일 진실 공급원(Single source of truth) 역할을 합니다 [1, 4, 5]. 디자인 토큰은 하드코딩된 값을 대체함으로써 UI 구성 요소의 일관성을 유지하고, 다크 모드와 같은 동적 테마를 효율적으로 전환하며, React 프로젝트에서 확장 가능한 디자인 시스템을 구축하는 데 핵심적인 역할을 수행합니다 [6-8].
 
 ## 📖 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].
+*   **디자인 토큰의 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:** `[[Design Systems]]`, `[[CSS Variables]]`, `[[Tailwind CSS]]`
-- **Projects/Contexts:** `[[디자인 시스템 개념]]`, `[[실무에서 CSS 관리하는 방법]]`
-- **Contradictions/Notes:** 소스에 따르면 Figma Tokens와 같은 일부 반자동 플러그인 도구는 피그마의 기존 스타일과 완벽히 동기화되지 않거나, 테마 전환 시 디자인 속성이 오염되는 등 치명적인 버그를 가지고 있어 주의가 필요합니다 [19]. 반면 Amazon의 Style Dictionary와 같은 JSON 기반 변환 시스템은 훨씬 신뢰할 수 있는 업계 표준으로 소개됩니다 [5, 13].
+- **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*