[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/디자인 토큰 (Design Tokens).md

@@ -1,7 +1,7 @@
-# [[디자인 토큰 (Design Tokens)]]
+# [[디자인 토큰 ([[Design Tokens]])]]
 
-## 📌 Brief Summary
-디자인 토큰(Design Tokens)은 색상, 간격, 타이포그래피와 같은 시각적 디자인 속성을 저장하는 이름이 지정된 플랫폼 독립적인 기본 구성 요소입니다 [1-3]. 디자인 시스템 내에서 하나의 진실의 원천(Single Source of Truth)으로 기능하며, 이를 통해 CSS 변수, iOS Swift, Android XML 등 다양한 플랫폼과 언어에 맞게 코드를 자동 생성할 수 있습니다 [2, 4, 5]. 결과적으로 디자인과 엔지니어링 팀 간의 공통 언어를 형성하고, 확장 가능하며 일관성 있는 UI 유지보수를 가능하게 합니다 [1, 6].
+## 📌[[ brief]] Summary
+디자인 토큰(Design Tokens)은 색상, 간격, 타이포그래피와 같은 시각적 디자인 속성을 저장하는 이름이 지정된 플랫폼 독립적인 기본 구성 요소입니다 [1-3]. 디자인 시스템 내에서 하나의 진실의 원천([[Single Source of Truth]])으로 기능하며, 이를 통해 CSS 변수, iOS Swift, Android XML 등 다양한 플랫폼과 언어에 맞게 코드를 자동 생성할 수 있습니다 [2, 4, 5]. 결과적으로 디자인과 엔지니어링 팀 간의 공통 언어를 형성하고, 확장 가능하며 일관성 있는 UI 유지보수를 가능하게 합니다 [1, 6].
 
 ## 📖 Core Content
 **디자인 토큰의 역할과 이점**
@@ -14,15 +14,15 @@
 *   **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].
+대규모 프로젝트에서 디자인 토큰은 보통 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].
+- **Related Topics:** [[디자인 시스템 (Design[[ system]]s)]], 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*