왜 필요했는지
01점술 제품이 결과 화면 하나에서 끝나면 재사용이 끊깁니다. 카탈로그 진입, 입력, 결과, 결제, 수집, 히스토리가 자연스럽게 이어져야 했습니다.
프로젝트 개요
단일 결과 화면보다, 진입부터 결제·수집·상담까지 이어지는 반복 루프가 더 중요했습니다.
Kedigram은 커피점, 타로, 꿈해몽, 궁합, 오늘의 운세 같은 AI 점술 경험을 중심으로 만든 소비자 웹 제품입니다. 제품은 결과 화면 하나에서 끝나지 않고, 카탈로그 진입, 결과 확인, 크리스탈 결제, Kedi 수집, 상담 채팅까지 하나의 앱형 흐름으로 연결됩니다.
구현 기준으로 home, content, result, shop, kedigram, chat, history 라우트가 나뉘어 있고, next-intl 다국어, Orval 기반 API 클라이언트, React Query 상태 동기화, Google OAuth 로그인, wallet/payment checkout, gacha reveal 인터랙션, OG/SEO 렌더링이 함께 묶여 있습니다. 단순 랜딩보다 반복 사용을 전제로 한 소비자 서비스에 가까운 구조입니다.
제가 먼저 만든 범위
02Next.js 기반으로 home, content, result, shop, kedigram, chat, history 흐름을 나누고, API·상태·다국어·OG 렌더링을 한 제품으로 묶었습니다.
잘 맞는 서비스 유형
03콘텐츠 소비, 가벼운 결제, 캐릭터 수집, 반복 사용 루프가 함께 필요한 소비자 웹 제품에 맞습니다.
기술 정보
사용 기술
웹 프론트
Next.jsReactTypeScriptTailwind CSSRadix UIFramer Motion
상태 · API 레이어
next-intlReact QueryZustandOrvalAxios
제품 루프
Google OAuthwallet and payment checkouthtml2canvas share captureSSE chat proxydynamic metadata
연동 서비스
auth APIcatalog APIcontent APIorder APIwallet APIpayment APImatching APIcharacter APIprofile APISSE chat stream
화면 구성
주요 화면
아래 화면은 실제 제품 경험을 구성했던 인터페이스와 흐름입니다.
문의
비슷한 제품을 고민하고 계시다면 편하게 말씀 주세요.
간단한 기획 메모, 참고 링크, 현재 정리된 범위 정도만 공유해 주셔도 충분합니다. 제품 성격에 맞는 첫 방향부터 함께 정리해드릴 수 있습니다.