Claude AI와 Supabase Realtime으로 구현한 그룹 여행 플래너 아키텍처

Context

그룹 여행 계획 시 발생하는 의견 충돌과 의사결정 지연 문제. 개별 선호도를 비공개로 수집하여 앵커링 효과를 방지하는 시스템 필요. LLM의 불안정한 JSON 출력으로 인한 UI 크래시 및 데이터 부정합 발생.

Technical Solution

• Next.js 15 App Router 기반의 프런트엔드와 OpenNext 어댑터를 통한 Cloudflare Workers 엣지 배포 구조
• Supabase Postgres Change Subscriptions를 활용한 구성원 입력 상태의 실시간 동기화 및 폴링 없는 UI 업데이트 방식
• LLM 출력 신뢰성 확보를 위해 시스템 프롬프트 제약 강화 및 JSON 스키마를 엄격한 계약으로 처리하는 제어 전략
• 사용자 경험 개선을 위해 AI 응답을 클라이언트로 즉시 전송하는 Streaming 응답 처리 및 실시간 꼬리 표시 구현
• 네트워크 단절 대응을 위해 localStorage에 120초 TTL 검색 마커를 저장하고 복귀 시 DB를 3초 간격으로 폴링하는 복구 메커니즘
• 구독 등급별로 Claude Haiku, Sonnet, Opus 모델을 매핑하여 비용과 품질을 최적화한 계층형 모델 선택 구조

Impact

• AI 응답 생성에 소요되는 15~30초의 대기 시간을 Streaming 방식으로 처리하여 체감 대기 시간 감소
• localStorage 기반 복구 시스템의 TTL을 120,000ms로 설정하여 세션 유지 및 검색 크레딧 손실 방지

Key Takeaway

LLM 기반 서비스 설계 시 출력 형식(JSON Schema)을 최우선 계약으로 정의하고 역으로 프롬프트를 설계하는 것이 개발 기간을 단축하는 핵심 경로임.