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

10_Wiki/Topics/AI_and_ML/확장 가능한 스타일 시스템.md

@@ -1,9 +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 비대화(bloat)' 및 글로벌 네임스페이스 충돌을 방지하는 프론트엔드 아키텍처입니다 [1]. 이 시스템은 BEM, [[CSS Modules|CSS Modules]], Tailwind CSS 등 구조화된 CSS 설계 방식을 통해 컴포넌트를 모듈화하며, 디자인 토큰과 최신 레이아웃(Grid/[[Flexbox|Flexbox]]), 컨테이너 쿼리를 결합해 일관되고 유지보수 가능한 UI를 구축하는 것을 핵심 목적으로 합니다 [2-5].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 * **모듈식 CSS 구조 설계 방식**
   * **[[BEM (Block Element Modifier)|BEM (Block Element Modifier]]:** 컴포넌트를 독립적인 블록, 하위 요소, 수정자로 명시적으로 구분하는 명명 규칙입니다 [6-8]. 선택자의 깊이를 얕게 유지하여 렌더링 성능을 높이고 예측 가능성을 제공하지만, 수동으로 규칙을 준수해야 하므로 시스템이 커질수록 인적 오류로 인한 구조 파편화와 유지보수 한계가 발생할 수 있습니다 [8, 9].
   * **CSS Modules:** 자바스크립트 컴포넌트 환경에서 빌드 시 고유한 해시 클래스명을 생성하여 자동으로 스타일을 스코핑(캡슐화)합니다 [10, 11]. 네임스페이스 충돌을 원천 차단하여 BEM의 단점을 자동화된 도구로 해결합니다 [10, 12].
@@ -26,10 +43,41 @@
   * 부드러운 60fps 애니메이션(Transition / Keyframes)을 유지하기 위해서는 `width`, `margin` 등의 레이아웃 속성을 피하고, GPU 가속 처리가 가능한 `transform` 및 `opacity` 속성만을 변경해야 합니다 [34-36].
   * 아키텍처 측면에서는 기능 주도(Feature-driven) 또는 도메인 주도로 폴더를 구조화하여, 특정 기능 삭제 시 관련 CSS도 쉽게 함께 폐기(Dead code elimination)할 수 있도록 설계해야 유지보수가 수월합니다 [37, 38].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], BEM 방법론, CSS Modules, Tailwind CSS 전략, 디자인 토큰(Design Tokens), Flexbox와 CSS Grid 아키텍처, [[컨테이너 쿼리 (Container Queries)|컨테이너 쿼리(Container Queries]], 유동적 타이포그래피(Fluid Typography), [[리플로우 및 리페인트 (Reflow & Repaint)|리플로우 및 리페인트(Reflow & Repaint]]
 - **Projects/Contexts:** 대규모 엔터프라이즈 프론트엔드 환경, 디자인 시스템 구축 파이프라인, 기능 주도 아키텍처([[Feature-Driven Architecture|Feature-Driven Architecture]])
 - **Contradictions/Notes:** Tailwind CSS와 같은 유틸리티 우선(Utility-first) 접근 방식은 개발 속도 향상, 일관성 유지, CSS 번들 사이즈 최적화에 탁월하지만 긴 클래스 이름으로 인해 HTML 마크업이 장황해지고 가독성이 떨어지는 단점이 있습니다 [15, 16]. 반면, [[SCSS|SCSS]]나 CSS Modules는 마크업을 깔끔하게 유지해주지만, 클래스 작명에 따른 피로도와 별도 파일 이동 등 컨텍스트 전환(Context switching) 비용이 발생합니다 [16, 39]. 따라서 현대의 실무 환경에서는 전반적인 레이아웃과 간격에는 Tailwind를 사용하고, 미세하고 복잡한 스타일링이 필요한 컴포넌트에는 CSS Modules를 결합하여 사용하는 하이브리드(Hybrid) 전략이 채택되기도 합니다 [40-43].
 
 ---
-*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 |