간격 (Spacing)

간격은 요소 사이의 여백을 일정한 규칙으로 관리해 화면의 리듬과 정보 위계를 만드는 기준이에요. 관련된 요소는 가깝게, 다른 그룹은 충분히 떨어뜨려 관계를 분명히 하고, 반복되는 간격으로 정렬과 밀도를 일관되게 유지해요. v2에서는 JSON 스펙을 원본으로 CSS 변수와 TypeScript 토큰을 생성하며, 기존 그리드 간격은 v1 호환 계약으로 분리해요.

기본 간격 토큰

최신 Figma 원본의 spacing/0부터 spacing/18까지 19개 primitive 변수를 모두 사용해요. 0 · 2 · 4 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 20 · 24 · 36 · 48 · 64 · 80 · 96 · 120 · 200px 값이 JSON 원본에서 CSS 변수와 TypeScript 토큰으로 함께 생성돼요.

0
0px
1
2px
2
4px
3
6px
4
8px
5
10px
6
12px
7
14px
8
16px
9
18px
10
20px
11
24px
12
36px
13
48px
14
64px
15
80px
16
96px
17
120px
18
200px
TokenCSS variableValue
spacing.scale.0--podo-spacing-scale-00px
spacing.scale.1--podo-spacing-scale-12px
spacing.scale.2--podo-spacing-scale-24px
spacing.scale.3--podo-spacing-scale-36px
spacing.scale.4--podo-spacing-scale-48px
spacing.scale.5--podo-spacing-scale-510px
spacing.scale.6--podo-spacing-scale-612px
spacing.scale.7--podo-spacing-scale-714px
spacing.scale.8--podo-spacing-scale-816px
spacing.scale.9--podo-spacing-scale-918px
spacing.scale.10--podo-spacing-scale-1020px
spacing.scale.11--podo-spacing-scale-1124px
spacing.scale.12--podo-spacing-scale-1236px
spacing.scale.13--podo-spacing-scale-1348px
spacing.scale.14--podo-spacing-scale-1464px
spacing.scale.15--podo-spacing-scale-1580px
spacing.scale.16--podo-spacing-scale-1696px
spacing.scale.17--podo-spacing-scale-17120px
spacing.scale.18--podo-spacing-scale-18200px

컴포넌트 간격

입력 필드 내부처럼 쓰임이 정해진 간격은 primitive 값을 직접 반복하지 않고 component token으로 연결해요. 원본 값이 바뀌어도 같은 역할의 간격을 한 번에 갱신할 수 있어요.

field-gap
8px
TokenCSS variableValueUsage
spacing.component.field-gap--podo-spacing-component-field-gap8pxField 내부 요소 간격

v1 그리드 호환 간격

v1 그리드의 s(5) 16px와 s(6) 24px 계약은 각각 현재 spacing.scale.8과 spacing.scale.11 값에 대응해요. 기존 별칭은 호환성을 위해 유지하며, 자세한 반응형 동작은 Grid 문서에서 확인할 수 있습니다.

s(5)
16px
s(6)
24px
Legacy aliasValueUsage
s(5)16pxTablet/Mobile grid gap · inline padding
s(6)24pxPC grid gap · inline padding