topic★★★★★난이도 · 약 14분
스페이싱 스케일과 일관성
4-8-12-16-24-32-48 — 한정된 간격 토큰으로 화면 전체의 리듬을 만든다.
#스페이싱#토큰#Tailwind#일관성
왜 배우는가
스페이싱 스케일 없이 디자인하면 13px, 17px, 22px 같은 '자유로운' 값이 난립한다. 토큰화된 스케일을 쓰면 디자이너와 개발자가 같은 언어로 소통할 수 있다.
스페이싱 스케일(Spacing Scale)이란, 디자인 시스템에서 사용할 간격 값을 미리 정해 놓은 단계표다. 마치 음악의 음계처럼, 정해진 값만 사용하여 시각적 리듬과 일관성을 만든다.
| 토큰 | px 값 | Tailwind | 용도 예시 |
|---|---|---|---|
| space-1 | 4px | `p-1` | 아이콘과 라벨 사이 |
| space-2 | 8px | `p-2` | 인풋 내부 패딩, 칩 간격 |
| space-3 | 12px | `p-3` | 카드 내부 좁은 패딩 |
| space-4 | 16px | `p-4` | 카드 내부 기본 패딩 |
| space-6 | 24px | `p-6` | 섹션 내부 간격 |
| space-8 | 32px | `p-8` | 섹션 간 간격 |
| space-12 | 48px | `p-12` | 페이지 레벨 여백 |
Tailwind CSS의 spacing 시스템은 4px 단위(0.25rem)를 기본으로 한다. `p-1` = 4px, `p-2` = 8px, `p-4` = 16px. 즉 Tailwind의 짝수 값(`p-2, p-4, p-6, p-8`)만 쓰면 자동으로 8px 그리드를 따르게 된다.
스케일을 정할 때 핵심은 단계 간 비율이다. 4→8→16→32처럼 2배씩 커지면 대비가 뚜렷하고, 4→8→12→16처럼 등차로 커지면 부드럽다. 대부분의 디자인 시스템은 이 둘을 혼합하여 작은 값은 등차(4, 8, 12, 16), 큰 값은 등비(16, 24, 32, 48, 64)로 구성한다.
일관성의 효과 — ① 디자이너: 간격을 고민하는 시간이 줄어 레이아웃 속도 2배 ② 개발자: 디자인 파일에 애매한 수치가 없어 구현 오차 제로 ③ 사용자: 화면 전체에 시각적 규칙성이 느껴져 신뢰감 상승