사진 한 장으로 장소를 인식하고, Claude AI가 최적 여행 코스를 만들어주는 모바일 웹앱
사진 한 장이면 AI가 알아서 당일치기 여행 코스를 짜줘요
사진 한 장에서 여행 코스까지, 모든 과정이 자동으로
사진의 EXIF GPS 데이터를 읽거나, GPS가 없는 경우 Claude Vision이 이미지를 분석해 장소를 파악해요. 인식된 지역을 기반으로 Kakao Maps에서 주변 명소·음식점·카페를 검색하고, Claude가 시간대별 최적 동선으로 당일치기 코스를 완성해요.
생성된 코스를 시간대별 타임라인과 Kakao 지도로 동시에 확인해요. 각 장소의 이동 동선이 지도에 표시돼요.
API 키 없이도 샘플 코스 데이터로 앱 전체 흐름을 체험할 수 있어요. 개발 환경에서 즉시 확인 가능해요.
seed + themeIndex 조합으로 산·달·별 풍경을 Canvas에 결정론적으로 그려요. 매번 같은 입력에 같은 배경이 나와요.
완성된 여행 코스를 URL로 공유해요. 링크를 받은 사람도 동일한 코스 타임라인을 볼 수 있어요.
기획부터 배포까지 혼자 선택하고 구현했어요
설계 결정과 트레이드오프를 직접 경험했어요
사진에 GPS 정보가 없는 경우 장소를 파악할 방법이 없었어요. 특히 SNS에서 다운로드한 사진은 대부분 EXIF가 제거되어 있어요.
EXIF 파싱을 1순위로 시도하고, GPS가 없으면 Claude Vision으로 이미지 자체를 분석해 장소명·지역을 추출하는 폴백 전략을 설계했어요. 두 경로 모두 동일한 Kakao Maps 검색 파이프라인으로 이어져요.
Kakao Maps API와 Claude API를 클라이언트에서 직접 호출하면 API 키가 노출되고, 동일한 지역 요청이 반복될 때마다 불필요한 API 비용이 발생했어요.
Next.js Route Handlers로 API 프록시를 만들어 키를 서버 환경변수로만 관리해요. LRU Cache를 서버 인메모리에 두어 동일 지역 요청을 캐싱함으로써 API 호출 횟수를 줄였어요.
홈 → 업로드 → 플랜 세 화면 간 상태 전달 방식을 결정해야 했어요. Context나 전역 상태 관리 라이브러리를 쓰면 App Router SSR 이점이 줄어드는 트레이드오프가 있었어요.
sessionStorage에 코스 데이터와 지역명을 저장하는 경량 방식을 택했어요. 페이지 간 이동이 단방향이고 데이터 크기도 작아 전역 상태 관리 없이도 충분했어요.