디자인 시스템 현황 스냅샷
작성일: 2026-05-18 (KST) 최종 갱신: 2026-05-18 — P0 6건 전부 해소 + Phase A·B·C 완료 + Figma single source 재정렬 (Neutral 200/600/700을 Figma 값으로 복귀) + Figma 작업 가이드 16-figma-token-sync.md 작성 (6개 토큰 추가 작업) 대상:
30-design/문서 ↔10-user-app-pwa/(Next.js + Tailwind v3) 목적: 오늘 점검한 결과를 한 페이지로 요약하고, 다음 작업 우선순위를 정리
1. 한눈에 보기
| 영역 | 상태 | 비고 |
|---|---|---|
| 디자인 시스템 문서 (14종 md + 2종 json + 1 html) | 🟢 거의 완비 | 토큰·컴포넌트·상태·모션·접근성·전략·캐릭터 모두 정의 |
Tailwind 토큰화 (tailwind.config.ts) | 🟢 양호 | 11단계 yellow, cool gray neutrals, dim, radius, shadow 모두 토큰화 |
Brand Yellow #FFDE36 단일 사용 | 🟢 완전 일치 | 문서·JSON·코드·manifest 모두 동일 |
| Neutrals 컬러 스케일 | 🟢 Figma 정렬 완료 (2026-05-18 v3.1) | docs·JSON·tailwind 모두 Figma Variables 값(#EDEDED/#777/#464)으로 정렬. Figma node 6972:8016이 single source of truth |
| 아이코노그래피 문서 | 🟢 P0 단일 정본 | 06-stratis-ui-icons.md 하나만 존재 (§3 색 토큰 cool로 갱신) |
| Elevation/그림자 | 🟢 P0 cool 통일 (2026-05-18) | rgba(10,10,10,x) (neutral-950 베이스)로 일괄 통일 |
| docs ⭐ 노랑 토큰 (login/banner/rating) | 🟢 코드/docs 완료, 🟠 Figma 미등록 | tailwind에 yellow.login/banner/rating 모두 등록·치환 완료. Yellow/Login만 Figma에 있고, Banner/Rating은 디자이너 추가 필요 — 가이드: 16-figma-token-sync.md |
| Button 컴포넌트 채택률 | 🟠 P1 0% | 페이지가 전부 <Link className=...> 인라인 CTA |
| 온보딩 1/2/3 페이지 일관성 | 🟢 코드 완료, 🟠 Figma 미등록 | tailwind에 pink/brown/green.onboarding + ONBOARDING_BG 상수 import 패턴 완료. Figma Variables에 3개 토큰 미등록 — 가이드: 16-figma-token-sync.md |
| Input/Badge/Toast | 🟢 P1 구현 완료 (2026-05-18) | components/Input.tsx, Badge.tsx, Toast.tsx 신규. 05-components.md spec 1:1 매칭. List Item만 미구현 |
| LaundryGothic 폰트 실제 로드 | 🟠 P1 누락 | tailwind/CSS 정의만, @font-face/next/font 없음 |
총 불일치 32건 — P0 6건 / P1 16건 / P2 10건 (자세한 표는 14-audit-consistency.md 참조)
✅ 2026-05-18 P0 6건 전부 해소 — Neutrals 200/600/700 통일, 아이코노그래피 §3 cool 마이그레이션, Notification/Alert HEX 갱신, Elevation 그림자 베이스 cool 통일, 06 문서 단일 정본 확인, tailwind에 docs ⭐ 토큰 등록 + Banner.tsx 하드코딩 치환까지 완료. single source of truth는 Figma node 6972:8016 — docs(
01-colors.md)·design-tokens.json·tailwind.config.ts모두 동일 값 (#EDEDED/#777777/#464646).
2. 화면/컴포넌트 인벤토리 요약
PWA 화면 (7개 라우트)
| 경로 | 역할 | 토큰 일관성 |
|---|---|---|
/ | 개발용 진입 메뉴 | 🟠 hover:bg-[#FFCC1F] 하드코딩 |
/access | 권한 안내 모달 | 🟠 inline #828282, bg-neutral-100/60 |
/onboarding/1 | 매장가격 그대로 픽업 (핑크) | 🟢 bg-pink-onboarding 토큰 사용 |
/onboarding/2 | 미리주문 픽업 (브라운) | 🔴 const ACCENT = '#C48257' 인라인 |
/onboarding/3 | 국내 최저 수수료 (그린) | 🔴 const ACCENT = '#419A49' 인라인 |
/home | 메인 홈 (가장 완성도 높음) | 🟢 대부분 토큰, Banner만 hex 하드코딩 |
/pwa | PWA 진입 디버그 | 🟡 Figma 절대좌표(개발용) |
구현 컴포넌트 (11개)
Button, PhoneFrame, StatusBar, HomeIndicator, LocationHeader, Banner, Categories, StoreCard, MoreStoresButton, BottomTabBar, LocationBottomSheet, Footer, YumYumLogo, Icon, PermissionIcons, ServiceWorkerRegistrar
미구현 컴포넌트 (05-components.md 정의만 존재)
Input, Badge/Tag, Toast/Snackbar, List Item, Menu Item Card, Price Display, Quantity Stepper, Order Summary
3. 사이드별 점검 상태
| 사이드 | 코드 위치 | 점검 상태 |
|---|---|---|
| 고객 PWA | 10-user-app-pwa/ | ✅ 완료 (본 점검) |
| 사장님 Portal | store.yumyum.im | ⏳ 미점검 — 코드 위치 확인 필요 |
| 사장님 App | TBD | ⏳ 미점검 |
| 사장님 POS | TBD | ⏳ 미점검 |
| 어드민 | admin.yumyum.im | ⏳ 미점검 — Wanted+Binance 토큰 잔존 여부 |
| 마케팅 사이트 | TBD | ⏳ 미점검 |
4. 추천 다음 작업 (Quick Wins → 큰 작업)
A. P0 일괄 패치 (반나절 작업)
문서 정합성을 한 번에 회복하는 5건 + tailwind 토큰 추가 1건.
- ✅
01-colors.mdNeutrals 200/600/700 → cool gray 통일 (2026-05-18 완료) - ✅
06-iconography.md/06-stratis-ui-icons.md통폐합 → 단일 파일 상태 확인 완료 - ✅
06-stratis-ui-icons.md§3 아이콘 색 → cool gray로 수정 (2026-05-18 완료) - ✅
01-colors.md§2.3 Notification·Alert HEX → cool gray로 수정 (2026-05-18 완료) - ✅
04-elevation.md그림자 베이스 rgba →(10,10,10,…)로 통일 (2026-05-18 완료, v3로 버전 업) - ✅
tailwind.config.ts→yellow.login/banner/rating,orange.main,pink.onboarding모두 등록 완료 (2026-05-18 v3.3).Banner.tsx/app/page.tsx의bg-[#FFCC1F]는 모두bg-yellow-banner로 치환 완료. 추가로 tailwind의 neutral-200/600/700도 docs와 매칭되도록#E5E5E5/#6E6E6E/#525252로 정정.
추가 cool 통일 작업 (2026-05-18 완료):
05-components.md(Toast),07-states.md(Skeleton),12-characters.md(아바타 배경),00-design-system.html(:root + 모든 인라인 hex + SVG 캐릭터 외곽선 + 토큰 표) 모두 cool gray로 마이그레이션.
B. 컴포넌트 통일 (1~2일)
- 온보딩 1/2/3 ACCENT 토큰화 — 2/3의 inline
#C48257/#419A49를 토큰으로 끌어올리기 - Button 컴포넌트 채택 — 페이지의
<Link className=...>CTA를<Button>또는<Button as={Link}>로 일괄 교체 - Banner/StoreCard 인라인 dim·hex → 토큰 치환
C. 신규 컴포넌트 빌드 (백로그)
- ✅
Input—components/Input.tsx(2026-05-18). 3 sizes × 5 states + leading/trailing icon + label/helper/error 지원 - ✅
Badge/Tag—components/Badge.tsx(2026-05-18). shape(badge/tag) × 3 variants - ✅
Toast—components/Toast.tsx(2026-05-18). 4 durations + action + dismissible, elevation-2(shadow-e3) 적용 - ⏳
List Item— 백로그. PWA 후속 화면(주문/메뉴 리스트) 작업과 짝지어 진행
D. 인프라/자동화
design-tokens.json→ Tailwind config 자동 변환 빌드 스텝 (Style Dictionary 등)- HTML 데모(
00-design-system.html):rootNeutrals를 cool gray로 갱신 - LaundryGothic 폰트
@font-face실제 로드
5. 결정 필요 사항 (코니의 판단)
| 항목 | 옵션 A | 옵션 B | 메모 |
|---|---|---|---|
| BottomTabBar 높이 | docs spec 56px | 현재 코드 64px | 단일 값 채택 후 양쪽 동기화 |
| BottomTabBar 배경 | docs spec white | 현재 코드 neutral-100 | 동일 |
| LocationBottomSheet backdrop | docs spec dim-medium(0.5) | 현재 코드 dim-strong(0.7) | 동일 |
| Header(App Bar) 높이 | docs spec 56 | 현재 코드 64 (LocationHeader) | "Home variant"로 별도 spec 명시할지 |
| Button Large radius | docs §5.3 radius-sm 위계 | 현재 pill(full) | pill 채택 후 §5.3에 예외 명시 추천 |
| 별점 yellow | docs yellow-rating #F5C51D | 현재 코드 yellow-500 #FFDE36 | 신규 토큰 채택 vs 기존 통일 |
| StoreCard "베스트" 표시 | docs Brand badge | 현재 * 텍스트 | UX 결정 |
다음 점검 권장: P0 패치 완료 직후 + 매월 1회 자동 재점검.