Tarome

서비스 바로가기

카드 선택부터 AI 리딩, 후속 채팅까지 이어지는 인터랙티브 타로 서비스

역할: 프론트엔드 전담
기간: 2026.02 - 2026.03
팀: 프로덕트 디자이너(1) 프론트엔드(1)

사용스킬

Next.jsTypeScriptZustandVertex AIGeminiVercel AI SDKSupabaseCloudflare Pages

프로젝트 개요

요약

일방적인 결과 조회가 아닌, 사용자의 행동이 후속 채팅까지 이어지는 인터랙티브 리딩 경험. FSM 기반 화면 전환과 데이터·UI 분리 구조로 확장성을 고려한 설계

문제 정의

기존 타로 서비스는 텍스트 결과 확인 중심 구조 → 사용자가 리딩을 수동적으로 소비하는 방식. 참여감과 몰입도 부족

해결 방식

온보딩 → 카드 선택 → 결과 → 공유 → 채팅으로 이어지는 흐름으로 재구성 → 결과 조회형에서 참여형 리딩 경험으로 전환

주요 기능

Zustand 기반 상태 전이 관리
framer-motion 기반 카드 셔플 인터랙션
결과 생성 시 토큰 기반 접근 제어
공유 링크 진입 시 권한별 UI 분기 처리
Vertex AI 응답 구조를 서비스 흐름에 맞게 가공

핵심 설계

사용자 제스처 기반 카드 셔플 인터랙션

사용자 제스처 기반 카드 셔플 → 포인터 근처 카드만 반응 → 실제 셔플에 가까운 물리감 → 다음 단계로 자연스럽게 전환

결과 이후 상담형 채팅 연결

결과 생성자 기준 채팅 접근 제어 → 이전 결과 맥락 + 대화 히스토리 활용 → 단발성 응답이 아닌 상담형 인터랙션 흐름 구성

기술적 의사결정

고성능 인터랙션 최적화

문제

카드 50장을 동시에 움직이는 셔플 화면에서 useState로 좌표를 관리하자, 드래그와 셔플 동작 시 모든 카드가 매 프레임 리렌더되면서 모바일에서 프레임 드랍이 발생

해결

렌더링 사이클을 타지 않도록 상태를 React 밖으로 분리하고, MotionValue로 각 카드 위치를 직접 업데이트하는 구조로 변경

결과

리렌더 없이 DOM 속성만 갱신하도록 바꾸면서 프레임 드랍이 사라졌고, 모바일에서도 끊김 없이 동작하는 인터랙션 구현

결과-채팅 권한 통합

문제

결과 URL을 공유할 수 있는 구조에서, 결과 생성자와 조회 사용자의 채팅 권한을 구분해야 했고 AI 호출 비용도 함께 고려해야 하는 상황

해결

결과 생성 시 채팅 접근 토큰을 발급하고 HTTP-only 쿠키와 연결해, 결과 생성자 기준으로 채팅 접근을 제어하는 구조로 변경

결과

사용자 분리 + 권한 제어 + 비용 관리를 함께 다룰 수 있는 구조로 정리

트러블슈팅

공유 링크로 진입하거나 결과 생성 중 이탈하는 상황에서 상태 불일치 발생 → 상태 제어와 권한 검증을 분리하고, 진입 경로 기반 리다이렉트 흐름으로 구조 정리

결과

데이터 구조와 UI의 책임을 분리해 유지보수성 및 확장 기반 강화
결과 생성자 쿠키 토큰 인증을 통해 권한 제어 및 API 비용 방어 구현
DOM 속성 직접 갱신으로 저사양 모바일에서도 버벅임 없는 인터랙션

회고

공유 링크 진입이나 이탈 상황을 대응하면서, 사용자 흐름 설계의 중요성을 체감했습니다.
AI 기능은 구현뿐 아니라 비용과 운영까지 함께 고려해야 한다는 걸 경험했습니다.