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)
 반응형 웹 디자인([[Responsive Web Design|Responsive Web Design]])은 모바일, 태블릿, 데스크톱 등 다양한 화면 크기와 기기에 맞춰 인터페이스가 유동적으로 적응하도록 구축하는 설계 방식입니다 [1, 2]. 이를 통해 사용자는 어떤 기기에서든 줌인/줌아웃 없이 일관되고 빠르며 접근성 높은 경험을 제공받을 수 있습니다 [1, 3]. 최근에는 단순한 화면 크기 대응을 넘어 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]]) 성능을 최적화하고 컴포넌트 단위의 유연성을 확보하는 방향으로 진화하고 있습니다 [4-6].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 *   **5대 핵심 원칙 (2025~2026 기준):** 
     1.  **유동적 그리드(Fluid Grids):** 고정된 픽셀이 아닌 퍼센트(%)나 `fr`과 같은 상대적인 단위를 사용하여 화면 크기에 맞춰 자연스럽게 크기가 변하도록 설계합니다 [7, 8].
     2.  **컨테이너 쿼리([[Container Queries|Container Queries]]):** 전체 뷰포트(브라우저 창)가 아닌, 컴포넌트를 감싸는 부모 컨테이너의 크기에 따라 스타일이 반응하도록 만들어 컴포넌트의 완벽한 재사용성을 보장합니다 [5, 6, 9].
@@ -24,10 +41,41 @@
     *   화면 공간이 좁은 모바일에서는 중요도가 낮은 정보를 탭(Tab), 아코디언(Accordion), 모달 등으로 묶어 제공하는 점진적 공개(Progressive Disclosure) 기법을 사용하여 복잡도를 줄입니다 [27, 28].
     *   모든 로고와 아이콘은 해상도에 상관없이 무한히 깨끗하게 확장되는 SVG 포맷을 사용하는 것이 좋습니다 [27, 29].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[CSS Grid|CSS Grid]], Flexbox, Container Queries, [[모바일 퍼스트(Mobile-First)|모바일 퍼스트(Mobile-First]], [[Fluid Typography|Fluid Typography]]
 - **Projects/Contexts:** [[디자인 시스템 개념|디자인 시스템 개념]], [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 과거 반응형 디자인은 전체 뷰포트 크기에 의존하는 미디어 쿼리(Media Queries)를 주축으로 하였으나, 최근의 모던 웹 설계에서는 이를 넘어서 컴포넌트가 자신이 속한 부모 요소의 공간에 맞춰 스스로 레이아웃을 변경하는 컨테이너 쿼리(Container Queries) 방식이 진정한 재사용성을 위한 표준으로 강조되고 있습니다 [5, 6, 9].
 
 ---
-*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 |