Screen Spec

JamIssue 화면 설계 기준

기준일: 2026-06-12
기준 브랜치: main

이 문서는 JamIssue Web Front의 앱 전환 UI/UX 설계 기준을 정리한다. UI/UX 버그와 QA 추적은 UI/UX 기대 동작 QA 매트릭스의 UIUX-### ID를 기준으로 연결한다.

0. 앱 전환 개편 기준

TSK-012 이후의 UI/UX 기준은 JamIssue 앱 전환 UI/UX 개편 추적성을 우선한다.

목표 구조는 다음과 같다.

Status Safe Area
-> App Header
-> Sub Navigation
-> Content
-> Bottom Tab Bar

기존 4탭 설명은 과거 기준이다. 현재 공식 하단 탭은 지도 / 행사 / 피드 / 코스 / 마이 5탭이다.

1. 전역 원칙

• 모바일 우선으로 설계한다.
• 기준 viewport는 iPhone 계열 모바일 폭을 우선한다.
• 하단 탭은 앱 셸 하단에 고정한다.
• 지도 화면과 비지도 탭은 시각적으로 분리한다.
• 사용자가 직접 읽어야 하는 설명보다 상태와 버튼 의미를 우선한다.
• 외부 API, DB schema, OAuth 경로는 UI 개편과 분리해 관리한다.

2. 앱 셸 구조

Slot	책임	완료 근거
Status Safe Area	상단 safe-area와 전역 상태 표시	#382 / PR #397
App Header	서비스 타이틀과 주요 액션 슬롯	#382 / PR #397
Sub Navigation	지도 필터, 탭별 보조 선택 영역	#382, #384
Content	지도, 행사, 피드, 코스, 마이 화면 본문	#385 / PR #400
Bottom Tab Bar	지도 / 행사 / 피드 / 코스 / 마이 5탭 이동	#384 / PR #399

3. 하단 탭 구조

하단 탭은 5개다.

• 지도
• 행사
• 피드
• 코스
• 마이

규칙:

• 각 탭은 독립 화면처럼 보여야 한다.
• 지도 탭에서만 지도 배경과 지도 stage를 노출한다.
• 행사 / 피드 / 코스 / 마이 탭에서는 지도 배경이 노출되지 않아야 한다.
• 탭 key는 map | event | feed | course | my를 유지한다.

4. 지도 화면 규칙

목적

장소와 행사를 빠르게 고르고 스탬프, 후기, 코스 흐름으로 이어가는 시작점이다.

구조

• 상단 브랜드/상태 영역
• 카테고리 필터
• 지도 surface
• 장소/행사 상세 시트
• 하단 탭

바텀시트 상태

앱 전환 기준의 시트 상태는 hidden / peek / half / full이다.

상태	기대 동작
hidden	시트가 보이지 않는다.
peek	탭바 위에 간격을 둔 floating card처럼 보인다.
half	하단 탭을 숨기고 화면 하단 일부를 점유한다.
full	하단 탭을 숨기고 더 큰 상세 영역을 제공한다.

기존 route drawer state와의 호환은 src/components/map-stage/mapSheetState.ts가 담당한다.

5. 장소/행사 시트 규칙

장소 시트

장소 시트는 다음 정보를 제공한다.

• 장소명
• 구/요약
• 카테고리 badge
• 방문/스탬프 상태
• 후기 작성 가능 여부
• 장소별 후기 목록

행사 시트

행사 시트는 다음 정보를 제공한다.

• 행사명
• 개최 장소
• 시작일/종료일
• 주소
• 외부 링크

행사 정보는 스탬프 인증 로직과 섞지 않는다.

6. 피드 탭 규칙

피드 탭은 실제 방문 후기 소비 중심 화면이다.

필수 동작:

• 후기 목록 확인
• 댓글 열기/작성
• 좋아요 toggle
• 장소 이동 CTA

후기 작성 자체는 지도 장소 시트의 스탬프 완료 흐름에서 시작한다.

7. 코스 탭 규칙

코스 탭은 추천 코스와 사용자 생성 코스를 탐색하는 화면이다.

필수 동작:

• 정렬 chip 제공
• 추천 코스 카드 확인
• 코스 상세 진입
• 최소 2개 장소 이상 코스만 공개 가능

8. 마이 탭 규칙

마이 탭은 계정 상태와 개인 활동 요약을 담당한다.

로그아웃 상태:

• 로그인 유도만 노출한다.

로그인 상태:

• 프로필
• 방문/스탬프 통계
• 내가 쓴 피드
• 생성한 코스
• 설정 진입

9. 버튼/상태 규칙

스탬프 버튼

• 로그아웃이면 비활성화하고 로그인 필요를 안내한다.
• 반경 밖이면 비활성화하고 거리 상태를 안내한다.
• 반경 안이면 활성화한다.
• 오늘 이미 완료했으면 완료 상태로 표시한다.

후기 작성 버튼

• 당일 해당 장소 스탬프가 있을 때만 활성화한다.
• GPS 진입만으로는 열리지 않는다.

코스 발행 버튼

• 공개 가능한 travel_session이 있을 때만 활성화한다.

10. QA 체크리스트

상세 추적 ID는 UI/UX 기대 동작 QA 매트릭스를 기준으로 한다.

• 지도 외 탭에서 지도 배경이 보이지 않는가
• 지도 탭에서 상단 카드, 필터, 지도, 시트가 서로 가리지 않는가
• 시트가 hidden / peek / half / full 상태 계약을 유지하는가
• Peek 시트가 탭바 위 간격을 유지하는가
• Half/Full 시트에서 탭바가 숨는가
• 리뷰 작성 textarea focus 시 키보드로 인해 하단 탭/시트가 중간으로 떠오르지 않는가
• 스탬프 버튼이 로그인/거리/완료 상태에 맞게 동작하는가
• 피드 댓글/좋아요/장소 이동 CTA가 동작하는가
• 코스 정렬과 카드 진입이 동작하는가
• 마이 탭 로그인 전/후 상태가 구분되는가

11. 구현 추적

Issue	PR	Merge SHA	내용
#381	#396	c7f4c71	UI/UX redesign baseline
#382	#397	8d85a67	App shell safe-area layout
#383	#398	ed5b817	Map bottom sheet state machine
#384	#399	e3f8481	Five-tab IA regression
#385	#400	7ed1af2	Tab content surface E2E
#386	#401	90f6cec	Design token and layout constant gate