Layout

Layout Types

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

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

Dashboard Layout

대시보드 레이아웃은 화면의 복잡도와 정보량에 따라 세 가지 밀도로 구분됩니다.

• Low Density: 간단한 설정 창이나 대시보드 요약
• Middle Density (base): 일반적인 관리 도구 및 데이터 목록
• High Density: 대량의 데이터 시각화 및 편집 도구

Content Layout

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

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

Grid anatomy

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

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

Responsive Behavior

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

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

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

Breakpoint

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

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

Column span and offset

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

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

Layout Regions

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

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