Layout
시각 요소와 정보를 효과적으로 전달하기 위한 배치 설계입니다. 모든 스크린과 컴포넌트 사이의 Column과 Margin을 정의해 일관성 있는 구조를 제공합니다.Grid
Grid
모든 화면 크기에서 일정한 6/12열 그리드 구조를 따릅니다. 구성 요소와 레이아웃 작업 시 이 그리드를 유지하면 디자인 전반에 일관된 구조를 제공할 수 있습니다. 교보문고는 PC/MO 디바이스 기준 User-Agent를 기반으로 적응형으로 설계되었습니다.
| PC/Laptop | Mobile/Tablet | |
|---|---|---|
| 모든 pc기기, 노트북 | 모든 모바일(휴대용)기기 + 태블릿포함 | |
| 저해상도 PC (ex.맥북 13인치, 1440*900)에서는 PC 화면으로 표시됩니다. | 고해상도 기기 (ex.아이패드 프로 1024*1366)에서는 모바일 화면으로 표시됩니다. | |
Grid best practices
Grid best practices
Spacing rule
Spacing rule
컴포넌트 간의 간격에는 스페이싱 규칙을 사용해야 하며, 컴포넌트 내부에서의 스페이싱은 권장 사항입니다. 스페이싱의 기본 단위는 4의 배수를 기준으로 합니다. spacing-50의 경우 예외적으로 최소 간격 크기인 2px도 제공됩니다.
| Spacing design token | Size unit | |
|---|---|---|
| $spacing-50 | 2px | |
| $spacing-100 | 4px | |
| $spacing-200 | 8px | |
| $spacing-300 | 12px | |
| $spacing-400 | 16px | |
| $spacing-500 | 20px | |
| $spacing-600 | 24px | |
| $spacing-700 | 28px | |
| $spacing-800 | 32px | |
| $spacing-900 | 36px | |
| $spacing-1000 | 40px | |
| $spacing-1100 | 44px | |
| $spacing-1200 | 48px | |
| $spacing-1300 | 52px | |
| $spacing-1400 | 60px | |
| $spacing-1500 | 72px | |
| Spacing design token | Size unit | |
|---|---|---|
| $spacing-50 | 2px | |
| $spacing-100 | 4px | |
| $spacing-200 | 8px | |
| $spacing-300 | 12px | |
| $spacing-400 | 16px | |
| $spacing-500 | 20px | |
| $spacing-600 | 24px | |
| $spacing-700 | 28px | |
| Spacing design token | Size unit | |
|---|---|---|
| $spacing-800 | 32px | |
| $spacing-900 | 36px | |
| $spacing-1000 | 40px | |
| $spacing-1100 | 44px | |
| $spacing-1200 | 48px | |
| $spacing-1300 | 52px | |
| $spacing-1400 | 60px | |
| $spacing-1500 | 72px | |
© KYOBO BOOK CENTRE교보문고 바로가기