Figma page/section overview가 현재 UX Flow Index, route, local report, Maestro/agent-device screenshot으로 대표되는지 확인합니다.
Figma 기준 화면과 현재 Mobile 구현 검수 대시보드
이 리포트는 docs/FIGMA_INVENTORY.md를 기준으로 Figma exact/section screenshot과 현재 APP
구현 evidence를 나란히 검토하기 위한 시작점입니다. page overview는 inventory 확인용으로만 쓰고,
화면별 비교 row는 exact frame을 왼쪽에 배치합니다. section overview는 화면 목록 파악용이며 pixel 비교 기준으로 쓰지 않습니다.
pixel-level 합격 판정은 fresh app screenshot을 같은 viewport로 별도 캡처해 비교해야 합니다.
Source: docs/FIGMA_INVENTORY.md
Audit lane: coverage + fidelity
Updated: 2026-07-03
2026-07-03 최신성 체크
이 페이지는 Figma-vs-actual 화면 비교용 상세 보드입니다. 현재 UX hierarchy와 진행률의 1차 진입점은
../index.html이고, #493 responsive evidence closure는 별도 보드인
../responsive-role-shell/index.html을 기준으로 봅니다. 이 파일의 이미지 링크는 현재 0개 누락이며,
운전자 APP은 Figma/runtime current 계약에 따라 홈/오늘 일정/배차표 3-tab만 검수합니다.
exact node screenshot과 같은 viewport의 app screenshot을 새로 캡처해 layout, spacing, typography, asset 사용을 비교합니다.
backend, realtime, upload/OCR, dialer/map/customer-support provider는 provider-pending UX까지 검수하고 실제 provider 선택은 decision issue로 분리합니다.
역할 선택, 배출자 5, 배차담당자 3, 운전자 4, 처리자 3, 채팅 2, 아이콘 1개 상세 row로 분리했습니다. ad-hoc 역할 선택을 제외한 모든 row에 Figma reference를 붙였습니다.
대부분의 APP 화면은 local screenshot/report가 있습니다. 이 리포트는 구현 여부와 evidence 경로를 먼저 확인하는 용도입니다.
backend, realtime, upload/OCR, phone/map/customer-support provider는 화면 누락이 아니라 integration decision 대기로 표시합니다.
Figma reference는 붙였지만 actual screenshot이 fresh same-viewport가 아닌 항목이 있습니다. 최종 pixel verdict는 exact Figma frame과 fresh emulator screenshot으로 별도 산정합니다.
표시 규칙 / Actual evidence
| 항목 | 원인 | 현재 처리 | 다음 액션 |
|---|---|---|---|
| 빨간 box / 노란 E badge | agent-device --overlay-refs가 testID/accessibility target을 시각화한 QA overlay다. 실제 앱 UI가 아니다. |
selector proof로만 인정한다. pixel fidelity 비교에는 clean screenshot을 사용한다. | report에는 overlay 여부를 caption에 명시하고, final pixel 비교 전 raw/clean capture를 다시 찍는다. |
| 배출 신청 조건 확인 actual | Figma exact 118:4105와 clean actual emitter-request-conditions-clean.png를 함께 둔다. |
clean actual captured | pixel verdict가 필요하면 같은 viewport로 Figma/app을 다시 캡처해 spacing만 재검수한다. |
| 배출 희망일/시간 선택 actual | Figma exact 118:4268와 clean actual emitter-request-schedule-clean.png를 함께 둔다. |
clean actual captured | pixel verdict가 필요하면 같은 viewport로 Figma/app을 다시 캡처해 calendar/CTA hierarchy만 재검수한다. |
| 배출자 더보기 clean actual | 현재 메뉴 actual은 emitter-more Maestro flow의 clean screenshot으로 비교한다. |
clean actual captured | emitter.more.screen을 raw/clean capture로 다시 저장한다. |
현재 판정 요약
| Surface | Figma 기준 | 현재 evidence | 검수 판정 | 다음 액션 |
|---|---|---|---|---|
| 배출자 APP | 112:1075, 13:199, 213:2021, 213:2277 |
홈, 신청 wizard, 신청/완료 내역, 알림, 더보기, 채팅 report | coverage ready | 홈/알림/더보기/배출현황 exact frame 확보. 신청 wizard의 조건 확인/일정 선택까지 clean actual capture 확보 |
| 배차담당자 APP | 213:1232, 14:1444, 213:2793 |
홈, 배차하기, conflict/empty/reassign mock, 알림, 더보기, 채팅 report | coverage ready | 홈과 배차하기 CTA 후속 화면을 exact frame 기준으로 캡처해 spacing/CTA 계층 검수 |
| 운전자 APP | 236:403, 314:2532, 314:2804, 319:6900 |
홈, 오늘 일정, 배차표, 경로 안내, 상차/계근/하차 proof report | coverage ready / current 3-tab contract | Figma 314:2804의 현재 3-tab 계약과 #492 clean evidence 기준으로 exact compare |
| 처리자 APP | 236:1859, 478:3584, 348:5826, 966:2529 |
홈, 입고 상세, 계근 OCR, 처리 실적, conflict/replay/idempotency mock report | coverage ready | 입고/계근 list와 camera/OCR surface를 exact frame 기준으로 검수 |
| 채팅방 APP | 356:988, 20:505, 32:445 |
공통 chat room, read-state summary, attachment provider-pending, contact sheet report | mock surface ready | Gifted Chat surface, lifecycle card, composer 상태를 exact screenshot으로 fresh capture |
| 아이콘 | 768:7677, 867:1558 |
apps/mobile/assets/icons/app manifest + runtime asset migration 후보 |
asset audit needed | runtime import가 canonical asset bundle을 쓰는지 화면별로 확인 |
검수 우선순위
1
역할 홈 exact 비교
배출자 13:199/213:2021, 배차담당자 213:2793, 운전자 314:2804, 처리자 478:3584를 fresh Figma screenshot과 emulator screenshot으로 맞춥니다.
2
업무 flow child surface 비교
배출 신청, 배차하기, 운전자 proof, 처리자 입고/계근은 이미 구현 evidence가 있으므로 card density, CTA hierarchy, bottom sheet 높이를 먼저 봅니다.
3
공통 shell 비교
알림, 더보기, 채팅은 역할별 copy와 badge/read-state를 비교하되, persistence/realtime/provider는 계약 대기로 분리합니다.
4
asset usage 비교
아이콘은 Figma export와 runtime manifest가 있지만, 실제 화면 import가 canonical bundle로 통일됐는지 별도 audit이 필요합니다.
화면별 상세 비교 매트릭스
아래 항목은 “Figma 기준 화면이 무엇인지”, “현재 앱에서 어떤 screenshot evidence가 대응되는지”, “지금 볼 수 있는 차이 또는 다음 exact 비교 작업이 무엇인지”를 화면 단위로 정리한 것입니다. `overview`는 coverage 검수용이고, `exact-needed`는 Figma frame screenshot과 fresh emulator screenshot을 새로 맞춰야 pixel verdict를 낼 수 있다는 뜻입니다.
검수 메모
Figma screen이 아니라 개발/QA 편의를 위한 화면입니다. production auth/RBAC가 결정되면 실제 로그인/role 선택 UX로 대체해야 합니다.
비교 판단
홈 hub와 주요 CTA는 구현되어 있고, Figma exact reference는 `213:2277`로 확보했습니다. 다만 현재 actual screenshot은 411dp/font-scale evidence라 375x842 fresh emulator capture를 새로 찍어야 metric card spacing, bottom tab icon alignment를 pixel diff할 수 있습니다.
1. 신청 타입 선택
2. 운반 업체 직접 검색 empty/result
3. validation / hidden selection guard
4. 수집/운반 조건 확인
5. 배출 희망일 선택 및 완료
비교 판단
overview/section PNG 대신 exact frame 기준으로 재배치했습니다. 타입 선택은 Figma `118:6122`의 매물 선택 UI와 현재 product decision 기반 `올바로 신고/미신고` UI가 다르므로 의도된 divergence로 검토해야 합니다. 검색 empty/result, validation, 조건 확인, 일정 선택, 완료는 모두 Maestro clean actual capture로 고정했습니다. 따라서 남은 항목은 구현 공백이 아니라 backend/provider 계약 범위입니다.
1. 신청 내역 list
2. 검색 상태
비교 판단
section overview가 아니라 `526:2964` list와 `951:590` 검색 exact frame으로 분리했습니다. list/search surface는 구현되어 있습니다. detail drilldown, 반입 확인서 provider-pending, 실제 PDF/file provider는 별도 row/report와 backend/provider 결정으로 분리해서 봅니다.
비교 판단
`213:2199` exact frame으로 교체했습니다. 알림 list와 unread/read state는 구현되어 있으나 actual은 Figma보다 summary/read-state를 더 명시합니다. 실제 read-state persistence와 backend notification event는 후속 계약입니다.
비교 판단
`213:2022` exact frame으로 교체했습니다. 메뉴 구현과 고객센터 provider-pending은 clean Maestro screenshot으로 확인됩니다. 실제 URL/auth handoff는 `MOBILE_PROVIDER_POLICY.md` 결정 후 연결합니다.
비교 판단
홈 구조와 핵심 CTA는 구현되어 있고 exact reference도 확보했습니다. actual screenshot이 375x1192 full-scroll 기준인지 확인한 뒤 summary metric/card 높이와 bottom nav 위치를 비교해야 합니다.
비교 판단
Figma가 제공하지 않는 operational exception은 mock-first UX로 보강되어 있습니다. 실제 cancel/reassign/concurrency API는 backend 계약 대기입니다.
비교 판단
Figma의 알림/더보기 shell은 구현되어 있습니다. 실제 account/settings/logout/customer-support provider는 후속 decision입니다.
비교 판단
`314:2532/314:2804`의 홈/오늘 일정/배차표 3-tab을 current 계약으로 둡니다. 구 UI의 더보기 변형은 legacy/decision context이며, 운전자는 AppChatRole 또는 driver.chat.* surface 대상이 아닙니다.
비교 판단
일정과 배차표 flow는 구현되어 있고 route guide로 이어집니다. Figma 대비 카드 density와 bottom sheet 높이는 fresh screenshot으로 재검수 대상입니다.
비교 판단
화면 UX와 fallback은 구현되어 있으나 실제 지도 deep link/provider는 결정 전입니다.
비교 판단
업무 흐름은 mock provider-state까지 구현되어 있습니다. 실제 upload/OCR provider와 offline queue 정책은 provider decision 후 승격해야 합니다.
비교 판단
홈과 입고 예정 card surface는 구현되었고 exact reference도 확보했습니다. actual screenshot을 같은 375px viewport로 다시 찍으면 metric spacing과 card hierarchy를 정밀 비교할 수 있습니다.
비교 판단
list/detail/mock mutation은 구현되어 있습니다. 실제 conflict envelope와 idempotency persistence는 Kotlin Spring 계약 대기입니다.
비교 판단
계근표 촬영, OCR 확인/수정, provider-pending/offline/retry UX는 구현되어 있습니다. 실제 OCR provider와 upload body는 후속 결정입니다.
비교 판단
공통 shell은 구현되어 있습니다. account/settings/logout/customer-support provider는 실제 provider 결정 후 연결합니다.
비교 판단
room/list/read-state/send/contact/attachment provider-pending surface는 구현되어 있습니다. realtime transport와 backend read receipt persistence는 후속 계약입니다.
비교 판단
Figma의 연락처 sheet 요구는 반영되었습니다. 파일 picker/upload provider는 S3 adapter 후보 결정 전까지 pending UI로 유지합니다.
비교 판단
icon source/export와 app icon bundle은 존재합니다. 화면별 runtime import가 canonical `assets/icons/app/*`로 이동됐는지는 별도 asset usage audit이 필요합니다.
배출자 APP
배출 신청, 오늘의 배출 현황, 신청/완료 내역, 알림, 더보기, 채팅 진입점.
Figma exact home
`213:2277` 배출자 홈 exact Frame입니다. overview가 아니라 홈 화면 자체를 기준으로 봅니다.
배차담당자 APP
배차 현황, 배차하기, 긴급 배차, 협업 채팅, 알림/더보기 shell.
Figma exact home
`213:2793` 배차담당자 홈 exact Frame입니다. 전체 page overview 대신 홈 화면 자체를 기준으로 봅니다.
운전자 APP
배차 확인, 오늘 일정, 경로 안내, 상차/계근/하차 proof, 배차표.
Figma exact candidate
`314:2804` 운전자 홈 exact 후보입니다. current bottom nav는 홈/오늘 일정/배차표 3-tab입니다.
처리자 APP
입고 예정, 계근 등록, OCR 확인, 처리 실적, replay/idempotency guard.
Figma exact home
`478:3584` 처리자 홈 exact Frame입니다. 계근/입고 세부 reference는 아래 상세 row에서 따로 비교합니다.
채팅방 APP
채팅 목록/상세, lifecycle card, 연락처 sheet, attachment provider-pending.
Figma exact chat
`20:505` 채팅 lifecycle card/room exact Frame입니다.
아이콘
Figma icon board와 runtime static asset bundle의 사용 여부.
Figma overview
아이콘은 SVG/PNG source pair와 manifest 기준으로 runtime 사용처를 확인합니다.
