Antigravity Agent
151 lines
4.3 KiB
Markdown
151 lines
4.3 KiB
Markdown
---
|
|
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 추가 |
|