YumYum 디자인 시스템 — 3종 화면 운영 전략 v3
고객 앱 / 사장님 Portal / 내부 어드민 — 어느 디자인 시스템으로 운영할지 정리 작성일: 2026-05-14 (v3 — 노랑 #FFDE36으로 전체 통일 최종 확정) 핵심 결정: 모든 3종 화면에서 YumYum Yellow
#FFDE36단일 사용
1. 결정 요약
🎯 모든 사이드에서 YumYum Yellow
#FFDE36사용. 차별화는 컬러가 아닌 레이아웃·콘텐츠 밀도·캐릭터·다크 톤으로.
1.1 의사결정 여정 (3번의 반복)
| 시기 | 시도 | 결과 |
|---|---|---|
| v1 (2026-05-13) | 노랑 통일 — 3종 화면 모두 #FFCC33 (이전 메인) | 이론적으로 깔끔 |
| v1 시각 검증 | 어드민에 #FFCC33 + warm dark 적용 → admin.yumyum.im(Binance)과 비교 | "Binance 원본이 훨씬 좋다" — warm 노랑이 트레이딩 도구다움을 해침 |
| v2 (2026-05-14 오전) | 옵션 B 채택 — B2C는 #FFDE36, B2B는 Binance #FCD535 | 분리 운영 |
| #FFDE36 발견 | 디자이너 원안이 사실 #FFDE36 (이전 #FFCC33보다 밝고 lemon톤) | 메인 컬러 변경 |
| v3 재검토 (2026-05-14 오후) | "새 #FFDE36은 Binance #FCD535와 거의 같은 톤" 발견 (HSL 차이 <2%) | 통일 가능성 재확인 |
| v3 시각 검증 | 어드민에 #FFDE36 적용 → 비교 | "통일이 훨씬 좋다" ✅ |
| v3 최종 | 3종 화면 모두 #FFDE36 단일 사용 | 진정한 브랜드 통일 |
1.2 왜 이번엔 통일이 작동하는가?
v1에서 통일이 실패한 이유는 #FFCC33(이전 노랑)이 너무 warm해서 트레이딩 도구다움을 해쳤기 때문.
v3에서는 #FFDE36(디자이너 원안)이 Binance 골드와 거의 같은 톤이라 그 문제가 자동 해소됨:
#FFDE36= hsl(52, 100%, 60%)#FCD535(Binance) = hsl(51, 97%, 60%)- 시각 차이 2-3%, 거의 동일
→ YumYum 브랜드 정체성 + 트레이딩 도구 임팩트 둘 다 만족.
2. 3종 화면 매핑
| 사이드 | URL | 대상 | 디자인 시스템 | 노랑 |
|---|---|---|---|---|
| 고객 앱 | yumyum.im | 일반 소비자 | YumYum v2 (01~09.md) | #FFDE36 |
| 사장님 Portal | store.yumyum.im | 가맹점주 (B2B) | YumYum + 도구 패턴 | #FFDE36 |
| 내부 어드민 | admin.yumyum.im | YumYum 운영팀 | YumYum + 도구 패턴 (Wanted 베이스) | #FFDE36 |
💡 모두 같은 노랑 — 진정한 브랜드 통일.
3. 차별화는 컬러가 아닌 다른 차원으로
같은 노랑을 쓰지만 사이드별로 분위기는 자연스럽게 갈라져요. 4가지 차원으로 차별화:
| 차원 | 고객 앱 | 사장님 Portal | 내부 어드민 |
|---|---|---|---|
| 노랑 비중 | 60% (활기, 강조) | 35% (CTA·강조점만) | 25% (액센트 폭발) |
| Neutral 비중 | 30% | 55% | 65% (데이터 위주) |
| 레이아웃 | 모바일 카드 위주 | 다크 사이드바 + 라이트 메인 | 다크 사이드바 + 라이트 메인 (더 dense) |
| 캐릭터 활용 | 자유롭게 (메인, 빈상태) | 환영·성공 모먼트만 | 거의 없음 (로그인 정도) |
| 본문 폰트 | 16px+ | 14-15px | 13-14px (정보 밀도 ↑) |
| 모션 | 풍부 | 절제 | 미니멀, 즉각적 |
→ 노랑은 통일, 사용감은 차별화.
4. 비즈니스 도구 (사장님 Portal + 어드민) 공통 패턴
같은 디자인 시스템 1세트로 운영. 다른 docs와 admin 코드 참고.
4.1 핵심 시각 패턴
- 다크 사이드바 (
#0B0E11) + 라이트 메인 (하이브리드) - 액티브 메뉴 =
#FFDE36배경 +#181A20텍스트 (브랜드 시그니처) - KPI 카드 + 카테고리 색상 분기 (Tier 2)
- 상태 배지 6종 (운영중/준비중/대기/일시정지/취소/비활성)
- 데이터 테이블 빽빽한 row + hairline 구분
- Split 로그인 다크 좌 hero + 라이트 우 폼 + 노랑 ambient glow
4.2 다크 톤 (Binance 베이스 유지)
노랑은 #FFDE36으로 통일했지만, 다크 surface는 Binance 원본 유지 — 이게 트레이딩 도구다움의 핵심.
| Token | Value | 비고 |
|---|---|---|
| Canvas Dark | #0B0E11 | 사이드바, 다크 hero |
| Surface Card Dark | #1E2329 | 다크 카드 |
| Surface Elev Dark | #2B3139 | nested, hover |
| Hairline | #EAECEF / #2B3139 | 보더 |
💡 노랑은 통일, 다크 톤은 cool — 두 결정이 만나서 "YumYum 브랜드 + 트레이딩 도구 임팩트" 동시 달성.
5. YumYum 디자인 시스템 (전체 공통)
5.1 핵심 토큰 (단일)
| Token | Value | 비고 |
|---|---|---|
| Brand Yellow | #FFDE36 ⭐ | 모든 사이드 통일 |
| Yellow Active | #F2CC0F | hover/press |
| Yellow Soft | #FFFCE5 | tint, 배지 |
| Yellow Rating | #F5C51D | 별점 전용 semantic |
| Neutrals | warm gray 11단계 | R값 살짝 높임 |
| Dim Image | rgba(107,107,107,0.5) | 매장 카드 영업안함 등 (cool gray, 의도된 분리) |
| Dim Modal | rgba(13,12,10,0.5) | 모달 백드롭 |
5.2 캐릭터 가족 10명
메인 7명: 야미 · 야무 · 쿠모 · 퐁지 · 칠라 · 홍지 · 강지(홍지의 강아지) Blue 가족 3명: 브라운 · 크림 · 블루 (브라운·크림 남매 + 아빠 블루) 가게 아이콘 1개: 사장님 리뷰 댓글용
- 고객 앱: 자유롭게 활용 (메인, 빈상태, 이벤트)
- 사장님 Portal: 환영 / 성공 모먼트 / 빈상태만
- 내부 어드민: 거의 없음 (로그인 hero 정도)
→ 상세 정체성·말풍선·컬러 매핑: 12-characters
6. 운영 체크리스트 (화면 만들 때)
- [ ] Brand Yellow
#FFDE36사용? (다른 노랑 X) - [ ] 별점은
yellow-rating(#F5C51D) 사용? - [ ] 노랑 위 텍스트는
neutral-800이상의 검정 계열? - [ ] 사장님/어드민이면 다크 사이드바 + 액티브 메뉴 노랑 패턴?
- [ ] 사이드별 노랑 비중 적절? (B2C 60% / Portal 35% / 어드민 25%)
- [ ] 캐릭터 등장한다면 컨텍스트에 맞는 사이드?
7. 파일 구조
00-DesignSystem/
├── 01-colors.md # ✅ 컬러 (Brand Yellow + Rating + Neutrals + Dim + Tier 2)
├── 02-typography.md # ✅ 타이포 — 공유
├── 03-spacing.md # ✅ 4px 베이스 — 공유
├── 04-elevation.md # ✅ — 공유
├── 05-components.md # ✅ 컴포넌트 (Tab Bar, Button, Card 등)
├── 06-iconography.md # ✅ Stratis Icons — 공유
├── 07-states.md # ✅ Empty/Loading/Error — 공유
├── 08-motion.md # ✅ 모션 — 공유
├── 09-accessibility.md # ✅ WCAG 2.1 AA — 공유
├── 10-owner-strategy.md # ← 이 문서 (3종 화면 통일 전략)
├── 11-admin-binance-mapping.md # B2B 도구 다크 패턴 reference (Binance Wanted 베이스)
└── index.md # 진입점💡 하나의 디자인 시스템 = 1세트. v1에서 시도했던 통일이 v3에서 실현됨.
8. 의사결정 로그 (Source of Truth)
| 날짜 | 결정 | 비고 |
|---|---|---|
| 2026-05-13 | 디자인 시스템 v2 구축 (Yellow #FFCC33 베이스) | 11단계 스케일 + Tier 2 |
| 2026-05-13 | (v1) 노랑 통일 시도 — 3종 화면 #FFCC33 | 어드민에 적용 |
| 2026-05-14 오전 | 시각 검증 결과 옵션 B 채택 — B2C YumYum / B2B Binance 분리 | warm 톤이 도구다움 해침 |
| 2026-05-14 오후 | 디자이너 원안 #FFDE36 발견 → B2C 메인 노랑 변경 | 더 밝고 lemon톤 |
| 2026-05-14 오후 | 재검토: #FFDE36 ≈ Binance #FCD535 (HSL 2-3% 차이) | 통일 가능성 재발견 |
| 2026-05-14 오후 | 어드민 #FFDE36 적용 → 시각 검증 → 통일 채택 ✅ | 이전 우려 자동 해소 |
| 2026-05-14 | v3 최종: 3종 화면 #FFDE36 통일 | 진정한 브랜드 통일 |
| 2026-05-14 | Dim & Overlay 가이드 추가 (#6B6B6B 50% 단일 표준) | 디자이너 의도 |
| 2026-05-14 | Rating Yellow #F5C51D semantic 분리 | 별점 전용 |
| 2026-05-14 | Tab Bar 디자이너 스펙 (390×83, 활성=다크 그레이) | 노랑 X 명시 |
9. 참고 자료
- 디자이너 Figma: YumYum-v1
- Wanted DS (B2B 도구 베이스): typography·spacing 참고
- Binance DESIGN.md (다크 톤 영감): https://getdesign.md/binance/design-md
- 실제 구현:
- 고객 앱: yumyum.im
- 사장님 Portal: store.yumyum.im
- 내부 어드민: admin.yumyum.im
이 문서는 살아있는 문서입니다. 3종 화면 디자인이 발전하면서 함께 업데이트하세요.