[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/대규모 엔터프라이즈 테마 시스템.md

@@ -1,7 +1,7 @@
 # [[대규모 엔터프라이즈 테마 시스템]]
 
-## 📌 Brief Summary
-대규모 엔터프라이즈 테마 시스템은 디자인 토큰(Design Tokens)과 디자인 시스템을 기반으로 애플리케이션의 시각적 일관성을 유지하고 관리하는 체계입니다 [1, 2]. 전역(Global), 의미론적(Alias), 컴포넌트(Component) 계층으로 이루어진 토큰 구조를 통해 다중 테마(다크 모드, 다중 브랜드 등)를 효율적으로 구현합니다 [3-5]. Style Dictionary와 같은 자동화 변환 파이프라인을 사용하여 웹, iOS, Android 등 다양한 플랫폼에 걸쳐 '단일 진실 공급원(Single Source of Truth)'을 제공하고 확장성과 유지보수성을 극대화합니다 [6, 7].
+## 📌[[ brief]] Summary
+대규모 엔터프라이즈 테마 시스템은 디자인 토큰([[Design Tokens]])과 디자인 시스템을 기반으로 애플리케이션의 시각적 일관성을 유지하고 관리하는 체계입니다 [1, 2]. 전역(Global), 의미론적(Alias), 컴포넌트(Component) 계층으로 이루어진 토큰 구조를 통해 다중 테마(다크 모드, 다중 브랜드 등)를 효율적으로 구현합니다 [3-5]. [[Style Dictionary]]와 같은 자동화 변환 파이프라인을 사용하여 웹, iOS, Android 등 다양한 플랫폼에 걸쳐 '단일 진실 공급원([[Single Source of Truth]])'을 제공하고 확장성과 유지보수성을 극대화합니다 [6, 7].
 
 ## 📖 Core Content
 
@@ -18,14 +18,14 @@
     웹 및 모바일(iOS, Android) 플랫폼을 아우르는 대규모 프로젝트에서는 디자인 토큰을 JSON과 같은 플랫폼 중립적인 형식으로 저장합니다 [7]. 이를 Style Dictionary나 Theo 같은 도구를 통해 CSS 변수(Web), XML(Android), Swift(iOS) 등 각 플랫폼에 맞는 코드로 자동 변환합니다 [6, 7, 11]. 이 방식은 수동 작업으로 인한 오류를 제거하고 전체 제품 생태계에서 시각적 일관성을 완벽히 보장합니다 [6, 7].
 
 *   **최신 CSS 방법론과의 통합 전략:**
-    *   *CSS-in-JS:* Styled-components나 Emotion은 내장된 테마 프로바이더(Theme Provider)를 지원하여 상태와 props에 기반한 고도로 동적인 테마 구현이 가능하지만, 런타임 성능 오버헤드와 번들 크기 증가가 발생합니다 [12-14].
-    *   *Zero-runtime CSS-in-JS:* 다중 테마를 지원하는 대규모 디자인 시스템을 구축할 때 2025년 기준 가장 권장되는 방식 중 하나입니다 [15]. Vanilla Extract나 Panda CSS는 빌드 타임에 정적 CSS를 생성하여 성능 저하 없이 테마 시스템(Design Token System)과 타입 안정성(Type safety)을 제공합니다 [16, 17].
-    *   *Tailwind CSS 하이브리드 전략:* 디자인 시스템에서 관리되는 토큰(JSON)을 `tailwind.config.js`에 주입하여 Tailwind의 유틸리티 클래스와 결합하거나, CSS Custom Properties(변수)를 통해 통합된 테마를 구성할 수 있습니다 [18, 19].
+    *   *[[CSS-in-JS]]:* [[styled-components]]나 Emotion은 내장된 테마 프로바이더(Theme Provider)를 지원하여 상태와 props에 기반한 고도로 동적인 테마 구현이 가능하지만, 런타임 성능 오버헤드와 번들 크기 증가가 발생합니다 [12-14].
+    *   *[[Zero-Runtime CSS-in-JS]]:* 다중 테마를 지원하는 대규모 디자인 시스템을 구축할 때 2025년 기준 가장 권장되는 방식 중 하나입니다 [15]. Vanilla Extract나 Panda CSS는 빌드 타임에 정적 CSS를 생성하여 성능 저하 없이 테마 시스템(Design Token[[ system]])과 타입 안정성(Type safety)을 제공합니다 [16, 17].
+    *   *[[Tailwind CSS]] 하이브리드 전략:* 디자인 시스템에서 관리되는 토큰(JSON)을 `tailwind.config.js`에 주입하여 Tailwind의 유틸리티 클래스와 결합하거나, CSS Custom Properties(변수)를 통해 통합된 테마를 구성할 수 있습니다 [18, 19].
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[디자인 토큰(Design Tokens)]], [[디자인 시스템(Design System)]], [[단일 진실 공급원(Single Source of Truth)]], [[Zero-runtime CSS-in-JS]], [[Style Dictionary]]
 - **Projects/Contexts:** [[크로스 플랫폼(Web, iOS, Android) UI 개발 및 배포 파이프라인]], [[다크 모드 및 다중 브랜드 테마 동적 전환 시스템]]
-- **Contradictions/Notes:** 런타임 기반의 CSS-in-JS(예: Styled Components)는 복잡한 테마 구현에 매우 유용하다고 평가되지만, 렌더링 비용과 특히 React Server Components(RSC)와의 호환성 문제로 인해, 대규모 엔터프라이즈 환경에서는 런타임 오버헤드가 없는 Zero-runtime 솔루션이나 CSS Modules로 전환하는 것이 권장됩니다 [14, 15, 20].
+- **Contradictions/Notes:** 런타임 기반의 CSS-in-JS(예: [[Styled Components]])는 복잡한 테마 구현에 매우 유용하다고 평가되지만, 렌더링 비용과 특히 [[React Server Components]](RSC)와의 호환성 문제로 인해, 대규모 엔터프라이즈 환경에서는 런타임 오버헤드가 없는 Zero-runtime 솔루션이나 [[CSS Modules]]로 전환하는 것이 권장됩니다 [14, 15, 20].
 
 ---
 *Last updated: 2026-04-26*