# Mobile First — 디자인 스타일 가이드
## 기본 정보
- **ID**: mobile-first
- **카테고리**: ui-pattern
- **연도**: 2010
## 설명
모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
## 핵심 원칙
- 우선순위 명확화
- 점진적 개선
- 성능 최적화
## 주요 특징
- 작은 화면 우선 설계
- 점진적 향상
- 터치 최적화
- 성능 우선
- 콘텐츠 우선
## 사용 사례
- 반응형 웹사이트
- 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
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=mobile-first
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=mobile-first&merged=true
Mobile First
모바일 화면부터 디자인하여 점진적으로 확대하는 접근 방식입니다.
주요 특징
- 작은 화면 우선 설계
- 점진적 향상
- 터치 최적화
- 성능 우선
- 콘텐츠 우선
장단점
장점
- +전 세계 트래픽의 60% 이상이 모바일
- +콘텐츠 우선순위 명확화
- +SEO에 유리 (Google 모바일 우선 색인)
- +성능 최적화 자연스럽게 달성
단점 / 한계
- −데스크톱 rich 기능을 나중에 추가하는 구조적 어려움
- −디자이너가 데스크톱을 더 친숙하게 생각하면 마찰 발생
적합한 사용처
사용 사례
- 반응형 웹사이트
- PWA (프로그레시브 웹앱)
- 뉴스·콘텐츠 사이트
- 이커머스
이런 프로젝트에 추천
이커머스뉴스·콘텐츠 사이트PWA글로벌 서비스
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Mobile Navigation
모바일 우선 네비게이션
Touch-Optimized Buttons
터치에 최적화된 버튼 (최소 44x44px)
Stacked Layout
모바일에서는 세로로 쌓는 레이아웃
Image First
모바일에서는 이미지가 상단에 위치합니다.
Content Section
각 섹션이 전체 너비를 차지합니다.
Bottom Navigation
모바일 하단 네비게이션 바
Mobile Form
모바일에 최적화된 입력 폼
Mobile Card List
스크롤 가능한 모바일 카드 리스트
Item Title
간단한 설명이 여기에 표시됩니다.
Tag
Another Item
모바일에서 쉽게 터치할 수 있습니다.
New