여행을 계획한다는 것은 보통 수많은 탭을 열어두고, 서로 모순되는 포럼 게시물들을 읽으며, 여전히 어려운 결정들은 스스로 내려야 하는 대략적인 일정표를 만드는 것을 의미합니다. Wander는 이를 양식(form)으로 대체합니다. 목적지, 날짜, 예산, 여행 분위기(vibe)를 입력하면 AI 에이전트가 지도에 표시된 방문지, 식사, 숙소를 포함한 완벽한 일별 계획을 몇 분 만에 제공합니다.

이 프로젝트는 수동으로 구성된 Momen 백엔드(backend)로 시작되었습니다. 이는 데이터 모델, AI 에이전트, Actionflows, 그리고 Momen 에디터 내에 모두 설정된 통합 기능(integrations)을 갖춘 작동 가능한 템플릿입니다. 그 후 프론트엔드(frontend)는 Momen no-code plugin을 통해 해당 백엔드를 Claude Code에 연결함으로써 구축되었습니다. 이 플러그인은 전체 Momen 프로젝트 컨텍스트(context)를 Claude Code에 전달하며, 프론트엔드는 그로부터 자연어(natural language)로 설명되어 구축되었습니다. 수동으로 작성된 코드는 없습니다.

앱의 기능

사용자는 목적지를 선택하고, 여행 기간(1일~14일)을 설정하며, 예산 슬라이더를 조정하고, 8가지 옵션(미식가, 숨겨진 명소, 박물관 및 예술, 자연 및 하이킹, 밤문화, 가족 친화적, 슬로우 트래블, 또는 사진 촬영) 중 분위기를 선택합니다. 양식을 제출하면 백그라운드(background)에서 AI 생성이 시작됩니다.

진행 상황 오버레이(progress overlay)는

• 탐색 페이지 (Discover page): 다른 사용자가 생성한 여행 일정(itineraries)을 둘러봅니다.
• 사용자 계정 (User accounts): 사용자 이름과 비밀번호로 가입합니다. 신규 계정에는 첫 번째 여행을 생성할 수 있는 무료 크레딧이 제공됩니다.
• 크레딧 시스템 (Credit system): 생성할 때마다 1 크레딧이 소모됩니다. 사용자는 Stripe를 통해 크레딧을 충전할 수 있습니다 ($5에 3 크레딧).
• 개인 센터 (Personal center): 생성된 여행, 크레딧 잔액 및 주문 내역을 확인합니다.

백엔드 구축 방식

Momen 백엔드는 데이터 모델 (data model), AI 에이전트 (AI agent), 액션플로우 (Actionflows), 외부 API 연동 등 앱의 서버 측(server-side) 전체를 담당합니다. 이 모든 것은 서버 코드를 작성하지 않고 Momen 에디터 내부에서 시각적으로 구성됩니다.

데이터 모델 (Data Model)

데이터는 계층 구조로 구성됩니다. 각 계정은 여러 개의 여행(trips)을 가지며, 각 여행은 일정 일수(itinerary days)를 가집니다. 각 일수에는 활동(activities), 식사(meals), 숙박(accommodation) 항목이 포함됩니다. 모든 위치 정보는 지리적 좌표(geographic coordinates)를 저장하여 지도가 각 핀을 정확한 위치에 표시할 수 있도록 합니다. 두 개의 추가 테이블은 크레딧 주문과 여행 저장(좋아요)을 처리합니다.

이 구조는 Momen에서 시각적으로 구성됩니다. 데이터베이스 코드를 전혀 작성하지 않고도 필드(fields), 타입(types), 테이블 간의 관계(relationships)를 정의할 수 있습니다. Momen의 데이터 모델링 작동 방식에 대한 자세한 내용은 Momen에서 앱을 위한 데이터 모델을 만드는 방법 (How to Create Data Models for Your App in Momen)을 참조하세요.

AI 에이전트 (AI Agent)

일정 생성은 Momen에서 구성된 AI 에이전트가 처리합니다. 에이전트는 여행 입력 정보인 목적지, 기간, 예산, 분위기(vibe)를 받아 구조화된 계획을 반환합니다. 여기에는 테마가 있는 일자별 계획, 지리적 초점, 특정 활동, 식사, 숙박 정보가 포함되며, 모두 이름과 좌표를 함께 제공합니다. 또한 여행을 위한 커버 이미지도 생성합니다.

에이전트 프롬프트(Agent prompt), 모델 선택(Model selection), 그리고 구조화된 출력 형식(Structured output format)은 Momen 에디터에서 구성됩니다. 백엔드에 별도의 AI 서비스나 API 키를 구축할 필요가 없습니다. 에이전트는 Momen 내부에서 실행됩니다.

백엔드 로직 (Backend Logic)

네 가지 액션플로우(Actionflows)가 앱의 비즈니스 로직을 처리합니다:

• 여행 생성 (Generate trip): 크레딧을 차감하고, AI 에이전트를 호출하며, 전체 일정(Itinerary)을 데이터베이스에 저장한 뒤 여행 ID를 반환하는 비동기(Async) 플로우입니다. 프론트엔드는 WebSocket 구독을 통해 완료 여부를 모니터링하며, 플로우가 끝날 때까지 진행 상황 오버레이(Progress overlay)를 표시합니다.
• 기본 크레딧 적용 (Apply default credit): 회원가입 시 트리거되는 동기(Sync) 플로우로, 새 계정에 스타터 크레딧 1개를 추가합니다.
• 주문 생성 (Create order): 사용자가 충전을 요청할 때 Stripe 결제 세션을 시작합니다.
• Stripe 웹훅 (Stripe webhook): 결제 후 Stripe의 확인을 수신하여 사용자의 계정에 크레딧 3개를 추가합니다.

각 플로우는 Momen 에디터에서 단계(Step)를 체이닝하고, 조건(Condition)을 설정하며, 데이터베이스나 외부 서비스에 연결하는 방식으로 구성됩니다.

통합 (Integrations)

Stripe가 크레딧 구매를 처리합니다. 사용자가 충전할 때 프론트엔드는 Momen에 주문 생성을 요청합니다. Momen은 Momen 백엔드에 안전하게 저장된 비밀 키(Secret key)를 사용하여 Stripe를 호출한 다음, 프론트엔드에는 결제 토큰(Payment token)만 반환합니다. Stripe 비밀 키는 프론트엔드에 절대 노출되지 않습니다. 결제 후에는 Stripe의 웹훅이 Momen에 알림을 보내 주문을 정산하고 크레딧을 추가합니다. 결제 통합 구성 방법은 Momen의 결제 문서를 참조하세요.

지오코딩 API (Geocoding API)는 AI 에이전트가 반환한 장소 이름과 주소를 정확한 위도/경도(Lat/lng) 좌표로 변환합니다. 이 작업은 여행 생성 액션플로우 내부에서 실행되므로, 모든 활동, 식사, 숙박 항목은 프론트엔드에 도달하기 전에 지오코딩됩니다.

주변 검색 API (Nearby Search API)는 해당 날짜의 지리적 초점 주변에서 관련 관심 지점(POI)을 찾아 각 날짜의 일정을 풍성하게 만듭니다. 이는 동일한 생성 플로우 내에서 호출되므로, 최종 일정은 일반적인 제안이 아닌 실제로 위치를 찾을 수 있는 장소들을 포함하게 됩니다.

MapLibre GL은 프론트엔드에서 Google Maps나 Mapbox API 키가 필요 없는 무료 CARTO 베이스맵 (basemap)을 사용하여 여행 상세 페이지에 대화형 지도를 렌더링합니다. 좌표는 지오코딩 (geocoding)된 백엔드 데이터에서 가져오므로, 지도는 백엔드가 이미 제공하는 정보만을 렌더링합니다.

Claude Code를 이용한 프론트엔드 구축

Momen 백엔드가 준비된 상태에서, Momen 노코드 (no-code) 플러그인을 사용하여 프로젝트의 전체 컨텍스트(데이터 모델, API 스키마, Actionflow ID 등)를 Claude Code에 전달했습니다. 그 후 자연어를 통해 프론트엔드를 생성했습니다:

"이 Momen 프로젝트를 기반으로 React + Vite 프론트엔드를 구축해줘. 여행 생성 양식과 탐색 그리드가 있는 홈 페이지, 일자별 탭과 대화형 지도가 있는 여행 상세 페이지, 로그인/회원가입 페이지, 그리고 내 여행과 주문 내역이 있는 마이 센터(personal center)가 있어야 해."

Claude Code는 사용자가 수동으로 코드를 작성하지 않고도, 이러한 설명만으로 컴포넌트 구조를 생성하고, 모든 화면을 Momen의 GraphQL API에 연결하며, Stripe 결제 플로우를 구축하고, 실시간 생성 오버레이 (generation overlay)를 구현했습니다.

이와 같은 서비스를 구축하는 두 가지 방법

이 프로젝트는 플러그인을 통해 Claude Code에 연결된 수동 구성 Momen 백엔드를 사용했습니다. 처음부터 시작한다면 두 가지 경로가 있습니다:

Momen AI Copilot — Momen 에디터 내부에서 앱 전체를 구축합니다. 제품 내에 포함된 AI Copilot을 사용하면 데이터 모델, 백엔드 로직, UI를 자연어로 설명할 수 있으며, AI가 프로젝트에 직접 모든 것을 구성합니다. 별도의 외부 코딩 에이전트가 필요하지 않습니다. 작동 방식은 Meet Your Nocode AI Copilot을 참조하세요.

Momen 플러그인 + Claude Code / Codex / Cursor — 에디터(또는 Copilot)에서 Momen 백엔드 (backend)를 구축한 다음, 원하는 AI 코딩 에이전트 (coding agent)에 Momen 노코드 (no-code) 플러그인을 설치하세요. 이 플러그인은 데이터 모델 (data model), API 스키마 (API schema), 액션플로우 (Actionflow) ID 등 Momen 프로젝트의 전체 컨텍스트 (context)를 에이전트에 전달하므로, 사용자는 원하는 프론트엔드 (frontend)를 자연어로 설명하기만 하면 자동으로 적절한 엔드포인트 (endpoints)에 연결할 수 있습니다.

이 작업에는 시간이 얼마나 걸리나요?

데이터 모델, AI 에이전트, 4개의 액션플로우, Stripe 연동, 권한 설정 등 이 Momen 백엔드를 수동으로 구성하려면 Momen 에디터에서 집중적으로 약 20시간 정도의 작업이 필요합니다. 플러그인이 자연어를 통해 구성을 처리하면, 동일한 백엔드를 구축하는 데 1~2시간이면 충분합니다.

Momen 백엔드 컨텍스트가 플러그인에 로드되면, Claude Code를 사용하여 프론트엔드를 처음부터 구축하는 데 초기 작동 버전 기준으로 약 30분이 소요됩니다.

이 프로젝트는 Stripe 결제 연동을 사용하며, 이를 위해서는 Momen의 Pro 플랜(프로젝트당 월 $85) (연간 결제)이 필요합니다. Stripe 자체는 월간 수수료가 없는 종량제 (pay-as-you-go) 방식입니다. Vercel을 통한 프론트엔드 호스팅은 대부분의 초기 단계 프로젝트에 대해 무료입니다.

직접 체험해보고 프로젝트를 클론하세요

신규 사용자는 가입 시 무료 크레딧을 받게 되며, 이는 여행을 한 번 생성하고 전체 앱이 작동하는 모습을 확인하기에 충분한 양입니다. 더 많은 크레딧을 사용하거나 다른 유스케이스 (use case)로 자신만의 버전을 만들고 싶다면, Momen 백엔드를 자신의 워크스페이스 (workspace)로 클론 (clone)하여 시작하세요.

라이브 앱 체험하기

Momen 에디터에서 열기 / 프로젝트 클론하기

노코드 백엔드와 AI 코딩 에이전트를 결합하는 것이 왜 프로덕션 앱 (production apps)을 구축하는 데 효과적인지에 대한 더 폭넓은 관점은 엔지니어 없이 MVP를 구축하는 방법을 참조하세요.