docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,180 @@
|
||||
---
|
||||
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: [frontend, responsive, css, mobile, design]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: css
|
||||
framework: tailwind
|
||||
---
|
||||
|
||||
# 모바일 퍼스트(Mobile-First)
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 작은 화면부터 design — 큰 화면 의 progressive enhancement"**. Luke Wroblewski (2009)가 제창, smallest viewport 기준 baseline CSS, larger breakpoint 의 `min-width` media query 의 progressive enhancement. 매 2026 의 mobile traffic 60%+ 환경의 default approach.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 vs Desktop-first
|
||||
| | Mobile-first | Desktop-first |
|
||||
|---|---|---|
|
||||
| Baseline | smallest viewport | largest viewport |
|
||||
| Media query | `min-width` (up) | `max-width` (down) |
|
||||
| Mindset | progressive enhancement | graceful degradation |
|
||||
| Default 2026 | ✓ | (legacy) |
|
||||
|
||||
### 매 3원칙 (Wroblewski)
|
||||
1. **Constraints force focus** — small screen 매 essential content prioritize.
|
||||
2. **Capabilities expand** — touch, GPS, camera 의 leverage.
|
||||
3. **Progressive enhancement** — base 의 small + add 의 large.
|
||||
|
||||
### 매 응용
|
||||
1. **Performance budget** — mobile network slow → minimal payload first.
|
||||
2. **Touch-first UX** — 44×44px tap target (Apple HIG), 48×48dp (Material).
|
||||
3. **Content hierarchy** — most important top, fold concept abandoned.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### 1. CSS mobile-first media query
|
||||
```css
|
||||
/* base — mobile (< 640px implicit) */
|
||||
.container {
|
||||
padding: 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* tablet ≥ 640px */
|
||||
@media (min-width: 640px) {
|
||||
.container { padding: 2rem; font-size: 16px; }
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
/* desktop ≥ 1024px */
|
||||
@media (min-width: 1024px) {
|
||||
.grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Tailwind mobile-first utilities
|
||||
```tsx
|
||||
// base 의 mobile, sm:/md:/lg: 의 enhancement
|
||||
export function Card() {
|
||||
return (
|
||||
<div className="p-4 sm:p-6 lg:p-8">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl">Title</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Item />
|
||||
<Item />
|
||||
<Item />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Container queries (modern 2026)
|
||||
```css
|
||||
.card-container {
|
||||
container-type: inline-size;
|
||||
container-name: card;
|
||||
}
|
||||
|
||||
.card { display: flex; flex-direction: column; }
|
||||
|
||||
@container card (min-width: 400px) {
|
||||
.card { flex-direction: row; }
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Responsive image (srcset)
|
||||
```html
|
||||
<img
|
||||
src="hero-mobile.webp"
|
||||
srcset="hero-mobile.webp 480w, hero-tablet.webp 1024w, hero-desktop.webp 1920w"
|
||||
sizes="(min-width: 1024px) 1920px, (min-width: 640px) 1024px, 100vw"
|
||||
alt="Hero"
|
||||
loading="lazy"
|
||||
/>
|
||||
```
|
||||
|
||||
### 5. Viewport meta + safe area
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
```
|
||||
```css
|
||||
.app {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. Touch-friendly tap targets
|
||||
```css
|
||||
button, a {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1rem;
|
||||
/* Apple HIG: 44×44pt minimum */
|
||||
}
|
||||
```
|
||||
|
||||
### 7. Performance: critical CSS inline
|
||||
```html
|
||||
<head>
|
||||
<style>/* critical above-fold CSS, < 14KB */</style>
|
||||
<link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
|
||||
</head>
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| New project 2026 | mobile-first default. |
|
||||
| Legacy desktop site | gradual migration via container queries. |
|
||||
| Internal tool (desktop only) | desktop-first 도 OK 매 — but mobile-first 매 future-proof. |
|
||||
| Component library | container queries > viewport media queries (component reusability). |
|
||||
|
||||
**기본값**: Tailwind mobile-first utilities + container queries 매 component-level.
|
||||
|
||||
## 🔗 Graph
|
||||
- 변형: [[컨테이너 쿼리 (Container Queries)]]
|
||||
- 응용: [[CSS_Architecture_and_Styling|Tailwind CSS]]
|
||||
- Adjacent: [[Core Web Vitals Optimization (INP, LCP, CLS)|Core Web Vitals]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 새 web project, e-commerce, content site, public-facing app, PWA.
|
||||
**언제 X**: desktop-only enterprise tool 의 absolute desktop-first 가 효율적인 case (rare).
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`max-width` 만 의 의존**: 매 reverse mobile-first defeats purpose.
|
||||
- **고정 px 의 layout**: rem/em/% 의 use.
|
||||
- **Hover-only interactions**: touch 의 hover 없음 — tap fallback 필수.
|
||||
- **Fold obsession**: 매 mobile 의 scrolling natural — fold 없음.
|
||||
- **Tap target < 44px**: thumb miss-tap.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Wroblewski "Mobile First" 2011, Google Web.dev 2026, MDN responsive design).
|
||||
- 신뢰도 A.
|
||||
- Canonical 매 [[모바일 퍼스트(Mobile-First)]] — 매 [[모바일 우선주의 (Mobile-First) 디자인]], [[모바일 퍼스트 및 다양한 디바이스 환경을 위한 반응형 레이아웃 구축]] redirect 매 here.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — canonical full content + 7 patterns (CSS, Tailwind, container queries) |
|
||||
Reference in New Issue
Block a user