Design System

Layout

디바이스별 Column Grid 시스템을 정의합니다. Margin과 Gutter는 고정값이며, Column width는 해상도에 따라 비례적으로 변경됩니다.

Mobile

320~743px 범위의 6 Column Grid를 사용합니다. Landscape 모드에서는 Tablet Portrait 기준을 사용합니다.

Grid Spec

PropertyValue
화면 너비320 ~ 743px
컬럼 수6
Margin (좌/우)16px
Gutter16px
콘텐츠 영역 너비Responsive
6 Columns · Responsive
16px
16px
Gutter: 16px

Tablet

Portrait(744~1023px)과 Landscape(1024~1279px) 모두 6 Column Grid를 사용합니다. Normal과 Readable 레이아웃은 Margin 값만 다르며, 해상도가 변경되면 Margin과 Gutter는 유지되고 Column width는 동일한 비율로 변경됩니다.

Portrait (744 ~ 1023px)

PropertyValue
화면 너비744 ~ 1023px
컬럼 수6
Margin (좌/우)Normal: 20px / Readable: 84px
Gutter16px
콘텐츠 영역 너비Responsive
Normal · 6 Columns
20px
20px
Gutter: 16px
Readable · 6 Columns
84px
84px
Gutter: 16px

Landscape (1024 ~ 1279px)

PropertyValue
화면 너비1024 ~ 1279px
컬럼 수6
Margin (좌/우)Normal: 20px / Readable: 264px
Gutter24px
콘텐츠 영역 너비Responsive
Normal · 6 Columns
20px
20px
Gutter: 24px
Readable · 6 Columns
264px
264px
Gutter: 24px

Desktop

1280px 이상에서 12 Column Grid를 사용합니다. 콘텐츠 영역은 1344px로 설정되어 화면 중앙에 배치되며, 좌우 Margin 32px을 포함하여 실제 콘텐츠 너비는 1280px입니다.

Grid Spec

PropertyValue
화면 너비1280px 이상
컬럼 수12
Margin (좌/우)32px
Gutter32px
콘텐츠 영역 너비1344px
1344px Container · 12 Columns
32px
32px
Gutter: 32px

Base Spacing

4px 배수를 기본 단위로 사용하며, 2px는 최소 예외 값으로 허용합니다. Padding과 Margin 모두 Spacing 규칙을 따릅니다.

Spacing Units
2
4
8
12
16
20
24
28
32
36
40
44
48
52
56
RulePadding과 Margin 모두 Spacing 규칙을 따릅니다.

Layout Spacing

상단 네비게이션과 콘텐츠 영역 사이, 그리고 페이지 하단 여백에 대한 디바이스별 기준입니다.

Top Margin

구분텍스트 콘텐츠이미지 콘텐츠
Mobile32px20px
Tablet48px28px
PC64px40px

Bottom Margin

구분탭바/푸터 없음탭바/푸터 있음
Mobile80px60px
Tablet80px60px
PC120px80px