# Mobile First — 디자인 스타일 가이드
## 기본 정보
- **ID**: mobile-first
- **카테고리**: ui-pattern
- **연도**: 2010
## 설명
모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
## 핵심 원칙
- 우선순위 명확화
- 점진적 개선
- 성능 최적화
## 주요 특징
- 작은 화면 우선 설계
- 점진적 향상
- 터치 최적화
- 성능 우선
- 콘텐츠 우선
## 컬러 시스템 가이드
터치 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 기능을 나중에 추가하는 구조적 어려움
- 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생
## 관련 스타일
- [component-driven](https://ui.buildersgate.com/styles/component-driven)
- [card-design](https://ui.buildersgate.com/styles/card-design)
- [progressive-disclosure](https://ui.buildersgate.com/styles/progressive-disclosure)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #4CAF50
- secondary: #2196F3
- accent: #FF9800
- background: #FFFFFF
- surface: #F5F5F5
- text: #212121
- textSecondary: #757575
- border: #E0E0E0
### 헤더
- background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%)
- textColor: #FFFFFF
- accentColor: #FF9800
### 타이포그래피
- fontFamily: Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.10)
- md: 0 3px 8px rgba(0,0,0,0.12)
- lg: 0 8px 20px rgba(0,0,0,0.14)
- xl: 0 16px 40px rgba(0,0,0,0.18)
### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 16px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E0E0E0
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s ease
### 애니메이션
- duration: 200ms
- easing: ease
### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=scale / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=material / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: fluid
- sectionSpacing: compact
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Mobile First이란 무엇인가요?
A: 모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
### Q: Mobile First의 핵심 디자인 원칙은 무엇인가요?
A: Mobile First의 핵심 원칙은 우선순위 명확화, 점진적 개선, 성능 최적화입니다.
### Q: Mobile First은 어떤 프로젝트에 적합한가요?
A: Mobile First은 반응형 웹사이트, PWA (프로그레시브 웹앱), 뉴스·콘텐츠 사이트, 이커머스, 이커머스, 뉴스·콘텐츠 사이트, PWA, 글로벌 서비스 등의 프로젝트에 적합합니다.
### Q: Mobile First의 장단점은 무엇인가요?
A: 장점으로는 전 세계 트래픽의 60% 이상이 모바일, 콘텐츠 우선순위 명확화, SEO에 유리 (Google 모바일 우선 색인), 성능 최적화 자연스럽게 달성이 있습니다. 단점으로는 데스크톱 rich 기능을 나중에 추가하는 구조적 어려움, 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생이 있습니다.
### Q: Mobile First에서 색상은 어떻게 사용하나요?
A: 터치 UI에 최적화된 색상. 모바일 소형 화면에서 가독성과 탭 정확도가 우선 색상 역할은 primary: CTA — 터치 타겟에서 충분히 눈에 띄는 채도, background: 흰색 또는 연한 회색 — 밝은 환경 가독성, text: 진한 색 — 야외 밝은 환경에서도 읽힘입니다. 주의사항: 색상 수 최소화 — 작은 화면에서 색 혼잡 금지, 색상만으로 상태 구분 금지 — 아이콘+텍스트 병행.
### Q: Mobile First에 어울리는 폰트 스타일은 무엇인가요?
A: Mobile First에는 가독성 최우선 산세리프. 소형 화면에서 읽히는 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: body font-size 최소 16px — 작은 폰트는 모바일에서 읽기 어려움, line-height 1.5 이상.
### Q: Mobile First 디자인에서 하면 안 되는 것은 무엇인가요?
A: Mobile First에서 피해야 할 것: 터치 타겟 44×44px 미만 금지, hover-only 인터랙션 금지 — 모바일에 hover 없음, 복잡한 hover 메뉴 금지 — tap 기반 패턴으로.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=mobile-first
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=mobile-first&merged=true
Mobile First은 반응형 웹사이트, PWA (프로그레시브 웹앱), 뉴스·콘텐츠 사이트, 이커머스, 이커머스, 뉴스·콘텐츠 사이트, PWA, 글로벌 서비스 등의 프로젝트에 적합합니다.
Mobile First의 장단점은 무엇인가요?
장점으로는 전 세계 트래픽의 60% 이상이 모바일, 콘텐츠 우선순위 명확화, SEO에 유리 (Google 모바일 우선 색인), 성능 최적화 자연스럽게 달성이 있습니다. 단점으로는 데스크톱 rich 기능을 나중에 추가하는 구조적 어려움, 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생이 있습니다.
Mobile First에서 색상은 어떻게 사용하나요?
터치 UI에 최적화된 색상. 모바일 소형 화면에서 가독성과 탭 정확도가 우선 색상 역할은 primary: CTA — 터치 타겟에서 충분히 눈에 띄는 채도, background: 흰색 또는 연한 회색 — 밝은 환경 가독성, text: 진한 색 — 야외 밝은 환경에서도 읽힘입니다. 주의사항: 색상 수 최소화 — 작은 화면에서 색 혼잡 금지, 색상만으로 상태 구분 금지 — 아이콘+텍스트 병행.
Mobile First에 어울리는 폰트 스타일은 무엇인가요?
Mobile First에는 가독성 최우선 산세리프. 소형 화면에서 읽히는 폰트 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: body font-size 최소 16px — 작은 폰트는 모바일에서 읽기 어려움, line-height 1.5 이상.
Mobile First 디자인에서 하면 안 되는 것은 무엇인가요?
Mobile First에서 피해야 할 것: 터치 타겟 44×44px 미만 금지, hover-only 인터랙션 금지 — 모바일에 hover 없음, 복잡한 hover 메뉴 금지 — tap 기반 패턴으로.