Mobile First
모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
- YEAR
- 2010
#4CAF50
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Mobile Navigation
모바일 우선 네비게이션
Mobile App
모바일에 최적화된 헤더 디자인
Touch-Optimized Buttons
터치에 최적화된 버튼 (최소 44x44px)
Stacked Layout
모바일에서는 세로로 쌓는 레이아웃
Image First
모바일에서는 이미지가 상단에 위치합니다.
Content Section
각 섹션이 전체 너비를 차지합니다.
Bottom Navigation
모바일 하단 네비게이션 바
Content Area
Mobile Form
모바일에 최적화된 입력 폼
Mobile Card List
스크롤 가능한 모바일 카드 리스트
Item Title
간단한 설명이 여기에 표시됩니다.
Another Item
모바일에서 쉽게 터치할 수 있습니다.
이웃 스타일
어디에 쓰나
사용 사례
- 반응형 웹사이트
- PWA (프로그레시브 웹앱)
- 뉴스·콘텐츠 사이트
- 이커머스
이런 프로젝트에 맞습니다
- 이커머스
- 뉴스·콘텐츠 사이트
- PWA
- 글로벌 서비스
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 우선순위 명확화
- 점진적 개선
- 성능 최적화
주요 특징
- 작은 화면 우선 설계
- 점진적 향상
- 터치 최적화
- 성능 우선
- 콘텐츠 우선
장점과 한계
장점
- 전 세계 트래픽의 60% 이상이 모바일
- 콘텐츠 우선순위 명확화
- SEO에 유리 (Google 모바일 우선 색인)
- 성능 최적화 자연스럽게 달성
한계
- 데스크톱 rich 기능을 나중에 추가하는 구조적 어려움
- 디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생
컬러 시스템
터치 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 터치 타겟
- 스와이프 제스처 지원
- 하단 네비게이션 또는 접근성 높은 위치 CTA
하지 말 것
- 터치 타겟 44×44px 미만 금지
- hover-only 인터랙션 금지 — 모바일에 hover 없음
- 복잡한 hover 메뉴 금지 — tap 기반 패턴으로
모션 — 모션 간결하게 — 모바일 성능 고려. prefers-reduced-motion 지원 필수.
자주 묻는 질문
Mobile First이란 무엇인가요?
모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
Mobile First의 핵심 디자인 원칙은 무엇인가요?
Mobile First의 핵심 원칙은 우선순위 명확화, 점진적 개선, 성능 최적화입니다.
Mobile First은 어떤 프로젝트에 적합한가요?
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 기반 패턴으로.