Layout

시각 요소와 정보를 효과적으로 전달하기 위한 배치 설계입니다. 모든 스크린과 컴포넌트 사이의 Column과 Margin을 정의해 일관성 있는 구조를 제공합니다.

Grid

모든 화면 크기에서 일정한 6/12열 그리드 구조를 따릅니다. 구성 요소와 레이아웃 작업 시 이 그리드를 유지하면 디자인 전반에 일관된 구조를 제공할 수 있습니다. 교보문고는 PC/MO 디바이스 기준 User-Agent를 기반으로 적응형으로 설계되었습니다.

Grid
PC/LaptopMobile/Tablet
모든 pc기기, 노트북모든 모바일(휴대용)기기 + 태블릿포함
저해상도 PC (ex.맥북 13인치, 1440*900)에서는 PC 화면으로 표시됩니다.고해상도 기기 (ex.아이패드 프로 1024*1366)에서는 모바일 화면으로 표시됩니다.

Grid best practices

Grid best practices

Spacing rule

컴포넌트 간의 간격에는 스페이싱 규칙을 사용해야 하며, 컴포넌트 내부에서의 스페이싱은 권장 사항입니다. 스페이싱의 기본 단위는 4의 배수를 기준으로 합니다. spacing-50의 경우 예외적으로 최소 간격 크기인 2px도 제공됩니다.

Spacing design tokenSize unit
$spacing-502px
$spacing-1004px
$spacing-2008px
$spacing-30012px
$spacing-40016px
$spacing-50020px
$spacing-60024px
$spacing-70028px
$spacing-80032px
$spacing-90036px
$spacing-100040px
$spacing-110044px
$spacing-120048px
$spacing-130052px
$spacing-140060px
$spacing-150072px
© KYOBO BOOK CENTRE교보문고 바로가기