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

10_Wiki/Topics/AI_and_ML/대규모 프론트엔드 아키텍처(Large-Scale Frontend Architecture).md

@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-대규모-프론트엔드-아키텍처-large-scale-front
+title: 대규모 프론트엔드 아키텍처(Large Scale Frontend Architecture)
+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
+---
+
 # [[대규모 프론트엔드 아키텍처(Large-Scale Frontend Architecture)|대규모 프론트엔드 아키텍처(Large-Scale Frontend Architecture]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 대규모 프론트엔드 아키텍처에서 CSS는 과거의 단순한 디자인 데코레이션을 넘어, 기술 부채의 누적을 막고 여러 팀 간의 협업을 가능하게 하는 엄격한 엔지니어링 영역으로 진화했습니다 [1]. “예쁘게” 만드는 것을 넘어 “유지보수 가능하게” 만드는 것을 핵심 목적으로 하며, 이를 위해 BEM, [[CSS Modules|CSS Modules]], Tailwind CSS와 같은 구조화된 스타일링 방법론과 디자인 토큰 기반의 디자인 시스템을 도입합니다 [1-4]. 더불어 [[Flexbox|Flexbox]]와 Grid를 활용한 효율적인 레이아웃 설계, 컨테이너 쿼리를 포함한 최신 반응형 패턴, 그리고 리플로우(Reflow)와 리페인트(Repaint)를 최소화하여 렌더링 성능을 최적화하는 전략적 기술들이 필수적으로 요구됩니다 [5-7].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 **1. CSS 구조 설계 방식과 실무 관리 전략 (BEM, CSS Modules, Tailwind CSS)**
 *   대규모 애플리케이션의 스타일 관리는 글로벌 네임스페이스 충돌과 특이성(Specificity) 전쟁을 방지하는 것이 핵심입니다 [1, 8].
 *   **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 기능적으로 독립적인 Block, 종속적인 Element, 상태를 나타내는 Modifier로 구분하여 명명하는 구조적 아키텍처입니다 [9-11]. CSS 선택자의 깊이를 얕게 유지해 렌더링 성능에 유리하지만, 개발자가 직접 규칙을 준수해야 하므로 팀이 커질수록 인적 오류와 유지보수 비용이 증가할 수 있습니다 [12-14].
@@ -28,10 +48,64 @@
 *   **GPU 가속 활용:** 성능이 뛰어난 60FPS 애니메이션을 구현하려면, 리플로우와 리페인트를 모두 건너뛰고 컴포지팅(Composite) 단계만 실행하도록 `transform`(위치, 크기 변경)과 `opacity`(투명도 변경) 속성만을 활용해야 합니다 [53-55]. 
 *   **[[Layout Thrashing|Layout Thrashing]] 회피:** DOM에서 크기 정보를 읽어오는 작업(예: `offsetWidth`)과 스타일을 쓰는 작업을 번갈아 실행하지 않도록 주의하고, 일괄 처리([[Batching|Batching]])를 도입해야 합니다 [56, 57].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[BEM|BEM]], CSS Modules, Tailwind CSS, [[Flexbox|Flexbox]], CSS Grid, [[컨테이너 쿼리 (Container Queries)|컨테이너 쿼리(Container Queries]], 디자인 토큰(Design Tokens), 리플로우(Reflow), [[리페인트(Repaint)|리페인트(Repaint]], [[유동적 타이포그래피 (Fluid Typography)|유동적 타이포그래피(Fluid Typography]]
 - **Projects/Contexts:** [[Feature-Driven Architecture|Feature-Driven Architecture]] (기능/도메인 주도 폴더 구조), 컴포넌트 기반 UI 최적화(Component-based UI [[Optimization|Optimization]])
 - **Contradictions/Notes:** Tailwind CSS는 빠른 속도와 강제된 시각적 일관성을 제공하며 렌더링 성능 최적화에 탁월하지만, HTML 마크업이 지나치게 길어지는 문제(장황함)가 있어 디자인을 세밀히 분리하고 코드 가독성을 중시하는 팀에서는 CSS Modules나 SCSS를 옹호하는 등 팀의 규모와 개발 문화에 따라 의견이 크게 엇갈립니다 [3, 20, 23, 58]. 또한 BEM 구조는 전통적으로 모듈성을 가져다주지만 수동으로 유지보수해야 한다는 단점으로 인해 CSS Modules의 자동 스코핑 기술에 대체되는 추세입니다 [13-15, 59].
 
 ---
-*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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*