디자인 리소스
Spacing
간격 시스템은 Layout · Contents · Padding 3단계로 구성됩니다. 각 토큰은 globals.css 에 정의된 CSS 커스텀 프로퍼티입니다.
Layout
구조적 골격 — 컴포넌트 사이 간격
32px
24px
16px
| Token | Value | 용도 |
|---|
Contents
정보 간 — 콘텐츠 내부 간격
content-lg · 16px
content-md · 12px
content-sm · 8px
| Token | Value | 용도 |
|---|
Padding
컴포넌트 내부 여백
| Token | Value | 용도 |
|---|
컴포넌트별 간격 매핑
주요 컴포넌트에 어떤 간격 토큰을 적용하는지 가이드
| 컴포넌트 | 속성 | 토큰 | 값 |
|---|---|---|---|
| 카드 리스트 | 카드 사이 간격 | --spacing-layout-lg | 24px |
| 카드 리스트 (밀집) | 카드 사이 간격 | --spacing-layout-md | 16px |
| 섹션 구분 | 섹션 사이 간격 | --spacing-layout-xl | 32px |
| 카드 / 모달 / 알럿 | 내부 패딩 | --spacing-padding-card | 16px |
| 페이지 컨테이너 | 내부 패딩 | --spacing-padding-page | 24px |
| 텍스트 입력 필드 | 라벨↔입력 간격 | --spacing-content-sm | 8px |
| 텍스트 입력 필드 | 입력 내부 패딩 | --spacing-padding-card | 16px |
| 인풋 가로 조합 | 인풋 사이 간격 | --spacing-content-lg | 16px |
| 체크박스 / 라디오 | 항목 사이 간격 | --spacing-content-lg | 16px |
| 테이블 행 | 셀 수직 패딩 | --spacing-padding-cell-v | 12px |
| 테이블 행 | 셀 수평 패딩 | --spacing-padding-cell-h | 8px |
| 버튼 / 컨트롤 | 내부 수직 패딩 | --spacing-padding-control-v | 8px |
| 버튼 / 컨트롤 | 내부 수평 패딩 | --spacing-padding-control-h | 6px |
| 아이콘 + 텍스트 | 사이 간격 | --spacing-content-sm | 8px |
| 인라인 요소 | 사이 간격 | --spacing-content-xs | 4px |
반응형 간격
브레이크포인트에 따라 간격을 조정하여 화면 공간을 효율적으로 사용합니다
| 용도 | 기본 (lg 이상) | Tailwind 패턴 |
|---|---|---|
| 레이아웃 섹션 간격 | 32px | gap-[var(--spacing-layout-xl)] |
| 카드 리스트 gap | 24px | gap-[var(--spacing-layout-lg)] |
| 컨테이너 패딩 | 24px | p-[var(--spacing-padding-page)] |
| 카드 내부 패딩 | 16px | p-[var(--spacing-padding-card)] |
| 콘텐츠 블록 간격 | 16px | gap-[var(--spacing-content-lg)] |
| Screen Margin (최소) | 24px | px-6 |
Screen Margin 최솟값: 데스크톱(lg 이상)에서 최소 24px 마진을 유지합니다.
Gutter(칼럼 간격): 데스크톱 기준 최소 16px, 권장 24px. 카드 리스트의 gap은 gutter값(24px)을 따릅니다.
Density
같은 레이아웃에서 밀도(density)만 바꿔 시각적 차이를 비교합니다
Comfortable — 기본 밀도. 충분한 여백으로 시각적 여유 확보
Flush + Bleed 패턴
패딩이 있는 컨테이너에서 특정 요소만 풀 너비로 펼쳐야 할 때, 네거티브 마진으로 부모 패딩을 상쇄합니다.
| 사용 사례 | 설명 |
|---|---|
| Tab Bar | 카드/패널 안의 탭 — 좌우 끝까지 확장하여 영역 구분을 명확하게 |
| Submenu | 컨테이너 내부 서브 메뉴 — border-bottom과 함께 풀 너비 사용 |
| Divider | 섹션 구분선 — 패딩을 무시하고 좌우 끝까지 연장 |
| Table / List | 카드 안의 테이블이나 리스트 — 데이터 행이 컨테이너 너비를 꽉 채움 |
| Banner / Alert | 카드 내 알림 배너 — 강조를 위해 풀 너비 배경색 사용 |
Container (padding: card)
일반 콘텐츠 (패딩 내부)
Tab A
Tab B
Tab C
탭 콘텐츠 영역
-mx-[var(--spacing-padding-card)] px-[var(--spacing-padding-card)]