2026.02 - 2026.03
Tarome
카드 선택부터 결과 해석, 후속 채팅까지 자연스럽게 이어지는 AI 타로 서비스 화면을 설계했습니다.
역할
프론트엔드 전담
기술
Next.js / TypeScript / Supabase / Tailwind CSS / Zustand
문제 상황
타로 결과 화면과 후속 대화 흐름이 분절되면 사용자가 서비스 몰입을 이어가기 어려웠습니다.
해결 방식
선택, 결과, 후속 액션을 각각 끊어진 페이지가 아니라 점진적으로 이어지는 하나의 단계형 흐름으로 재구성했습니다.
구현 포인트
- 선택 상태와 결과 상태를 Zustand로 분리해 단계 전환 시점의 복잡도를 낮췄습니다.
- 결과 화면 이후 자연스럽게 채팅으로 넘어가도록 CTA와 상태 전이를 설계했습니다.
- 모바일 우선 레이아웃으로 카드, 결과, 대화 UI의 우선순위를 재정렬했습니다.
트러블슈팅
초기에는 단계별 UI 상태가 서로 강하게 결합되어 예외 케이스가 많았는데, 단계 전이를 명시적인 상태 흐름으로 재설계해 유지보수성을 높였습니다.