Layout & Breakpoint
| 디바이스 |
너비(width) |
컬럼(column) |
마진(margin) |
거터(gutter, 간격) |
| Mobile |
320px 이상 |
4 |
16px |
16px |
| Tablet |
768px 이상 |
8 |
24px |
20px |
| Desktop |
1024px 이상 |
12 |
40~120px |
24px |
Spacing System
- 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 → 4의 배수
Auto Layout 기본 규칙
| 속성 |
값 |
| Direction |
Vertical(기본) |
| Padding |
16~24px |
| Gap |
8~24px |
| Width |
Fill container |
| Height |
Hug contents |
피그마 페이지 구조
- 01_Auth(인증)
- 02_Onboarding(온보딩)
- 03_Home(홈)
- 04_Recommandation(추천)
- 05_Itinerary(일정)
- 06_Profile(프로필)
- 07_Responsive(반응형)
- 08_Components(컴포넌트)
페이지