# Layout
URL: /foundations/layout
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/foundations/layout.mdx

레이아웃은 제품의 콘텐츠를 구조화하고 일관된 사용자 경험을 제공하기 위한 시각적 뼈대입니다. SEED는 다양한 화면 밀도와 디바이스 환경에 대응할 수 있도록 유연한 그리드 시스템과 중단점(Breakpoint)을 제공합니다.

## Layout Types

사용자의 목적과 콘텐츠의 복잡도에 따라 두 가지 주요 레이아웃 유형을 제공합니다.

- **Dashboard Layout**: 판매자 센터, 광고주 센터와 같이 복잡한 데이터를 다루고 관리 기능이 강조되는 화면에 사용합니다.
- **Contents Layout**: 당근닷컴, 어바웃 당근, 채용 페이지 등 정보 전달이 목적인 서비스 페이지에 사용합니다.

![Dashboard Layout과 Contents Layout 두 유형을 비교한 예시 이미지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5e93e149-bec6-4d9b-8281-eeb7134e750b)

## 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) |

![Low / Middle / High Density 대시보드 레이아웃 예시 이미지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/927efc75-f714-4eeb-b167-9b43b842d843)

## Content Layout

12컬럼을 사용하여 시스템 정합성을 유지합니다.

- **Standard**: 가독성을 위해 특정 중단점(lg)에서 중앙 정렬(Centered)되는 것을 원칙으로 합니다.
- **Max-width**: 콘텐츠의 몰입감을 위해 기본 1040px을 권장하며, 커머스 검색 결과 등 넓은 탐색이 필요한 경우 1280px까지 확장하여 사용합니다.

![Max-width 1040px와 1280px Content Layout 비교 예시 이미지](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9aa361af-a352-429c-9c50-3ebf0889f66d)

## Grid anatomy

그리드 시스템을 구성하는 핵심 요소입니다.

- **Columns**: 콘텐츠가 배치되는 영역입니다. 화면 너비에 따라 개수가 조절됩니다.
- **Gutters**: 컬럼과 컬럼 사이의 간격입니다. SEED Dashboard 레이아웃은 일관되게 24px을 권장합니다.
- **Margins**: 콘텐츠 영역과 화면 끝 사이의 간격입니다. 기본 32px을 유지하여 시각적 여백을 확보합니다.

![Columns, Gutters, Margins로 구성된 그리드 구조 다이어그램](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/6be8b378-c066-495b-bf90-5ed52383813d)

## Responsive Behavior

SEED는 화면 크기 변화에 대응하기 위해 반응형 전략을 제공합니다.

- **Fluid (가변형)**: 중단점 사이의 구간에서 컬럼의 너비가 브라우저 너비에 따라 비율(%)로 늘어나거나 줄어듭니다.
- **Fixed & Centered (고정 및 중앙 정렬)**: 특정 중단점(예: Max-width 1040px)에 도달하면 레이아웃의 너비가 더 이상 늘어나지 않고 화면 중앙에 고정됩니다.

하나의 화면에 Fluid (가변형), Fixed (고정) 두 가지 형태를 혼합하여 사용할 수 있습니다.

![Fluid(가변형)와 Fixed & Centered(고정·중앙 정렬) 반응형 동작 비교 다이어그램](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/814e394f-c39d-4bc9-915e-ec78f47dea09)

## Breakpoint

SEED는 Mobile First 원칙을 따릅니다. 작은 화면에서 시작하여 화면이 커짐에 따라 레이아웃이 확장됩니다.

| Breakpoint | Viewport      | Columns | Gutters | Margins |
| ---------- | ------------- | ------- | ------- | ------- |
| base       | 0 - 479px     | base    | 16px    | 12px    |
| sm         | 480 - 767px   | sm      | 16px    | 12px    |
| md         | 768 - 1279px  | md      | 32px    | 24px    |
| lg         | 1280 - 1439px | lg      | 32px    | 24px    |
| xl         | 1440 + px     | xl      | 32px    | 24px    |

\*사이드바(Sidebar)는 md(768px) 이상에서 기본 노출되며, 768px 미만 환경에서는 Header 내의 메뉴로 통합됩니다.

## Column span and offset

콘텐츠의 너비와 시작 위치를 정의하여 유연한 레이아웃을 구성합니다.

- **Column Span**: 콘텐츠가 차지하는 컬럼의 개수입니다. 콘텐츠의 중요도에 따라 span 값을 조절하여 시각적 위계를 부여합니다.
- **Column Offset**: 콘텐츠가 시작되기 전 비워두는 컬럼의 개수입니다. 콘텐츠를 의도적으로 중앙에 배치하거나, 좌우 균형을 맞추기 위해 사용합니다.

![Column Span과 Column Offset에 따른 콘텐츠 배치 예시 다이어그램](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/05aa1e04-8e69-424a-8384-1616fde940dd)

## Layout Regions

화면의 역할을 명확히 구분하기 위해 기능적 영역(Region)을 정의합니다.

- **Header (GNB)**: 서비스 전체를 관통하는 최상위 탐색 영역입니다.
- **Side Navigation**: 특정 서비스나 대시보드 내의 하위 메뉴를 탐색합니다. md (768px) 미만에서는 모바일 최적화를 위해 GNB 내부로 통합되거나 숨겨집니다.
- **Main Content**: 실제 사용자가 상호작용하는 핵심 콘텐츠가 담기는 영역입니다. 레이아웃 유형에 따라 그리드가 적용됩니다.
- **Aside**: 우측에서 나타나는 보조 영역으로, 선택한 항목의 상세 정보나 설정 등 부가적인 작업을 수행할 때 사용합니다.

![Header(GNB), Side Navigation, Main Content, Aside 영역 구조 다이어그램](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9dd0c370-4aba-4c90-85af-beac0d5bb789)