Layout & Breakpoint
| 디바이스 |
너비(width) |
컬럼(column) |
마진(margin) |
거터(gutter) |
| Mobile |
320px / 375 px 이상 |
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 ※8의 배수가 정석이지만 작은 단위를 위해 4의 배수로
Auto Layout 기본 가이드
| 속성 |
값 |
| Direction |
Vertical (기본) |
| Padding |
16 ~ 24px |
| Gap |
8 ~ 24px |
| Width |
Fill container |
| Height |
Hug contents |
피그마 페이지 구조
- 01_Auth(인증)
- 02_Onboarding(온보딩)
- 03_Input-1 (장르 선택)
- 04_Input-2 (키워드 입력)
- 05_Home(홈)
- 06_Profile(프로필)
- 07_Responsive(반응형)
- 08_Components(컴포넌트)
페이지
1. Auth(인증 전체)
1.1 로그인 (Mobile, Tablet)