Spacing
컴포넌트와 콘텐츠 사이의 간격
간격은 요소 사이의 공간으로 묶음과 흐름을 만든다. groo 는 당근 SEED 의 dimension 스케일(2px 단위 19단계)과, 자리마다 이름을 붙인 역할 간격을 쓴다.
목적
- 일관성 — 모든 화면과 컴포넌트가 같은 눈금을 쓴다.
- 모듈성 — 값 대신 이름(
spacing-x4)으로 간격을 고른다. 값이 바뀌어도 부르는 자리는 그대로다. - 가독성 — 여백으로 콘텐츠의 묶음과 흐름을 나눈다.
역할 간격
자리에 이름을 붙인 간격이다. 값은 아래 눈금 위에 있다.
가계부
9월 지출
24
24
global-gutter24px가계부
20
9월 지출
지난달보다 12% 적게 썼어요
nav-to-title20px12
component-default12px식비
교통
쇼핑
8between-chips8px점심 · 김밥천국
식비 · 카드 · 오늘 12:40
6between-text6px56
screen-bottom56px| 토큰 | 값 | 방향 | 쓰는 곳 |
|---|---|---|---|
spacing-global-gutter | 24px · spacing-x6 | 수평 | 화면 가장자리와 콘텐츠 사이. 모든 화면에서 같게 둔다 |
spacing-between-chips | 8px · spacing-x2 | 수평 | 나란히 놓인 칩 사이 |
spacing-component-default | 12px · spacing-x3 | 수직 | 따로 정한 간격이 없는 컴포넌트 사이 |
spacing-between-text | 6px · spacing-x1_5 | 수직 | 제목과 설명처럼 붙어 있는 글 요소 사이 |
spacing-nav-to-title | 20px · spacing-x5 | 수직 | 상단 내비게이션과 화면 제목 사이 |
spacing-screen-bottom | 56px · spacing-x14 | 수직 | 화면 맨 아래 여백. 마지막 콘텐츠가 탭바 · 홈 표시줄에 붙지 않게 |
spacing-global-gutter는 SEED(16px)와 달리 24px 이다. groo 앱의 화면 좌우 여백 규칙(2026-09-14, 본문 24)을 따른다 — 주간 띠 · 캘린더 격자 안 칸의 인셋 · 카테고리 탭 바의 전폭은 의도한 예외다.- 웹에서 768px 이상의 페이지 좌우 여백은 Layout 의
layout-margin(32px)이다. 768 미만은spacing-global-gutter를 쓴다. - 노치 · 홈 표시줄처럼 안전 영역이 있는 화면에서는 화면 끝이 아니라 안전 영역 경계부터 잰다. Desk 앱은 SafeArea, 웹은
env(safe-area-inset-*)로 이미 그렇게 한다.
간격 눈금
x0_52pxx14pxx1_56pxx28pxx2_510pxx312pxx3_514pxx416pxx4_518pxx520pxx624pxx728pxx832pxx936pxx1040pxx1248pxx1352pxx1456pxx1664px| 토큰 | 값 | 옛 이름(별칭) |
|---|---|---|
spacing-x0_5 | 2px | — |
spacing-x1 | 4px | spacing-xs |
spacing-x1_5 | 6px | — |
spacing-x2 | 8px | spacing-sm |
spacing-x2_5 | 10px | — |
spacing-x3 | 12px | spacing-md |
spacing-x3_5 | 14px | — |
spacing-x4 | 16px | spacing-lg |
spacing-x4_5 | 18px | — |
spacing-x5 | 20px | — |
spacing-x6 | 24px | spacing-xl |
spacing-x7 | 28px | — |
spacing-x8 | 32px | spacing-2xl |
spacing-x9 | 36px | — |
spacing-x10 | 40px | — |
spacing-x12 | 48px | spacing-3xl |
spacing-x13 | 52px | — |
spacing-x14 | 56px | — |
spacing-x16 | 64px | — |
옛 이름(spacing-xs … spacing-3xl)은 같은 값의 별칭이다. 컴포넌트를 옮길 때 새 이름으로 바꾼다.
구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.