Layout & Breakpoint

디바이스 너비 (width) 컬럼 (column) 마진 (margin) 거터 (gutter)
Mobile 320px 이상 4 16px 16px
Tablet 768px 이상 8 24px 20px
Desktop 1024px 이상 12 40~120px 24px

Spacing System

Auto Layout 기본 규칙

속성 값
Direction Vertical (기본)
Padding 16~24px
Gap 8~24px
Width Fill container
height Hug contents

피그마 페이지 구조

  1. 01_Auth(인증)
  2. 02_Onboarding(온보딩)
  3. 03_Home(홈)
  4. 04_Recommendation(추천)
  5. 05_Itinerary(일정)
  6. 06_Profile(프로필)
  7. 07_Responsive(반응형)
  8. 08_Components(컴포넌트)

페이지

1. Auth (인증 전체)

1.1 로그인(Mobile, Tablet)

[Status bar]

[Logo]

[Title]
- font: 24px bold

[Form]
- Input_Email
- Input_Passward

[Login Button]

[Social Buttons]
- Google
- Apple
- Naver
- Kakao
- Facebook

[Link]
- 회원가입 링크

[Footer]

[Navigation bar]

[홈 표시기]

1.2 로그인 (Desktop)