YumYum 디자인 시스템 — 컴포넌트 라이브러리 v3

냠냠픽업 디자인 시스템 컴포넌트 가이드 작성일: 2026-05-13 최종 갱신: 2026-05-18 — Toast 컴포넌트 spec HEX cool gray v3로 마이그레이션 (#2D2B27 → #333333, #FAF9F7 → #FAFAFA) 버전: v3.0 (cool gray v3 시리즈)

0. 개요

이 문서는 YumYum 디자인 시스템의 4가지 토큰(Color + Typography + Spacing + Radius + Elevation)을 조합해서 만든 13개 핵심 컴포넌트를 정의함.

컴포넌트 분류

Phase 1 — Foundations (3)
  ├─ Button
  ├─ Input
  └─ Badge / Tag

Phase 2 — Containers (2)
  ├─ Card
  └─ List Item

Phase 3 — Overlays (2)
  ├─ Modal / Bottom Sheet
  └─ Toast / Snackbar

Phase 4 — Navigation (2)
  ├─ Header (App Bar)
  └─ Tab Bar

Phase 5 — Specialized (5)
  ├─ Restaurant Card
  ├─ Menu Item Card
  ├─ Price Display
  ├─ Quantity Stepper
  └─ Order Summary

1. Button

📌 2026-05-16 업데이트 — Figma "Button - Large" 컴포넌트 (node 6978:19157, 6978:19161) 기준으로 정렬. 기존 doc(48h, radius-md)에서 55h, pill (radius-full) 로 변경. variant도 Figma 기준으로 재정의.

1.1 Variants (4)

Primary — yellow-500 배경 + neutral-800 텍스트. 주요 액션 (주문하기, 결제). 한 화면 1개
Dark — neutral-900 배경 + 흰색 텍스트. 카카오 로그인 등 외부 브랜드 액션
Outline — 흰 배경 + neutral-800 보더 + neutral-900 텍스트. 이메일 로그인, 보조 액션
Ghost — 배경/보더 없음. 약한 액션 (더보기, 닫기)

1.2 Sizes (3)

Size	Height	Padding	Radius	Typography	Gap
Small	32	6/12	radius-xs (4)	label-sm (12)	4
Medium ⭐	40	10/16	radius-sm (8)	label (14)	6
Large ⭐	55	14/32	radius-full (pill)	SemiBold 16/24	8

Large는 Hero 액션 (로그인, 주문 시작 등) 전용. 모바일 손가락 터치 영역 확보 + 친근한 pill 모양으로 캐릭터 톤과 조화.

1.3 States — Primary 기준

State	Background	Text
Default	`yellow-500` #FFDE36	`neutral-800`
Hover	`yellow-600` #F2CC0F	`neutral-800`
Pressed	`yellow-700` #C8A607	`neutral-50`
Disabled	`neutral-200`	`neutral-400`

1.4 States — Dark (카카오 등)

State	Background	Text
Default	`neutral-900` #222222	`#FFFFFF`
Pressed	`neutral-950` #0A0A0A	`#FFFFFF`
Disabled	`neutral-300`	`neutral-500`

1.5 States — Outline (이메일 등)

State	Background	Border	Text
Default	`#FFFFFF`	`0.5px neutral-800`	`neutral-900`
Pressed	`neutral-50`	`0.5px neutral-800`	`neutral-900`
Disabled	`neutral-100`	`0.5px neutral-300`	`neutral-400`

1.6 Icon 사용 (Large)

아이콘 위치: 텍스트 좌측, gap 8px
아이콘 크기: 24×24
아이콘 컬러: 텍스트와 동일 컬러 또는 브랜드 컬러 유지 (예: 카카오 말풍선)

1.7 원칙

한 화면에 Primary는 1개
Label은 명령형 ("확인" O, "확인 버튼" X)
Disabled는 톤이 아닌 회색 사용
Large는 풀폭 (w-full) 기본 — 좌우 page padding(16px) 안쪽에서 100% 차지
외부 브랜드 액션은 해당 브랜드 가이드 우선 (카카오 #FEE500이 아니라 검정인 이유: 냠냠픽업 캐릭터/배경 컬러와 충돌 회피한 코니의 의도적 선택)

2. Input

2.1 Anatomy

Label + (Leading Icon) + Placeholder/Input + (Trailing Icon) + Helper text

2.2 Sizes (3)

Size	Height	Padding	Font
Small	32	6/12	13px
Medium ⭐	44	10/12	14px
Large	52	14/14	16px

2.3 States (5)

State	Border
Default	`0.5px solid neutral-300`
Focused	`1px solid neutral-800` + 3px yellow-100 ring
Filled	Default와 동일
Error	`1.5px solid neutral-800` + alert icon
Disabled	`0.5px solid neutral-200` + neutral-100 bg

2.4 Variations

Search (검색 아이콘)
Password (눈 아이콘 토글)
Textarea (min-height 80)
Select (chevron-down)

2.5 원칙

Label은 위에, Placeholder는 예시만
Focused 시 노랑 ring (brand 강조)
Error는 색이 아닌 아이콘 + 두꺼운 보더

3. Badge / Tag

3.1 모양으로 의미 구분

Badge (radius-xs 4px) — 상태, 카운트, 속성
Tag (radius-full ∞) — 카테고리, 필터, 키워드

3.2 Variants (3)

Variant	Background	Text	비율
Default	`neutral-100`	`neutral-700`	95%
Strong	`neutral-800`	`neutral-50`	3%
Brand	`yellow-500`	`neutral-800`	2%

3.3 Specs

Badge: 3/8 padding, label-sm (11px)
Tag: 4/10 padding, label-sm (12px)
Icon size: 12px, gap-xs (4px)

3.4 변형

With Icon (clock, map-pin, flame 등)
Counter (숫자, 99+)
Removable Tag (X 버튼)
Dot Badge (작은 점만)

3.5 원칙

한 곳에 3개 이내
텍스트는 짧게 (2-5자)

4. Card

4.1 Anatomy

Container + (Media) + Header + Body + (Footer)

4.2 Layout Variants (4)

Vertical — 이미지 위 + 콘텐츠 아래 (가장 일반적)
Horizontal — 이미지 옆 + 콘텐츠 (리스트형)
Compact — 이미지 없음, 간단
Full — 모든 영역 포함

4.3 Style Variants (3)

Basic — 일반 (95%)
Selected — yellow-50 bg + 1.5px yellow-500 border
Promotion — Tier 2 Secondary 컬러 (Pink 그라데이션 등)

4.4 States (4) — 인터랙티브 카드만

State	Style
Default	white bg + 0.5px neutral-200 border
Hover	neutral-50 bg + neutral-300 border
Pressed	neutral-100 bg + scale(0.98)
Selected	yellow-50 bg + 1.5px yellow-500 border

4.5 Specs

Padding: space-lg (16px)
Internal gap: space-md (12px)
Radius: radius-md (12px)
Elevation: elevation-0 (보더만)

4.6 원칙

한 카드 = 한 객체
카드 안에 카드 X
전체가 클릭 영역

5. List Item

5.1 Anatomy

(Leading) + Content + (Trailing)

5.2 Variants (6)

With Icon — 마이페이지 메뉴
With Avatar — 매장/사람
With Thumbnail — 메뉴/주문 내역
With Toggle — 설정 (on/off)
With Meta — 결제, 금액 표시
With Checkbox — 옵션 선택

5.3 Specs

Padding: 12/16 (y/x)
Min-height: 44px (터치 영역)
Internal gap: space-md (12px)
Divider: 0.5px solid neutral-200 (항목 사이)
Icon: 20px, Avatar: 36px, Thumbnail: 56px (radius-sm)

5.4 원칙

전체 행이 터치 영역
첫/마지막 항목 사이는 divider 없음
Chevron은 이동 의미 (토글엔 사용 X)

6.1 Variants (3)

Bottom Sheet (80%) — 모바일 표준. 아래에서 슬라이드 업
Center Modal (15%) — 짧은 확인/경고 다이얼로그
Full Screen (5%) — 긴 폼, 복잡한 작업

6.2 Bottom Sheet Sizes (4)

Size	Height
Small	~35%
Medium ⭐	~50%
Large	~75%
Full	~95%

6.3 Anatomy (Bottom Sheet)

Backdrop + Handle bar + Header + Content + Footer

6.4 Specs

Backdrop: rgba(0, 0, 0, 0.5)
Container bg: white
Border radius (Bottom Sheet): radius-xl 24px (상단만)
Border radius (Center Modal): radius-lg 16px (사방)
Elevation: elevation-1
Padding: space-xl (24px)
Handle bar: 36×4 neutral-300

6.5 원칙

모바일은 Bottom Sheet 우선
닫는 방법 2가지 이상 (Backdrop tap + X + swipe down)
중첩 X (Modal 위에 Modal X)
Destructive 액션: neutral-800 배경 + 흰 텍스트

7. Toast / Snackbar

7.1 무채색 통일

모든 Toast가 동일한 검정 배경 + 흰 텍스트. 의미는 아이콘으로만 구분.

의미	아이콘
Success	ti-circle-check
Error	ti-circle-x
Warning	ti-alert-triangle
Info	ti-info-circle

7.2 Variants (3)

Simple — 아이콘 + 메시지
With Action — Yellow 액션 버튼 (되돌리기 등)
With Close — X 버튼 (사용자가 닫아야)

7.3 Duration (4)

Duration	Time	용도
Short	2초	단순 확인
Medium ⭐	4초	일반 알림
Long	6초	액션 가능
Persistent	∞	에러, 시스템

7.4 Specs

Background: neutral-800 #333333
Text: neutral-50 #FAFAFA
Action color: yellow-500 #FFDE36
Padding: 12/16
Radius: radius-md (12px)
Elevation: elevation-2
Animation: slide 200ms ease-out

7.5 원칙

메시지 한 줄, 짧게
한 화면에 Toast 1개
에러는 Persistent
Modal 대체로 사용 X

8.1 Anatomy

Leading + Title + Trailing

8.2 Variants (5)

Default — 일반 페이지 (Back + Title + Action)
Home — 메인 (Logo + Search + Bell) · LaundryGothic OK
Search — 검색바 내장
Large — 큰 제목 (heading-lg) · iOS 스타일
Transparent — 이미지 위에 떠있음 (매장 상세)

8.3 Specs

Height: 56px (+ safe-area-top)
Background: white
Border bottom: 0.5px solid neutral-200
Padding: 0/16
Title: heading-sm (18px SemiBold), 중앙 정렬
Icon: 22-24px, button: 44×44

8.4 원칙

제목 중앙 정렬 (한국 앱 표준)
Trailing 액션 최대 2개
Back 위치 절대 변경 X
긴 제목은 말줄임

9.1 YumYum 구성 (4 tabs)

홈 / 주문내역 / 즐겨찾기 / 마이냠냠

9.2 활성/비활성

State	Icon	Label
Active	Filled · `neutral-800`	SemiBold 600 · `neutral-800`
Inactive	Outline · `neutral-400`	Medium 500 · `neutral-500`

9.3 Specs

Container height: 56px + safe-area-bottom
Background: white
Border top: 0.5px solid neutral-200
Tab padding: 6/0 (y/x), flex: 1
Icon: 22-24px
Label: label-sm (11-12px Medium)
Icon-Label gap: space-xs (4px)

9.4 변형

With Badge — 카운트 (검정 원) 또는 점 (노랑)

9.5 원칙

3~5개 탭
아이콘 + 라벨 함께
활성 시 filled 아이콘
위치 절대 변경 X
Safe area 침범 X

10. Restaurant Card (Specialized)

10.1 구성

Media (140-160px, 매장 이미지)
Top-left badge (긴급 알림, Strong variant)
Top-right action (즐겨찾기, 반투명 흰 원)
Content: 매장명 + Brand badge → 평점/픽업시간/거리 → 카테고리 태그

10.2 사용 토큰

Card 컴포넌트 (Vertical layout) 베이스
Brand badge: yellow-500 (베스트, 추천 등)
Strong badge: neutral-800 (긴급)
평점 아이콘: yellow-500 star-filled
숫자: tabular-nums

11.1 Layout (2)

Horizontal — 이미지 옆 + 콘텐츠 (리스트)
Vertical — 이미지 위 + 콘텐츠 (그리드)

11.2 구성

메뉴 이미지
(옵션) 강조 뱃지 (HOT, NEW)
메뉴명 (label, 14px Medium)
설명 (caption, 12px Regular)
가격 (강조) (label-lg or heading-md, 600 SemiBold, tabular-nums)

11.3 원칙

가격이 시각적 주인공. 다른 요소보다 weight ↑

12. Price Display (Specialized)

12.1 Variants (3)

기본 — heading-md SemiBold + tabular-nums
할인 가격 — 원가(line-through, neutral-400) + 할인율 + 현재가
빅 넘버 — display-sm 또는 display (Hero, 빅 절약 금액)

12.2 필수 규칙

css

font-variant-numeric: tabular-nums;

숫자 폭이 균일해야 정렬이 맞음 — 앱의 신뢰감과 직결

12.3 단위 처리

"22,000원"에서 "원"은 살짝 작게 (font-size 0.6배) 가능 — 숫자 강조

13. Quantity Stepper (Specialized)

13.1 Specs

Container: height 36px, radius-sm (8px), 0.5px neutral-300 border
Button: 36×36 (터치 영역)
Icon: 18px (minus, plus)
Number: label (14-15px Medium), tabular-nums, width 40px center

13.2 States

Default: 양쪽 버튼 클릭 가능
Minimum (보통 1): minus 버튼 disabled (neutral-300)
Maximum: plus 버튼 disabled

13.3 사용처

메뉴 옵션 (수량 선택)
장바구니 (수량 변경)
옵션 추가 (개수 조절)

14. Order Summary (Specialized)

14.1 구조

결제 정보 (heading-sm)
─────────────────────────
상품 금액                22,000원
─────────────────────────
옵션 추가                +1,000원
─────────────────────────
쿠폰 할인                -3,000원
─────────────────────────
총 결제 금액           20,000원  (강조!)

14.2 디테일

항목 사이: 0.5px neutral-200 divider
항목 텍스트: body-sm (14px Regular, neutral-700)
항목 금액: body-sm (tabular-nums!)
합계 라벨: label (14px Medium, neutral-800)
합계 금액: heading-md (20px Bold, tabular-nums) ← 강조

14.3 원칙

다른 항목은 차분, 합계만 굵게
모든 숫자 tabular-nums (정렬!)
+/- 부호로 가/감 명시

15. 컴포넌트 조합 매트릭스

컴포넌트	Color 토큰	Typo 토큰	Spacing 토큰	Radius
Button (M)	yellow-500/600/700 + neutral-800	label	10/16	radius-sm
Input (M)	neutral-300/800 + yellow-100 ring	body-sm	10/12	radius-sm
Badge	neutral-100/700	label-sm (11)	3/8	radius-xs
Tag	neutral-100/700	label-sm (12)	4/10	radius-full
Card	white + neutral-200	heading-sm + body-sm	space-lg padding, space-md gap	radius-md
List Item	white + neutral-200	label or body-sm	12/16 padding	—
Bottom Sheet	white + dim	heading-sm	space-xl	radius-xl (상단)
Toast	neutral-800 + neutral-50	body-sm	12/16	radius-md
Header	white + neutral-200	heading-sm	0/16	—
Tab Bar	white + neutral-200	label-sm	6/0	—

16. 다음 단계

13개 핵심 컴포넌트가 완성됨. 이제 디자인 시스템 v2가 실제 화면 디자인에 사용 가능한 단계.

남은 후속 작업:

[ ] Stratis UI Icons — Stratis UI Icons 사이즈/색상 가이드 (16 / 20 / 24)
[ ] Motion — 애니메이션 duration, easing (transition, slide, fade)
[ ] Grid System — 모바일 4-column 그리드 (필요 시)
[ ] Empty/Loading/Error States — 빈 상태, 로딩, 에러 화면 가이드
[ ] Accessibility Guidelines — 접근성 체크리스트

17. 디자인 시스템 v2 — 전체 산출물

📁 디자인 시스템/
├── 🎨 YumYum 컬러 시스템 v2.md
├── ✍️ YumYum 타이포그래피 시스템 v2.md
├── 📐 YumYum 스페이싱 시스템 v2.md
├── ☁️ YumYum 엘리베이션 시스템 v2.md
└── 🧩 YumYum 컴포넌트 시스템 v2.md   ← 이 문서

이 문서는 살아있는 문서입니다. 컴포넌트는 사용하면서 발견되는 새로운 케이스에 맞춰 업데이트해주세요.

YumYum 디자인 시스템 — 컴포넌트 라이브러리 v3 ​

0. 개요 ​

컴포넌트 분류 ​

1. Button ​

1.1 Variants (4) ​

1.2 Sizes (3) ​

1.3 States — Primary 기준 ​

1.4 States — Dark (카카오 등) ​

1.5 States — Outline (이메일 등) ​

1.6 Icon 사용 (Large) ​

1.7 원칙 ​

2. Input ​

2.1 Anatomy ​

2.2 Sizes (3) ​

2.3 States (5) ​

2.4 Variations ​

2.5 원칙 ​

3. Badge / Tag ​

3.1 모양으로 의미 구분 ​

3.2 Variants (3) ​

3.3 Specs ​

3.4 변형 ​

3.5 원칙 ​

4. Card ​

4.1 Anatomy ​

4.2 Layout Variants (4) ​

4.3 Style Variants (3) ​

4.4 States (4) — 인터랙티브 카드만 ​

4.5 Specs ​

4.6 원칙 ​

5. List Item ​

5.1 Anatomy ​

5.2 Variants (6) ​

5.3 Specs ​

5.4 원칙 ​

6. Modal / Bottom Sheet ​

6.1 Variants (3) ​

6.2 Bottom Sheet Sizes (4) ​

6.3 Anatomy (Bottom Sheet) ​

6.4 Specs ​

6.5 원칙 ​

7. Toast / Snackbar ​

7.1 무채색 통일 ​

7.2 Variants (3) ​

7.3 Duration (4) ​

7.4 Specs ​

7.5 원칙 ​

8. Header (App Bar) ​

8.1 Anatomy ​

8.2 Variants (5) ​

8.3 Specs ​

8.4 원칙 ​

9. Tab Bar (Bottom Navigation) ​

9.1 YumYum 구성 (4 tabs) ​

9.2 활성/비활성 ​

9.3 Specs ​

9.4 변형 ​

9.5 원칙 ​

10. Restaurant Card (Specialized) ​

10.1 구성 ​

10.2 사용 토큰 ​

11. Menu Item Card (Specialized) ​

11.1 Layout (2) ​

11.2 구성 ​

11.3 원칙 ​

12. Price Display (Specialized) ​

12.1 Variants (3) ​

12.2 필수 규칙 ​

12.3 단위 처리 ​

13. Quantity Stepper (Specialized) ​

13.1 Specs ​

13.2 States ​

13.3 사용처 ​

14. Order Summary (Specialized) ​

14.1 구조 ​

14.2 디테일 ​

14.3 원칙 ​

15. 컴포넌트 조합 매트릭스 ​

16. 다음 단계 ​

17. 디자인 시스템 v2 — 전체 산출물 ​