와이어프레임 리뷰: rp-session-play
요약
- 총평: 이 페이지는 자체 선언대로 "목업 수준 placeholder"이며, 롤플레잉 세션 진행이라는 핵심 기능을 최소한의 골격으로만 표현하고 있다. 구조 자체는 단순하고 명확하지만, 세션이라는 시간 흐름이 있는 플로우인 만큼 상태 전환·엣지 케이스·진입/이탈 경로에서 근거 없는 가정이 많다. 정식 와이어프레임으로 격상하기 전에 P0 항목들을 먼저 해소해야 한다.
- PRD 상태: 없음 (
playground/prds/rp-session-play.md 파일 미존재)
- 자매 페이지: rp-mypage, rp-mypage2, rp-my-tracks, rp-explore, rp-analysis, rp-history, rp-session-detail, rp-track-detail, rp-scenario-detail
발견사항 (우선순위순)
P0 — 막힘/충돌
PRD 미작성 — 기능 범위와 의도가 코드 주석에만 존재 [관점: PRD정합성]
- 현상:
playground/prds/rp-session-play.md 파일이 없다. 코드 상단 주석("목업 수준 — 정식 PRD/와이어는 후속 작업")이 유일한 명세 역할을 하고 있다.
- 영향: 세션 진행 화면은 롤플레잉의 핵심 인터랙션 흐름이다. PRD 없이 코드가 먼저 정의되면, 이후 정식 와이어 작성 시 현재 목업과의 충돌 여부를 판단할 기준이 없다.
- 제안: 정식 와이어프레임으로 격상할 계획이 있다면 5항목 PRD-Lite를 먼저 작성한다. 그 전까지는 menu-tree.ts 노트를 "placeholder — 정식 와이어 미작성" 으로 명확히 유지한다.
- 영향 파일:
playground/lib/menu-tree.ts (status: "live" 로 등록되어 있어 완성 페이지처럼 보임)
세션 종료 후 "다시 도전" 링크 목적지가 세션 진입 흐름을 건너뜀 [관점: 인터랙션]
- 현상:
isEnd 상태에서 "다시 도전" 버튼이 /wf/rp-scenario-detail로 링크된다. rp-scenario-detail은 시나리오 내 캐릭터를 선택하는 페이지인데, 어떤 시나리오인지 쿼리 파라미터가 없다.
- 영향: 사용자가 방금 완료한 시나리오로 돌아가려 해도 rp-scenario-detail의 기본 상태(전체 목록)로 떨어지게 된다. 연속 플레이 의도가 깨진다.
- 제안:
/wf/rp-scenario-detail?scenario=<id> 형태로 시나리오 컨텍스트를 전달하거나, 현재 목업 수준에서는 링크 대신 "시나리오 선택 화면으로 돌아감 (파라미터 미구현)" 이라는 주석 placeholder로 대체한다.
- 영향 파일:
/Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-session-play.tsx (line 153)
"종료" 버튼의 이탈 목적지가 정의되지 않음 [관점: 인터랙션]
- 현상: 헤더의 "종료" 버튼이
<button>으로만 존재하고 onClick 핸들러도 href도 없다. 클릭 시 아무 일도 일어나지 않는다.
- 영향: 세션 중 이탈 의도를 표현할 방법이 없고, 어디로 빠져나가는지(홈? 시나리오 상세? 히스토리?) 구조적으로 정의되지 않았다. 이 결정은 PRD 단계에서 다뤄야 할 흐름 설계 문제다.
- 제안: 최소한 주석으로 "→ 확인 모달 후 rp-mypage 또는 rp-scenario-detail 이동 예정" 을 명시하거나, 목업 수준이라도 Link로 대표 목적지를 연결한다.
- 영향 파일:
/Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-session-play.tsx (line 97–99)
P1 — 개선 권장
빈 상태·로딩·에러 상태 전혀 없음 [관점: 정보구조]
- 현상: MOCK 데이터로만 렌더링되며 AI 응답 대기(로딩), 네트워크 오류, 세션 데이터 없음 상태가 표현되지 않는다.
- 영향: 실제 세션은 AI 응답 지연이 핵심 UX 포인트인데, 그 상태가 완전히 생략되어 있다. 정식 와이어프레임 작성 시 누락 가능성이 높다.
- 제안: WireframeOptions의 mode에 "loading" / "error" 슬롯을 추가하고, 입력 영역 아래에 "AI 응답 대기 중…" placeholder 상태를 하나 더 표현한다.
- 영향 파일:
/Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-session-play.tsx (MODES 배열, line 11)
activeSub가 "home"으로 고정 — 네비게이션 맥락 불일치 [관점: 일관성]
- 현상:
AppChrome의 activeSub="home" 으로 고정되어 있다. rp-session-detail은 activeSub="history"를 사용한다.
- 영향: 세션 플레이 화면은 홈에서도, 히스토리에서도 진입할 수 있다. "home"으로 고정하면 히스토리 경유 진입 시 하단 탭 하이라이트가 틀려 보인다.
- 제안: 진입 경로를 쿼리 파라미터로 받아 activeSub를 동적으로 설정하거나, 세션 진행 중에는 서브 탭을 비활성 처리하는 패턴을 자매 페이지와 협의 후 정의한다.
- 영향 파일:
/Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-session-play.tsx (line 71, 76)
모바일 뷰포트에서 대화 영역 높이가 고정되지 않아 입력창 밀림 가능성 [관점: 정보구조]
- 현상: 대화 영역(
mb-4 space-y-3)에 max-height나 overflow-y-auto 제약이 없다. 모바일(max-w-sm 래퍼) 환경에서 턴이 쌓이면 입력창이 뷰포트 밖으로 밀릴 수 있다.
- 영향: mid 모드(4턴)에서는 이미 대화 버블이 길어지기 시작한다. 8턴 full 시나리오에서는 입력창에 접근하려면 스크롤이 필요해지는데, 구조상 대화창과 입력창이 함께 스크롤된다.
- 제안: 대화 영역에
flex-1 overflow-y-auto + 입력창 shrink-0 패턴을 적용해 채팅 레이아웃의 기본 구조를 명시한다.
- 영향 파일:
/Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-session-play.tsx (line 113)
P2 — nice to have
- 음성 입력 placeholder가 구조적으로 표현되지 않음 [관점: 정보구조]
- 현상: 입력 영역 하단에 "음성 / 텍스트 (placeholder)" 텍스트만 있다. 음성과 텍스트 전환이 별도 UI 요소인지, 동시 제공인지 구조가 불분명하다.
- 제안: 목업 수준이라도 [마이크 아이콘 버튼] / [텍스트 입력창] 두 영역을 분리해 배치하거나, "음성 기능 — 별도 설계 예정" 주석으로 범위를 명확히 한다.
PRD 갱신이 필요한 항목
PRD 파일이 없으므로 PRD 정합성 섹션을 생략한다. 정식 와이어프레임 격상 시 아래 항목을 PRD §3 핵심흐름과 §4 주요정보·액션에 반드시 포함해야 한다.
- [§3 핵심흐름] 세션 진입 경로 정의 (rp-scenario-detail 캐릭터 선택 → rp-session-play)
- [§3 핵심흐름] 세션 중 이탈(종료 버튼) 처리 흐름 — 확인 모달 여부, 이탈 후 목적지
- [§3 핵심흐름] AI 응답 대기 상태 처리 방식
- [§4 주요액션] "다시 도전" CTA의 파라미터 전달 규약
- [§4 주요액션] "결과 보기" CTA → rp-session-detail 연결 파라미터 규약
다음 단계 제안
- 정식 와이어 격상 전 PRD-Lite 5항목 작성 — 특히 §3 핵심흐름(진입·이탈·AI 대기)과 §4 CTA 목적지 파라미터 규약을 먼저 확정한다.
- P0-3 "종료" 버튼 목적지를 주석이라도 명시하고, P0-2 "다시 도전" 링크에 시나리오 컨텍스트 파라미터를 추가해 세션 흐름의 단절을 해소한다.