디자인 시스템 — Style A (getdesign.md 풍)

시각 swatch 위주 — 컬러 카드, 가로 칩 row, 인라인 점으로 톤을 한눈에. 동일 토큰의 다른 표현으로 Style B (KTDS 풍) 참조.
출처: Figma YumYum-v1

큰 그림 (Overview)

냠냠픽업은 노랑 단일 액센트 와 마스코트 캐릭터 가 브랜드 무게를 모두 짊어집니다. 보조 컬러로 오렌지·핑크가 있지만 모두 따뜻한 계열에 묶여 있어 일관된 "친근한 음식 앱" 인상을 만듭니다.

타이포는 한글 가독성을 위해 Pretendard 단일 사용, iOS 시스템 글리프(시간/상태바)에만 SF Pro 를 사용합니다. 폰트 weight 는 Regular(400) / Medium(500) / SemiBold(600) / Bold(700) 4단계로 운용.

캔버스는 iOS 390×844 모바일 portrait 가 기준이며, 모든 화면은 Status Bar 54px + Home Indicator 21px Safe Area 안에서 설계됩니다.

Key Characteristics

단일 메인 컬러: #ffde36 (YumYum Yellow). CTA, 핵심 액센트, 로고 모두 이 한 컬러
보조 액센트: #ff8500 (오렌지) + #ff91c7 (온보딩 핑크)
마스코트 시스템: Yami / Yamu / Kumo / Pong-ji / Hong-ji / Chila 등 — 브랜드 톤의 핵심 자산
iOS 모바일 전용: 390×844 baseline, Safe Area 54+21px
Pretendard 단일: 한글 가독성 + 영문 자형 균형
컴포넌트 641개: 화면 셸 / 버튼 / 입력 / 카드 / 카테고리 칩 / 아이콘 / 빈 상태 등 전 영역 커버
5탭 본 네비: Home / Search / Favorite / Orders / Profile

colors

Brand & Accent

YumYum Yellow 토큰: main · #ffde36
모든 primary CTA, 핵심 액센트, 브랜드 마크. 단일 메인 컬러로 brand voltage 를 모두 담당.

Main Orange 토큰: main_orange · #ff8500
서브 브랜드 컬러. 포인트, 보조 강조에 사용.

Onboarding Pink 토큰: Onboarding_pink · #ff91c7
온보딩 화면 전용. 일반 화면에서는 사용하지 않음.

Yellow Scale

라이트한 크림 → 메인 옐로우로 이어지는 8단계 스케일.

fff6cf

fff4c9

ffe6b8

ffd78c

fdbc45

f5c51d

ffcd1e

ffde36 ★

Orange / Pink / Magenta

ff8500

ff8a00

eb7501

ff7752

ff91c7

ffb8bf

a40037

ba134b

bc2f5b

HEX	용도
`#ff8500`	메인 오렌지 (`main_orange`)
`#ff8a00` / `#eb7501`	오렌지 변형
`#ff7752`	살몬 오렌지
`#ff91c7`	온보딩 핑크
`#ffb8bf`	라이트 핑크
`#a40037` / `#ba134b` / `#bc2f5b`	딥 마젠타 / 와인

Neutrals

000

080808

222

2d2d2d

333

464646

6b6b6b

777

848484

999

cecece

ededed

f7f7f7

fff

토큰	HEX	사용 빈도	용도
`Neutral/Black`	`#000000`	최다	본문 텍스트, 아이콘
`Neutral/Near-Black`	`#080808`	높음	강조 텍스트
`Neutral/900`	`#222222`	높음	헤더 텍스트
`Neutral/800`	`#2d2d2d`	중간	부제
`Neutral/700`	`#333333`	중간	본문
`Neutral/600`	`#464646`	중간	서브 텍스트
`Neutral/500`	`#6b6b6b`	중간	보조 텍스트
`Neutral/400`	`#777777`	중간	비활성, `BG-Gray-30/70` 베이스
`Neutral/350`	`#848484`	중간	플레이스홀더
`Neutral/300`	`#999999`	중간	비활성
`Neutral/200`	`#cbcac8` / `#cecece`	중간	디바이더
`Neutral/150`	`#ededed`	중간	라이트 디바이더
`Neutral/100`	`#f7f7f7`	중간	백그라운드
`Neutral/0`	`#ffffff`	2위	카드, 시트, 화이트 베이스

Alpha 변형

변수명	정의
`BG-Gray-30`	`#777777` @ 30% 투명도
`BG-Gray-70`	`#777777` @ 70% 투명도
`Yellow-cart`	`#000000` @ 20% 투명도

Semantic — Error / Danger

eb2323

fcdede

HEX	용도
`#eb2323`	Error 텍스트, 경고 아이콘
`#fcdede`	Error 배경 (라이트)

Semantic — Success

3cde75

99d162

458a4b

c5ff9c

HEX	용도
`#3cde75`	Success 메인
`#99d162`	Success 강조
`#458a4b`	Success 텍스트
`#c5ff9c`	Success 배경

Semantic — Info / Link

2597ba

005878

006699

1496c9

c2e3eb

2763ff

HEX	용도
`#2597ba`	인포 메인
`#005878` / `#006699`	인포 다크
`#1496c9`	링크 변형
`#c2e3eb`	인포 배경
`#2763ff`	링크 블루

Food / Earth Tones

음식 카테고리(커피·베이커리 등) 강조에 사용하는 어스 톤.

bb7b4d

8f4d36

996246

c18161

eb894b

191403

HEX	용도
`#bb7b4d`	브라운 (커피·베이커리)
`#8f4d36`	다크 브라운
`#996246`	미디엄 브라운
`#c18161`	라이트 브라운
`#eb894b`	오렌지 브라운
`#191403`	딥 커피

typography

Font Family

우선순위	폰트	용도
Primary	Pretendard	한글 본문 / UI 전체
Secondary	SF Pro	iOS 시스템 글리프 (시간, 상태바)
⚠️ 정리 권장	Noto Sans, Inter	일부 잔존 — 제거 필요

Type Scale (제안 토큰)

토큰	Family / Weight	Size	사용 빈도	용도
`caption-xs`	Pretendard Regular	10	145회	캡션, 메타
`caption`	Pretendard Regular	12	377회 (최다)	보조 텍스트, 라벨
`caption-bold`	Pretendard SemiBold	12	다수	강조 라벨
`body-sm`	Pretendard Regular	14	251회	본문 small
`body-sm-medium`	Pretendard Medium	14	다수	본문 small 강조
`body-sm-semibold`	Pretendard SemiBold	14	다수	강조
`body`	Pretendard Regular	16	다수	본문
`body-medium`	Pretendard Medium	16	다수	본문 강조
`body-semibold`	Pretendard SemiBold	16	다수	본문 강조 (semi)
`body-bold`	Pretendard Bold	16	다수	본문 굵게
`heading-sm`	Pretendard SemiBold	17 / 18	다수	부제목
`heading`	Pretendard Bold	18	다수	섹션 제목
`display`	Pretendard Bold	28	적음	큰 헤드라인

Size Steps

10 / 12 / 14 / 16 / 17 / 18 / 28 (px) — 7단계.

12px / 14px 가 압도적 최다 사용 — 모바일 좁은 화면에 최적화된 정보 밀도 톤.

layout

Canvas

모바일 baseline: 390 × 844 (iPhone 13 클래스 portrait)
iOS Safe Area:
- 상단 Status Bar: 54px (Time 컴포넌트)
- 하단 Home Indicator: 21px

Container Patterns

패턴	사이즈	용도
Full Width	`390`	풀폭 콘텐츠
Side Padding	`20` (좌우)	화면 좌우 여백
Onboarding Container	`350 × 463`	온보딩 콘텐츠 박스
Button Large	`295 × 55`	메인 CTA
Bottom Sheet (Large)	`390 × 549`	약관 동의 long form
Bottom Sheet (Medium)	`390 × 260`	위치 선택
Bottom Sheet (Sort)	`390 × 226`	정렬 옵션
Bottom Sheet (Terms)	`390 × 205`	약관 동의 short
Popup (with content)	`300 × 247`	표준 팝업
Popup (empty)	`300 × 161`	빈 상태 팝업

spacing & radius

Spacing 토큰 (제안)

토큰	Value	용도
`xs`	`4`	미세 갭
`sm`	`8`	인라인 갭
`md`	`16`	표준 갭
`lg`	`20`	화면 좌우 패딩 (Side Padding)
`xl`	`24`	큰 갭
`2xl`	`32`	섹션 분리

Radius 토큰 (제안)

토큰	Value	용도
`sm`	`4`	작은 인라인
`md`	`8`	표준 카드, 버튼
`lg`	`12`	큰 카드
`full`	`10000`	원형, pill

components

총 641개 의 로컬 컴포넌트 / 406개 고유 이름.

Shell (화면 셸)

컴포넌트	용도
`Basic_screen` / `Base_screen`	모든 화면의 컨테이너
`Base_screen/Bottom sheet`	바텀시트 셸
`Base_screen/Home Indicator`	홈 인디케이터 (21px)
`Time`	iOS 상태바 시계 (54px)
`Bottom Tab Bar`	5개 탭 (Home / Search / Favorite / Orders / Profile)
`Title Bar`	페이지 타이틀
`Header style=Default·Search·Typing`	헤더 변형
`Home header`	홈 전용 헤더
`Navigation bar` (`320`/`375`/`+375`)	일반 네비게이션

Buttons

컴포넌트	사이즈	용도
`Button - Large`	295 × 55	메인 CTA (노랑 `#ffde36` 채움)
`Button - Small`	—	보조 액션
`Bottom bnt`	—	화면 하단 고정
`Under_Bnt`	—	텍스트 링크
`Start Yumyum btn`	—	시작 버튼
`Popup_Button`	—	팝업 내부
`Large/Small button - Icon frame`	—	아이콘 + 텍스트
`Btn`	—	범용

Inputs

컴포넌트	용도
`Input field`	기본 텍스트 입력
`Input field message icon`	메시지 아이콘 포함
`Input filed function icon`	기능 아이콘 포함
`Input filed indicator icon`	인디케이터 포함
`Login / input` (variant set)	로그인 입력
`Copoun input`	쿠폰 입력

Selection Controls

컴포넌트	Variants
`Check box`	`Checked=Yes/No`
`Radio btn`	—
`Toggle`	`On` / `Off`, `Selected=Yes/No`, `Show=Yes/No`
`Quantity selector`	수량 선택 (- / +)
`Duration selector`	시간 선택
`Dropdown`	`status=Open/Closed`

Cards / Content

컴포넌트	용도
`Store card`	매장 카드
`Store image`	매장 이미지
`store card - home` (358 × 195)	홈 매장 카드
`Home screen / Resauratn card`	홈 매장 카드 변형
`Favorite store`	즐겨찾기 카드
`Meal card` / `Meals` / `Meals summary`	메뉴 카드
`Order card` / `Order flow` / `Order status`	주문 카드
`Orders summary`	주문 요약
`Notification card`	알림 카드
`Banner`	배너
`List / Categories`	카테고리 리스트
`Screen tabs`	스크린 탭

Cart / Coupon

컴포넌트	Variants
`Add to cart` / `Add to cart section`	—
`Cart`	`=Add to / Remove from / Disabled`
`Coupon`	`=Added / Not added`
`Ordered meal`	주문된 메뉴

Store Status (매장 운영 상태)

Variant	의미
`Open now`	영업 중
`Closed`	영업 종료
`Opnenig time`	오픈 시간 표시 (typo — `Opening time`)
`Receive orders at`	주문 접수 시간
`Store call`	전화 주문

Order State Machine

고객 측 (User App)

pending → recieved → Accepted → Preparing → Done

사장 측 (Store App)

New order → Active
              ├─ Paused
              ├─ Busy
              └─ Closed

추가 상태: Replied, started, Middle state

Map / Location

컴포넌트	용도
`Map_pin-open` / `Map_pin-close`	매장 핀 (영업/마감)
`MiniMap_pin-open` / `MiniMap_pin-close`	미니맵
`Map_view-Button-On/Off`	지도/리스트 토글
`Map_view-open` / `Map_view-close`	지도 뷰 상태
`Map_view-open-Discount`	할인 강조 지도
`Current location`	현재 위치
`Location`	`=Default / Detect location`
`Mappin`	일반 핀
`Saved addresses bottom sheet`	저장 주소 시트
`Address type`	주소 타입

Feedback / Overlay

컴포넌트	용도
`Toast`	토스트 메시지
`Snackbar content`	스낵바
`Popup` (`1-line` / `2-line` / `3-pic` / `NO-text`)	팝업 변형
`Popup_2`	팝업 변형
`Alert / 현재위치` (140 × 35)	위치 알림

Review / Rating

컴포넌트	용도
`Review` / `Review card` / `Review card - client`	리뷰
`Bussiness owner reply` (typo — `Business`)	사장님 답글
`Status` (`=Add reply / Replied / Reply form`)	답글 상태
`Grade` / `Grade_icon` / `Star`	별점

Avatars / Mascots

🐱 마스코트 캐릭터 — 브랜드의 핵심 자산

Yami (냐미) · Yamu (냐무) · Kumo (쿠모) · Pong-ji (빵지) · Hong-ji · Chila (칠라) · 무무 · 무지 · 상수 · 흰둥이 · 효희

컴포넌트	용도
`User avatar`	일반 사용자 아바타
`User avatar / 사장님`	사장님 아바타
`Avatar / Image-60`	60px 아바타
`Charater` (typo — `Character`)	캐릭터 일러스트

Category Chips (음식 분류)

한식 · 중식 · 일식 · 아시안 · 회 · 고기 · 치킨 · 피자 · 햄버거 · 김밥분식 · 도시락 · 샌드위치 · 샐러드 · 커피음료 · 빵지

Icon System

Icon= variant — 약 40종.

그룹	아이콘
네비게이션	Back, Cancel, Down, Up, Right, Left, More
액션	Edit, Delete, Plus, Minus, Reload, Reorder, Search, Upload, Download
상태	Success, Error, Hint, Hide, View, Mandatory, Maintenance, Repair
컨텐츠	Cart, Cart out, Calendar, Date, Time, Won, Flag, Email, Phone number
개인	User - Profile, ID, Date of birth, Gender, Lock, Lock - Password, Passport, Language
위치	Location, User location
기타	Checkout, WhatsApp, Hide, Assign to unit, Change accommodation

Empty / Exception States

컴포넌트	용도
`Empty`	빈 상태
`Empty_icon`	빈 상태 아이콘
`Warring_icon` (typo — `Warning`)	경고 아이콘
`X-2`	닫기

interactions

CTA Hierarchy

메인 CTA — Button - Large (295 × 55, 노랑 #ffde36 채움)
하단 고정 CTA — Bottom bnt
보조 액션 — Button - Small
텍스트 링크 — Under_Bnt

Bottom Sheet — 용도별 높이

용도	높이
약관 동의 (long form)	549
약관 동의 (short)	205
위치 선택	260
정렬 옵션	226

상태	사이즈
표준 (with content)	300 × 247
Empty 상태	300 × 161

Toast

화면 하단에서 슬라이드 업
자동 dismiss

token recommendations

현재 Figma 파일은 로컬 토큰이 매우 적게 정의되어 있음 (paint style 1개, variable 10개). 아래 정리를 권장합니다.

Variable Collection (제안)

yaml

Color/Brand:
  main:             "#ffde36"
  main-orange:      "#ff8500"
  onboarding-pink:  "#ff91c7"

Color/Neutral:
  0:    "#ffffff"   # white
  100:  "#f7f7f7"
  150:  "#ededed"
  200:  "#cecece"
  300:  "#999999"
  400:  "#777777"
  500:  "#6b6b6b"
  600:  "#464646"
  700:  "#333333"
  800:  "#2d2d2d"
  900:  "#222222"
  1000: "#000000"   # black

Color/Semantic:
  error:     "#eb2323"
  error-bg:  "#fcdede"
  success:   "#3cde75"
  info:      "#2597ba"
  link:      "#2763ff"

Color/Alpha:
  bg-gray-30:   "#777777 @ 30%"
  bg-gray-70:   "#777777 @ 70%"
  yellow-cart:  "#000000 @ 20%"

Spacing:
  xs:  4
  sm:  8
  md:  16
  lg:  20
  xl:  24
  2xl: 32

Radius:
  sm:    4
  md:    8
  lg:    12
  full:  10000

Typography (Text Style):
  display:     "Pretendard Bold 28"
  heading:     "Pretendard Bold 18"
  heading-sm:  "Pretendard SemiBold 17"
  body:        "Pretendard Regular 16"
  body-sm:     "Pretendard Regular 14"
  caption:     "Pretendard Regular 12"

정리 필요 항목

[ ] Text Style 부재 — 폰트 사이즈/웨이트가 raw value 로 적용됨. 위 토큰으로 등록 권장
[ ] Color Style 1개 — main 외에 시멘틱 컬러 미정의. 시스템 컬러를 paint style 또는 variable 로 등록 권장
[ ] Component naming 정리 — 속성 1=… 같은 placeholder, Resauratn / Opnenig / Bussiness / Warring / Charater 등 오타 정정
[ ] Property 1=… 익명 variant → 의미 있는 property 이름으로 변경

do / don't

Do

#ffde36 (YumYum Yellow) 는 primary 액션·핵심 액센트·로고에만 — 본문 텍스트나 큰 surface fill 에 사용 X
마스코트 캐릭터를 적극 활용 — 친근한 톤이 브랜드의 핵심
Pretendard 단일 사용 (한글 가독성)
iOS 390×844 baseline + Safe Area (54+21) 안에서 설계
모든 컴포넌트는 변형(variant) 으로 관리 — =Yes/No, =Open/Closed 등

Don't

노랑 위에 흰색 텍스트 X — 검은색 텍스트 (#000 또는 near-black) 사용
두 번째 메인 브랜드 컬러 도입 X — 오렌지·핑크는 "보조" 위계 유지
카테고리별 강조 컬러를 Brand main 자리에 사용 X
라운드를 너무 다양하게 사용 X — 4 / 8 / 12 / full 4단계 안에서

references

디자인 파일: YumYum-v1 (Figma)
BM Flow 보드: YumYum BM Flow / 기획 (FigJam)
서비스 페이지: https://www.yumyum.im
화면 명세서: 02-screen-specs
개발자 핸드오프: 04-developer-handoff
용어 정의: Glossary

디자인 시스템 — Style A (getdesign.md 풍) ​

큰 그림 (Overview) ​

colors ​

Brand & Accent ​

Yellow Scale ​

Orange / Pink / Magenta ​

Neutrals ​

Alpha 변형 ​

Semantic — Error / Danger ​

Semantic — Success ​

Semantic — Info / Link ​

Food / Earth Tones ​

typography ​

Font Family ​

Type Scale (제안 토큰) ​

Size Steps ​

layout ​

Canvas ​

Container Patterns ​

spacing & radius ​

Spacing 토큰 (제안) ​

Radius 토큰 (제안) ​

components ​

Shell (화면 셸) ​

Buttons ​

Inputs ​

Selection Controls ​

Cards / Content ​

Cart / Coupon ​

Store Status (매장 운영 상태) ​

Order State Machine ​

Map / Location ​

Feedback / Overlay ​

Review / Rating ​

Avatars / Mascots ​

Category Chips (음식 분류) ​

Icon System ​

Empty / Exception States ​

interactions ​

CTA Hierarchy ​

Bottom Sheet — 용도별 높이 ​

Popup ​

Toast ​

token recommendations ​

Variable Collection (제안) ​

정리 필요 항목 ​

do / don't ​

Do ​

Don't ​

references ​