이 문서는 'Trip Pocket' 프로젝트의 개발 과정과 성과를 요약하고, 앞으로의 계획을 정리한 문서입니다.
Trip Pocket은 복잡한 해외여행 경비 관리를 쉽고 스마트하게 해결해주는 지능형 예산 관리 서비스입니다. 사용자는 실시간 환율이 적용된 예산을 계획하고, 상세 지출 내역을 기록하며, 카테고리별 지출 현황을 차트로 한눈에 파악할 수 있습니다. 또한, RAG 기술이 적용된 AI 챗봇을 통해 여행지에 대한 궁금증을 실시간으로 해결하며 더욱 풍성한 여행을 계획할 수 있습니다.
- 프론트엔드 (Vercel 배포): https://trip-budget-app.vercel.app/
- 백엔드 (Render 배포): https://trip-budget-app-server.onrender.com
Frontend: React (Vite), Zustand, React Router, Axios, CSS Modules, Recharts, lucide-react, react-hot-toast
Backend: Node.js, Express, MongoDB, Mongoose, JWT, @google/genai (Gemini 2.5)
Deployment: Vercel (Frontend), Render (Backend)
Version Control: Git, GitHub
- JWT 기반의 안전한 회원가입 및 로그인/로그아웃 기능 구현
- 여행 예산 계획과 그 안의 상세 지출 내역을 생성, 조회, 수정, 삭제 가능
- Recharts를 활용하여 카테고리별 지출 내역을 원형 차트로 시각화
- 사용자가 자신의 지출 패턴을 직관적으로 확인 가능
- 모든 금액을 원화(KRW) 기준으로 자동 환산하여 사용자 편의성을 높임
- 항목 추가/삭제: ‘숙소’, ‘식비’ 등 지출 항목 자유롭게 관리 가능
- 실시간 잔액 계산: 총 예산에서 지출 합계를 자동 계산해 남은 예산 표시
- 최신 RAG (Retrieval-Augmented Generation) 기술 도입
- Google Gemini 2.5 Flash 모델 + Google Search 연동
- 최신 웹 정보를 실시간 검색 후 신뢰도 높은 답변을 생성하는 AI 챗봇 구현
- 로딩/에러 상태 시각화
- 사용자 알림을 부드러운 토스트 메시지로 통일
현재 프로젝트는 MVP(최소 기능 제품) 단계입니다. 앞으로의 발전 방향은 다음과 같음
- 상세 페이지 내에 [💰 예산 관리] 탭과 [🗺️ 여행 일정] 탭을 만들어, 사용자가 예산과 AI가 생성한 추천 일정을 한 화면에서 쉽게 오갈 수 있도록 기능 추가 및 개선
- 계획과 예산 연동: 챗봇이 추천하는 여행 일정을 바탕으로 예상 비용을 자동 계산해 예산 계획에 반영
- 실시간 상담 및 조정: 여행 중 챗봇과 대화하며 예산에 맞는 일정 재조정, 돌발 상황 시 대체 방안 제안
- 개인화 추천: 사용자의 지출 패턴과 취향을 분석하여 맞춤형 맛집, 쇼핑, 액티비티 추천
- 데이터 기반 피드백: 여행 후 실제 지출 vs. AI 추천 예산 비교 분석 → 다음 여행 가이드 제공
- 가족, 친구 등 여행 동행자 초대 기능
- 예산 및 지출 내역을 공유·공동 관리할 수 있는 기능 제공
- 닉네임, 비밀번호 변경 등 개인 정보 관리 페이지 제공
- 설정한 예산의 70%, 90% 초과 시 푸시 알림
- 여행기간동안 매일 지출 내역 입력 알림
- 네트워크 미연결 상태에서도 지출 내역 입력 가능
- 연결 복구 시 자동 동기화
- 테스트 코드 작성: Jest + React Testing Library → 기능 안정성 & 유지보수성 강화
- TypeScript 도입: 타입을 추가해 런타임 에러 사전 방지, 코드 안정성 및 가독성 향상
- 사용자가 영수증 사진을 업로드하면
- OCR(광학 문자 인식) 기술을 활용해 지출 내역과 금액을 자동 인식 및 기록