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

10_Wiki/Topics/Frontend/다크 모드 및 다중 브랜드 테마 동적 전환 시스템.md

@@ -1,6 +1,26 @@
+---
+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)
 다크 모드 및 다중 브랜드 테마 동적 전환 시스템은 애플리케이션의 시각적 외관을 사용자의 설정이나 브랜드 요구사항에 맞춰 유연하게 변경할 수 있도록 하는 아키텍처입니다. 이는 주로 디자인 토큰([[Design Tokens|Design Tokens]])과 시맨틱 네이밍, CSS 사용자 정의 속성(CSS Variables)을 활용하여 구현되며, CSS Modules나 [[CSS-in-JS|CSS-in-JS]]와 같은 현대적인 스타일링 기법과 결합하여 유지보수성을 극대화합니다.
 
 ## 📖 Core 소스 Content
@@ -10,10 +30,72 @@
 * **미디어 쿼리(Media Queries)를 통한 시스템 테마 감지:** 미디어 쿼리는 화면 크기뿐만 아니라 라이트 모드나 다크 모드와 같은 사용자의 디바이스 환경 설정을 감지하고 처리하는 데 활용됩니다[11]. 성공적인 반응형 및 테마 디자인을 위해서는 라이트 모드와 다크 모드 양쪽에서 타이포그래피와 가독성이 유지되는지 확인해야 합니다[12].
 * **BEM 방법론을 활용한 화이트라벨(Whitelabel) 다중 테마:** 다수의 고객사 브랜드를 지원해야 하는 화이트라벨 앱의 경우, UI 라이브러리와 앱 간의 스타일 계약으로 BEM 구조를 사용하여, 필요한 테마 CSS만 선택적으로 로드하고 덮어쓰는 방식을 채택해 확장성을 확보하기도 합니다[13, 14].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** 디자인 시스템(DesignSystems) 및 디자인 토큰(Design Tokens), CSS-in-JS와 동적 스타일링, CSS 사용자 정의 속성(CSS Custom Properties), 하이브리드 CSS 아키텍처
 - **Projects/Contexts:** 웹/모바일 크로스 플랫폼 테마 적용(Style Dictionary), 화이트라벨(Whitelabel) B2B 애플리케이션 스타일링, 대규모 디자인 시스템 테마 확장
 - **Contradictions/Notes:** CSS-in-JS(styled-components 등)는 런타임 테마 적용에 매우 직관적이고 유용하지만[6, 7], 런타임 성능 오버헤드와 React 서버 컴포넌트(RSC) 환경과의 비호환성 문제로 인해 최신 프론트엔드 아키텍처([[Next.js App Router|Next.js App Router]] 등)에서는 CSS 변수를 결합한 CSS Modules나 Tailwind, 혹은 Zero-runtime 도구([[vanilla-extract|vanilla-extract]] 등)를 사용하여 테마를 구현하는 것이 더 권장됩니다[15-17].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 📖 구조화된 지식 (Synthesized Content)
+
+**추출된 패턴:**
+> *(TODO)*
+
+**세부 내용:**
+- *(TODO)*
+
+## 🤖 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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*