Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -2,149 +2,26 @@
|
||||
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
|
||||
status: duplicate
|
||||
canonical_id: wiki-2026-0508-모바일-퍼스트-mobile-first
|
||||
duplicate_of: "[[모바일 퍼스트(Mobile-First)]]"
|
||||
aliases: []
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [responsive-design, frontend, ux]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
verification_status: redirected
|
||||
tags: [duplicate]
|
||||
last_reinforced: 2026-05-20
|
||||
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).
|
||||
> **이 문서는 [[모바일 퍼스트(Mobile-First)]] 의 중복본입니다.** Canonical 문서로 redirect.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Responsive_Design]] · [[Frontend_Architecture]]
|
||||
- 변형: [[Mobile-First Approach]] · [[모바일 우선주의 (Mobile-First) 디자인]]
|
||||
- 응용: [[Progressive_Web_App]] · [[Mobile_Offline_First]]
|
||||
- Adjacent: [[모바일 퍼스트 인덱싱(Mobile-First Indexing)]] · [[Performance_Budget]]
|
||||
- 부모: [[모바일 퍼스트(Mobile-First)]] (canonical)
|
||||
|
||||
## 🤖 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 추가 |
|
||||
| 2026-05-20 | 중복 병합 — canonical 문서로 redirect |
|
||||
|
||||
Reference in New Issue
Block a user