Spacing

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

PurposeCopy Anchor Link

• 일관성 유지 — 모든 레이아웃과 컴포넌트에서 같은 스케일을 사용해 디자인의 통일감을 줘요.
• 모듈성 — 미리 정의한 스케일 값(x1, x2 …)으로 간격을 체계적으로 관리해요.
• 가독성과 사용자 경험 향상 — 적절한 여백으로 콘텐츠 사이의 구분과 시각적 흐름을 개선해요.

Dimension ScaleCopy Anchor Link

$dimension.x* 는 4px 단위를 기본으로 하는 크기 스케일이에요. x4 는 4 × 4 = 16px 이고, x1_5 처럼 밑줄은 소수점(1.5)을 뜻해요. 간격뿐 아니라 너비·높이·아이콘 크기에도 같은 스케일을 사용해요.

<div className="flex gap-x2 p-x4">
  <span className="size-x6" />
</div>

시맨틱 간격Copy Anchor Link

Horizontal Spacing (수평 간격)Copy Anchor Link

수평 간격은 요소들이 가로로 나란히 배치될 때 적용되는 공간이에요. 일관된 수평 간격으로 전체 레이아웃과 요소 사이의 균형을 효과적으로 유지할 수 있어요.

Global Gutter — global-gutter 는 모든 서비스에서 화면 가장자리와 콘텐츠 사이의 간격을 일정하게 유지하는 핵심 간격이에요. 반응형 디자인과 여러 UI 컴포넌트 사이의 균형 잡힌 간격 조정을 가능하게 해요. 안전 영역이 있는 화면에서는 화면 가장자리가 아닌 안전 영역 경계부터 간격을 적용해요.

Between Chips — between-chips 는 Chip 사이의 수평 간격이에요.

Vertical Spacing (수직 간격)Copy Anchor Link

수직 간격은 요소들이 세로로 배치될 때 적용되는 공간이에요. 레이아웃의 수직 구조와 리듬을 결정해요.

Nav to title — nav-to-title 은 내비게이션 바 아래에 있는 타이틀과 내비게이션 사이의 간격이에요.

Component default — component-default 는 컴포넌트 사이의 기본 간격이에요. 별도 간격 토큰이 정의되지 않은 버튼, 카드, 폼 등 컴포넌트 사이에 사용해 일관성을 유지해요.

Between text — between-text 는 제목과 설명처럼 텍스트 요소 사이의 간격이에요.

Screen bottom — screen-bottom 은 스크롤 화면 하단에 남기는 여백이에요.

Spacing TokensCopy Anchor Link