Layout
레이아웃은 제품의 콘텐츠를 구조화하고 일관된 사용자 경험을 제공하기 위한 시각적 뼈대예요. 다양한 화면 밀도와 기기 환경에 대응하는 그리드 시스템과 중단점(Breakpoint)을 제공해요.
Layout Types
사용자의 목적과 콘텐츠의 복잡도에 따라 두 가지 레이아웃 유형을 제공해요.
- Dashboard Layout — 판매자 센터, 광고주 센터처럼 복잡한 데이터를 다루고 관리 기능이 강조되는 화면에 사용해요.
- Contents Layout — 서비스 소개, 공지, 채용 페이지처럼 정보 전달이 목적인 페이지에 사용해요.
Dashboard Layout
대시보드 레이아웃은 화면의 복잡도와 정보량에 따라 세 가지 밀도로 나눠요.
- Low Density — 간단한 설정 창이나 대시보드 요약
- Middle Density (base) — 일반적인 관리 도구와 데이터 목록
- High Density — 대량의 데이터 시각화와 편집 도구
| Density | Grid Type | Column | Gutter | Margins | Max-width |
|---|---|---|---|---|---|
| Low | Centered | 8 | 24px | 32px | 720px |
| Middle (base) | Centered | 12 | 24px | 32px | 1040px |
| High | Fluid | Full-width | - | 32px | 1040px (min) |
Content Layout
12컬럼을 사용해 시스템 정합성을 유지해요.
- Standard — 가독성을 위해 특정 중단점(lg)에서 중앙 정렬(Centered)하는 것을 원칙으로 해요.
- Max-width — 콘텐츠 몰입감을 위해 기본 1040px을 권장하고, 커머스 검색 결과처럼 넓은 탐색이 필요하면 1280px까지 확장해요.
Grid anatomy
Margin 32px12 Columns · Gutter 24pxMargin 32px
- Columns — 콘텐츠가 배치되는 영역이에요. 화면 너비에 따라 개수가 조절돼요.
- Gutters — 컬럼과 컬럼 사이의 간격이에요. Dashboard 레이아웃은 일관되게 24px을 권장해요.
- Margins — 콘텐츠 영역과 화면 끝 사이의 간격이에요. 기본 32px을 유지해 시각적 여백을 확보해요.
Responsive Behavior
- Fluid (가변형) — 중단점 사이 구간에서 컬럼 너비가 브라우저 너비에 따라 비율(%)로 늘어나거나 줄어들어요.
- Fixed & Centered (고정 및 중앙 정렬) — 특정 중단점(예: Max-width 1040px)에 도달하면 레이아웃 너비가 더 늘어나지 않고 화면 중앙에 고정돼요.
한 화면에 Fluid와 Fixed 두 형태를 섞어 쓸 수 있어요.
Breakpoint
Mobile First 원칙을 따라요. 작은 화면에서 시작해 화면이 커질수록 레이아웃이 확장돼요.
base0px+
sm480px+
md768px+
lg1280px+
xl1440px+
지금 화면 너비는 —px
| Breakpoint | Viewport | Gutters | Margins |
|---|---|---|---|
| base | 0 - 479px | 16px | 12px |
| sm | 480 - 767px | 16px | 12px |
| md | 768 - 1279px | 32px | 24px |
| lg | 1280 - 1439px | 32px | 24px |
| xl | 1440 + px | 32px | 24px |
사이드바(Sidebar)는 md(768px) 이상에서 기본으로 보이고, 768px 미만에서는 Header 안의 메뉴로 통합돼요.
모바일 화면의 좌우 여백
모바일 앱 화면의 좌우 여백은 그리드 Margin 대신 $dimension.spacing-x.global-gutter(16px)를 사용해요. 자세한 내용은 Spacing 을 참고해요.
Column span and offset
- Column Span — 콘텐츠가 차지하는 컬럼의 개수예요. 중요도에 따라 span 값을 조절해 시각적 위계를 부여해요.
- Column Offset — 콘텐츠가 시작되기 전 비워두는 컬럼의 개수예요. 콘텐츠를 의도적으로 중앙에 두거나 좌우 균형을 맞출 때 사용해요.
Layout Regions
Header (GNB)
Side Navigation
Main Content
Aside
- Header (GNB) — 서비스 전체를 관통하는 최상위 탐색 영역이에요.
- Side Navigation — 특정 서비스나 대시보드 안의 하위 메뉴를 탐색해요. md(768px) 미만에서는 GNB 안으로 통합되거나 숨겨져요.
- Main Content — 사용자가 실제로 상호작용하는 핵심 콘텐츠 영역이에요. 레이아웃 유형에 따라 그리드가 적용돼요.
- Aside — 오른쪽에 나타나는 보조 영역으로, 선택한 항목의 상세 정보나 설정 등 부가적인 작업에 사용해요.