[G1-Sync] Manual knowledge update

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

@@ -1,7 +1,7 @@
 # [[디자인 시스템의 타이포그래피 토큰 확장 및 최적화]]
 
-## 📌 Brief 시 Summary
-디자인 시스템에서 타이포그래피 토큰은 폰트 패밀리, 크기, 굵기, 행간 등 시각적 텍스트 속성을 저장하는 핵심적인 구성 요소입니다 [1, 2]. 타이포그래피 토큰의 확장 및 최적화는 단순히 정적인 크기 목록을 만드는 것을 넘어, CSS의 `clamp()` 함수와 상대 단위를 활용해 기기의 뷰포트나 컨테이너 크기에 맞춰 자연스럽게 크기가 조절되는 유동적 타이포그래피(Fluid Typography)를 구축하는 과정입니다 [3, 4]. 이를 통해 다양한 디바이스 환경과 사용자의 접근성 요구 사항을 모두 충족하면서도 유지보수하기 쉬운 확장 가능한 프론트엔드 아키텍처를 구현할 수 있습니다 [5-7].
+## 📌[[ brief]] 시 Summary
+디자인 시스템에서 타이포그래피 토큰은 폰트 패밀리, 크기, 굵기, 행간 등 시각적 텍스트 속성을 저장하는 핵심적인 구성 요소입니다 [1, 2]. 타이포그래피 토큰의 확장 및 최적화는 단순히 정적인 크기 목록을 만드는 것을 넘어, CSS의 `clamp()` 함수와 상대 단위를 활용해 기기의 뷰포트나 컨테이너 크기에 맞춰 자연스럽게 크기가 조절되는 유동적 타이포그래피([[Fluid Typography]])를 구축하는 과정입니다 [3, 4]. 이를 통해 다양한 디바이스 환경과 사용자의 접근성 요구 사항을 모두 충족하면서도 유지보수하기 쉬운 확장 가능한 프론트엔드 아키텍처를 구현할 수 있습니다 [5-7].
 
 ## 📖 Core Content
 
@@ -23,7 +23,7 @@
     다양한 폰트 크기 간의 관계를 정의하는 '타이포그래피 스케일'을 설계할 때, 최신 CSS 기능인 `pow()` 함수를 사용하면 서드파티 도구나 전처리기 없이도 CSS 내부에서 직접 수학적 비율을 계산하여 타이포그래피 스케일을 생성하고 손쉽게 확장할 수 있습니다 [16-18].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Design Tokens]], [[Fluid Typography]], CSS clamp(), Web Accessibility (WCAG)
+- **Related Topics:** [[Design Tokens]], [[Fluid Typography]], CSS clamp(), Web [[Accessibility]] (WCAG)
 - **Projects/Contexts:** [[반응형 디자인]], [[디자인 시스템 개념]], [[실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 유동적 글꼴 크기를 만들기 위해 뷰포트나 컨테이너 상대 단위(`vw`, `cqi` 등)만을 단독으로 사용하는 것은 화면 크기에 따라 매끄러운 확장을 제공한다는 장점이 있으나, 브라우저 화면 확대(Zoom)를 시도하는 사용자의 의도를 무효화시키는 치명적인 단점이 있습니다. 따라서 사용자 친화적이고 유지보수 가능한 시스템을 위해서는 항상 베이스 픽셀(`rem`, `em`)과 결합한 `calc()` 또는 `clamp()` 구문을 사용해야 한다고 강조합니다 [13, 14, 19].