Spacing
8point Grid
G마켓 디자인 시스템은 8-Point Grid를 사용합니다. 주요 디바이스의 스크린 사이즈는 8로 나누어떨어지며 1.5배수 시 렌더링 이슈가 최소화됩니다.
Size Unit
스페이싱의 기본 단위는 4와 8의 배수에 기반한 8가지로 규정하여 사용합니다. 8의 배수는 가장 큰 기본 배수이며 8이 포함하고 있는 2와 4의 배수도 사용 가능합니다.
| Spacing | px |
|---|---|
| Spacing-xxxs | 2px |
| Spacing-xxs | 4px |
| Spacing-xs | 8px |
| Spacing-s | 12px |
| Spacing-m | 16px (base size) |
| Spacing-l | 20px |
| Spacing-xl | 24px (base size) |
| Spacing-xxl | 32px |
| Spacing-xxxl | 40px |
Page
페이지의 양옆 마진 16을 기본으로 사용합니다. 간격 값은 8의 배수를 기본으로 합니다. 필요시 짝수 크기를 추가해 유연하게 사용할 수 있습니다.
Page with Full Footer
Footer 전체형은 홈, 마이 페이지에서 사용됩니다. Footer 전체형 내 G마켓 로고와 Bottom Navigation 간 간격 값 64를 기본으로 사용합니다.
Page with Short Footer
Footer 축약형은 상품 상세 페이지, 결제하기, 장바구니 페이지에서 사용됩니다. Footer 축약형 내 텍스트 끝과 Full Width Button 간 간격 값 16을 기본으로 사용합니다.
Template
템플릿과 템플릿 간 간격은 0을 기본으로 사용합니다. 템플릿은 베이직과 카드, 2가지 유형으로 나뉘며 베이직을 기본으로 사용합니다. 템플릿의 유형에 따라 스페이싱 단위를 적용하며, 템플릿의 높이 값이 8의 배수로 떨어지는 것을 권장합니다.
Card Template
카드 템플릿은 템플릿 간 간격 12를 기본으로 사용합니다.
Basic Template within Margin
하나의 베이직 템플릿은 상하 마진 24 포함을 기본으로 합니다.
Basic Template with Divider
템플릿과 템플릿 사이에 디바이더가 사용되는 경우, 템플릿과 디바이더 간 간격 0을 기본으로 합니다. 디바이더는 하나의 컴포넌트로써 템플릿과 템플릿 사이에 사용됩니다.
Component
템플릿을 구성하는 서로 다른 컴포넌트 간 간격은 상하 16을 기본으로 사용합니다. 컴포넌트의 높이 값이 8의 배수로 떨어지는 것을 권장합니다. 8보다 작은 높이 값의 경우 2와 4의 배수로 떨어지는 것을 권장합니다.
Component Group with Heading
템플릿을 구성하고 있는 Heading과 Component Group 간 상하 간격은 16을 기본으로 사용합니다.
