# Spacing

URL: /docs/foundation/spacing
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/docs/foundation/spacing.mdx

Spacing은 컴포넌트 혹은 콘텐츠 간의 간격을 표현합니다.

***

title: Spacing
description: Spacing은 컴포넌트 혹은 콘텐츠 간의 간격을 표현합니다.
-----------------------------------------------

디자인에서 간격은 시각적 균형과 사용자 경험을 향상시키는 중요한 요소입니다. 본 가이드는 일관성 있고 효과적인 간격 시스템을 구축하기 위한 지침을 제공합니다.

## Purpose

* **일관성 유지**: 모든 레이아웃과 컴포넌트에서 동일한 스케일을 사용하여 디자인의 통일감을 제공합니다.
* **모듈성**: 미리 정의된 스케일 값(예: dimension-x1, dimension-x2 등)을 통해 간격을 체계적으로 관리합니다.
* **가독성 및 사용자 경험 향상**: 적절한 여백을 통해 콘텐츠 간의 구분과 시각적 흐름을 개선합니다.

## Horizontal Spacing (수평 간격)

수평 간격은 요소들이 가로로 나란히 배치될 때 적용되는 공간을 의미합니다.
이 방식을 통해 디자이너와 개발자는 일관된 수평 간격을 쉽게 적용할 수 있으며,
전체적인 레이아웃 및 요소간의 균형을 효과적으로 유지할 수 있습니다.

### Nav to title

`nav-to-title`은 네비게이션 바 아래에 위치한 타이틀과 네비게이션 간의 간격을 정의합니다.

<Image src="/docs/foundation/spacing/nav-to-title.webp" alt="nav-to-title" />

### Component default

`component-default`는 디자인 시스템에서 컴포넌트의 기본 간격을 정의하는 토큰입니다.
이는 버튼간의 간격, 카드, 폼 등 다양한 컴포넌트의 내부 요소 간 간격이나 컴포넌트 간의 기본 간격으로 사용되어 디자인의 일관성을 유지하는 데 도움을 줍니다.

<Image src="/docs/foundation/spacing/component-default.webp" alt="component-default" />

## Vertical Spacing (수직 간격)

수직 간격은 요소들이 세로로 배치될 때 적용되는 공간을 의미합니다.
이는 레이아웃의 수직적 구조와 리듬을 결정하는 중요한 요소입니다.

### Global Gutter

`global-gutter`는 모든 서비스에서 화면 가장자리와 콘텐츠 사이의 간격을 일정하게 유지함으로써 디자인의 일관성을 확보하고, 사용자 경험을 향상시키는 핵심 간격입니다.
이를 통해 반응형 디자인 및 다양한 UI 컴포넌트 간의 균형 잡힌 간격 조정이 가능합니다.

<Image src="/docs/foundation/spacing/global-gutter.webp" alt="global-gutter" />

## Spacing Tokens

<TokenReference groups={["dimension"]} />