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

10_Wiki/Topics/AI_and_ML/대규모 엔지니어링 프론트엔드 아키텍처 구축.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)
 대규모 엔지니어링 프론트엔드 아키텍처에서 CSS는 단순한 시각적 장식이 아닌 유지보수와 협업을 위한 엄격한 엔지니어링 시스템입니다 [1]. 확장 가능한 스타일 시스템을 구축하기 위해서는 네임스페이스 충돌을 막고 모듈화를 강제하는 설계 방식(BEM, [[CSS Modules|CSS Modules]], Tailwind)을 전략적으로 채택해야 합니다 [2-7]. 나아가 Layout-in과 Content-out 원칙에 따른 [[Flexbox|Flexbox]] 및 Grid의 적절한 혼합, 컨테이너 기반 반응형 디자인, 디자인 토큰 계층화, 그리고 리플로우(Reflow)를 최소화하는 애니메이션 최적화가 필수적입니다 [8-19]. 
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 *   **실무를 위한 CSS 구조 설계 방식 및 비교**
     *   **BEM (Block, Element, Modifier)**: 컴포넌트를 독립적인 단위로 나누고, 예측 가능한 평면적 클래스명 구조를 통해 결합도를 낮추며 응집도를 높이는 수동 규칙 기반 아키텍처입니다 [2, 3, 20, 21]. 하지만 규모가 커질 경우 사람의 실수로 규칙이 훼손될 수 있으며, 빌드 단계에서 사용되지 않는 'Dead Code'를 제거하기 어렵다는 단점이 있습니다 [4, 22, 23].
     *   **CSS Modules**: 빌드 시점에서 고유하게 해시된 클래스명을 자동 생성하여 완전한 컴포넌트 단위의 격리(Local Scoping)를 보장합니다 [7, 24, 25]. 이는 표준 CSS를 그대로 사용할 수 있어 복잡한 애니메이션과 선택자(가상 요소 등) 작성에 강력하며 런타임 비용이 없습니다 [7, 25, 26].
@@ -27,7 +46,7 @@
     *   디자인 시스템은 시각적 정체성의 프로그래밍적 구현체입니다. 디자인 시스템의 핵심은 **디자인 토큰([[Design Tokens|Design Tokens]])**으로, 색상, 타이포그래피, 간격 등의 원시 값을 저장하는 플랫폼 독립적 변수입니다 [15, 60].
     *   토큰은 1) 원시 값인 전역 토큰(Global), 2) 시맨틱한 의도를 가진 별칭 토큰(Alias), 3) 개별 요소에 할당되는 컴포넌트 토큰(Component)의 3단계로 추상화됩니다 [16, 61]. [[Style Dictionary|Style Dictionary]]와 같은 도구를 통해 이러한 토큰 JSON 파일을 CSS, iOS(Swift), Android(XML)용 코드로 자동 변환하는 파이프라인을 구축하면, 모든 플랫폼에서 '단일 진실 공급원([[Single_Source_of_Truth|Single Source of Truth]])'을 보장할 수 있습니다 [17, 62].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[CSS Container Queries|CSS Container Queries]], Fluid Typography, Design Tokens, [[Reflow and Repaint|Reflow and Repaint]], [[Feature-Driven Architecture|Feature-Driven Architecture]]
 - **Projects/Contexts:** [[Style Dictionary Pipelines|Style Dictionary Pipelines]], [[Next.js App Router Styling Strategies|Next.js App Router Styling Strategies]]
 - **Contradictions/Notes:** 
@@ -35,4 +54,58 @@
   - Tailwind CSS에 대한 견해 차이가 존재합니다. 작성 속도, CSS 파일 크기 관리 측면에서 압도적 우위를 지니지만 [27-29], 클래스명이 지나치게 길어져 HTML의 시인성이 떨어지고 "인라인 스타일과 다를 바 없다"는 비판도 존재합니다 [29, 30, 69]. 따라서 대형 프로젝트는 Tailwind와 CSS Modules를 결합하는 하이브리드 아키텍처를 선호하기도 합니다 [32].
 
 ---
-*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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*