Spacing
간격 체계는 페이지 레이아웃과 UI 를 쉽게 만들고, 화면 전체에 일관된 리듬을 줘요.
Small · 0–8px
알림 3
아이콘과 텍스트 사이, 배지·아이콘 버튼·표 셀 안쪽, 입력 필드 여백
Medium · 12–24px
릴리스 노트버튼 안쪽, 카드 세로 간격, 큰 컴포넌트의 항목 사이
Large · 32–80px
페이지 섹션 사이, 페이지 상단과 헤더 사이 같은 레이아웃
8px 기본 단위
간격 체계는 8px 을 기본 단위로 해요. 모든 간격 값은 이 단위를 기준으로 정해져 있어서, 어떤 화면을 만들어도 같은 리듬이 생겨요. 일관된 간격은 반응형 화면과 이후 밀도 조절 기능의 바탕이 되기도 해요.
스케일
토큰 이름의 숫자는 기본 단위에 대한 백분율이에요. space.100 이 8px 이고, space.200 은 그 200% 인 16px, space.050 은 50% 인 4px 이에요. 스케일은 0px 부터 80px 까지예요.
| 토큰 | 값 | 막대 | 분류 |
|---|---|---|---|
| 0px(0rem) | Small | ||
| 2px(0.125rem) | Small | ||
| 4px(0.25rem) | Small | ||
| 6px(0.375rem) | Small | ||
| 8px(0.5rem) | Small | ||
| 12px(0.75rem) | Medium | ||
| 16px(1rem) | Medium | ||
| 20px(1.25rem) | Medium | ||
| 24px(1.5rem) | Medium | ||
| 32px(2rem) | Large | ||
| 40px(2.5rem) | Large | ||
| 48px(3rem) | Large | ||
| 64px(4rem) | Large | ||
| 80px(5rem) | Large |
<div className="flex flex-col gap-ds-100 p-ds-200">…</div>크기별 분류
| 분류 | 범위 | 쓰는 곳 |
|---|---|---|
| Small | space.0–space.100 (0–8px) | 작은 아이콘과 텍스트 사이, 배지·아이콘 버튼·표 셀 안쪽, 버튼 묶음 간격, 입력 필드 안쪽, 카드의 제목·설명·액션 사이, 트리거와 메뉴 사이 |
| Medium | space.150–space.300 (12–24px) | 버튼 안쪽, 섹션 메시지의 아이콘과 내용 사이, 카드 세로 간격, 큰 컴포넌트의 항목 사이 |
| Large | space.400–space.1000 (32–80px) | 페이지 섹션 사이, 페이지 상단과 헤더 사이 같은 레이아웃 |
시맨틱 간격
숫자 스케일 위에 쓰임새가 이름에 드러나는 토큰이 있어요. 의도가 분명해서 코드를 읽기 쉬워요.
Gap
나란히 놓이거나 쌓인 요소 사이의 간격이에요. gap-ds-gap-* 로 써요.
| 토큰 | 값 | 미리보기 | 설명 |
|---|---|---|---|
| 2px | 이슈 | 아주 밀접한 요소 사이의 가장 작은 간격Use for the smallest gaps between closely related elements. Do not use for component insets or dimensions. | |
| 4px | 이슈 | 밀접한 요소 사이의 아주 작은 간격Use for extra-small gaps between closely related elements. Do not use for component insets or dimensions. | |
| 6px | 이슈 | 아이콘과 텍스트처럼 관련 요소 사이의 작은 간격Use for small gaps between related elements, such as icons and text. Do not use for component insets or dimensions. | |
| 8px | 이슈 | 관련 요소 사이의 중간 간격Use for medium gaps between related elements in horizontal or vertical layouts. Do not use for component insets or dimensions. | |
| 12px | 이슈 | 요소 사이의 큰 간격Use for large gaps between elements in horizontal or vertical layouts. Do not use for component insets or dimensions. | |
| 16px | 이슈 | 요소 묶음 사이의 아주 큰 간격Use for extra-large gaps between elements or groups of related content. Do not use for component insets or dimensions. | |
| 24px | 이슈 | 관련 내용 묶음 사이의 가장 큰 간격Use for the largest gaps between groups of related content. Do not use for component insets or dimensions. |
Inset
표면과 그 안의 내용 사이에 네 방향 모두 같은 안쪽 여백이에요. p-ds-inset-* 로 써요.
| 토큰 | 값 | 미리보기 | 설명 |
|---|---|---|---|
| 4px | 내용 | 표면과 내용 사이의 가장 작은 안쪽 여백Use for the smallest equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 8px | 내용 | 아주 작은 안쪽 여백Use for extra-small equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 12px | 내용 | 작은 안쪽 여백Use for small equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 16px | 내용 | 중간 안쪽 여백Use for medium equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 20px | 내용 | 큰 안쪽 여백Use for large equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 24px | 내용 | 아주 큰 안쪽 여백Use for extra-large equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 32px | 내용 | 더 큰 안쪽 여백Use for extra-extra-large equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. | |
| 48px | 내용 | 가장 큰 안쪽 여백Use for the largest equal padding between a surface and its content on all sides. Do not use for gaps, margins, dimensions, or directional padding. |
음수 간격
컨테이너 안쪽 여백을 벗어나거나 요소를 살짝 겹칠 때 써요. 코드에서만 제공해요.
| 토큰 | 값 | Tailwind 예 |
|---|---|---|
| -2px | ||
| -4px | ||
| -6px | ||
| -8px | ||
| -12px | ||
| -16px | ||
| -20px | ||
| -24px | ||
| -32px |
레이아웃 원칙
- 비슷한 것끼리 같은 간격 — 같은 간격을 쓰면 표나 목록처럼 관련 항목이 하나로 읽혀요.
- 가까울수록 관련 있게 — 사람은 가까이 있는 요소를 한 묶음으로 봐요. 같은 흐름, 같은 동작에 속한 요소는 가깝게 둬요.
- 간격으로 위계 만들기 — 크고 주변 여백이 넓은 요소일수록 시선이 먼저 가요. 중요도에 따라 여백을 달리해요.
- 리듬 만들기 — 같은 간격을 반복하면 예측 가능한 리듬이 생기고, 간격을 바꾸면 시선이 머무는 지점이 생겨요.
- 눈으로 보정하기 — 시각적 무게가 다른 요소는 표준 간격만으로 균형이 안 맞을 수 있어요. 스케일 안에서 조금씩 조정해요.
Do· 관련 항목은 가깝게, 같은 간격으로
이슈 카드의 제목·담당자·상태는 gap-ds-gap-small 처럼 같은 작은 간격으로 묶어요.
Don't· 모든 요소에 같은 여백을 주지 마세요
섹션 사이와 항목 사이의 간격이 같으면 어디까지가 한 묶음인지 알기 어려워요.