파운데이션
간격 · 레이아웃
4px 그리드를 기반으로 합니다. 간격은 정해진 단계만 사용하고, 관련된 요소는 가깝게, 관련 없는 요소는 멀게 두어 구조를 여백만으로 전달합니다.
- 기준 단위
- 4px
- 단계
- 10단계 (4 – 64)
- 웹 그리드
- 12 컬럼 · 24px 거터
- 모바일 여백
- 20px
간격 스케일
space-14px아이콘–텍스트space-28px칩 사이 · 인라인 요소space-312px리스트 아이템 내부space-416px카드 내부(sm) · 폼 필드 사이space-520px카드 내부(md) · 모바일 좌우 여백space-624px카드 내부(lg) · 섹션 내부space-832px섹션 사이(웹)space-1040px페이지 상단 여백space-1248px큰 섹션 사이space-1664px페이지 블록 사이근접성 원칙
같은 그룹 안의 간격은 그룹 사이 간격의 절반 이하로 둡니다.
이번 달 결제금액
48,210,000원
+12.4% 지난달 대비
좋은 예 · 라벨–금액–증감 4px, 정보–버튼 24px
이번 달 결제금액
48,210,000원
+12.4% 지난달 대비
나쁜 예 · 모든 간격이 비슷해 그룹이 보이지 않음
그리드
업무용 웹 (Admin · Console · Sales)
1
2
3
4
5
6
7
8
9
10
11
12
단말 · 모바일
페이지 레이아웃 패턴
대시보드
KPI 4열 → 차트 8:4 → 테이블 12
목록 · 상세
필터 바 → 테이블 → 우측 상세 패널
설정 · 폼
좌측 탭 · 우측 폼 최대 640px
여백이 애매할 때는 한 단계 더 넓게 두세요. 결제 화면에서 여백이 부족해 보이는 일은 많지만, 넘쳐 보이는 일은 드뭅니다.