---
id: wiki-2026-0508-모바일-퍼스트-mobile-first
title: 모바일 퍼스트(Mobile First)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Mobile-First, Mobile First Design]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [responsive-design, frontend, ux]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: css
  framework: tailwind-3
---

# 모바일 퍼스트(Mobile First)

## 매 한 줄
> **"매 small screen 으로 시작, progressively enhance"**. Luke Wroblewski 가 2009 에 명명. 매 2026 에 mobile traffic 이 글로벌 web traffic 의 ~62%, 매 Google mobile-first indexing 의 default — 매 desktop-first 는 legacy 결정.

## 매 핵심

### 매 원칙
- **Constraint-first design**: 매 small viewport 가 제일 어려운 case → 매 먼저 풀면 desktop 은 자동.
- **Content priority**: 매 small screen 에서 매 essential content 만 → 매 information architecture 강제.
- **Performance budget**: 매 mobile network (3G/4G) 가정 → 매 KB 단위 절약.

### 매 CSS 전략
- min-width media query (not max-width).
- mobile = base styles, desktop = enhancement.

### 매 응용
1. Tailwind / Bootstrap 의 default approach.
2. PWA 의 Performance budget design.
3. Email template (Outlook 가 desktop 강제 때문에 fallback 필요).

## 💻 패턴

### Mobile-First CSS
```css
/* Base = mobile */
.card {
  padding: 1rem;
  font-size: 16px;
}

/* Tablet enhancement */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
}

/* Desktop enhancement */
@media (min-width: 1024px) {
  .card { padding: 2rem; font-size: 18px; }
}
```

### 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>
```

### 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>
```

### Touch-First Interaction
```css
button {
  min-height: 44px; /* Apple HIG, also covers Material 48dp */
  min-width: 44px;
  padding: 0.75rem 1rem;
}
```

### Container Queries (2026)
```css
/* Modern alternative — component responds to its container, not viewport */
.card-container {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .card { display: grid; grid-template-columns: 1fr 2fr; }
}
```

### 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 추가 |