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

10_Wiki/Topics/AI_and_ML/Mobile-First Approach.md

@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-mobile-first-approach
+title: Mobile First Approach
+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
+---
+
 # [[Mobile-First Approach|Mobile-First Approach]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 모바일 퍼스트(Mobile-First Approach)는 웹사이트를 계획, 구조화, 디자인할 때 가장 작은 모바일 화면 크기를 우선적인 기준으로 삼는 콘텐츠 및 디자인 전략입니다 [1-3]. 데스크톱 화면을 먼저 디자인한 뒤 축소하는 방식과 달리, 모바일 환경에서 가장 핵심적인 콘텐츠와 기능을 먼저 배치한 후 화면이 커짐에 따라 CSS 미디어 쿼리 등을 사용해 점진적으로 레이아웃과 기능을 확장해 나가는 특징을 가집니다 [3-5]. 이는 우선순위를 명확히 하고 깔끔하며 빠른 웹사이트를 구축하는 데 도움을 줍니다 [4, 6].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 * **개념적 특징과 반응형 디자인과의 차이점:**
   조직에서 웹사이트를 개편할 때 모바일 퍼스트와 반응형 디자인(Responsive Design)을 혼용하기 쉽지만, 둘은 서로 다른 문제를 해결합니다. 모바일 퍼스트 디자인은 제한된 공간에서 '무엇이 가장 필수적인가'를 결정하고 콘텐츠의 우선순위를 정하는 **디자인 및 콘텐츠 전략**입니다 [1, 2]. 반면, 반응형 디자인은 유동적 그리드(Fluid grids)나 컨테이너 쿼리([[Container Queries|Container Queries]]) 등의 CSS 기술을 사용해 디자인이 다양한 화면에 맞게 조정되도록 하는 **시스템**으로, 이 두 가지는 함께 협력하여 작동합니다 [1, 2].
 
@@ -17,10 +37,64 @@
   * **UI/UX 최적화:** 주요 액션(네비게이션, CTA 버튼 등)을 추가적인 스크롤 없이도 볼 수 있게 배치해야 하며, 터치하기 쉽도록 충분히 큰 탭 영역을 확보하고 모바일에서의 폼과 메뉴를 단순화해야 합니다 [10].
   * 모바일 퍼스트를 잘 구현한 실제 사례로는, 기사의 중요도에 따라 모바일에서 단일 스택으로 깔끔하게 조정되도록 설계한 출판 매체 가디언(The Guardian) 지가 있습니다 [11].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Responsive Web Design|Responsive Web Design]], Media Queries, [[Core Web Vitals|Core Web Vitals]]
 - **Projects/Contexts:** The Guardian, [[CSS Architecture|CSS Architecture]]
 - **Contradictions/Notes:** 자료에서는 모바일 퍼스트 디자인과 반응형 웹 디자인을 분명하게 구분하고 있습니다. 모바일 퍼스트는 사용자 여정과 우선순위를 다루는 '전략'이며, 반응형 디자인은 이를 유연하게 조정하는 '기술적 구현'입니다 [1, 2]. 
 
 ---
-*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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*