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

10_Wiki/Topics/AI_and_ML/대규모 프론트엔드 프로젝트.md

@@ -1,10 +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)
+---
+
 # [[대규모 프론트엔드 프로젝트|대규모 프론트엔드 프로젝트]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 대규모 프론트엔드 프로젝트에서 CSS 설계의 핵심은 단순히 화면을 시각적으로 아름답게 꾸미는 것을 넘어, 확장성 있고 유지보수가 가능한 아키텍처를 구축하는 데 있습니다. 이를 위해 [[CSS Modules|CSS Modules]], Tailwind CSS 등과 같은 모듈화된 아키텍처를 도입하여 네임스페이스 충돌을 방지하고, Flexbox와 Grid를 조합하여 예측 가능한 레이아웃을 구성합니다. 또한 컨테이너 쿼리([[Container Queries|Container Queries]])를 활용한 반응형 컴포넌트 설계, 리플로우(Reflow)와 리페인트(Repaint)를 최소화하는 성능 중심의 애니메이션 최적화, 그리고 디자인 토큰([[Design Tokens|Design Tokens]])에 기반한 디자인 시스템 확립이 실무적인 핵심 전략으로 작용합니다.
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 **1. 실무적인 CSS 구조 설계 방식 (BEM, CSS Modules, Tailwind CSS)**
 *   대규모 프로젝트에서 명확한 아키텍처가 없으면 CSS 코드는 글로벌 스코프 충돌과 스타일 덮어쓰기로 인해 유지보수가 불가능한 스파게티 코드로 변질됩니다 [1], [2], [3].
 *   **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 독립적인 블록(Block), 요소(Element), 상태(Modifier)로 나누어 명명하는 규칙입니다. 결합도를 낮추고 응집도를 높여 선택자를 평면적으로 유지하지만 [4], [5], 인간의 규율에 의존하므로 규모가 커짐에 따라 인적 오류와 파일 비대화가 발생할 수 있습니다 [6].
@@ -36,7 +52,7 @@
     *   *Component Tokens (컴포넌트 단위 값):* 특정 UI 요소에만 국한되는 값 (예: `--button-bg: var(--color-primary)`)
 *   이러한 시스템은 하나의 값이 변경될 때 전체 애플리케이션에 일관되게 적용되게 하며, 웹과 모바일 플랫폼 간의 시각적 갭을 없애줍니다 [59], [60].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** `[[BEM|BEM]]`, `CSS Modules`, `Tailwind CSS`, `[[Flexbox|Flexbox]]`, `CSS Grid`, `[[Container Queries|Container Queries]]`, `Reflow and Repaint`, `[[Design Tokens|Design Tokens]]`
 - **Projects/Contexts:** `[[Feature-Sliced Design (FSD)|Feature-Sliced Design (FSD]]` (컴포넌트 스타일링 시 BEM 등과 조합하여 예측 가능한 프론트엔드 아키텍처를 구현하는 문맥으로 활용됨 [61], [62]), `Core Web Vitals` (모바일 퍼스트 및 반응형 최적화가 필요한 SEO 및 웹 성능의 주요 측정 지표 [63], [64], [65]), `React Server Components (RSC` ([[CSS-in-JS|CSS-in-JS]]의 런타임 오버헤드와 호환성 문제로 인해 대규모 앱에서 CSS Modules 및 Tailwind가 다시 선호되는 결정적 배경 [66], [67], [68]).
 - **Contradictions/Notes:**
@@ -44,4 +60,35 @@
     *   소스 [69], [66], [68]에 따르면 `[[styled-components|styled-components]]` 같은 런타임 CSS-in-JS는 동적 스타일링에 강력하지만 런타임 오버헤드, 리렌더링 시간 증가, 특히 [[React Server Components|React Server Components]]와의 비호환성 문제를 유발합니다. 따라서 성능과 호환성이 중요한 현대의 대규모 프로젝트에서는 Zero-runtime 방식인 CSS Modules, Vanilla Extract, 또는 Tailwind로의 전환이 권장되고 있습니다.
 
 ---
-*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 |