나는 주말 동안 수익을 창출하는 AI 여행 앱을 만들었다 — 전체 스택 공개

Claude AI, Stripe, 그리고 Next.js를 결합하여 실제로 돈을 버는 수익화된 SaaS를 출시한 방법

모든 유럽 도시를 다녀봤고, 관광객들이 절대 찾지 못하는 맛집을 알고 있으며, 새벽 2시에도 무료로 당신의 질문에 답해주는 여행 경험이 풍부한 친구가 있다고 상상해 보세요. 그것이 바로 JARVIS입니다. 그리고 저는 이것을 주말 동안 만들었습니다.

🌐 라이브 앱: jarvis-travel-nine.vercel.app

다음은 전체적인 분석입니다: 무엇을 하는지, 어떻게 만들어졌는지, 그리고 실제 수익화를 동반한 AI 제품을 출시하며 무엇을 배웠는지에 대한 내용입니다.

JARVIS란 무엇인가?

JARVIS (Just A Really Very Intelligent System — 네, 이름은 의도된 것입니다)는 유럽을 위한 AI 기반 저예산 여행 플랫폼입니다. 사용자는 다음과 같은 기능을 이용할 수 있습니다:

• AI 여행 전문가와 채팅: 매우 구체적인 조언을 얻을 수 있습니다 ("예산 400유로, 5일 일정, 어디로 가야 할까요?")
• 20개 이상의 유럽 도시 탐색: 예산 점수, 일일 예상 비용, 숨겨진 현지 팁과 함께 도시를 살펴볼 수 있습니다.
• PDF 여행 가이드 구매 (€4.99–€7.99): Stripe 결제 후 즉시 전달됩니다.
• 숨겨진 보석 발견: 어떤 가이드북에도 나오지 않는 현지인들만의 비밀을 찾아냅니다.

전체 서비스는 jarvis-travel-nine.vercel.app에서 라이브로 운영 중이며, 운영 비용은 월 약 €0입니다.

기술 스택 (Tech Stack)

저는 최대한 가볍게 유지하고 싶었습니다. 모든 도구는 그 자리에 있을 가치가 있어야 했습니다.

Next.js (Pages Router) — 이 프로젝트를 위해 App Router의 복잡함까지는 필요하지 않았습니다. Pages Router는 더 단순하고, API 라우트가 함께 위치하며, Vercel에서 무료로 배포해 줍니다.

Claude Haiku (Anthropic) — 이것이 제품의 핵심입니다. 제가 GPT-3.5 대신 Haiku를 선택한 데에는 두 가지 이유가 있습니다. 규모가 커질수록 더 저렴하고,

Stripe Checkout — 커스텀 결제 UI가 전혀 필요 없습니다. 서버 측에서 체크아웃 세션 (Checkout Session)을 생성하고 사용자를 리다이렉트합니다. 결제 후에는 /api/download 엔드포인트가 세션을 검증하고 PDF로 리다이렉트합니다. 깔끔하고, 안전하며, 검증된 방식입니다.

Google Maps API — 실제 장소 데이터를 통해 도시 탐색 탭을 구동합니다.

Supabase — 인증 (Auth) 및 데이터베이스 레이어 (2단계의 사용자 세션 및 북마크 기능을 위해 사용됨).

Vercel — 현재 트래픽 수준에서는 무료 티어(Free tier)로도 모든 것을 충분히 처리할 수 있습니다.

실감 나게 만든 핵심 요소: 프롬프트 엔지니어링 (Prompt Engineering)

대부분의 AI 앱이 평범하게 느껴지는 이유는 개발자들이 시스템 프롬프트 (System Prompt)를 부차적인 것으로 취급하기 때문입니다. 저는 JARVIS의 페르소나 (Persona)를 구축하는 데 그 어떤 단일 코드보다 더 많은 시간을 할애했습니다. 응답이 제품이 아닌 사람처럼 느껴질 때까지 수십 가지의 변형을 테스트했습니다.

프롬프트는 세 가지 역할을 수행합니다: 페르소나를 고정하고, 출력 제약 조건 (길이, 형식, 어조)을 강제하며, AI를 로봇처럼 들리게 만드는 완곡한 표현 (Hedging phrases)을 금지합니다. 그게 전부입니다. 마법은 없습니다. 그저 구체성(Specificity)이 있을 뿐입니다. "~을 확인해 보시는 것을 추천합니다..."라고 말하는 것과 그냥 바로 말하는 것의 차이는 가이드북과 친구 사이의 차이와 같습니다.

사용자들이 좋아하는 디테일: JARVIS는 마지막 6번의 대화를 기억합니다. 따라서 "거기 호스텔은 어때?"라고 물으면 '거기'가 무엇을 의미하는지 정확히 알고 있습니다. 대화 기록 (Conversation history)은 모든 API 호출 시 함께 전달됩니다. 단순하지만, 이를 통해 채팅이 상태가 없는 (Stateless) 방식이 아닌 진정으로 지능적인 것처럼 느껴지게 합니다.

또한 Web Speech API를 통한 음성 입력도 지원합니다. 마이크를 누르고 질문을 말하기만 하면 됩니다. 모바일에서는 이것이 놀라울 정도로 자연스럽게 느껴집니다. 대부분의 여행 계획은 휴대폰에서 이루어지며, 이동 중에 긴 질문을 타이핑하는 것은 번거롭지만 말하는 것은 그렇지 않습니다.

수익화: 하나의 앱에 담긴 세 가지 수익원

제 목표 중 하나는 이 서비스가 첫날부터 자생할 수 있도록 만드는 것이었습니다. JARVIS에는 세 가지 수익원 (Revenue streams)이 내장되어 있습니다:

1. PDF 가이드 판매 (Stripe)
€4.99–€7.99에 판매되는 수제 일정표(Hand-crafted itineraries)입니다. Stripe가 전체 결제 흐름(Payment flow)을 처리하며, 저는 세션을 생성하고 다운로드 시 이를 검증하기만 하면 됩니다. 구독의 복잡함도 없고, 구매를 위해 사용자 계정이 필요하지도 않습니다.

2. Google AdSense
게시자 ID(Publisher ID)와 함께 _document.js를 통해 설정되었습니다. 인생을 바꿀 정도의 수익은 아니지만, 수동적(Passive)이며 유지보수가 전혀 필요하지 않습니다.

3. Travelpayouts 제휴 (Affiliate)
사용자가 호텔이나 항공권을 예약하기 위해 클릭하면 수수료(Commission)를 받습니다. 제휴 스크립트(Affiliate script)는 _document.js에서 한 번 로드되며, 여행 앱에 이미 존재하는 사용자의 의도(Intent)를 조용히 수익화합니다.

원칙은 이렇습니다: 사용자가 사랑하는 제품을 만들고, 그들이 이미 하려는 행동과 일치하는 수익화 모델을 추가하는 것입니다.

내가 가장 자랑스럽게 생각하는 UI 디테일: HoloCards

도시 카드에는 마우스 위치에 반응하는 3D 홀로그래픽 기울기 효과(3D holographic tilt effect)가 적용되어 있습니다. 마우스를 올리면 카드가 X/Y 축을 따라 회전하며, 커서를 따라다니는 방사형 글로우(Radial glow) 효과가 나타납니다. 모바일에서는 터치에 반응합니다.

const handleMouseMove = useCallback((e) => {
  const rect = card.getBoundingClientRect();
  const rotX = ((e.clientY - rect.top - rect.height/2) / (rect.height/2)) * -12;
...

작은 디테일이지만, 앱을 프리미엄하게 느껴지게 만듭니다. 평면적인 UI(Flat UI)가 가득한 세상에서 촉각적 피드백(Tactile feedback)은 눈에 띕니다.

애니메이션 입자 배경 (Animated Particle Background)

배경은 캔버스 애니메이션(Canvas animation)입니다. 80개의 입자(모바일은 40개)가 천천히 떠다니며, 100px 이내에 있는 두 입자 사이에는 연결선이 그려집니다. 각 입자는 청보라색(Blue-purple) 범위 내에서 무작위 색상(Randomised hue)을 가집니다.

방해되지 않으면서 깊이감을 더해주며, 입자가 매우 작고 프레임 로직(Frame logic)이 단순하기 때문에 성능 측면에서 비용이 전혀 들지 않습니다.

내가 다르게 했을 점

1. 모바일 우선으로 시작하기. 저는 데스크톱 우선(Desktop-first)으로 구축한 뒤 모바일을 사후 적용(Retrofitted)했습니다. 다음에는 그 순서를 뒤집겠습니다. 대부분의 여행 검색은 휴대폰에서 이루어지기 때문입니다.

2. 도시 데이터 레이어(City data layer)에 더 일찍 투자하세요. 가장 어려웠던 부분은 AI나 결제 시스템이 아니었습니다. 20개 이상의 도시에 대해 양질의 정확한 데이터를 큐레이션(Curating)하는 것이었습니다. 이것이 실제 해자(Moat)입니다.

3. Stripe를 도입하기 전에 이메일 수집 기능을 추가하세요. 구매할 뻔했지만 구매하지 않은 사용자들에게 연락할 방법이 없습니다. "무료 도시 가이드 받기"와 같은 간단한 이메일 수집(Email capture) 기능이 이 문제를 해결해 줄 것입니다.

AI 제품을 만드는 모든 이를 위한 교훈

AI는 제품이 아닙니다. Claude는 도구일 뿐입니다. 제품은 큐레이션, UI, 시스템 프롬프트(System prompt), 그리고 제가 그 주변에 구축한 컨텍스트(Context)입니다. 어떤 개발자라도 Anthropic API를 호출할 수 있습니다. 진짜 작업은 그 외의 모든 것입니다.

저렴한 모델들이 과소평가되고 있습니다. Claude Haiku는 빠르고 저렴하며, 엄격한 시스템 프롬프트가 적용된 제한된 페르소나(Persona)의 경우, 사용자 테스트에서 더 비싼 모델들과 구분이 불가능할 정도입니다.

불편하더라도 첫날부터 수익을 창출하세요. "사용자가 충분히 모일 때까지" 기다린다면, 당신은 영원히 제품을 출시하지 못할 것입니다. 저는 단 한 명의 사용자도 없었을 때 Stripe를 추가했습니다. 이는 제가 초기에 가치(Value)에 대해 고민하도록 강제했습니다.

다음 단계

2단계는 Booking.com 및 Skyscanner 제휴 API(Affiliate API) 연동입니다. 이를 통해 JARVIS가 호스텔을 추천하면 사용자가 앱 내에서 직접 예약할 수 있고, 저는 수수료를 받게 됩니다. 그것이 진짜 여행 제휴 수익이 발생하는 지점입니다.

그 이후에는 사용자 계정, 저장된 여행 일정, 그리고 발칸 반도와 북유럽 지역을 위한 가이드를 준비하고 있습니다.

유사한 것을 만들고 있거나 소스 코드를 보고 싶다면, 프로젝트는 GitHub에 있습니다. 질문이 있으신가요? 댓글로 남겨주세요. 모두 읽어봅니다.

🌐 라이브 앱: jarvis-travel-nine.vercel.app

Next.js · Claude AI · Stripe · Vercel · ☕ 로 제작됨