Spacing
HANUI의 Stack과 Section 컴포넌트는 시맨틱한 간격 시스템을 제공합니다. 의미 기반의 spacing prop을 사용하여 일관된 레이아웃을 쉽게 구성할 수 있습니다.
이 페이지의 모든 간격 규칙이 이미 적용된 컴포넌트가 있어요. Section Heading System을 사용하면 KRDS Gap-layout 명세(헤딩 간 간격, 헤딩-본문 간격)가 CSS 인접 선택자로 자동 적용됩니다.
핵심: KRDS 8px 기반 간격 시스템입니다. Stack, Section 컴포넌트의 gap prop으로 시맨틱한 간격을 적용합니다.
간격은 tailwind.preset.ts에서 Tailwind spacing으로 확장 정의되어 있습니다. 기본 Tailwind spacing에 KRDS 8px grid system 추가 값이 포함됩니다.
Heading 컴포넌트 사용법
Heading는 PageSection 내부에서 사용하는 제목과 설명을 일관되게 표시하는 컴포넌트입니다. 레벨별로 자동으로 적절한 간격과 margin-bottom이 적용됩니다.
레벨별 margin-bottom 값:
- h1: 48px (mb-12)
- h2: 40px (mb-10)
- h3: 24px (mb-6)
- h4: 16px (mb-4)
- h5: 16px (mb-4)
사용 예시:
h1 제목
페이지의 주요 섹션을 나타내는 최상위 제목입니다. 가장 큰 간격(48px)이 적용됩니다.
h2 제목
주요 섹션의 하위 제목으로, 40px의 간격이 적용됩니다.
h3 제목
세부 섹션 제목으로, 24px의 간격이 적용됩니다.
h4 제목
소제목으로, 16px의 간격이 적용됩니다.
h5 제목
최소 단위 제목으로, 16px의 간격이 적용됩니다.
팁: PageSection 내부에서 제목과 설명이 필요한 경우 항상 Heading를 사용하세요. 레벨별로 자동으로 적절한 간격이 적용되므로 별도로 margin이나 spacing을 신경 쓸 필요가 없습니다.
컴포넌트 간격
함께 사용되는 비슷한 크기의 구성 요소는 동일한 간격을 적용하는 것이 좋습니다. HANUI는 다양한 컴포넌트 조합에 대한 시맨틱한 간격을 제공합니다.
카드 리스트
카드 세로형, 가로형, 모듈형 간격은 모두 gap-7(24px)을 사용합니다. 대체로 세로형 카드 리스트의 간격은 gutter 값으로 적용합니다.
카드 1
카드 내용입니다.
카드 2
카드 내용입니다.
카드 3
카드 내용입니다.
인풋 (Input)
인풋 컴포넌트 간 간격은 'form' 프리셋을 사용합니다. 가로형은 'md', 세로형은 'form' spacing을 사용합니다.
가로형 조합
세로형 조합
체크박스, 라디오 버튼
체크박스나 라디오 버튼 리스트는 'form' spacing을 사용합니다. 가로형은 'lg' spacing을 사용하여 충분한 간격을 유지합니다.
리스트 형태
가로형
컴포넌트 내 패딩
Section 컴포넌트의 padding prop을 사용하여 컴포넌트 내부 패딩을 일관되게 적용할 수 있습니다.
카드
카드 패딩은 'card-md', 'card-lg', 'card-sm' 등의 프리셋을 사용합니다. 반응형으로 모바일과 PC에서 자동으로 조정됩니다.
PC (24px / 32px)
카드 제목
카드 내용입니다. PC에서는 더 넉넉한 패딩이 적용됩니다.
Mobile (24px)
카드 제목
카드 내용입니다. 모바일에서는 공간을 효율적으로 사용합니다.
텍스트 입력 필드
입력 필드 그룹은 'input-group' spacing을 사용합니다. 레이블, 입력 박스, 설명 사이의 간격이 자동으로 적용됩니다.
부가 설명 텍스트 (gap-3, 8px 간격)
왜 시맨틱 스페이싱인가?
문제점
기존 방식에서는 "폼에는 gap-5를 쓰고, 카드 리스트에는 gap-7을 쓴다"는 규칙을 모든 개발자가 외워야 했습니다. 바쁜 작업 중에 문서를 확인하며 작업하는 것은 비효율적입니다.
해결책
시맨틱 컴포넌트를 사용하면 gap="md"처럼 의미를 명시하면 자동으로 올바른 간격이 적용됩니다.
Stack - Gap Layout
Stack은 수직/수평 방향으로 요소를 배치하고 간격을 관리하는 컴포넌트입니다. 시맨틱한 spacing prop을 사용하여 일관된 간격을 적용할 수 있습니다.
폼 레이아웃
카드 리스트
카드 1
카드 내용입니다.
카드 2
카드 내용입니다.
카드 3
카드 내용입니다.
제목 계층
메인 제목
서브 제목 1
소제목
콘텐츠 내용입니다. 타이포그래피 계층에 맞춰 자동으로 간격이 조정됩니다.
가로 방향 레이아웃
전체 스페이싱 프리셋
모든 간격은 반응형으로 모바일과 PC에서 자동으로 조정됩니다.
| 프리셋 | 모바일 | PC | 용도 |
|---|---|---|---|
| Header & Navigation | |||
header-breadcrumb | 16px | 24px | 헤더와 브레드크럼 사이 |
| Layout Spacing | |||
left-contents | 0px | 64px | 사이드바-콘텐츠 간격 |
page-inner | 24px | 32px | 페이지 내부 간격 |
| Content Spacing | |||
content-tight | 4px | 8px | 밀접한 콘텐츠 간격 |
content-normal | 8px | 12px | 일반 콘텐츠 간격 |
content-loose | 12px | 16px | 여유 있는 콘텐츠 간격 |
| Form & Input | |||
form | 16px | 24px | 폼 필드 간격 |
input-group | 8px | 8px | 레이블-입력 박스-설명 간격 |
| Card & List | |||
card-list | 24px | 24px | 카드 리스트 간격 |
list-tight | 8px | 12px | 밀집 리스트 항목 간격 |
list-normal | 12px | 16px | 일반 리스트 항목 간격 |
Section - Padding System
Section 컴포넌트는 패딩과 배경을 함께 관리하여 일관된 내부 간격을 제공합니다.
기본 사용법 (Padding Prop)
카드 제목
Section 컴포넌트의 padding prop을 사용하면 시맨틱한 프리셋이 자동 적용됩니다.
패딩 프리셋
Section은 다양한 상황에 맞는 패딩 프리셋을 제공합니다:
| 프리셋 | 모바일 | PC | 용도 |
|---|---|---|---|
| Card Padding | |||
card-sm | 16px | 24px | 작은 카드 |
card-md | 24px | 32px | 일반 카드 |
card-lg | 32px | 40px | 큰 카드 |
| Layout Padding | |||
page | 24px | 48px | 페이지 컨테이너 |
header | 16px | 24px | 헤더 영역 |
footer | 32px | 48px | 푸터 영역 |
| Content Area Padding | |||
content-tight | 12px | 16px | 밀집 콘텐츠 영역 |
content-area | 16px | 24px | 일반 콘텐츠 영역 |
배경 스타일
background prop으로 배경을 간편하게 설정할 수 있습니다:
background="white" - 흰색 배경
background="gray" - 회색 배경
background="primary" - 프라이머리 배경
실전 예시
대시보드
알림 3
총 방문자
1,234
신규 사용자
89
전환율
3.2%
최근 활동
사용자 A가 로그인했습니다.
새로운 주문이 접수되었습니다.
모범 사례
1. 시맨틱 프리셋 우선 사용
가능하면 "form", "card-list" 같은 시맨틱 프리셋을 사용하세요. 코드의 의도가 명확해지고 일관된 간격이 자동으로 적용됩니다.
2. 시맨틱 HTML 요소 활용
as prop을 사용하여 적절한 시맨틱 HTML 요소를 렌더링하세요. 접근성과 SEO에 도움이 됩니다.
3. 일관된 간격 유지
직접 gap/padding 클래스를 사용하지 말고 Stack/Section을 사용하여 프로젝트 전체에서 일관된 간격을 유지하세요.
4. 중첩 사용
복잡한 레이아웃은 Stack과 Section을 중첩하여 구성하세요. 각 레벨에서 적절한 시맨틱 프리셋을 사용하면 됩니다.