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

10_Wiki/Topics/Architecture/모바일_퍼스트(Mobile-First).md

@@ -1,20 +1,33 @@
 ---
-category: Unified
+id: wiki-2026-0508-모바일-퍼스트-mobile-first
+title: 모바일 퍼스트(Mobile First)
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
 tags: [auto-consolidated, technical-documentation]
-title: [[모바일 우선주의 (Mobile-First) 디자인|모바일 우선주의 (Mobile-First) 디자인]]
-last_updated: 2026-05-02
+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) 디자인|모바일 우선주의 (Mobile-First) 디자인]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 모바일 우선주의(Mobile-First) 디자인은 가장 작은 화면 크기(뷰포트)를 기준으로 먼저 디자인과 코드를 작성한 뒤, 점진적으로 더 큰 화면을 위해 확장(progressive enhancement)해 나가는 접근 방식입니다 [1, 2]. 이 방식은 한정된 공간으로 인해 콘텐츠의 우선순위를 엄격하게 정하도록 강제하며, 결과적으로 더 깔끔하고 빠른 웹사이트의 기본 스타일을 만들어냅니다 [1, 3, 4]. CSS 기술적 측면에서는 모바일을 타겟으로 기본 스타일을 먼저 정의하고, 화면이 커짐에 따라 `min-width` 미디어 쿼리(media queries)를 사용하여 레이아웃의 복잡성을 더해가는 것을 의미합니다 [1, 5, 6].
 
 ---
 
 모바일 퍼스트(Mobile-First)는 웹사이트를 기획, 구조화, 설계할 때 가장 작은 화면 크기(모바일)를 기준으로 시작하여, 점진적으로 더 큰 기기에 맞춰 확장해 나가는 디자인 및 콘텐츠 전략입니다 [1, 2]. 이 접근법은 제한된 공간 안에서 필수적인 콘텐츠와 기능을 최우선으로 배치하여 간결하고 빠른 레이아웃을 생성하는 데 목적이 있습니다 [2, 3]. 기술적으로 CSS를 작성할 때는 모바일용 기본 스타일을 먼저 정의한 후, `min-width` 미디어 쿼리를 사용하여 뷰포트가 커질 때 점진적으로 복잡성을 더해가는 방식으로 구현됩니다 [1, 4, 5].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 * **핵심 개념 및 도입 배경**
   * **콘텐츠 우선순위와 간결함:** 기존 데스크톱 레이아웃을 단순히 축소하는 방식은 요소가 비좁아지거나 텍스트가 작아지는 문제를 낳습니다. 모바일 우선주의는 모바일에서 완벽하게 작동하는 단순화된 버전에서 시작하여 필수적인 요소만 먼저 고려하게 만듭니다 [2, 4].
   * **검색 엔진 최적화(SEO) 및 성능:** 구글(Google)은 모바일 버전을 사이트 평가의 주 기준으로 삼는 모바일 우선 색인(Mobile-First Indexing)을 적용하고 있습니다. 즉, 빠르고 유용한 모바일 레이아웃은 트래픽과 검색 노출 가시성에 직접적인 영향을 줍니다 [4, 7, 8]. 또한 이 방식은 무거운 에셋과 불필요한 스크립트를 줄여 자연스럽게 로딩 성능을 향상시킵니다 [4].
@@ -34,10 +47,10 @@ last_updated: 2026-05-02
 * **SEO 및 성능 최적화:** 현재 구글(Google)은 기본적으로 웹사이트의 모바일 버전을 기준으로 평가하고 순위를 매기는 '모바일 퍼스트 인덱싱(Mobile-first indexing)'을 적용하고 있습니다 [9-12]. 모바일 퍼스트로 디자인하면 초기 로딩에 필요한 가벼운 에셋, 더 적은 스크립트, 단순한 시각적 요소의 사용을 장려하게 되므로 성능이 자연스럽게 향상되고 결과적으로 검색 랭킹(SEO)에도 긍정적인 영향을 미칩니다 [11, 12].
 * **사용자 경험(UX) 및 우선순위 설정:** 가장 작은 화면을 위한 설계는 불필요한 요소를 제거하고 가장 중요한 것에만 집중하도록 강제합니다 [3, 12]. 이를 통해 사용자의 인지 부하를 줄일 수 있으며, 내비게이션이나 주요 행동(CTA) 버튼은 추가적인 스크롤 없이도 찾기 쉽고 조작할 수 있는 크기로 배치되어 원활한 사용자 여정을 돕습니다 [2, 5].
 
-## ⚖️ Trade-offs & Caveats
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 No trade-offs available.
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[반응형 웹 디자인 (Responsive Web Design)|반응형 웹 디자인 (Responsive Web Design]], [[미디어 쿼리 (Media Queries)|미디어 쿼리 (Media Queries]], 모바일 우선 색인 (Mobile-First Indexing)
 - **Projects/Contexts:** [[반응형 디자인|반응형 디자인]], [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
 - **Contradictions/Notes:** 소스 전반에 걸쳐 내용 충돌은 없으며, 반응형 디자인을 효과적으로 구현하기 위해서는 모바일 환경을 '사후 대책'이 아닌 디자인과 개발의 '기반(Foundation)'으로 삼아야 한다는 점이 일관되게 강조되고 있습니다 [6].
@@ -53,3 +66,52 @@ No trade-offs available.
 
 ---
 *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 정규화 — 옛 템플릿/누락 필드 보강.
+
+## 🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*