Prev
Back
**Header**와 **Footer**를 제외한 나머지를 Contents 영역으로 정의합니다.
Contents 영역은 Container Padding 내부에 배치합니다.
디바이스 별, 컨텐츠 영역 하단 컴포넌트의 Bottom Margin을 정의합니다.
랜딩페이지와 같이, 페이지 내부에서 완성된 Box 형태로 div가 나뉘는 경우에는 Bottom Margin을 적용하지 않고, Footer와 연결시켜 배치합니다.
Container Padding 15px
Bottom 100px
Container Padding 15px
Bottom 50px
Container Padding 16px
Bottom 30px
Main Text, Example 단위의 컴포넌트 그룹 등 시스템 전반의 컨텐츠에서 활용되는 Spacing 정책을 정의합니다.
해당 페이지에선 컴포넌트 간 위 아래 간격의 Vertical Spacing 만 정의합니다.
반응형 정책에 따라 가로 너비 및 간격은 달라질 수 있습니다.
Spacing 1 부터 Spacing 9 까지 9단계 정책을 활용합니다.
전체 위계에서, 작은 단위의 컴포넌트 그룹에 작은 숫자의 Spacing을 적용합니다.
Spacing 4 까지는 5px, Spacing 6 까지는 10px, Spacing 9 까지는 20px 단위로 증가하며 적용됩니다.
컴포넌트 배치 구조의 위계에 따라, 가장 작은 단위부터 오름차순으로 Spacing을 활용합니다.
Spacing 1 ,Spacing 2 , Spacing 3 과 같이 꼭 순차적으로 적용하지 않고, Spacing 2 ,Spacing 4 , Spacing 5 순으로 아래와 같이 단계를 건너 뛰어 적용할 수 있습니다.
아래와 같이 위계(Hierarchy Level)에 어긋나는 순서로는 Spacing을 사용하지 않습니다.
연결 묶음이 불명확한 디자인에서는 '일일문제'가 어느 아이콘에 해당하는지 확인하기 어려움.
위계가 가장 낮은 Hierarchy Level 1 간격에 Spacing 5 를 적용했을 경우, 그보다 구조적으로 상위 위계인 Hierarchy Level 2 간격에는 5 이상의 Spacing 정책을 적용해야 합니다.
그렇지 않을 경우 아래와 같이 컴포넌트 그룹에서, 그룹 간 연결 묶음이 불명확해져 UX적인 혼란을 야기할 수 있습니다.
컴포넌트 내부에서 Size 또는 Type이 다른 두 가지 이상의 텍스트가 함께 쓰일 때, 글자 사이의 Spacing을 정의합니다.
Text 관련 기타 정책은 Typography 페이지에서 설명합니다.
Size가 다른 텍스트가 함께 쓰일 때, 하단의 Spacing 정책을 적용합니다.
Extra Large - Large 0px
Large - Default 0px
Default - Small 5px
Title 과 Text 타입의 글자가 함께 쓰일 때, 하단의 Spacing 정책을 적용합니다.
Extra Large Title - Text 10px
Large Title - Text 5px
Default Title - Text 5px
Small Title - Text 3px
Mobile 환경의 Category Menu, Sub Menu 또는 마이페이지 하단 등에서 서비스 이용약관과 같이 페이지 이동 형태로 활용되는 List Group의 Spacing을 정의합니다.
List Height 60px
Spacing 0px
이용약관동의 등과 같이 Check Box 등의 Button 과 함께 쓰이는 List Group의 Spacing을 정의합니다.
List Height 50px
Spacing 10px
Infomation 요소로, 리스트 구분 역할을 하는 Icon을 활용하는 List Group의 경우, 아래와 같은 Spacing 정책을 적용합니다.
List Height 유동적
Spacing 10px
Text Input 컴포넌트 내부에서 Title, Info Text 등의 각 요소 간에는, Type에 관계없이 10px의 ****Spacing을 적용합니다.
List Height 40px
Spacing 10px
