총평: PRD와 구조적으로 잘 정렬되어 있고, 4개 모드(normal/edge/empty/overflow)와 desktop/mobile 뷰포트를 모두 지원한다. 행 종류별 차별 시그널(진행률 바, KindBadge, SocialCard 메타)도 PRD §4에 명시된 수준으로 구현되어 있다. 다만 데스크탑 가로 스크롤 행에서 "호버 화살표 affordance" 와이어프레임 표현이 완전히 빠져 있고, SocialCard의 카드 타입 배지(KindBadge) 누락이 자매 페이지와의 일관성을 깨고 있어 P1 수준의 조정이 필요하다.

PRD 상태: 있음 (updated 2026-05-27, status: draft)

자매 페이지: rp-mypage, rp-mypage2, rp-my-tracks, rp-history, rp-analysis, rp-scenario-detail, rp-session-play, rp-track-detail, rp-session-detail

발견사항 (우선순위순)

P0 — 막힘/충돌

없음. 모든 CTA는 유효한 href를 가지며, 빈 상태도 모두 처리되어 있다.

P1 — 개선 권장

SocialCard에 KindBadge 없음 [관점: 일관성]

현상: ContentCard와 ContinueCard는 썸네일 좌하단에 KindBadge(시나리오/롤플레잉 구분 배지)를 렌더링하지만, SocialCard에는 해당 배지가 없다. SocialCard는 롤플레잉 only 행에만 노출된다는 PRD 근거가 있으나, 카드 자체에 표시된 타입 시그널이 없으면 혼용 카탈로그 내에서 시각적 파악이 불가능하다.
영향: PRD §4 "카드 타입 시그널(혼용 핵심)" 표에서 롤플레잉 카드는 KindBadge를 갖도록 명시되어 있다. 같은 행에 미래에 혼용 노출이 허용될 경우 즉시 충돌 발생.
제안: SocialCard 썸네일에도 <KindBadge isScenario={false} />를 추가. 또는 "롤플레잉 only" 행 설계를 PRD에 명확히 확정(결정 필요 §5 해소).
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-explore.tsx (SocialCard, line 469–495)

데스크탑 가로 스크롤 행의 화살표 affordance 와이어 표현 부재 [관점: 인터랙션]

현상: PRD §4 "카탈로그 행 공통"에서 "데스크탑에선 호버 시 좌우 화살표 affordance"를 디자인 단계에서 추가한다고 명시하나, 와이어프레임 Row 컴포넌트에 그 affordance를 위한 자리(placeholder 버튼 또는 주석)가 전혀 없다.
영향: 디자인 단계에서 구조 추가가 필요해지면 "디자인 단계에서 정보 구조를 바꾸지 않는다" 원칙(CLAUDE.md)과 충돌. 와이어프레임이 구조 결정 역할을 다하지 못한 셈.
제안: Row 컴포넌트 좌우 끝에 [← 이전] [다음 →] 형태의 grayscale placeholder 버튼(데스크탑 only, compact=false 분기)을 추가해 레이아웃 구조를 확정해둔다.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-explore.tsx (Row 컴포넌트, line 255–298)

Hero "정보 더 보기" CTA의 라우팅이 시나리오/롤플레잉 구분 없이 rp-scenario-detail로 통일 [관점: PRD 정합성]

현상: heroHref(item)는 item.kind에 따라 분기하지만, 보조 CTA인 "정보 더 보기"는 종류에 무관하게 /wf/rp-scenario-detail?id=${item.id}로 고정(line 229–233).
영향: Hero가 롤플레잉 카드를 노출할 때(PRD §3: "대개 롤플레잉 우선") "정보 더 보기"를 누르면 시나리오 상세 페이지로 이동한다. PRD §3-3에서 "롤플레잉 카드 → 캐릭터 선택 없이 세션 즉시 진입"을 의도하므로 보조 버튼 목적지도 재검토 필요.
제안: heroHref와 동일한 분기 로직을 보조 버튼에도 적용하거나, "정보 더 보기"를 시나리오 상세 고정으로 유지하되 PRD에 의도를 명기한다.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-explore.tsx (Hero, line 229–233)

P2 — nice to have

overflow 모드에서 카드 수 한도(8장) 검증 불가 [관점: 정보 구조]

현상: PRD §4에서 "데스크탑 노출 4장 + 스크롤로 8장까지"를 명시하나, 와이어프레임 Row 컴포넌트는 카드 수 상한 제한 로직이 없다. overflow 모드 mock 데이터가 실제로 8장 초과를 시뮬레이션하는지 코드에서 확인이 안 됨.
제안: mock 데이터 또는 Row에 slice(0, 8) 가드를 추가해 "8장 초과 시 어떻게 보이는가"를 와이어프레임 수준에서 검증 가능하게 한다.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-explore.tsx, /Users/jungeunkim/Desktop/TIPP-design/playground/lib/mock/rp-explore.ts

FullEmpty 상태가 BrowseAllEntry 위에 공존 [관점: 정보 구조]

현상: hasAny가 false일 때 FullEmpty("탐색할 콘텐츠가 아직 없습니다")와 BrowseAllEntry("전체 시나리오 보기")가 동시에 렌더링된다. 완전 빈 상태에서도 카탈로그 진입 CTA는 유지되는 게 맞지만, 두 요소 사이에 시각적 맥락 연결이 없어 의도가 모호하다.
제안: FullEmpty 내부에 BrowseAllEntry를 포함하거나, FullEmpty 메시지를 "콘텐츠가 아직 없습니다. 전체 카탈로그를 둘러보세요."로 통합해 단일 블록으로 처리.
영향 파일: /Users/jungeunkim/Desktop/TIPP-design/playground/components/wireframes/rp-explore.tsx (line 154–157)

PRD 갱신이 필요한 항목

[§3-3 핵심 사용 흐름] Hero "정보 더 보기" 보조 CTA의 목적지(시나리오 상세 고정 vs 종류별 분기)를 §5 결정 필요 항목에 추가하거나 §4 Hero 배너 항목에 명기 필요.

[§4 카드 타입 시그널] SocialCard("다른 사람들이 하고 있는" 행)의 KindBadge 유무를 명시. 롤플레잉 only라면 표에 명시적 행 추가.