냠냠픽업

테마

디자인 일관성 감사 — YumYum DS v3 ↔ PWA 고객앱 ​

작성일: 2026-05-18 최종 갱신: 2026-05-18 — P0 6건 전부 해소 표시, P1 4건 신규 발견 항목 추가 대상: 13개 디자인 시스템 md + design-tokens.json ↔ 10-User/10-user-app-pwa/ (Next.js + Tailwind) 방법: 모든 문서·JSON·tailwind.config·components/·app/ 실제 파일 직접 read 후 토큰 단위 cross-check

1. 요약 ​

총 32건 불일치 — P0 6건 / P1 16건 / P2 10건. (2026-05-18 재점검에서 P1 4건 신규 발견: 온보딩 2/3 인라인 ACCENT 상수, /access 페이지 inline #828282, Button 컴포넌트 채택률 0%)

✅ 2026-05-18 P0 6건 전부 해소 완료 (v3.1로 정정) — Figma node 6972:8016이 single source of truth로 확정. docs·design-tokens.json·tailwind.config.ts 모두 Figma Variables 값(#EDEDED/#777777/#464646)으로 정렬됨. (초기 v3.0 정렬은 코드/JSON 값이었으나, Figma MCP로 실제 Variables 확인 후 정정.) Banner.tsx·app/page.tsx의 bg-[#FFCC1F]는 모두 bg-yellow-banner로 치환됨. 06 문서는 단일 정본 상태 확인. 남은 P1·P2는 다음 sprint로 이월.

⚠️ 남은 sync 작업 — Figma 쪽에서 디자이너 작업 필요: Yellow/Banner(#FFCC1F), Yellow/Rating(#F5C51D), Pink/Onboarding(#FF91C7), Brown/Onboarding(#C48257), Green/Onboarding(#419A49), Orange/Main(#FF8500) — 코드/docs에는 정의되어 있으나 Figma Variables에 미등록. 코니가 Figma에서 수동 추가 필요.

초기 점검에서 가장 컸던 손상은 Neutrals 컬러 스케일 3-source 충돌과 **아이코노그래피 문서 2벌 (06-iconography.md vs 06-stratis-ui-icons.md)**이었으나, 둘 다 2026-05-18 v3.1에서 해소됨 (위 ✅ 참조). Brand Yellow #FFDE36은 모든 위치(md/JSON/tailwind/layout/manifest)에서 일관되게 사용 중 (P0 없음). 반대로 yellow-banner #FFCC1F·yellow-login #FFF4C9·yellow-rating #F5C51D·orange-main #FF8500 같은 docs ⭐ 토큰들은 tailwind에 정의되지 않아 컴포넌트가 bg-[#FFCC1F] 같은 하드코딩으로 우회 중. Button-Large는 문서대로 pill+55h로 구현되어 있으나 doc 자체의 radius-sm 권장과 충돌. Stratis UI Icons 12종 중 PWA Icon 컴포넌트엔 13종만 구현돼 18종 이상이 missing. 사장님 Portal·어드민 코드는 PWA 폴더에 없어 별도 audit 필요 (10·11번 문서만 점검).

2. 06-iconography.md ↔ 06-stratis-ui-icons.md 이름 충돌 ​

두 파일은 거의 100% 동일한 본문을 가지고 있고, 06-stratis-ui-icons.md만 §6.4/§6.5에 "통합 컴포넌트 패턴"과 "의미별 색 매핑" 두 절이 추가돼 있다.

항목06-iconography.md06-stratis-ui-icons.md
라인 수289343
§1~§5 본문동일동일
§6 (워크플로)6.3까지 (React 예시)6.5까지 (§6.4 통합 컴포넌트, §6.5 의미별 색)
색 토큰 표 (§3)Primary #2D2B27, Secondary #78736A, Disabled #A8A39A, Inverse #FAF9F7 (warm gray)동일 (warm gray)
마지막 갱신 메모없음2026-05-18 표준화

진단: 둘 다 index.md에서 같은 위계로 링크돼 있을 가능성이 있어 다음 정보 위계 중 어느 게 정답인지 모호함. 추가로 두 파일 모두 §3 색 토큰에서 v2 warm gray 값(#2D2B27, #78736A, #A8A39A, #FAF9F7)을 그대로 갖고 있는데, 컬러 docs v3 (cool gray)와 어긋남 — 06 문서가 01-colors.md v3 업데이트를 따라오지 못함.

권장 조치: 06-iconography.md를 삭제하고 06-stratis-ui-icons.md만 남기되 파일명을 06-iconography.md로 통합 (또는 그 반대). 그리고 §3 색 토큰을 v3 cool gray (#333333 / #999999 / #B8B8B8 / #FAFAFA)로 일괄 교체.

3. 카테고리별 매트릭스 ​

3.1 색상 — Brand Yellow ​

항목문서 정의PWA 코드 값일치권장 조치
yellow-500 메인#FFDE36 (01-colors §2.1, JSON, 10·13 문서)#FFDE36 (tailwind L30, globals.css L12, layout.tsx themeColor, manifest theme_color)✅—
yellow-50~950 11단계11단계 전부11단계 전부 동일 HEX✅—
yellow-login ⭐#FFF4C9 (01-colors §2.1)누락 (tailwind에 없음)❌tailwind yellow.login: '#FFF4C9' 추가, 로그인 페이지에서 bg-yellow-100 대신 사용 검토
yellow-banner ⭐#FFCC1F (01-colors §2.1)tailwind 미정의, Banner.tsx L14 bg-[#FFCC1F], app/page.tsx L20 hover:bg-[#FFCC1F], home doc 주석❌tailwind yellow.banner: '#FFCC1F' 추가 후 bg-yellow-banner로 치환
yellow-rating#F5C51D (10·13 문서 — semantic)누락 (tailwind/globals 없음, 별점은 yellow-500 사용 중: StoreCard.tsx L88)❌tailwind yellow.rating: '#F5C51D' 추가하거나 docs에서 yellow-rating 토큰 제거 (현재 코드는 yellow-500을 별점에 사용)
Banner pressed (yellow-700)#C8A607 (01-colors §2.1.1)#C8A607 ✅✅—

3.2 색상 — Neutrals (가장 큰 불일치) ​

항목01-colors.md (v3 주장)design-tokens.jsontailwind / globals.css일치권장 조치
neutral-50#FAFAFA#FAFAFA#FAFAFA✅—
neutral-100#F7F7F7#F7F7F7#F7F7F7✅—
neutral-200 ⭐#EDEDED#EDEDED#EDEDED (탭바 보더 anchor)✅해소됨 (2026-05-18 v3.1) — 셋 다 Figma Variables 값 #EDEDED로 정렬
neutral-300#D4D4D4#D4D4D4#D4D4D4✅—
neutral-400#B8B8B8#B8B8B8#B8B8B8✅—
neutral-500#999999#999999#999999✅—
neutral-600#777777#777777#777777✅해소됨 (2026-05-18 v3.1) — 셋 다 Figma 값 #777777로 정렬
neutral-700#464646#464646#464646✅해소됨 (2026-05-18 v3.1) — 셋 다 Figma 값 #464646로 정렬
neutral-800#333333#333333#333333✅—
neutral-900#222222#222222#222222✅—
neutral-950#0A0A0A#0A0A0A#0A0A0A✅—

✅ 해소됨 (2026-05-18 v3.1): neutral 200/600/700은 docs·design-tokens.json·tailwind.config.ts 셋 다 Figma Variables 값(#EDEDED/#777777/#464646)으로 정렬 완료. Figma node 6972:8016이 single source of truth.

3.3 색상 — Semantic / Dim / Overlay ​

항목문서 정의PWA 코드 값일치권장 조치
dim-strongrgba(10,10,10,0.7)rgba(10,10,10,0.7) (tailwind L59)✅—
dim-mediumrgba(10,10,10,0.5)rgba(10,10,10,0.5)✅—
dim-softrgba(10,10,10,0.3)rgba(10,10,10,0.3)✅—
dim-imagergba(10,10,10,0.55)rgba(10,10,10,0.55)✅—
dim-white-strong/medium/softdocs 존재tailwind 누락❌필요 시 추가 (현재 사용처 없으면 docs에서 빼는 것도 옵션)
dim-image-bottom (gradient)docs 정의tailwind 누락❌utility 추가
Notification soft (Neutral 매핑)bg #F4F2EE (= neutral-100 warm gray remnant)code에 정의 없음❌01-colors.md §2.3의 #F4F2EE #43403A #2D2B27 #E8E5DE는 v2 warm gray 값. cool gray로 갱신 필요 (#F7F7F7 #525252 #333333 #E5E5E5)
Alert (high-emphasis) bg#2D2B27 (= neutral-800 warm)docs와 어긋남 (v3 cool은 #333333)❌01-colors.md §2.3 cool gray로 갱신
opacity-disabled/pressed/hover/loading/skeletondocs 정의tailwind/globals 누락❌tailwind extend.opacity에 등록
StoreCard 하트 버튼 dim(docs엔 dim-image-soft 권장)bg-black/20 (StoreCard L134) — 하드코딩❌bg-dim-soft 또는 신규 utility로 치환
PhoneFrame shadowdocs 매핑 없음0 24px 64px rgba(0,0,0,0.5) — 하드코딩⚠️elevation 외부 prop으로 분리 (개발 전용 view라 P2)

3.4 타이포그래피 ​

항목02-typography.mdPWA 코드 값일치권장 조치
Font family base'Pretendard', -apple-system, ...tailwind sans 동일, globals.css 동일✅—
Font family display'LaundryGothic', 'Pretendard', sans-seriftailwind display 동일✅ 정의는 됨but globals.css에 @font-face 또는 LaundryGothic CDN import 없음 — font-display가 fallback Pretendard로 렌더
text-xs12px / lh 1.5 (relaxed = 18px)12px / lh 20px (≈1.67)⚠️tailwind lh가 docs보다 살짝 큼 (보조 정렬 OK)
text-sm14px / lh 1.5 (21px)14px / lh 22px⚠️거의 일치
text-base16px / lh 1.6 (≈26px)16px / lh 26px✅—
text-lg18px / lh 1.6 (29px)18px / lh 28px⚠️1px 차이
text-xl22px / lh 1.4 (31px)22px / lh 32px✅—
text-2xl28px / lh 1.3 (36px) + ls -0.01em28px / lh 36px + ls -0.01em✅—
text-3xl36px / lh 1.2 + ls -0.02em36px / lh 44px + ls -0.02em✅—
text-4xl48px / lh 1.1 + ls -0.02em48px / lh 56px + ls -0.02em✅—
Semantic 토큰 (body/heading/label/caption/display)13개 의미 토큰 (text-display, text-body 등 CSS class)PWA에 .text-body / .text-heading- 유틸 없음*❌globals.css에 doc §8 CSS class 일괄 추가 (Tailwind utilities로 만들거나 컴포넌트 prop으로 매핑)
font weight 토큰 (regular/medium/semibold/bold)400/500/600/700 4단계Tailwind 기본값 사용✅—

3.5 스페이싱 & 라디우스 ​

항목03-spacing.mdPWA 코드 값일치권장 조치
4px basespace-0~16 (11단계 primitive)Tailwind 기본 4px scale (matching: 1=4, 2=8, 3=12, 4=16...)✅—
layout-page-x16pxpage-x: 16px (tailwind L82)✅—
layout-section-gap32pxsection: 32px✅—
layout-hero-y48pxhero-y: 48px✅—
semantic space-xs~3xl (7개)정의tailwind에 별도 alias 없음 (= 기본 4px scale로 충분히 대체)⚠️docs와 같은 이름이 없어 신규 개발자 헷갈림 — 주석 안내 또는 alias 추가 권장
radius-xs4pxxs: 4px✅—
radius-sm8pxsm: 8px✅—
radius-md12pxmd: 12px✅—
radius-lg16pxlg: 16px✅—
radius-xl24pxxl: 24px✅—
radius-full9999pxTailwind 기본 rounded-full✅—
컴포넌트별 위계 (CTA 8 < Card 12 < Sheet 24 < Pill full)03-spacing §5.3StoreCard rounded-md ✅, MoreStoresButton rounded-sm ✅, LocationBottomSheet rounded-t-xl ✅, LocationHeader pill button (rounded-full 부재 — rounded-sm만 사용)⚠️LocationHeader 좌측 트리거가 docs §5.3 pill 매핑과 다름 — 의도라면 docs 보강, 아니면 rounded-full

3.6 엘리베이션 / 그림자 ​

항목04-elevation.mdPWA 코드 값일치권장 조치
Shadow 색상 베이스rgba(45,43,39,x) (warm brown tone, neutral-800 v2 베이스)rgba(10,10,10,x) (cool, neutral-950 베이스)❌docs는 v2 warm 시절, code는 v3 cool로 이행 완료. 04-elevation.md를 v3 cool gray로 갱신 (rgba(10,10,10,...))
elevation-0box-shadow: none; border: 0.5px solid neutral-200— (그림자 없음, border는 컴포넌트별 적용)✅—
elevation-1 (modal)0 4px 16px rgba(45,43,39,0.08)tailwind e2: 0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04)❌offset/blur/rgb 모두 다름. 통일
elevation-2 (toast)0 8px 24px rgba(45,43,39,0.12)tailwind e3: 0 12px 32px rgba(10,10,10,0.12), 0 4px 12px rgba(10,10,10,0.06)❌통일
tailwind e1docs에 매칭 없음0 1px 3px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04)❌04-elevation에 추가 (4단계로 확장)
tailwind popupdocs에 없음0 1px 3.5px rgba(0,0,0,0.2) (access page modal)⚠️docs에 popup spec 추가 또는 e1/e2 중 하나로 통일

3.7 컴포넌트 시그니처 ​

컴포넌트05-components.md specPWA 구현일치권장 조치
Button Primary 색yellow-500 + neutral-800bg-yellow-500 text-neutral-800 (Button.tsx L34)✅—
Button Primary hover/activeyellow-600 → yellow-700 (+ active text neutral-50)hover:bg-yellow-600 active:bg-yellow-700 active:text-neutral-50✅—
Button Darkneutral-900 + 흰 텍스트bg-neutral-900 text-white✅—
Button Outline흰 배경 + neutral-800 보더 + neutral-900 텍스트bg-white text-neutral-900 border border-neutral-800✅—
Button Large height55px (Figma sync 2026-05-16)h-[55px] ✅✅—
Button Large radiusradius-full (pill) (Figma)rounded-full ✅✅doc §1.2와 §5.3 radius 위계(CTA=radius-sm 8px)가 상호 모순 — Large만 예외라는 점을 §5.3에 명시
Button Large padding14/32px-8 (32px x), y는 h-55에 의존 (가운데 정렬)⚠️y padding 명시 없음, 시각상 OK
Button Mediumh-40, padding 10/16, radius-sm, label 14h-10 rounded-sm px-4 text-sm font-medium✅—
Button Smallh-32, padding 6/12, radius-xs, label-sm 12h-8 rounded-xs px-3 text-xs font-medium✅—
Inputh-32/44/52, radius-sm, focused 시 yellow-100 ring컴포넌트 미구현❌Input 컴포넌트 신규
Badge / Tagradius-xs vs radius-full, padding 3/8 vs 4/10전용 컴포넌트 없음, StoreCard에서 인라인 span rounded-xs bg-neutral-100 text-neutral-700 사용⚠️Badge/Tag 컴포넌트 추출
Card paddingspace-lg (16px) + radius-md (12px) + elevation-0StoreCard: rounded-md ✅, padding은 컴포넌트별 inline (pt-3 pb-1)⚠️Card 베이스 컴포넌트 도입하면 일관성 ↑
List Itempadding 12/16, min-h 44px, divider 0.5px전용 컴포넌트 없음❌ListItem 컴포넌트 추가
Modal / Bottom Sheetradius-xl 상단, padding space-xl (24px), backdrop rgba(0,0,0,0.5), handle 36×4 neutral-300LocationBottomSheet: rounded-t-xl ✅, pt-3 pb-6 px-page-x (24 미만), backdrop bg-dim-strong(0.7) vs spec 0.5 ❌, handle w-10 h-1 (40×4)⚠️backdrop은 dim-medium(0.5)로 변경, padding 24 통일, handle 36px
Toast / Snackbarbg neutral-800 (#2D2B27 — warm 잔존), text neutral-50 (#FAF9F7 — warm 잔존), action yellow-500컴포넌트 미구현❌docs warm hex 값을 cool로 갱신 후 컴포넌트 신규
Header (App Bar)56px height, white bg, border-b 0.5px neutral-200, title heading-sm 18 SemiBold 중앙LocationHeader: h-[64px] (56 X), white bg, no border-bottom, title left-aligned (location pill)⚠️LocationHeader는 docs "Home variant"로 분류해 spec 별도 작성 권장
Tab Barheight 56 + safe-area, white bg, border-top 0.5px neutral-200, label 11-12px Medium, icon 22-24pxBottomTabBar: h-[64px] (8px 차이), bg-neutral-100 (docs는 white), border-top neutral-200 ✅, label text-[10px] (11-12 X), icon 24 ✅⚠️bg 충돌 (white vs neutral-100) — 둘 중 정답 결정. label 11px로 통일. 높이 56 또는 64 결정
Tab Bar active statefilled icon + neutral-800 + SemiBoldPNG icon opacity-50→100 (filled/outline 구분 X), text-neutral-800 font-semibold ✅⚠️PNG opacity 토글 vs SVG filled/outline 위계 — 추후 SVG 마이그레이션 권고
Restaurant Carddocs: Brand badge yellow-500, 별점 yellow-500 star-filled, 매장 미디어 140-160pxStoreCard: aspect-[5/3] (140 안 됨, 페이지 폭 기준), 별점 text-yellow-500 size 14 ✅, "베스트/추천" 노란 별표는 text-yellow-600 (* 텍스트로)⚠️docs와 비교해 brand badge가 없고 tier가 * 문자로 대체됨. 결정 필요
Menu Item Card, Price Display, Quantity Stepper, Order Summarydocs 정의전부 미구현❌Phase 2 작업으로 백로그

3.8 하드코딩 검사 ​

위치문제 코드토큰화 후보우선순위
components/Banner.tsx:14bg-[#FFCC1F]bg-yellow-banner (신규 토큰)P1
app/page.tsx:20hover:bg-[#FFCC1F]동일P1
components/StoreCard.tsx:134bg-black/20bg-dim-soft 또는 신규 image overlay tokenP1
app/onboarding/2/page.tsx:11const ACCENT = '#C48257' (브라운 액센트)brown 계열 신규 토큰(brown-onboarding?) 또는 Tier-2 brown-500(#B6764A) 채택 결정P1
app/onboarding/3/page.tsx:14const ACCENT = '#419A49' (그린 액센트)green-500(#4A9B5A)과 미세 다름 — 토큰 채택 또는 docs/Figma 동기화P1
app/access/page.tsx:37inline backgroundColor: '#828282'단색 회색 모달 배경 — neutral-500/dim 토큰 매핑 결정P1
components/Banner.tsx·StoreCard.tsx·LocationHeader.tsx 등<Link className="..."> 인라인 CTAButton.tsx 채택률 0% — 페이지가 모두 Link로 CTA 렌더 중P1
app/access/page.tsx:38bg-neutral-600 (Figma #6D6D6D 흉내)neutral-600 = #6E6E6E로 충분 ✅OK — 그러나 docs dim-image rgba(10,10,10,0.55) 의도와 다름 (실제 dim 효과 X) — 디자인 의도 재확인 필요
app/access/page.tsx:56bg-neutral-100/60 (opacity 60% inline)opacity-loading(0.6) 토큰 활용P2
app/access/page.tsx:43shadow-popupdocs에 popup elevation spec 없음P2
app/globals.css:85box-shadow: 0 24px 64px rgba(0,0,0,0.5)디바이스 mockup 전용이라 P3P3
components/LocationBottomSheet.tsx:62bg-dim-strong z-40OK (토큰 사용) — but docs spec은 backdrop dim-medium(0.5)임P1 (spec과 다름)
components/PermissionIcons.tsxstrokeWidth: 2Stratis UI 표준 1.5 (06-stratis-ui-icons §6.4)P1
components/Icon.tsxstrokeWidth: 1.5 ✅OK—
app/globals.css rems vs px폰트 사이즈 전부 px (16px)09-accessibility §5.3는 rem 권장P2

3.9 사이드별 차별화 (10·11 문서 ↔ PWA) ​

항목10-owner-strategy 정의PWA 고객앱 코드일치비고
Brand Yellow #FFDE36 단일 사용3종 통일✅ 고객앱에서 사용✅—
노랑 비중 60% (고객앱)디자인 비중코드 단위 검증 불가 (시각 검증 필요)⚠️—
본문 폰트 16px+02-typography body=16base 16px ✅✅—
캐릭터 자유 활용메인/빈상태로그인(/onboarding/3) 7개 캐릭터 배치 ✅✅—
모바일 카드 위주 레이아웃표StoreCard·Categories·Banner 등 카드 UI✅—
모션 풍부표transition-colors 정도만, 캐릭터 idle 모션 없음⚠️08-motion 캐릭터 idle bounce 미구현
노랑 위 검정 텍스트 절대 규칙docsButton primary text-neutral-800 ✅, Banner text-neutral-900 ✅✅—
사장님 Portal (store.yumyum.im)다크 사이드바 + 라이트 메인PWA 폴더 없음n/a별도 audit 필요
어드민 (admin.yumyum.im)Wanted+Binance 베이스PWA 폴더 없음n/a/40-Admin/admin/ 코드 별도 audit 필요
데이터 테이블, KPI 카드, 상태 배지 6종11-admin-binance-mapping §6고객앱에 해당 없음n/a—
Pretendard tnum 글로벌 적용11번 doc §4.2globals.css에 font-feature-settings 미적용. .tabular utility만 정의⚠️Portal/어드민 도입 시 함께 글로벌 적용 권장

4. 우선순위 권고 액션 ​

4.1 P0 — 즉시 수정 (6건, 시스템 신뢰도 흔듦) ​

  1. ✅ Neutrals 200/600/700 통일 (해소됨) — docs·JSON·tailwind 셋 다 Figma Variables 값 #EDEDED/#777777/#464646로 정렬 완료 (2026-05-18 v3.1). Figma node 6972:8016이 single source of truth.
  2. 06-iconography.md vs 06-stratis-ui-icons.md 통폐합 — 한쪽 삭제, 다른쪽이 정본. index.md의 링크 갱신.
  3. iconography 문서 §3 색 토큰 v3 cool 마이그레이션 — 현재 #2D2B27/#78736A/#A8A39A/#FAF9F7(warm v2)을 #333333/#999999/#B8B8B8/#FAFAFA로 교체.
  4. 01-colors.md §2.3 Notification·Alert HEX cool 마이그레이션 — #F4F2EE/#43403A/#2D2B27/#E8E5DE → #F7F7F7/#525252/#333333/#E5E5E5.
  5. 04-elevation.md 그림자 베이스 색 cool 마이그레이션 — rgba(45,43,39,x) → rgba(10,10,10,x)로 docs를 코드와 정렬. 동시에 e1/e2/e3 3단계로 docs 확장.
  6. tailwind.config.ts에 docs ⭐ 토큰 등록 — yellow.login: '#FFF4C9', yellow.banner: '#FFCC1F', (선택) yellow.rating: '#F5C51D', orange.main: '#FF8500' 추가. Banner.tsx·app/page.tsx의 bg-[#FFCC1F]를 bg-yellow-banner로 교체.

4.2 P1 — 다음 sprint (12건) ​

  1. Button Large radius-full 예외를 03-spacing §5.3 위계표에 명시 — "CTA=radius-sm 단, Hero(Large)는 pill" 주석 추가.
  2. LocationBottomSheet backdrop을 dim-strong → dim-medium으로 변경 (docs §6.4 spec 준수).
  3. PermissionIcons stroke-width 2 → 1.5 (Stratis 표준).
  4. BottomTabBar 높이·배경 결정 — docs는 56px+white, code는 64px+neutral-100. 한쪽 채택 후 동기화. label 11px로 통일.
  5. StoreCard bg-black/20 → dim 토큰 사용.
  6. Toast 컴포넌트 신규 (cool gray spec 반영).
  7. Input 컴포넌트 신규 (yellow-100 focus ring 포함).
  8. Badge / Tag 컴포넌트 추출 (StoreCard 인라인 → 재사용).
  9. fontFamily display LaundryGothic 실제 로드 — globals.css @import 또는 @font-face 추가, 또는 layout.tsx next/font 사용. 현재 정의만 있고 폰트가 없어 로고가 fallback으로 렌더 중.
  10. typography semantic CSS 클래스 추가 — .text-display, .text-heading-sm, .text-body, .text-caption 등 02-typography §8 정의를 globals.css에 등록.
  11. LocationHeader header spec 분기 명시 — 05-components §8.2의 "Home variant"로 별도 row 작성 (height 64, no border, location pill 좌측).
  12. dim-white 시리즈와 opacity 토큰을 tailwind extend에 등록 (또는 docs에서 미사용분 제거).

4.3 P2 — 시간 날 때 (10건) ​

  1. spacing semantic alias(space-xs~3xl)을 tailwind에 alias로 추가하거나 docs에서 "내부 명칭"으로 격하.
  2. app/access/page.tsx 의 bg-neutral-100/60·shadow-popup을 토큰화.
  3. app/access/page.tsx bg-neutral-600이 진짜 dim 효과 의도였는지 디자인팀과 재확인 (현재는 단색 면).
  4. font-size를 px → rem으로 옮길지 결정 (09-accessibility §5.3 권장).
  5. 8-motion의 캐릭터 idle bounce / Lottie 도입 백로그 정리.
  6. 05-components §11~14 (Menu Item, Price Display, Quantity Stepper, Order Summary) 미구현 컴포넌트 우선순위 결정.
  7. tnum 글로벌 적용 (현재 .tabular opt-in만 있음 — 가격 UI 확장 시 도움).
  8. radius 위계 한 줄 docstring을 각 컴포넌트 상단 주석에 추가 (StoreCard·MoreStoresButton은 이미 함, 나머지도 통일).
  9. index.md에서 06 파일 두 개 링크 정리.
  10. Figma _figma/design-tokens.json 과 루트 design-tokens.json 둘 다 동일 내용 — single source 결정 후 한쪽 symlink/제거.

5. 후속 작업 제안 ​

  1. 사장님 Portal 코드(store.yumyum.im) 별도 audit — 본 보고서는 PWA 폴더만 다룸. 10·11번 문서가 약속한 "다크 사이드바 + 액티브 메뉴 노랑 + 데이터 테이블" 패턴이 실제로 구현됐는지, Brand Yellow #FFDE36 단일 사용이 지켜지는지 (이전 #FCD535 Binance 잔존 여부) 확인 필요.
  2. 어드민 코드(/40-Admin/admin/ 또는 admin.yumyum.im 배포) — 11번 doc이 Wanted+Binance 베이스로 명시한 토큰 (--b-yellow, --b-canvas-dark 등)이 실제 CSS에 살아있는지, 그리고 노랑이 #FFDE36으로 통일됐는지 audit.
  3. 본 14-audit 문서를 매월 자동 재실행하는 워크플로 검토 — 토큰 drift는 누적되므로 CI 또는 사내 스크립트로 main에 푸시될 때마다 컬러 hex diff를 자동 비교.
  4. design-tokens.json → Tailwind config 자동 변환 빌드 스텝 도입 — 지금은 두 곳을 손으로 sync 중. Style Dictionary 같은 도구로 single source of truth 보장 권장.
  5. 컴포넌트 라이브러리 Storybook 구축 — 05-components.md의 13개 컴포넌트와 실제 PWA 컴포넌트가 1:1 매칭되는지 시각적으로 검증 가능.

6. 검토한 파일 목록 ​

문서 (15개): 01-colors.md, 02-typography.md, 03-spacing.md, 04-elevation.md, 05-components.md, 06-iconography.md, 06-stratis-ui-icons.md, 07-states.md, 08-motion.md, 09-accessibility.md, 10-owner-strategy.md, 11-admin-binance-mapping.md, 12-characters.md (일부), 13-color-positioning.md (일부), design-tokens.json, _figma/design-tokens.json

PWA (15개): tailwind.config.ts, app/globals.css, app/layout.tsx, app/page.tsx, app/access/page.tsx, app/home/page.tsx, app/onboarding/3/page.tsx, components/Button.tsx, components/StoreCard.tsx, components/Banner.tsx, components/Categories.tsx, components/BottomTabBar.tsx, components/LocationHeader.tsx, components/LocationBottomSheet.tsx, components/MoreStoresButton.tsx, components/Footer.tsx, components/PhoneFrame.tsx, components/StatusBar.tsx, components/HomeIndicator.tsx, components/icons/Icon.tsx, components/icons/PermissionIcons.tsx, components/ServiceWorkerRegistrar.tsx, public/manifest.webmanifest

미확인 (사이드 별도): 사장님 Portal(store.yumyum.im) 코드, 어드민(admin.yumyum.im) 코드.

감사 기준 시점: 2026-05-18. 토큰은 살아 움직이므로 매월 또는 main merge 시점마다 재검증 권장.

냠냠픽업 — 지속가능한 중개수수료 2% 음식 픽업 서비스

© 2026 YumYum