YumYum 디자인 시스템 — 스페이싱 & 라디우스 토큰 v2
냠냠픽업 디자인 시스템 Spacing & Radius 가이드 작성일: 2026-05-13 버전: v2.0
1. 디자인 원칙
1.1 핵심 컨셉
- 4px Base Unit — 모든 spacing이 4의 배수 (iOS HIG / Material Design 표준)
- 모바일 최적화 — 미세 조정 가능한 단위로 정밀한 표현
- 2단계 토큰 구조 — Primitives + Semantic (의미별)
- 친근하게 둥근 모서리 — radius-sm(8px)이 기본
1.2 왜 4px Base인가
- iOS와 Material Design 양쪽 표준
- 8의 배수도 모두 포함 (4, 8, 12, 16, 20, 24...)
- 모바일에서 미세 조정이 필요한 순간(아이콘-텍스트 4px) 표현 가능
- 디자이너/개발자 모두에게 익숙한 단위
2. Spacing Scale (Primitives)
4의 배수로 구성된 11단계.
| Token | Value | 비고 |
|---|---|---|
space-0 | 0px | 간격 없음 (reset) |
space-1 | 4px | 최소 단위 |
space-2 | 8px | |
space-3 | 12px | |
space-4 ⭐ | 16px | 기본 (대부분의 padding/gap) |
space-5 | 20px | |
space-6 | 24px | |
space-8 | 32px | |
space-10 | 40px | |
space-12 | 48px | |
space-16 | 64px | 페이지 레벨 |
숫자가 4의 배수라는 점이 핵심. space-4 = 16px (4×4), space-8 = 32px (4×8).
작은 값은 촘촘하게(1~6), 큰 값은 듬성듬성(8, 10, 12, 16). 큰 사이즈에서는 점프가 커야 시각적으로 의미 있는 차이가 나오기 때문.
3. 의미별 토큰 (Semantic Tokens)
3.1 Generic Spacing — padding, gap, margin 통합
| Token | Primitive | Value | 주 용도 |
|---|---|---|---|
space-xs | space-1 | 4px | 아이콘-텍스트, 매우 가까운 요소 |
space-sm | space-2 | 8px | 버튼 안 padding, 태그 사이 |
space-md | space-3 | 12px | 카드 안 요소 간 |
space-lg ⭐ | space-4 | 16px | 기본 카드 padding, 리스트 gap |
space-xl | space-6 | 24px | 모달 padding, 섹션 내부 |
space-2xl | space-8 | 32px | 섹션 사이 |
space-3xl | space-12 | 48px | Hero 위아래 |
3.2 Layout Spacing — 페이지/섹션 레벨 특수 토큰
| Token | Value | 용도 |
|---|---|---|
layout-page-x | 16px | 모바일 페이지 좌우 padding (iOS/Android 표준) |
layout-section-gap | 32px | 섹션 사이 간격 |
layout-hero-y | 48px | Hero 영역 위아래 여백 |
4. 컴포넌트별 적용 가이드
4.1 Button
| Size | Padding | Height | 용도 |
|---|---|---|---|
| Small | 6/12 | 32px | 인라인 액션, 작은 영역 |
| Medium ⭐ | 10/16 | 40px | 일반 버튼 (기본) |
| Large | 14/20 | 48px | 메인 CTA (주문하기) |
4.2 Input
- padding: 10/12 (y/x)
- height: 44px (터치 영역 충분히 확보)
- label 아래 gap:
space-sm(8px)
4.3 Card
- padding:
space-lg(16px) - 내부 요소 gap:
space-md(12px) - 아바타-텍스트 gap:
space-md(12px) - 카드끼리 gap:
space-md(12px)
4.4 List Item
- padding: 12/16 (y/x)
- 아이콘-텍스트 gap:
space-md(12px) - height: 최소 44px (터치 영역)
4.5 Badge & Tag
- padding: 3/8 (y/x) — 컴팩트
- badge 사이 gap: 6px (space-xs와 sm 사이)
4.6 Modal / Bottom Sheet
- padding:
space-xl(24px) - 제목-본문 gap:
space-sm(8px) - 본문-버튼 gap:
space-lg(16px)
4.7 Section (페이지 구조)
- 페이지 좌우:
layout-page-x(16px) - 제목-콘텐츠 gap:
space-lg(16px) - 섹션 간 간격:
layout-section-gap(32px)
4.8 터치 영역의 황금 기준
누를 수 있는 모든 요소(버튼, 입력창, 리스트 아이템)는 height 44px 이상이 좋음. iOS Human Interface Guidelines 표준. 32px Small 버튼은 인라인 액션 같은 특별한 경우에만 사용.
5. Radius (모서리 둥글기)
5.1 Radius Scale — 6단계
| Token | Value | 주 용도 |
|---|---|---|
radius-xs | 4px | 작은 뱃지, 태그, 라벨 |
radius-sm ⭐ | 8px | 기본 버튼, 입력창, 작은 카드 |
radius-md | 12px | 카드, 일반 컨테이너 |
radius-lg | 16px | 이벤트 배너 (큰 표면), 약관동의류 — radius-xl로 대체되어 가는 추세 |
radius-xl ⭐ | 24px | Bottom Sheet 상단 / Popup 4 corners / Hero 이미지 |
radius-full | 9999px | 아바타, 원형 버튼, Pill 태그 |
5.2 Radius 일관성 원칙
중첩 시 외부 > 내부 카드(12) 안에 버튼(8)이 들어가는 식으로 외부가 더 둥글게. 반대로 가면 어색함.
한 화면에 3가지 이내 너무 많은 radius가 섞이면 산만해 보임. 보통 카드용 + 버튼용 + 원형 정도면 충분.
Pill 태그는 카테고리 라벨에만radius-full을 너무 많이 쓰면 정돈된 느낌이 사라짐. 카테고리 라벨, 필터 칩 정도에만.
5.3 컴포넌트별 라디우스 위계 ⭐ (2026-05-18 표준화)
PWA + Figma 전체 통일된 4단계 라디우스 위계.
| 표면 종류 | Token | Value | 적용 컴포넌트 |
|---|---|---|---|
| CTA Button | radius-sm | 8px | 확인 버튼, 더보기, 현위치 설정, Yellow CTA 전체 |
| Card | radius-md | 12px | StoreCard, 카드형 UI |
| Bottom Sheet / Popup | radius-xl | 24px | LocationBottomSheet, popup/more/store, 모든 모달 표면 |
| Pill / Avatar | radius-full | 9999px | LocationHeader pill, 더보기 pill, 카테고리 라벨, BottomTabBar 활성 표시 |
핵심 원칙: 시각 위계 = CTA(8) < Card(12) < Sheet(24) < Pill(full)
Why: 표면이 클수록 라디우스가 커야 자연스러움. 작은 액션(버튼)은 명확한 코너로 클릭성 강조, 큰 표면(시트/팝업)은 부드럽게 페이지에서 떠 있는 느낌. Pill은 표면 크기와 무관하게 "이 요소는 인터랙티브"라는 시각 신호로 사용.
적용 사례 (2026-05-18 일괄 sync):
- 코드: tailwind.config.ts의
rounded-sm/md/xl/full그대로 사용. 임의rounded-[6px]같은 hack 금지. - Figma: popup 마스터 5개 (Popup_2 1-line/2-line/NO-text 등) cornerRadius 12→24 일괄 변경. Bottom sheet 19개 topL/topR 16→24 일괄 변경.
6. CSS Variables 구현 예시
css
:root {
/* Spacing — Primitives */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Spacing — Semantic */
--space-xs: var(--space-1);
--space-sm: var(--space-2);
--space-md: var(--space-3);
--space-lg: var(--space-4);
--space-xl: var(--space-6);
--space-2xl: var(--space-8);
--space-3xl: var(--space-12);
/* Layout */
--layout-page-x: 16px;
--layout-section-gap: 32px;
--layout-hero-y: 48px;
/* Radius */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
}
/* 컴포넌트 적용 예시 */
.button-medium {
padding: 10px 16px;
height: 40px;
border-radius: var(--radius-sm);
}
.button-large {
padding: 14px 20px;
height: 48px;
border-radius: var(--radius-sm);
}
.input {
padding: 10px 12px;
height: 44px;
border-radius: var(--radius-sm);
}
.card {
padding: var(--space-lg);
border-radius: var(--radius-md);
gap: var(--space-md);
}
.list-item {
padding: 12px 16px;
min-height: 44px;
gap: var(--space-md);
}
.modal {
padding: var(--space-xl);
border-radius: var(--radius-lg);
}
.page {
padding-left: var(--layout-page-x);
padding-right: var(--layout-page-x);
}
.section {
margin-bottom: var(--layout-section-gap);
}7. Figma 적용 방법
7.1 Variables 구조 권장
Yumyum/
├── 01-Primitives/
│ ├── Spacing/
│ │ ├── space-0 (0)
│ │ ├── space-1 (4)
│ │ ├── space-2 (8)
│ │ ├── ... (~ space-16)
│ └── Radius/
│ ├── radius-xs (4)
│ ├── radius-sm (8)
│ ├── ... (~ radius-full)
│
└── 02-Semantic/
├── Spacing/
│ ├── space-xs ~ space-3xl
│ └── (alias to Primitives)
├── Layout/
│ ├── layout-page-x
│ ├── layout-section-gap
│ └── layout-hero-y
└── (Radius는 Primitives만으로 충분)7.2 Auto Layout 활용
Figma의 Auto Layout에서 spacing 변수를 직접 적용 가능:
- Gap between items →
space-md같은 변수 - Padding →
space-lg같은 변수
수동 입력 대신 변수로 연결하면, 디자인 시스템 변경 시 일괄 업데이트됨.
8. 기존 vs 신규 비교
| 항목 | 기존 | v2 (신규) |
|---|---|---|
| Spacing Scale | 정의 없음 | 11단계 Primitives (4px Base) |
| 의미별 토큰 | 없음 | 7개 Generic + 3개 Layout |
| 컴포넌트 spacing | 즉흥적 | 컴포넌트별 명시적 가이드 |
| Radius | 정의 없음 | 6단계 (4 / 8 / 12 / 16 / 24 / full) |
| 터치 영역 기준 | 없음 | 44px 최소 기준 명시 |
| 중첩 원칙 | 없음 | 외부 > 내부 명시 |
9. 다음 단계
스페이싱과 라디우스가 잡혔으니, 디자인 시스템의 핵심 토큰(Color + Typography + Spacing + Radius)이 모두 완성되었음. 다음으로 작업할 것:
- [ ] Elevation/Shadow — 깊이감 표현 (0~4단계)
- [ ] Components — Button, Input, Card, Modal, Badge, Toast (Color + Typography + Spacing 조합으로 정의)
- [ ] Stratis UI Icons — Stratis UI Icons 사이즈 가이드 (16 / 20 / 24)
- [ ] Motion — 애니메이션 duration, easing 정의
- [ ] Grid System — 모바일 4-column 그리드 (필요 시)
이 문서는 살아있는 문서입니다. 디자인 시스템이 발전하면서 함께 업데이트하세요.