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_Auto(인증)
  2. 02_ Onboarding(온보딩)
  3. 03_Home(홈)
  4. 04_Recommandation(추천)
  5. 05_ltinerary(일정)
  6. 06_Profile(프로필)
  7. 07_Responsive(반응형)
  8. 08_Components(컴포넌트)

페이지

1. Auto(인증 전체)

1.1 로그인 (mobile, tablet)

[status bar]

[logo]

[title]
- font: 24px bold 

[form]
- input_email
- input_password

[login button]

[social buttons]
- google
- naver
- apple
- kakao

[link]
- 회원가입 링크

[navigation bar]

[홈 표시기]

1.2 로그인(desktoop)