화면 구조 IA · 구현 갭¶

프론트엔드 화면/기능 구조(IA)와 사용자 여정(User Journey)을 정리한 문서. User Journey는 아키텍처 그림이 아니라 UX 참고용 보조자료이며, 서비스 수준의 정본은 .claude/docs/architecture.md(SA)다. 이 문서는 그 SA를 화면·사용자 흐름 관점에서 보완한다.

목적: 화면 단위 요구사항이 어떤 백엔드 도메인/서비스에 대응하는지 빠르게 파악하기 위함. 실제 구현 여부는 .claude/docs/status.md가 기준(패키지 구조는 infrastructure.md).

원본 다이어그램 (drawio 소스): .claude/docs/diagrams/ - IA v2 → 2026-07-21 1_FillMap_IA_v2_draft.drawio.xml (페이지 "B. 3컬럼 (사용자 앱 분할)") - User Journey v2 → 2026-07-21 2_FillMap_UserJourney_v2_draft.drawio.xml

이 둘이 가장 최근 다이어그램이다(작성 2026-07-21, draft 상태). 다만 그 뒤 구현하면서 정책이 바뀐 항목이 있어 다이어그램이 몇 군데 뒤처져 있다. 문구를 그대로 요구사항으로 옮기지 말고 아래 "다이어그램과 확정 정책의 차이"를 먼저 볼 것. 화면 디자인의 정본은 피그마이고(CLAUDE.md Reference), 용어·정책의 정본은 .claude/rules/glossary.md다.

화면 구조 (IA v2)¶

로그인 전 · 사용자 앱 2갈래 · 운영자/스폰서의 3컬럼 구성. 화면 번호 ①~⑦은 다이어그램 표기를 그대로 따랐다(다이어그램에 ⑤는 없다. 행정동 검색은 ① 지도 홈 하위에 있다).

로그인 전¶

화면	주요 기능	대응 도메인	구현 상태
온보딩	서비스 소개, 위치·카메라 권한 안내	—	화면 몫
로그인	카카오 로그인, Apple 로그인(iOS 출시 시 필요, 지금은 범위 밖), 로컬 로그인(dev)	`auth`	✅ 카카오·dev
게스트 모드	전체 지도·핫구역 열람만, 업로드·도감은 로그인 유도	—	미구현 (전 API 인증 필요)

사용자 앱 — 탐색·시청¶

화면	주요 기능	대응 도메인	구현 상태
① 지도 홈	내 격자 색칠, 뷰포트 격자 조회, 지도 모드 나·친구(다이어그램은 P2로 표기하나 친구 레이어는 MVP이고 구현됨 — MSG-187), 미션 레이어(축제 면·팝업 마커·코스 폴리라인·테마 격자 점), 행정동 검색·자동완성, 미션 칩 4종(지역축제·추천코스·핫구역·팝업), 미션 바텀시트·상세	`grid` `usergrid` `mission` `search` `hotzone`	✅ 조회 API 전부 구현(랜드마크 검색은 다이어그램에도 "미정")
② 격자 썸네일	썸네일 그리드(조회수·최신 정렬, 공개·완료 영상만), 좋아요·취소, 격자 요약(점령 여부·영상 수·최근 업로드·핫구역 순위·태그)	`video` `grid`	🟡 좋아요·태그 미구현
③ 핫구역	실시간 순위, 갱신 카운트다운	`hotzone`	✅ (MSG-183·184)
④ 격자 상세	격자 표시명(행정동·무귀속), 활동 지표(동 탐험률·핫구역 순위·영상 수), 영상 목록·재생(인코딩 대기·실패·블라인드 표시·조회수), 영상 신고	`grid` `region` `zone` `video` `moderation`	✅ 상세(`GET /api/grids/{gridId}`)·전역 영상 목록(MSG-237)·재생(MSG-206)·신고 접수(MSG-192) 모두 구현

사용자 앱 — 기록·도감¶

화면	주요 기능	대응 도메인	구현 상태
⑥ 촬영·업로드	촬영(격자 GPS 검증)·갤러리 선택(≤30초), 업로드·점령/재방문 판정, 인코딩 상태 4단계(업로드됨·인코딩 중·블러 처리 중·완료/실패), AI 하이라이트·블러, 공개 범위 선택, 스탬프 획득 연출, 교체·삭제·공유	`video` `usergrid` `mission` `badge` `streak`	✅ 업로드 흐름
⑦ 개인 도감	요약(수집 격자·방문 지역·영상 수·스트릭), 지도 뷰, 갤러리 뷰(최근 수집 격자 30·격자별 내 영상), 뱃지 뷰(전체·획득 필터·진행률), 지역별 탐험률(동 단위·현재 위치 초기값·위치 폴백), 스탬프북("스팟 N곳 중 M곳")	`usergrid` `region` `badge` `streak` `mission`	🟡 요약·갤러리·뱃지·탐험률은 구현, 스탬프북 조회 API 없음(미션은 `/active`만)
설정·프로필	프로필 조회·수정, 로그아웃, 계정 삭제, 알림 설정(다이어그램은 P2 표기)	`user` `auth` `notification`	✅ 알림 설정 API도 구현됨(MSG-180, 카테고리 5종 토글)
소셜 (다이어그램상 P2)	친구 찾기, 요청·수락·차단, 친구 도감	`friend`	✅ P2가 아니라 MVP로 편입됨 (MSG-185·187)

운영자 · 스폰서¶

화면	주요 기능	대응 도메인	구현 상태
운영자 콘솔	신고 처리, 사용자 차단, 통계 모니터링, 미션 수동 등록	`moderation` `mission`	미구현 — 블라인드 전환·해제 서비스는 있으나 HTTP에 안 붙어 있다(MSG-193, 관리자 API는 MSG-195 몫)
스폰서 포털 (P2)	캠페인 관리, 스폰서 격자, 성과 리포트	광고(신규 도메인)	미구현

다이어그램과 확정 정책의 차이¶

다이어그램이 틀린 게 아니라 구현하면서 정책이 바뀐 것들이다. 다이어그램 갱신이 그만큼 뒤처져 있으니 아래 항목은 오른쪽을 따른다.

다이어그램 문구	확정 정책	근거
① "미점령 격자 미표시"	격자망(점선)은 상시 표시, 채움색만 점령 격자에	glossary 2026-08-04 (피그마 ver8 실측). 서버 계약은 불변 — 응답에는 점령 격자만
③ "조회수로 순위 산정"	핫스코어 신호는 업로드(방문 이벤트)만. 좋아요는 MSG-275 구현 후의 확장 지점	glossary 핫구역, `docs/spec/MSG-233.md`
소셜 = P2	친구·친구 도감 레이어는 MVP	glossary 2026-08-04, `docs/prd/MSG-187-prd.md`
UJ "공개 범위 기본 PRIVATE"	미지정 업로드는 PUBLIC. 공개범위는 PUBLIC·FRIENDS·PRIVATE 3값	glossary 친구 공개(FRIENDS), `docs/spec/MSG-285.md`
④ 표시명 = "행정동 이름·무귀속" 2가지	구역(zone) 안이면 "{zone명} {행}-{열}"(예 "서면 A-14"), 밖이면 행정동 폴백, 둘 다 없으면 표시명 없음. 계산은 FE-local	glossary 표시명, `docs/spec/MSG-234.md`·`MSG-259.md`
알림 설정 = P2	설정 API 구현 완료 — 카테고리 5종 토글	MSG-180(설정)·313~315(카테고리 확장)
로그인 "Apple 로그인(미정)"	iOS 앱을 낼 때는 필요하다. 앱스토어 심사가 소셜 로그인을 쓰는 앱에 애플 로그인을 요구한다. 다만 지금은 범위 밖이라 구현 계획이 없다	2026-08-10 확정

구현 갭 (백엔드 관점)¶

IA에는 있지만 코드에 없는 것. 상태 판정 기준은 .claude/docs/status.md다.

게스트 모드 — 로그인 없이 전체 지도·핫구역을 보는 동선. 현재 조회 API가 전부 인증을 요구해 화면만으로는 성립하지 않는다. 비인증 열람 범위를 정하는 PRD가 선행돼야 한다
좋아요 — ② 격자 썸네일의 좋아요·취소 (MSG-275). 핫스코어를 좋아요로 확장하는 지점이기도 하다
태그 — IA의 "격자 요약 태그"·"태그 필터". video에 태그 컬럼도 API도 없다
스탬프북 조회 — ⑦의 "스팟 N곳 중 M곳". 스탬프 적립(MSG-223)은 되지만 모아 보는 API가 없다 (/api/missions/active만 존재)
운영자 콘솔 — 신고 처리(MSG-195)·사용자 차단(MSG-194)·통계·미션 수동 등록. 신고 접수 (MSG-192)만 구현돼 있고 처리하는 쪽이 없다
스폰서/광고 — "스폰서 포털" 전체. 신규 Actor(광고주)와 신규 도메인이 필요하다
알림 이력·읽음 화면 — 발송·설정은 다 됐지만 받은 알림을 다시 보는 API가 없다(MSG-179 비목표). 딥링크 페이로드도 없어 알림 탭 시 화면 이동이 안 된다

반대로 다이어그램이 P2로 그린 친구·친구 도감은 이미 구현됐다(MSG-185·187). 다이어그램의 P2 표기를 로드맵 근거로 쓰지 말 것.

User Journey (보조자료 · UX 참고용, 아키텍처 아님)¶

"외출" 여정. 큰 3단계(외출 전/중/후) 아래 세부 5단계이고, 3. 미션·스탬프가 v2에서 신설됐다.

큰 단계	세부 단계	사용자 목표	주요 행동	터치포인트	매핑 도메인
외출 전	1. 발견·탐색	가고 싶은 곳·요즘 뜨는 곳을 찾는다	지도 격자 탐색, 행정동 검색, 핫구역 순위, 썸네일 미리보기, 미션 훑기	① ② ③	`grid` `search` `hotzone` `mission`
외출 중	2. 촬영·점령	그 순간을 짧게 남기고 칸을 점령한다	현장 촬영 또는 갤러리 선택(≤30초), 공개 범위 선택, 업로드	⑥	`video` `usergrid`
외출 중	3. 미션·스탬프 (신규)	축제·코스를 돌며 스탬프를 모은다	미션 확인(면·마커·폴리라인), 미션 격자에서 촬영, 스탬프 획득	① ⑥	`mission` `badge`
외출 후	4. 처리 대기·시청	내 영상이 잘 나왔는지 확인한다	인코딩 상태 확인(4단계), AI 하이라이트 구간 조정·블러 토글, 재생·좋아요	⑥ ④ ②	`video`, AI 파이프라인
외출 후	5. 도감·리텐션	내 지도가 채워지는 재미를 확인한다	도감 3뷰, 지역별 탐험률(동 단위), 스탬프북 확인	⑦	`usergrid` `region` `badge` `streak`

다이어그램에 적힌 참고 수치: 영상 30초 상한, AI 처리 1080p 30초 영상 실측 4.3분, 탐험률은 동 단위. 미해결로 남은 것은 핫구역 신선도 기준, 미션 칩 노출 기준, 코스 시작점·순번 표기다.