docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
@@ -1,7 +1,7 @@
# [[디자인 토큰([[Design Tokens]])]]
# [[디자인 토큰 (Design Tokens)|디자인 토큰(Design Tokens]]
## 📌[[ brief]] Summary
디자인 토큰은 색상, 간격, 타이포그래피, 애니메이션 등 디자인 시스템을 구성하는 시각적 속성들을 저장하고 고유한 이름을 부여한 원자 단위의 변수입니다 [1-3]. 단일 진실 공급원([[Single Source of Truth]]) 역할을 하여 전역적인 디자인 변경 및 테마 적용을 용이하게 하고, 디자이너와 개발자 간의 명확한 소통을 돕습니다 [2, 4]. 또한 플랫폼 독립적인 특성을 가져, 동일한 토큰 데이터(JSON 등)를 기반으로 CSS 변수, iOS Swift, Android XML 등 다양한 환경에 맞는 코드로 변환할 수 있습니다 [4, 5].
## 📌 Brief Summary
디자인 토큰은 색상, 간격, 타이포그래피, 애니메이션 등 디자인 시스템을 구성하는 시각적 속성들을 저장하고 고유한 이름을 부여한 원자 단위의 변수입니다 [1-3]. 단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]]) 역할을 하여 전역적인 디자인 변경 및 테마 적용을 용이하게 하고, 디자이너와 개발자 간의 명확한 소통을 돕습니다 [2, 4]. 또한 플랫폼 독립적인 특성을 가져, 동일한 토큰 데이터(JSON 등)를 기반으로 CSS 변수, iOS Swift, Android XML 등 다양한 환경에 맞는 코드로 변환할 수 있습니다 [4, 5].
## 📖 Core Content
* **디자인 토큰 계층 구조 (Token Hierarchy)**
@@ -15,12 +15,12 @@
* 명명 시에는 플랫폼에 종속되지 않은 의미론적(Semantic) 이름을 사용하고, 예측 가능한 범주형 구조(Category-Based Naming)를 따르는 것이 권장됩니다 [12].
* **자동화 및 구현 워크플로우 (Implementation & Workflow)**
* **멀티 플랫폼 변환 파이프라인:** 대규모 프로젝트에서는 [[Figma]]와 같은 디자인 툴에서 토큰을 정의하여 JSON 형식으로 내보낸 후, [[Style Dictionary]] 나 Theo 같은 도구를 활용하여 각 플랫폼에 맞는 코드(웹용 CSS, Android용 XML, iOS용 Swift)로 자동 변환합니다 [4, 13, 14].
* **프론트엔드 연동:** 웹 프론트엔드 환경에서는 생성된 토큰을 CSS 변수(Custom Properties), [[SCSS]] 변수 또는 [[Tailwind CSS]]의 설정 파일(tailwind.config.js)과 통합하여 사용합니다 [13, 15].
* **멀티 플랫폼 변환 파이프라인:** 대규모 프로젝트에서는 [[Figma|Figma]]와 같은 디자인 툴에서 토큰을 정의하여 JSON 형식으로 내보낸 후, [[Style Dictionary|Style Dictionary]] 나 Theo 같은 도구를 활용하여 각 플랫폼에 맞는 코드(웹용 CSS, Android용 XML, iOS용 Swift)로 자동 변환합니다 [4, 13, 14].
* **프론트엔드 연동:** 웹 프론트엔드 환경에서는 생성된 토큰을 CSS 변수(Custom Properties), [[SCSS|SCSS]] 변수 또는 [[Tailwind CSS|Tailwind CSS]]의 설정 파일(tailwind.config.js)과 통합하여 사용합니다 [13, 15].
* 이러한 자동화된 워크플로우는 수동 오류를 제거하고 여러 플랫폼 생태계 전반에 걸쳐 일관된 UI를 유지보수할 수 있게 합니다 [4].
## 🔗 Knowledge Connections
- **Related Topics:** [[디자인 시스템(Design[[ system]]s)]], CSS 변수(CSS Custom Properties), [[SCSS]], [[Tailwind CSS]]
- **Related Topics:** [[디자인 시스템 (Design Systems)|디자인 시스템(DesignSystems]], CSS 변수(CSS Custom Properties), SCSS, [[Tailwind CSS|Tailwind CSS]]
- **Projects/Contexts:** 대규모 프론트엔드 아키텍처 및 다중 플랫폼(웹, 모바일 앱 등) 제품군에서 시각적 일관성을 유지하고 확장성 있는 테마(Theming) 시스템을 구축하는 워크플로우 맥락 [4, 5].
- **Contradictions/Notes:** 수동 작업의 한계를 넘기 위해 Figma Tokens(Tokens Studio) 같은 반자동화 플러그인들이 등장하고 있지만, 아직 디자인 앱과 개발 환경을 완벽히 동기화하는 단일 솔루션은 부족하여 환경에 맞는 적절한 변환 파이프라인 구축(Style Dictionary 등)이 필수적입니다 [16-18].