Fix: Restore unified Topics folder and reorganize specialized category folders

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

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