feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/Frontend/디자인 시스템의 타이포그래피 토큰 확장 및 최적화.md

@@ -1,10 +1,29 @@
+---
+id: wiki-2026-0508-디자인-시스템의-타이포그래피-토큰-확장-및-최적화
+title: 디자인 시스템의 타이포그래피 토큰 확장 및 최적화
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
+---
+
 # [[디자인 시스템의 타이포그래피 토큰 확장 및 최적화|디자인 시스템의 타이포그래피 토큰 확장 및 최적화]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 디자인 시스템에서 타이포그래피 토큰은 폰트 패밀리, 크기, 굵기, 행간 등 시각적 텍스트 속성을 저장하는 핵심적인 구성 요소입니다 [1, 2]. 타이포그래피 토큰의 확장 및 최적화는 단순히 정적인 크기 목록을 만드는 것을 넘어, CSS의 `clamp()` 함수와 상대 단위를 활용해 기기의 뷰포트나 컨테이너 크기에 맞춰 자연스럽게 크기가 조절되는 유동적 타이포그래피([[Fluid Typography|Fluid Typography]])를 구축하는 과정입니다 [3, 4]. 이를 통해 다양한 디바이스 환경과 사용자의 접근성 요구 사항을 모두 충족하면서도 유지보수하기 쉬운 확장 가능한 프론트엔드 아키텍처를 구현할 수 있습니다 [5-7].
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 *   **타이포그래피 토큰의 계층적 구조화**
     타이포그래피 토큰은 재사용성과 유지보수성을 높이기 위해 3단계 계층 구조로 관리됩니다 [8, 9].
     1.  **전역 토큰(Global Tokens):** `--font-size-sm`, `--font-size-xl`과 같이 컨텍스트가 없는 원시적인 스케일 값을 정의합니다 [2].
@@ -22,10 +41,64 @@
 *   **`pow()` 함수를 통한 수학적 스케일링(Mathematical Scaling)**
     다양한 폰트 크기 간의 관계를 정의하는 '타이포그래피 스케일'을 설계할 때, 최신 CSS 기능인 `pow()` 함수를 사용하면 서드파티 도구나 전처리기 없이도 CSS 내부에서 직접 수학적 비율을 계산하여 타이포그래피 스케일을 생성하고 손쉽게 확장할 수 있습니다 [16-18].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Design Tokens|Design Tokens]], Fluid Typography, CSS clamp(), Web [[Accessibility|Accessibility]] (WCAG)
 - **Projects/Contexts:** [[반응형 디자인|반응형 디자인]], 디자인 시스템 개념, [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 유동적 글꼴 크기를 만들기 위해 뷰포트나 컨테이너 상대 단위(`vw`, `cqi` 등)만을 단독으로 사용하는 것은 화면 크기에 따라 매끄러운 확장을 제공한다는 장점이 있으나, 브라우저 화면 확대(Zoom)를 시도하는 사용자의 의도를 무효화시키는 치명적인 단점이 있습니다. 따라서 사용자 친화적이고 유지보수 가능한 시스템을 위해서는 항상 베이스 픽셀(`rem`, `em`)과 결합한 `calc()` 또는 `clamp()` 구문을 사용해야 한다고 강조합니다 [13, 14, 19].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+
+## 💻 코드 패턴 (Code Patterns)
+
+**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
+
+```text
+# TODO
+```
+
+## 🤔 의사결정 기준 (Decision Criteria)
+
+**선택 A를 써야 할 때:**
+- *(TODO)*
+
+**선택 B를 써야 할 때:**
+- *(TODO)*
+
+**기본값:**
+> *(TODO)*
+
+## ❌ 안티패턴 (Anti-Patterns)
+
+- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*