플레이 스크롤 뷰 추가 PRD

Start date: 03/10/2026 Release date: 03/31/2026 Status: Released created: March 10, 2026 8:00 PM 앱/웹/스튜디오: 앱, 웹

1. 목표 및 배경

1. 문제: 현재 에피소드 플레이는 비주얼노벨 방식(대화창에 한 줄씩 표시, 탭으로 진행)으로, 호흡이 단절되는 느낌이 있음. 대사를 한 줄씩 넘기는 과정에서 몰입이 끊기고, 이전 맥락을 되돌아보기 어려움
2. 아이디어: 가사 스크롤 UI처럼 대사를 연속 흐름으로 표시하되, 현재 활성 라인에 시각적 포커스를 맞추는 "스크롤 플레이 모드"를 기존 UI와 별도로 추가
3. 가설: 스크롤 뷰를 사용하는 유저의 씬 생성 수가 기존 UI 사용 유저보다 많을 것이다
   • 시계열로 체크하는 수밖에 없을듯
   • 대사 흐름의 연속성이 몰입감을 높여 에피소드를 끝까지 읽고, 선택지/자유입력까지 도달하는 비율이 올라갈 것으로 기대

2. 타깃 사용자

• 에피소드를 플레이하는 앱/웹 사용자 전체
• 유저가 설정에서 페이지 뷰(지금) ↔ 스크롤 뷰를 선택할 수 있도록 제공

3. 핵심 기능 요구사항

피그마:

https://www.figma.com/design/gsU0wW7vC2JjYoUPgGJYCu/001_FronTia_플레이?node-id=1858-11224&t=zaqfcm6i5Iuu4R52-4

프로토타입 파일:

플레이 스크롤 뷰.html

플레이 스크롤 뷰.jsx

0. 용어

• 페이지 뷰: 기존 플레이 UI, 기존 비주얼노벨 방식으로, 탭하여 진행
• 스크롤 뷰: 새로 추가되는 플레이 UI, 대사가 연속 흐름으로 표시되며 스크롤로 진행
• 라인: 스크롤 뷰에서 한 프레임에 해당하는 텍스트 라인
• 활성 라인: 현재 프레임에 해당하는 라인
• 비활성 라인: 현재 프레임에 해당하지 않는 라인

1. 플레이 뷰 모드 선택

1. 기본 뷰 모드: 디렉터가 스튜디오에서 입력한 뷰를 디폴트로 한다.

   1. 스튜디오에서 디렉터가 플레이 뷰와 스크롤 뷰를 선택할 수 있어야 한다.
   2. 스튜디오에서 기본으로 선택한 뷰 값은 스냅샷에 귀속된다.

2. 뷰 모드 전환: 에피소드 내 설정에서 뷰 모드를 전환할 수 있다.

3. 뷰 모드가 전환되면, 시스템 프롬프트가 일부 변경된다.

   ## Writing rule 
   1. compose an insightful response in 10~13 paragraphs, limited third-person, concise and fluid 
   2. focus on vivid character interactions 
   <if(episode_play_view_mode=page)>
   3. Maximum 2 sentences per paragraph. Always add a line break after every 2 sentences. Dialogue lines should be separated individually
   </if>
   <if(episode_play_view_mode=scroll)>
   3. Maximum 2 sentences per paragraph
   </if>

4. 플레이어는 에피소드 상세에서(홈에서 알수 있으면 베스트) 이 에피소드가 스크롤 뷰인지 페이지 뷰인지 알 수 있다. (최신 에피소드 스냅샷 기준으로 표시)

2. 스크롤 인터랙션

1. 유저는 대화창을 위 or 아래로 스크롤하여 한 프레임씩 이동할 수 있다.
   • 1회 스크롤(휠 or 스와이프) = 1라인 이동
   • 스크롤 다운 → 다음 라인 활성화 / 스크롤 업 → 이전 라인 활성화
   • 첫 라인에서 위로 스크롤 시 무시
   • 연속 스크롤 방지
     • 1회 이동 후 약 300ms 쿨다운 적용
     • 쿨다운 중 추가 스크롤 입력은 무시
     • 빠르게 여러 줄을 넘기는 것을 방지하여 대사를 자연스럽게 읽을 수 있도록 함
2. 현재 보고 있는 프레임 라인은 대화창에서 하이라이트되어서, 유저는 현재 프레임에 해당하는 내용이 무엇인지 알 수 있다.
   • 라인 이동 시 전체 대사 목록이 부드럽게 슬라이드하여 새 활성 라인이 앵커로 이동
     • 비활성 라인: 어두운 회색, 약간 축소
     • 활성 라인: 타입별 고유 색상, 원래 크기, 텍스트 그림자
   • 활성 라인은 대사창 영역 내에서 하단 60% 지점(앵커)에 고정
3. 현재 활성화된 라인이 캐릭터 혹은 {user}의 대사라면, 화자명이 대화창 내에 같이 표시된다.
4. 라인 타입에 따라 색상·스타일을 다르게 보여줘서 유저가 내용을 잘 파악할 수 있게 한다.

   • 아래는 예시

     타입	활성 시 표시 (예시임!!)	비고
     나레이션	밝은 회색 텍스트	기본 서술
     대사	흰색 텍스트 + 화자명 인디케이터	화자 전환 시에만 인디케이터 표시
     미디어	미디어 미리보기	전체화면 이미지가 배경에 등장
     유저 입력	골드색 텍스트 + "MY CHOICE" 인디케이터	유저가 선택한 선택지 or 직접 입력한 답변

5. 마지막 프레임에 위치해있는 경우(마지막 라인이 활성화되어있는 경우), 선택지/미션/직접입력 UI를 확인하고, 선택지를 누르거나 직접 입력해서 씬을 생성할 수 있다.
6. 유저가 선택지를 누르거나 직접 입력하면, 유저 입력 라인이 생기고 옆에 [다시 선택] 버튼이 보인다.
7. 이전에 유저가 선택/입력한 내용을 ‘다시 선택’을 누를 경우, 다시 선택 바로 이전 라인으로 활성화되며, 선택지/미션/직접입력 UI를 확인하고, 선택지를 누르거나 직접 입력해서 씬을 생성할 수 있다.

3. 이미지 에셋 표시

1. 배경 이미지를 제외한 캐릭터/상황 이미지는 페이지 뷰 대비 살짝 위로 올라가며, 하단 빈 공간이 노출되지 않게 처리한다.

4. 전체화면 탐색 모드

1. 전체화면 진입: 유저는 대화창 영역을 길게 누르면(롱프레스) 대화창을 전체 화면으로 볼 수 있다.
2. 전체화면 상태에서는 자유 스크롤이 가능하며, 스크롤해도 활성 라인이 변경되지 않는다. (배경/캐릭터 에셋도 유지)
3. 유저가 이동하고 싶은 라인을 탭하면 해당 라인으로 활성 라인 및 프레임이 이동한다. (전체 화면이 꺼지지는 않는다.)
4. 우측 상단 X 버튼을 눌러 전체화면 해제되며, 기본 스크롤 모드로 복귀하고 탭으로 선택한 라인부터 이어서 진행할 수 있다.
5. 전체화면 탐색 모드에서 마지막 프레임에 위치해있는 경우(마지막 라인이 활성화되어있는 경우), 선택지/미션/직접입력 UI를 확인하고, 선택지를 누르거나 직접 입력해서 씬을 생성할 수 있다.
   • 이때 전체화면 해제 안 되고, 전체 화면에서 씬이 생성됨
   • 유저 입력 라인 옆에 [다시 선택] + 리롤 버튼이 보인다.
6. 이전에 유저가 선택/입력한 내용을 ‘다시 선택’을 누를 경우, 다시 선택 바로 이전 라인으로 활성화되며, 선택지/미션/직접입력 UI를 확인하고, 선택지를 누르거나 직접 입력해서 씬을 생성할 수 있다.
   • 전체 화면 모드일 때는 선택지가 직접입력 창 바로 위(화면 아래)에 위치
7. 전체화면일 때에도 스트리밍 중이면 스트리밍 된다.
   • 어려우면, 전체화면인 상태로 새로운 씬 생성할때만 스트리밍 된다.

5. 리롤 or 다시 선택

1. 유저 입력 라인 옆에 [다시 선택]과 [리롤] 버튼이 보인다.
   1. 리롤: 누르면 입력한 내용 그대로 해당 버튼 이후의 씬을 다시 생성 (페이지 뷰 리롤 기능과 동일)
   2. 다시 선택: 누르면, 해당 입력 이전 프레임으로 이동하여 선택지 + 직접입력 바 확인 가능
      • ‘다시 선택’을 누르기 전에는 마지막 프레임으로 가도 안보여져도 됨
2. 다시 선택 해제:
   1. 페이지 뷰와 동일하게 다시 선택 플로우를 가는 경우(=항상 선택지 떠있는 경우): 선택 해제 필요 없음
   2. 선택지 안떠있는 경우: 프레임 이동 시 다시 선택 해제 = 선택지 사라짐

5. 알아서 진행하기 (Good to have: 잘라서 갈 수도 있음)

1. 스크롤 뷰에서 알아서 진행하기 인터랙션 방식이 변경됩니다.
2. 알아서 진행하기 방법 2가지 (크랙과 동일)
   1. 마지막 라인에서 위로 길게? 세게? 스크롤할 경우 → 이번에 어려울것 같다고 함
   2. 페이지 뷰와 동일하게 선택지 아래에 [알아서 진행하기] 버튼 있음
   3. 입력창이 비어있을 때 입력 버튼이 ▶ 버튼으로 변경되고, 이거 누르면 알아서 진행됨

6. 메뉴모드

• 참고: 플레이 메뉴모드 개선 PRD

4. 사용자 플로우

1. 유저가 에피소드 플레이 진입 → 첫 번째 대사가 활성화된 상태로 시작
2. 스크롤(아래)하며 대사를 한 줄씩 읽어나감. 화자가 바뀌면 인디케이터가 표시되고, 대사 내용에 따라 캐릭터 에셋/미디어가 배경에 나타남
3. 이전 내용을 다시 보고 싶으면 스크롤 업으로 한 줄씩 돌아가거나, 대사창을 길게 눌러 전체화면 탐색 모드로 진입하여 자유롭게 스크롤하고 원하는 라인을 탭해서 이동할 수 있음
4. 마지막 대사까지 읽고 추가 스크롤 → 선택지 프레임으로 전환
5. 선택지 프레임에서:
   • 선택지 중 하나를 탭 → 씬 생성
   • 자유 입력으로 직접 행동 작성 → 씬 생성
   • "알아서 진행하기" → AI 자동 진행
   • 스크롤하면 다시 마지막 대사로 돌아가서 맥락 확인 가능

5. 에러 처리 및 예외 상황

6. 데이터 분석

1. 스크롤 UI 사용 유저 vs 기존 UI 사용 유저의 씬 생성 수 비교 (핵심 지표)
2. 스크롤 UI 선택률 (전체 플레이 중 스크롤 모드 사용 비율)

로깅 이벤트

타입	이름	용도	파라미터	비고
Event	generate_scene (기존)	어떤 플레이 모드 사용 중인지 확인,
넣는김에 가로형/세로형 이미지 타입도 넣음	default_play_mode: scroll_view	page_view
play_mode: scroll_view	page_view
default_play_mode: scroll_view	page_view
image_type: portrait_dual	landscape	default는 디렉터가 지정한 기본값
Event	generate_scene_complete (기존)	어떤 플레이 모드 사용 중인지 확인,
넣는김에 가로형/세로형 이미지 타입도 넣음	default_play_mode: scroll_view	page_view
play_mode: scroll_view	page_view
image_type: portrait_dual	landscape	default는 디렉터가 지정한 기본값