Spacing
Stable4px 기반의 간격 스케일과 레이아웃 역할을 정의합니다.
Overview
4px을 기본 단위로 한 제한된 Space 스케일을 사용합니다. padding과 margin에는 sp, 요소 사이 간격에는 gap이라는 의미를 붙이되 같은 원시 스케일을 공유합니다.
4px base
같은 스케일, 역할 중심의 이름
Consistent across projectsSpacing scale
--guide-space-0…--guide-space-2…--guide-space-4…--guide-space-8…--guide-space-12…--guide-space-16…--guide-space-20…--guide-space-24…--guide-space-32…--guide-space-40…--guide-space-48…--guide-space-64…--guide-space-80…Height / Radius / Border / Touch / Layout Primitive
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--guide-height-24 | 24px | … |
--guide-height-32 | 32px | … |
--guide-height-40 | 40px | … |
--guide-height-48 | 48px | … |
--guide-height-56 | 56px | … |
--guide-radius-0 | 0px | … |
--guide-radius-2 | 2px | … |
--guide-radius-4 | 4px | … |
--guide-radius-6 | 6px | … |
--guide-radius-8 | 8px | … |
--guide-radius-10 | 10px | … |
--guide-radius-16 | 16px | … |
--guide-radius-full | 999px | … |
--guide-border-1 | 1px | … |
--guide-border-2 | 2px | … |
--guide-border-3 | 3px | … |
--guide-touch-32 | 32px | … |
--guide-touch-44 | 44px | … |
--guide-touch-48 | 48px | … |
--guide-container-1280 | 1280px | … |
--guide-grid-columns-12 | 12 | … |
--guide-grid-columns-8 | 8 | … |
--guide-grid-columns-4 | 4 | … |
--guide-breakpoint-360 | 360px | … |
--guide-breakpoint-767 | 767px | … |
--guide-breakpoint-768 | 768px | … |
--guide-breakpoint-1024 | 1024px | … |
--guide-breakpoint-1280 | 1280px | … |
--guide-breakpoint-1920 | 1920px | … |
Semantic spacing
sp · Padding / Margin
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--guide-sp-3xs | 4px | 4px | 4px | … |
--guide-sp-2xs | 4px | 4px | 4px | … |
--guide-sp-xs | 8px | 8px | 8px | … |
--guide-sp-sm | 12px | 12px | 12px | … |
--guide-sp-md | 16px | 16px | 16px | … |
--guide-sp-lg | 24px | 24px | 24px | … |
--guide-sp-xl | 32px | 32px | 32px | … |
--guide-sp-2xl | 32px | 40px | 40px | … |
--guide-sp-3xl | 40px | 40px | 40px | … |
--guide-sp-4xl | 80px | 80px | 80px | … |
gap · 요소 사이 간격
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--guide-gap-xxs | 4px | 4px | 4px | … |
--guide-gap-xs | 4px | 4px | 4px | … |
--guide-gap-sm | 8px | 8px | 8px | … |
--guide-gap-md | 12px | 12px | 12px | … |
--guide-gap-lg | 16px | 16px | 16px | … |
--guide-gap-xl | 16px | 16px | 16px | … |
--guide-gap-xxl | 24px | 24px | 24px | … |
--guide-gap-3xl | 40px | 40px | 40px | … |
--guide-gap-4xl | 64px | 64px | 64px | … |
--guide-gap-5xl | 80px | 80px | 80px | … |
Layout / Radius / Touch 역할
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--guide-breakpoint-min | 360px | 768px | 1280px | … |
--guide-breakpoint-max | 767px | 1024px | 1920px | … |
--guide-container-max | 360px | 768px | 1280px | … |
--guide-margin-container | 16px | 24px | 0px | … |
--guide-grid-card-4col | 302px | 302px | 302px | … |
--guide-grid-card-3col | 227px | 227px | 227px | … |
--guide-grid-card-1col | 328px | 328px | 328px | … |
--guide-grid-card-2col | 156px | 156px | 156px | … |
--guide-grid-desktop | 12 | 12 | 12 | … |
--guide-grid-tablet | 8 | 8 | 8 | … |
--guide-grid-mobile | 4 | 4 | 4 | … |
--guide-radius-square | 0px | 0px | 0px | … |
--guide-radius-badge | 6px | 6px | 6px | … |
--guide-radius-button | 8px | 8px | 8px | … |
--guide-radius-input | 8px | 8px | 8px | … |
--guide-radius-card | 10px | 10px | 10px | … |
--guide-radius-modal | 16px | 16px | 16px | … |
--guide-radius-chip | 999px | 999px | 999px | … |
--guide-radius-avatar | 999px | 999px | 999px | … |
--guide-touch-compact | 32px | 32px | 32px | … |
--guide-touch-min | 44px | 44px | 44px | … |
--guide-touch-comfortable | 48px | 48px | 48px | … |
TSX / CSS
<div className="flex gap-md p-sp-md">관련 요소</div>
/* sp-md: 16px
gap-md: 12px
역할 이름은 다르지만 하나의 4px 스케일을 공유합니다. */Guidelines
- margin/padding에는 sp, 요소 사이 간격에는 gap을 사용합니다.
- 기본 Tailwind 숫자 스케일을 덮어쓰지 않습니다.
- Button의 md 높이는 40px입니다. 모바일의 주요 행동에는 lg(48px)를 선택합니다.
- 반응형 기준은 콘텐츠 변화가 생기는 768px와 1280px입니다.