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

id, title, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-mobile-first-approach	Mobile-First Approach	verified	wiki-2026-0508-mobile-first-approach	Mobile First Mobile-First Design MFA	none	A	0.94	applied	web design responsive ux performance css		2026-05-10	pending	html css javascript tailwind lighthouse

Mobile-First Approach

한 줄 정의

스타일·기능을 작은 모바일 화면 기준으로 먼저 설계하고 큰 화면을 위해 점진적으로 확장하는 반응형 웹 전략. Luke Wroblewski(2009) 제안 이후 사실상 표준이 됐고, 2020년대 모바일 트래픽 60%+·Google mobile-first indexing 으로 강제력을 갖는다.

핵심

핵심 원칙

• Progressive Enhancement: 모바일 baseline → tablet/desktop 으로 min-width media query 추가.
• Touch-first: 최소 탭 영역 44×44 px (Apple HIG) / 48 dp (Material).
• Performance budget: 3G 환경 LCP < 2.5s, 초기 JS < 170 KB gzip.
• Viewport meta: <meta name="viewport" content="width=device-width, initial-scale=1">.
• Content priority: 핵심 정보가 첫 화면(scroll 없이) 보이도록 정보 계층 재설계.

Modern Core Web Vitals (2024+)

• LCP ≤ 2.5s — Largest Contentful Paint.
• INP ≤ 200ms — Interaction to Next Paint (FID 대체, 2024).
• CLS ≤ 0.1 — Cumulative Layout Shift.

Container Queries (2023+)

화면 폭이 아닌 컴포넌트의 부모 크기에 반응. @container 으로 모듈 단위 반응형 — mobile-first 사고와 결합 시 강력.

응용

전자상거래(모바일 conversion 이 데스크톱 추월), 뉴스/블로그, 사내 도구, PWA, 검색 SEO(mobile-first index).

💻 패턴

CSS — base는 모바일, min-width로 확장

/* mobile baseline */
.card {
  padding: 1rem;
  font-size: 1rem;
  display: block;
}

/* ≥ 768px: tablet */
@media (min-width: 48rem) {
  .card { padding: 1.5rem; display: flex; gap: 1rem; }
}

/* ≥ 1024px: desktop */
@media (min-width: 64rem) {
  .card { padding: 2rem; max-width: 64rem; margin-inline: auto; }
}

Viewport + 안전영역(notch)

<meta name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
</style>

Touch target 보장

.btn, a.tap {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
  touch-action: manipulation; /* 300ms 탭 지연 제거 */
}

Responsive image (mobile bandwidth 보호)

<img
  src="hero-480.webp"
  srcset="hero-480.webp 480w, hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 1024px) 1200px, 100vw"
  alt="hero"
  loading="lazy" decoding="async" fetchpriority="high">

Tailwind — mobile-first by default

<!-- base = mobile, sm: ≥640, md: ≥768, lg: ≥1024 -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <article class="p-4 md:p-6 lg:p-8">…</article>
</div>

Container query

.card-list { container-type: inline-size; }

.card { display: block; }
@container (min-width: 30rem) {
  .card { display: grid; grid-template-columns: 8rem 1fr; }
}

CWV 측정 (web-vitals)

import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(v => navigator.sendBeacon('/cwv', JSON.stringify(v)));
onINP(v => navigator.sendBeacon('/cwv', JSON.stringify(v)));
onCLS(v => navigator.sendBeacon('/cwv', JSON.stringify(v)));

결정 기준

상황	선택
신규 웹/PWA	Mobile-first (default)
데스크톱 전용 어드민	desktop-first 허용
콘텐츠 가독 1순위	mobile-first + container queries
B2B SaaS 복잡 dashboard	hybrid (모바일은 read-only뷰)
임베디드 위젯	container query 우선

기본값: mobile-first + Tailwind/CSS min-width. 컴포넌트 레벨 반응형은 container query 결합.

🔗 Graph

• 부모: Responsive-Web-Design · Web-Performance
• 변형: Container-Queries · Progressive-Enhancement
• 응용: Core Web Vitals Optimization (INP, LCP, CLS) · SEO
• Adjacent: Accessibility-A11y · Tailwind CSS · Lighthouse

🤖 LLM 활용

언제: 반응형 CSS 생성·리팩터링, breakpoint 전략 리뷰, CWV 회귀 원인 분석, Tailwind 클래스 정렬.

언제 X: 실기기 측정 없이 LLM 답변만 믿고 CWV 통과 주장. 디자인 토큰/브랜드 가이드 없는 상태에서 LLM 즉흥 spacing 사용.

❌ 안티패턴

• max-width 만 사용해 desktop-first로 짜놓고 "반응형"이라 부름.
• 버튼 크기 < 40px → 손가락 탭 실패율 급증.
• Hover-only UI (모바일은 hover 없음).
• 모바일에서 거대한 hero image (lazy/srcset 미설정) → LCP 폭증.
• Fixed pixel font (font-size: 12px) — 접근성·확대 무시.
• Layout shift 큰 광고/embed → CLS 위반.

🧪 검증 / 중복

Verified source: Luke Wroblewski Mobile First (2011), MDN responsive design 가이드, web.dev Core Web Vitals (2024 INP), Google mobile-first indexing 발표 (2023 fully rolled out), Apple HIG/Material Design 터치 가이드. 신뢰도 A.

중복 후보: Responsive-Web-Design 은 부모 개념(전체 전략), 본 페이지는 그 중 mobile-first 접근법 으로 분리 유지.

🕓 Changelog

• 2026-05-08 Phase 1 — 초기 stub.
• 2026-05-10 Manual cleanup — FULL 재작성. CWV 2024 (INP), container queries, 안전영역, srcset 등 modern 패턴 반영.