ZERRO Mobile UX Flow Index

앱 진입점부터 역할별 화면, 세부 UX 리포트, 아직 남은 provider/backend placeholder까지 한 곳에서 보는 루트 문서입니다. 노드를 클릭하면 오른쪽 패널이 preview 또는 상세 리포트로 전환됩니다. 이 문서는 실제 backend 완료율이 아니라 mock API 기반 모바일 UX screen closure와 후속 integration gap을 설명합니다.

Generated artifact Maestro + agent-device proof Figma visual audit 열기 Evidence closure Updated 2026-07-03 KST / 100% HTML review coverage
Figma Visual Audit: exact Figma와 actual screenshot 비교 보드 `38`은 exact Figma screen 총수가 아니라 root UX index의 node/report target 수입니다. 화면 검수는 여기서 Figma reference와 실제 구현 evidence를 나란히 보며 진행합니다.
상세 비교 리포트 열기

현재 Progress 요약

1주차 기준선은 화면 기준, 역할별 route, mock lifecycle, 반복 검증 체계까지 확보된 상태입니다. 핵심 업무 흐름은 배출자 신청 → 배차 확정 → 운전자 증빙 → 처리자 입고/처리 실적까지 앱 화면에서 따라갈 수 있습니다. #388~#395 screen closure issue는 모두 닫혔고, 아직 production 기능은 아니므로 backend, 실시간 통신, 외부 연동은 별도 placeholder로 남깁니다. #459 external CTA provider-pending UX와 #460 role More/Menu shell까지 반영했고, #448/#463 기준으로 남은 partial/placeholder 노드는 `docs/MOBILE_FIGMA_NODE_COVERAGE_MATRIX.md`에서 Figma node, provider policy, backend/realtime decision, 운영 예외로 분류했습니다.

Role routing / shell 온보딩에서 배출자, 배차담당자, 운전자, 처리자 진입 및 주요 tab/shell/More provider-pending shell 연결
Core lifecycle demo mock store로 신청, 배차, 운전자 proof, 처리자 입고/처리 결과 projection 연결
Figma screen closure #388~#395 기준 화면 entry, state, pending UX, evidence를 모두 root register에 연결
E2E evidence Maestro deterministic flow와 agent-device/screenshot evidence가 주요 flow와 #459/#460 provider-pending shell에 연결됨
Chat foundation 공통 chat fixture/adapter와 @kesha-antonov/react-native-chat room surface 적용. current chat viewer role은 emitter/dispatcher/processor
Backend/external integration Kotlin Spring, auth, real upload/OCR provider, map/dialer, realtime transport는 contract/placeholder 단계. APP mock provider-state는 일부 반영됨

Figma Screen Register 기준 진행률

`docs/MOBILE_FIGMA_SCREEN_GAP_REGISTER.md`와 root issue `#381` 기준으로 #388~#395 child screen closure를 모두 확인했습니다. Figma screen closure complete: screen-needed 항목은 mock-first APP surface로 닫혔고, 남은 항목은 provider/backend/realtime/운영 예외 품질 범위입니다. #450 loop 실행 전에는 `docs/MOBILE_FIGMA_NODE_COVERAGE_MATRIX.md`의 gap type과 child issue contract를 먼저 확인합니다. 생성된 #450 child issue는 #451~#456, #459~#463이며, 현재 #459/#460은 완료됐고 #463 closure 기준으로 이 index와 coverage graph를 맞췄습니다.

8 / 8 closed #388~#395 screen closure child issue가 모두 닫힘
0 screen-needed 시작 전 APP 화면으로 남은 Figma row 없음
5 follow-up provider/backend/realtime/예외상태/운영품질 cluster
#381 root epic은 close-ready. 닫을 때 후속 integration epic과 분리해서 기록
20 mapped UX index partial/placeholder 노드를 #448 matrix로 분류
Role/Page Screen closure 대표 evidence 남은 non-screen 범위
배출자 App closed `emitter-request*.yaml`, `emitter-history.yaml`, `pr420-emitter-history-after-flow.png` 실제 backend 저장, 올바로 연동, 반입 확인서 file/PDF provider
배차 담당자 App closed `dispatcher-dispatch`, lifecycle handoff, dispatch detail selectors, cancel/reassign provider-pending mock drag/drop board, 실제 취소/재배차 mutation, backend concurrency
운전자 App closed `driver-dispatch-sheet.yaml`, proof/OCR route selectors, Figma `314:2804` 3-tab contract 실제 GPS/map, upload/OCR provider, offline queue backend policy
처리자 App closed `processor-weighing.yaml`, `processor-inbound`, lifecycle treatment projection 실제 upload/OCR parsing, backend replay/idempotency, conflict matrix
채팅방 App closed `emitter-chat`, `common-chat-flashlist`, `lifecycle-chat-notification-proof` realtime transport, backend read-state persistence, actual attachment upload

Legend

done Figma screen closure 기준으로 route, surface, stable testID, mock-first evidence가 연결됐다.
partial 화면은 닫혔지만 실제 provider, backend persistence, realtime transport, 운영 예외 matrix가 남아 있다.
placeholder Figma screen 자체가 아니라 backend/provider/외부 연동/운영 안정화 결정이 필요한 영역이다.
현재 완료의 의미: Figma APP screen은 mock data와 mock mutation으로 사용자가 따라갈 수 있는 surface를 갖췄음.
아직 미완의 의미: 운영 데이터, 권한 승인, 실시간 채팅, 실제 OCR/upload/map/dialer는 별도 integration scope.
다음 판단 기준: 새 화면 구현이 아니라 provider/backend/API contract를 어떤 순서로 production화할지 결정.

UX Evidence Board

이 보드는 `docs/MOBILE_UX_EVIDENCE_REGISTER.md`의 local review 요약입니다. 2026-07-01 기준 mobile frontend screen-needed 항목은 mock-first surface로 닫혔고, 남은 빨간/노란 항목은 clean screenshot 보강 또는 provider/backend/realtime decision backlog로 분리합니다. HTML은 git 추적 대상이 아니며, register 문서가 추적 가능한 기준입니다.

38 root UX index `data-node` 총량. exact Figma screen 총수가 아니며, 클릭하면 visual audit으로 이동합니다. 38 / 38 linked 모든 node가 상세 report를 가진다
33 + 5 visual/decision 33개 visual 비교 + 5개 decision-only 설명
0 unexplained HTML index에서 설명 없이 남은 node 없음
0 screen-needed 새 Figma APP screen 미착수 row
7 closed / 1 open issues #488~#495 loop target issue
Status 의미 현재 판정 다음 action
closed Figma screen entry/surface가 mock-first APP 화면으로 닫힘 배출자, 배차담당자, 운전자, 처리자, 채팅방 screen-needed gap은 닫힘 새 화면 구현보다 검수 evidence와 provider/backend boundary를 보강
comparison-linked 상세 report와 Figma-vs-actual 비교 evidence가 연결됨 `emitter-request`, `emitter-history`, `lifecycle-handoff`, `processor-inbound`을 `evidence-closure`에서 비교 추가 capture가 생기면 해당 report의 이미지 쌍만 교체
decision-only 화면 미구현이 아니라 실제 provider/backend/realtime 결정 대기 `provider-decision-backlog`, `backend-auth-placeholder`, `realtime-chat-placeholder`, `file-ocr-placeholder` #488 closed. 실제 provider/backend 구현은 후속 feature issue에서만 승격
contract-risk Figma 변형과 current app route 계약이 충돌할 수 있음 운전자 bottom nav 3-tab/4-tab 변형 #494 closed. 운전자 current bottom nav는 `홈/오늘 일정/배차표` 3-tab으로 고정
responsive role shell 5개 + child surface 12개 clean evidence 확보 Responsive evidence report #493은 이 브랜치에서 local responsive report를 확보했고, issue close는 PR merge 후 처리
#493 Responsive evidence open. 이 브랜치에서 role shell 5개와 child surface 12개 local responsive report를 확인한다.

Web Contract Alignment

Web/PC 결정은 APP UX index에서 backend/provider gap을 분류할 때 참고하는 계약 근거입니다. 이 표는 APP screen closure와 Web/PC runtime contract가 충돌하지 않는지 검토하기 위한 crosswalk입니다. Web/PC 자체 구현률은 이 index의 진행률에 포함하지 않습니다.

Contract area Web/PC decision APP UX index interpretation Closure status
Chat role Mock chat endpoints and PC chat UI use emitter, dispatcher, processor group chat. APP chat viewer roles are emitter, dispatcher, processor. Driver is not a chat surface. aligned
Driver role Web home treats driver as APP-only. Driver keeps home, today schedule, dispatch sheet, lifecycle proof, and notification surfaces only. aligned
Notifications Backend read-state persistence and push provider are not fixed yet. APP keeps read-state summary, detail, and provider-pending disabled CTA as mock-covered surfaces. decision
External provider Customer support, phone, map, file/OCR provider choices are still provider decisions. APP shows provider-pending, fallback, retry/offline, or disabled reason; no raw provider handoff is assumed. provider-pending
Backend/API Kotlin Spring auth/RBAC, realtime, idempotency, and conflict envelope are follow-up contracts. Backend/auth/realtime placeholders are blocked-by-contract nodes, not unfinished Figma screens. blocked

Single Flow Chart

#388~#395 기준 Figma APP screen closure는 완료됐습니다. 상세 연결이 완료된 대표 노드는 배출자 App의 비정기 배출 신청, 배출 현황/신청 내역, 배차담당자 App의 수동 배차, 운전자 App의 오늘 운반 일정/배차표, 처리자 App의 입고 예정 및 계근 등록/OCR 확인입니다. 순차 진행은 화살표로, 홈에서 갈라지는 기능 진입점은 hub hierarchy로 구분해 관리합니다. 빨간 placeholder는 더 이상 미구현 Figma screen이 아니라 provider/backend/realtime/external integration 대기 영역을 표시합니다. screen closure는 docs/MOBILE_FIGMA_SCREEN_GAP_REGISTER.md, node별 evidence 상태는 docs/MOBILE_UX_EVIDENCE_REGISTER.md를 따릅니다.

현재 상세 UX 진입점
앱 실행 역할 선택 배출자 선택 배출자 홈 배출 신청 버튼 비정기 배출 신청 wizard 신청 완료 배출 현황에서 확인
앱 실행 역할 선택 배출자 선택 배출자 홈 오늘의 배출 현황 카드 배출 현황/신청 내역 내역 카드 배출 상세
앱 실행 역할 선택 처리자 선택 처리자 홈 계근 등록 계근 대기 row 계근표 촬영 OCR 확인
App Entry
Emitter
Dispatcher
Driver
Processor
Integration
Placeholders
앱 실행 / 역할 선택

테스트 편의를 위해 만든 임시 onboarding 화면입니다. 실제 앱 진입 후 4가지 역할 중 하나를 선택합니다.

새 창
선택한 UX preview
이 노드는 실제 APP 화면 gap이 아니라 provider/backend/realtime decision 또는 상세 evidence report로 설명되는 영역입니다.

진입점과 검증 기준

flow chart의 노드를 클릭하면 해당 화면의 entry, screenshot, testID 기준을 이곳에서 확인합니다.

    앞으로의 관리 규칙

    1. 모든 화면은 root flow에 먼저 등록 새 화면을 만들면 role lane, entry path, 핵심 CTA, screenshot evidence를 이 HTML에 연결합니다.
    2. 관계 타입을 먼저 결정 실제 순차 진행만 화살표로 표시하고, 홈에서 여러 기능으로 갈라지는 관계는 hub hierarchy로 표시합니다.
    3. 복잡한 UX는 상세 HTML로 분리 wizard, multi-step form, branching flow는 현재 배출 신청처럼 별도 HTML을 만들고 root node에서 iframe으로 엽니다.
    4. 테스트는 같은 파일명을 갱신 Maestro/agent-device가 고정 screenshot 경로를 덮어쓰면 root HTML과 상세 HTML이 자동으로 최신 화면을 보여줍니다.
    5. Capture 역할 분리 Maestro는 route/function proof와 after-flow screenshot을 남기고, agent-device는 실제 화면 snapshot과 visual truth screenshot을 남깁니다. 두 도구는 동시에 실행하지 않습니다.
    6. 진행률 source of truth 전체 판단은 `docs/PROGRESS.md`와 `apps/mobile/e2e/TEST_COVERAGE_GRAPH.md`가 정본이고, 이 HTML은 발표/검토용 시각화입니다.
    7. Placeholder도 관리 대상 미완성 영역은 숨기지 않고 빨간 노드로 남깁니다. 실제 구현되면 screenshot, testID, 상세 HTML 또는 evidence 경로로 승격합니다.