[G1-Sync] Manual knowledge update

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

@@ -2,116 +2,149 @@
 id: wiki-2026-0508-모바일-퍼스트-mobile-first
 title: 모바일 퍼스트(Mobile First)
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: []
+aliases: [Mobile-First, Mobile First Design]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 0.92
-tags: [auto-consolidated, technical-documentation]
+confidence_score: 0.9
+verification_status: applied
+tags: [responsive-design, frontend, ux]
 raw_sources: []
-last_reinforced: 2026-05-08
+last_reinforced: 2026-05-10
 github_commit: pending
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
 tech_stack:
-  language: unspecified
-  framework: unspecified
+  language: css
+  framework: tailwind-3
 ---
 
-# [[모바일 우선주의 (Mobile-First) 디자인|모바일 우선주의 (Mobile-First) 디자인]]
+# 모바일 퍼스트(Mobile First)
 
-## 📌 한 줄 통찰 (The Karpathy Summary)
-모바일 우선주의(Mobile-First) 디자인은 가장 작은 화면 크기(뷰포트)를 기준으로 먼저 디자인과 코드를 작성한 뒤, 점진적으로 더 큰 화면을 위해 확장(progressive enhancement)해 나가는 접근 방식입니다 [1, 2]. 이 방식은 한정된 공간으로 인해 콘텐츠의 우선순위를 엄격하게 정하도록 강제하며, 결과적으로 더 깔끔하고 빠른 웹사이트의 기본 스타일을 만들어냅니다 [1, 3, 4]. CSS 기술적 측면에서는 모바일을 타겟으로 기본 스타일을 먼저 정의하고, 화면이 커짐에 따라 `min-width` 미디어 쿼리(media queries)를 사용하여 레이아웃의 복잡성을 더해가는 것을 의미합니다 [1, 5, 6].
+## 매 한 줄
+> **"매 small screen 으로 시작, progressively enhance"**. Luke Wroblewski 가 2009 에 명명. 매 2026 에 mobile traffic 이 글로벌 web traffic 의 ~62%, 매 Google mobile-first indexing 의 default — 매 desktop-first 는 legacy 결정.
 
----
+## 매 핵심
 
-모바일 퍼스트(Mobile-First)는 웹사이트를 기획, 구조화, 설계할 때 가장 작은 화면 크기(모바일)를 기준으로 시작하여, 점진적으로 더 큰 기기에 맞춰 확장해 나가는 디자인 및 콘텐츠 전략입니다 [1, 2]. 이 접근법은 제한된 공간 안에서 필수적인 콘텐츠와 기능을 최우선으로 배치하여 간결하고 빠른 레이아웃을 생성하는 데 목적이 있습니다 [2, 3]. 기술적으로 CSS를 작성할 때는 모바일용 기본 스타일을 먼저 정의한 후, `min-width` 미디어 쿼리를 사용하여 뷰포트가 커질 때 점진적으로 복잡성을 더해가는 방식으로 구현됩니다 [1, 4, 5].
+### 매 원칙
+- **Constraint-first design**: 매 small viewport 가 제일 어려운 case → 매 먼저 풀면 desktop 은 자동.
+- **Content priority**: 매 small screen 에서 매 essential content 만 → 매 information architecture 강제.
+- **Performance budget**: 매 mobile network (3G/4G) 가정 → 매 KB 단위 절약.
 
-## 📖 구조화된 지식 (Synthesized Content)
-* **핵심 개념 및 도입 배경**
-  * **콘텐츠 우선순위와 간결함:** 기존 데스크톱 레이아웃을 단순히 축소하는 방식은 요소가 비좁아지거나 텍스트가 작아지는 문제를 낳습니다. 모바일 우선주의는 모바일에서 완벽하게 작동하는 단순화된 버전에서 시작하여 필수적인 요소만 먼저 고려하게 만듭니다 [2, 4].
-  * **검색 엔진 최적화(SEO) 및 성능:** 구글(Google)은 모바일 버전을 사이트 평가의 주 기준으로 삼는 모바일 우선 색인(Mobile-First Indexing)을 적용하고 있습니다. 즉, 빠르고 유용한 모바일 레이아웃은 트래픽과 검색 노출 가시성에 직접적인 영향을 줍니다 [4, 7, 8]. 또한 이 방식은 무거운 에셋과 불필요한 스크립트를 줄여 자연스럽게 로딩 성능을 향상시킵니다 [4].
+### 매 CSS 전략
+- min-width media query (not max-width).
+- mobile = base styles, desktop = enhancement.
 
-* **실무 구현 방식 (Best Practices)**
-  * **CSS `min-width` 미디어 쿼리 활용:** 모든 뷰포트에 적용될 모바일용 코드를 CSS 기본 스타일로 작성한 후, 태블릿이나 데스크톱처럼 더 큰 화면에 대한 스타일만 `min-width` 미디어 쿼리 내부에 추가합니다 [1, 5, 6]. 이 구조는 CSS를 훨씬 논리적으로 만들고 유지보수를 용이하게 합니다 [6].
-  * **와이어프레임 설계:** 디자인 초기 단계의 와이어프레임은 모바일의 가장 보편적인 너비인 320px 또는 375px 크기에서 시작해야 합니다 [6].
-  * **터치 대상(Touch Target)과 UI 단순화:** 주요 액션 버튼, 연락처, CTA는 추가 스크롤 없이 눈에 띄게 배치되어야 합니다 [6]. 모바일에서의 탭 대상 크기는 충분히 크게 설계해야 하며(Apple은 최소 44x44px, Google은 최소 48x48px 권장), 메뉴나 폼(form) 역시 가장 단순한 형태에서 시작하여 화면이 커질 때 확장되게 구성해야 합니다 [6, 9].
+### 매 응용
+1. Tailwind / Bootstrap 의 default approach.
+2. PWA 의 Performance budget design.
+3. Email template (Outlook 가 desktop 강제 때문에 fallback 필요).
 
-* **실제 적용 사례**
-  * 영국의 언론사 The Guardian은 모바일 우선 디자인을 가장 잘 구현한 사례 중 하나로 꼽힙니다 [10]. 복잡한 기사와 광고, 멀티미디어 속에서도 작은 스마트폰 화면부터 큰 데스크톱 화면까지 헤드라인과 이미지가 자연스럽게 크기를 조정하고 콘텐츠가 구조화된 형태를 유지합니다 [10].
+## 💻 패턴
 
----
+### Mobile-First CSS
+```css
+/* Base = mobile */
+.card {
+  padding: 1rem;
+  font-size: 16px;
+}
 
-* **개념 및 반응형 디자인과의 역할 구분:** 모바일 퍼스트는 단순히 화면을 줄이는 것이 아니라, 공간이 제한되었을 때 무엇이 필수적이고 먼저 와야 하는지 우선순위를 정하는 '콘텐츠 및 디자인 전략'입니다 [2]. 반면, 반응형 디자인(Responsive Design)은 인터페이스가 여러 화면 크기에 유동적으로 적응하게 만드는 '시스템'으로, 이 둘은 서로 다른 문제를 해결하며 함께 작동합니다 [2, 6, 7]. 데스크톱 레이아웃을 모바일로 억지로 축소하는 방식은 요소가 비좁아지고 가독성이 떨어질 수 있으므로, 모바일에서 완벽하게 작동하는 깔끔한 버전을 먼저 시작하는 것이 핵심입니다 [8].
-* **구조적이고 유지보수 가능한 CSS 구현:** 320px 또는 375px과 같은 일반적인 모바일 너비에서 디자인을 시작합니다 [5]. CSS를 작성할 때는 모바일 디바이스에 적용되는 핵심 레이아웃 스타일을 먼저 구축한 뒤, `min-width` 미디어 쿼리를 사용하여 데스크톱 등 더 큰 화면을 위한 디자인을 덧붙이는 점진적 향상(Progressive Enhancement) 방식을 따릅니다 [1, 5]. 이는 코드를 논리적으로 유지하고 향후 관리를 쉽게 만들며, 훨씬 가볍고 빠른 기본 스타일을 생성합니다 [1, 5].
-* **SEO 및 성능 최적화:** 현재 구글(Google)은 기본적으로 웹사이트의 모바일 버전을 기준으로 평가하고 순위를 매기는 '모바일 퍼스트 인덱싱(Mobile-first indexing)'을 적용하고 있습니다 [9-12]. 모바일 퍼스트로 디자인하면 초기 로딩에 필요한 가벼운 에셋, 더 적은 스크립트, 단순한 시각적 요소의 사용을 장려하게 되므로 성능이 자연스럽게 향상되고 결과적으로 검색 랭킹(SEO)에도 긍정적인 영향을 미칩니다 [11, 12].
-* **사용자 경험(UX) 및 우선순위 설정:** 가장 작은 화면을 위한 설계는 불필요한 요소를 제거하고 가장 중요한 것에만 집중하도록 강제합니다 [3, 12]. 이를 통해 사용자의 인지 부하를 줄일 수 있으며, 내비게이션이나 주요 행동(CTA) 버튼은 추가적인 스크롤 없이도 찾기 쉽고 조작할 수 있는 크기로 배치되어 원활한 사용자 여정을 돕습니다 [2, 5].
+/* Tablet enhancement */
+@media (min-width: 768px) {
+  .card { padding: 1.5rem; }
+}
 
-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
-No trade-offs available.
-
-## 🔗 지식 연결 (Graph)
-- **Related Topics:** [[반응형 웹 디자인 (Responsive Web Design)|반응형 웹 디자인 (Responsive Web Design]], [[미디어 쿼리 (Media Queries)|미디어 쿼리 (Media Queries]], 모바일 우선 색인 (Mobile-First Indexing)
-- **Projects/Contexts:** [[반응형 디자인|반응형 디자인]], [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
-- **Contradictions/Notes:** 소스 전반에 걸쳐 내용 충돌은 없으며, 반응형 디자인을 효과적으로 구현하기 위해서는 모바일 환경을 '사후 대책'이 아닌 디자인과 개발의 '기반(Foundation)'으로 삼아야 한다는 점이 일관되게 강조되고 있습니다 [6].
-
----
-*Last updated: 2026-04-26*
-
----
-
-- **Related Topics:** [[반응형 디자인(Responsive Design)|반응형 디자인(Responsive Design]], 미디어 쿼리(Media Queries), [[모바일 퍼스트 인덱싱(Mobile-First Indexing)|모바일 퍼스트 인덱싱(Mobile-first indexing]]
-- **Projects/Contexts:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], 검색 엔진 최적화(SEO) 및 [[Core Web Vitals|Core Web Vitals]] 성과 관리
-- **Contradictions/Notes:** 실무에서는 모바일 퍼스트 디자인과 반응형 디자인이 종종 같은 의미로 혼용되지만, 소스에서는 모바일 퍼스트가 '우선순위를 결정하는 전략'인 반면 반응형 디자인은 '유동적으로 반응하게 하는 기술적 시스템'이라는 점을 들어 이 둘을 명확하게 구분하고 있습니다 [2, 7].
-
----
-*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
+/* Desktop enhancement */
+@media (min-width: 1024px) {
+  .card { padding: 2rem; font-size: 18px; }
+}
 ```
 
-## 🤔 의사결정 기준 (Decision Criteria)
+### Tailwind Mobile-First
+```html
+<!-- Default = mobile, sm:/md:/lg: = enhancements -->
+<div class="p-4 text-sm md:p-6 md:text-base lg:p-8 lg:text-lg">
+  Content
+</div>
+```
 
-**선택 A를 써야 할 때:**
-- *(TODO)*
+### Conditional Image Loading
+```html
+<picture>
+  <source media="(min-width: 1024px)" srcset="hero-desktop.webp">
+  <source media="(min-width: 768px)" srcset="hero-tablet.webp">
+  <img src="hero-mobile.webp" alt="hero" loading="lazy">
+</picture>
+```
 
-**선택 B를 써야 할 때:**
-- *(TODO)*
+### Touch-First Interaction
+```css
+button {
+  min-height: 44px; /* Apple HIG, also covers Material 48dp */
+  min-width: 44px;
+  padding: 0.75rem 1rem;
+}
+```
 
-**기본값:**
-> *(TODO)*
+### Container Queries (2026)
+```css
+/* Modern alternative — component responds to its container, not viewport */
+.card-container {
+  container-type: inline-size;
+}
 
-## ❌ 안티패턴 (Anti-Patterns)
+@container (min-width: 600px) {
+  .card { display: grid; grid-template-columns: 1fr 2fr; }
+}
+```
 
-- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
+### Performance Budget Test
+```js
+// Lighthouse CI gate
+module.exports = {
+  ci: {
+    assert: {
+      assertions: {
+        'first-contentful-paint': ['error', { maxNumericValue: 1800 }],
+        'total-byte-weight': ['error', { maxNumericValue: 500_000 }]
+      }
+    }
+  }
+};
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| 새 web 프로젝트 | Mobile-first (default) |
+| B2B internal dashboard, desktop-only | Desktop-first 정당화 가능 |
+| Component library | Container query (2026 default) |
+| Email template | Hybrid — fluid + mobile-first |
+
+**기본값**: Mobile-first + container query (2026).
+
+## 🔗 Graph
+- 부모: [[Responsive_Design]] · [[Frontend_Architecture]]
+- 변형: [[Mobile-First Approach]] · [[모바일 우선주의 (Mobile-First) 디자인]]
+- 응용: [[Progressive_Web_App]] · [[Mobile_Offline_First]]
+- Adjacent: [[모바일 퍼스트 인덱싱(Mobile-First Indexing)]] · [[Performance_Budget]]
+
+## 🤖 LLM 활용
+**언제**: 매 existing desktop-first CSS 의 mobile-first conversion, 매 Tailwind class 자동 생성, 매 breakpoint analysis.
+**언제 X**: 매 visual design 결정 — 매 designer 의 영역.
+
+## ❌ 안티패턴
+- **Hidden mobile content**: 매 `display: none` 으로 desktop content 만 숨김 → 매 SEO + accessibility 손해.
+- **max-width-only media query**: 매 mobile 이 fallback 이 됨 — 매 mobile-first 정신 반대.
+- **Fixed pixel breakpoints**: 매 device-specific (iPhone 12 width 등) — 매 future-proof X.
+- **Desktop hover-only interaction**: 매 touch device 에서 작동 X.
+
+## 🧪 검증 / 중복
+- Verified (Wroblewski, *Mobile First* 2011; Google Search Central mobile-first indexing 공식 문서, 2024 update).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — Tailwind / container query / Lighthouse CI 추가 |