# Mobile First

> 모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.

- 층: 아카이브 (UI 패턴)
- ID: mobile-first
- 연도: 2010
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/mobile-first

## 정의

모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.

## 주요 특징

- 작은 화면 우선 설계
- 점진적 향상
- 터치 최적화
- 성능 우선
- 콘텐츠 우선

## 핵심 원칙

- 우선순위 명확화
- 점진적 개선
- 성능 최적화

## 컬러 시스템

터치 UI에 최적화된 색상. 모바일 소형 화면에서 가독성과 탭 정확도가 우선

### 색상 역할

- primary: CTA — 터치 타겟에서 충분히 눈에 띄는 채도
- background: 흰색 또는 연한 회색 — 밝은 환경 가독성
- text: 진한 색 — 야외 밝은 환경에서도 읽힘

### 색상 제약

- 색상 수 최소화 — 작은 화면에서 색 혼잡 금지
- 색상만으로 상태 구분 금지 — 아이콘+텍스트 병행

### 다크모드 전략

시스템 다크모드 자동 대응 (prefers-color-scheme)

### 대비 요구사항

WCAG AA 이상 — 밝은 야외 환경 고려해 AAA 권장

## 타이포그래피

- 폰트 성격: 가독성 최우선 산세리프. 소형 화면에서 읽히는 폰트
- 권장 폰트 수: 최대 1개
- 타입 스케일: 1.2 (Minor Third) — 소형 화면 제한적 공간

### 타이포그래피 제약

- body font-size 최소 16px — 작은 폰트는 모바일에서 읽기 어려움
- line-height 1.5 이상
- 터치 레이블 텍스트 최소 14px

## 설계 제약

### 하면 안 되는 것

- 터치 타겟 44×44px 미만 금지
- hover-only 인터랙션 금지 — 모바일에 hover 없음
- 복잡한 hover 메뉴 금지 — tap 기반 패턴으로

### 반드시 포함할 것

- 최소 44×44px 터치 타겟
- 스와이프 제스처 지원
- 하단 네비게이션 또는 접근성 높은 위치 CTA

### 모션 가이드

모션 간결하게 — 모바일 성능 고려. prefers-reduced-motion 지원 필수.

## 사용 사례

- 반응형 웹사이트
- PWA (프로그레시브 웹앱)
- 뉴스·콘텐츠 사이트
- 이커머스

## 추천 프로젝트 유형

- 이커머스
- 뉴스·콘텐츠 사이트
- PWA
- 글로벌 서비스

## 장단점

### 장점

- 전 세계 트래픽의 60% 이상이 모바일
- 콘텐츠 우선순위 명확화
- SEO에 유리 (Google 모바일 우선 색인)
- 성능 최적화 자연스럽게 달성

### 단점·한계

- 데스크톱 rich 기능을 나중에 추가하는 구조적 어려움
- 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생

## 자주 묻는 질문

### Q1. Mobile First이란 무엇인가요?

모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.

### Q2. Mobile First의 핵심 디자인 원칙은 무엇인가요?

Mobile First의 핵심 원칙은 우선순위 명확화, 점진적 개선, 성능 최적화입니다.

### Q3. Mobile First은 어떤 프로젝트에 적합한가요?

Mobile First은 반응형 웹사이트, PWA (프로그레시브 웹앱), 뉴스·콘텐츠 사이트, 이커머스, 이커머스, 뉴스·콘텐츠 사이트, PWA, 글로벌 서비스 등의 프로젝트에 적합합니다.

### Q4. Mobile First의 장단점은 무엇인가요?

장점으로는 전 세계 트래픽의 60% 이상이 모바일, 콘텐츠 우선순위 명확화, SEO에 유리 (Google 모바일 우선 색인), 성능 최적화 자연스럽게 달성이 있습니다. 단점으로는 데스크톱 rich 기능을 나중에 추가하는 구조적 어려움, 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생이 있습니다.

### Q5. Mobile First에서 색상은 어떻게 사용하나요?

터치 UI에 최적화된 색상. 모바일 소형 화면에서 가독성과 탭 정확도가 우선 색상 역할은 primary: CTA — 터치 타겟에서 충분히 눈에 띄는 채도, background: 흰색 또는 연한 회색 — 밝은 환경 가독성, text: 진한 색 — 야외 밝은 환경에서도 읽힘입니다. 주의사항: 색상 수 최소화 — 작은 화면에서 색 혼잡 금지, 색상만으로 상태 구분 금지 — 아이콘+텍스트 병행.

### Q6. Mobile First에 어울리는 폰트 스타일은 무엇인가요?

Mobile First에는 가독성 최우선 산세리프. 소형 화면에서 읽히는 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: body font-size 최소 16px — 작은 폰트는 모바일에서 읽기 어려움, line-height 1.5 이상.

### Q7. Mobile First 디자인에서 하면 안 되는 것은 무엇인가요?

Mobile First에서 피해야 할 것: 터치 타겟 44×44px 미만 금지, hover-only 인터랙션 금지 — 모바일에 hover 없음, 복잡한 hover 메뉴 금지 — tap 기반 패턴으로.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #4CAF50
- secondary: #2196F3
- accent: #FF9800
- background: #FFFFFF
- surface: #F5F5F5
- text: #212121
- textSecondary: #757575
- border: #E0E0E0

### 타이포그래피

- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 4px / md 8px / lg 16px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.10)
- shadow md: 0 3px 8px rgba(0,0,0,0.12)
- shadow lg: 0 8px 20px rgba(0,0,0,0.14)
- border: 1px solid #E0E0E0

### 컴포넌트 형태

- button: pill / hover scale / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: pill / solid
- icon: material / stroke 1.5 / size 24px
- layout: fluid / section compact
- animation: 200ms ease

## 관련 링크

### 관련 스타일

- [Component-Driven Design](https://ui.buildersgate.com/styles/component-driven)
- [Card-Based Design](https://ui.buildersgate.com/styles/card-design)
- [Progressive Disclosure](https://ui.buildersgate.com/styles/progressive-disclosure)

---

HTML 버전: https://ui.buildersgate.com/styles/mobile-first

이 문서는 https://ui.buildersgate.com/styles/mobile-first.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.