Foundations
Spacing
모든 컴포넌트가 따르는 spacing scale + breakpoint 별 responsive 규칙. 엔터프라이즈 Responsive Spacing System 패턴 참고 (SAP UI5 등).
Scale
Tailwind 의 4px 단위 scale 을 그대로 사용 — 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px.
| Token | px | Tailwind | Use case |
|---|---|---|---|
| 0 | 0 | p-0 | 맞붙임 (border-collapse 등) |
| 1 | 4 | p-1 | 아이콘 padding, tight 컬럼 |
| 2 | 8 | p-2 | 버튼 내부, 작은 chip |
| 3 | 12 | p-3 | card padding 모바일, list item |
| 4 | 16 | p-4 | 기본 padding — card 내부 |
| 5 | 20 | p-5 | section padding 좁은 화면 |
| 6 | 24 | p-6 | card padding 데스크탑 |
| 8 | 32 | p-8 | page 좌우 padding 태블릿 |
| 10 | 40 | p-10 | Hero 박스 내부 |
| 12 | 48 | p-12 | page padding 데스크탑 |
| 16 | 64 | p-16 | Hero 상하 여백 |
| 24 | 96 | p-24 | 큰 vertical rhythm — 마케팅 |
Responsive breakpoints
4단계 — Mobile / Tablet / Desktop / Wide. Tailwind 의 sm md lg xl 2xl prefix 와 매핑.
| Breakpoint | Range | Padding | Gap | Section |
|---|---|---|---|---|
| Mobile | < 640px | p-4 (16px) | gap-3 (12px) | py-12 (48px) |
| Tablet | 640–1023px | p-6 (24px) | gap-4 (16px) | py-16 (64px) |
| Desktop | 1024–1535px | p-8 (32px) | gap-6 (24px) | py-20 (80px) |
| Wide | ≥ 1536px | p-12 (48px) | gap-8 (32px) | py-24 (96px) |
단일 className 으로 일괄 적용 예: p-4 sm:p-6 lg:p-8 xl:p-12
시각 비교
같은 카드를 4단계 padding 으로 나란히.
p-3
p-4
p-6
p-8