문제 정의
사용자는 짧은 시간 안에 몰입감 있는 경험을 원했지만, 기존 흐름은 단계 전환과 결과 해석 맥락이 분리되어 이탈률이 높았습니다.
제약 조건
- 모바일 우선 화면에서 애니메이션과 성능을 동시에 확보해야 했다
- AI 응답 실패 시에도 결과 화면 진입이 끊기지 않아야 했다
- 공유 링크에서 메타데이터 품질을 유지해야 했다
목표
- 카드 선택-로딩-결과 전환을 단일 흐름으로 연결
- 에러 케이스에서도 사용자가 다음 행동을 할 수 있도록 보장
- 공유 결과 페이지의 SEO 메타를 안정적으로 생성
구현 접근
- Zustand 기반 상태를 단계별 책임으로 분리하고 결과/채팅 진입 상태를 명시적으로 설계
- 로딩 단계에서 API 완료와 비디오 완료를 동기화해 전환 타이밍을 제어
- 결과 페이지에서 카드별 해석과 전체 요약 뷰를 분리해 사용자 인지 부담을 줄임
- 캐릭터별 음성/비주얼 자산 매핑으로 확장 가능한 구조를 구성
결과
- 사용자 플로우가 끊기는 구간을 줄여 결과 진입 경험 안정화
- 카드 전체보기/질문하기 액션을 명확히 분리해 후속 참여 동선 개선
- 공유 결과 메타데이터 템플릿 정비로 외부 유입 카드 품질 개선
시각 증빙
회고
감성형 서비스일수록 애니메이션 자체보다 전환 타이밍 설계가 품질을 좌우했습니다. 이후에는 실측 데이터 기반으로 단계별 전환 시간을 더욱 정밀하게 조정할 계획입니다.
추가 기록
상세 구현 노트
- Step 별 상태를 단순 boolean 나열이 아니라 사용자 행동 단계 기준으로 재정의했습니다.
- 결과 화면은 단건 해석과 전체 요약을 분리해 정보 과밀을 방지했습니다.
다음 개선 포인트
- 공유 링크 유입 사용자의 재참여 플로우 실험
- AI 실패 시 fallback 문안 A/B 테스트
- 캐릭터 추가 시 에셋 로딩 전략 자동화