AI 서비스 개발 일지 #04 | AI에게 개발을 맡겨봤습니다. OpenAI Codex와 Gencow로 JapanTrip AI 개발하기

본 글은 Gencow 베타 크리에이터 프로그램 참여 과정에서 작성한 사용기입니다. 현재 베타 버전을 기준으로 작성되었으며, 앞으로 실제 서비스를 제작하면서 느낀 점을 지속적으로 기록할 예정입니다.

 

지난 글에서는 JapanTrip AI를 기획하게 된 이유와 MVP를 정의하는 과정을 이야기했습니다.
이번 글에서는 드디어 실제 개발 단계로 들어갑니다.

이번 4편의 주제는 명확합니다.

JapanTrip AI를 어떻게 만들었는가?

즉, 이번 글은 회고보다는 실제 개발 과정에 가깝습니다.
OpenAI Codex에게 어떤 프롬프트를 입력했는지, Gencow Fullstack 프로젝트 안에서 어떻게 기능을 붙였는지, 실행 중 어떤 문제가 있었고 어떻게 해결했는지 정리해보려고 합니다.

5편에서는 “만들어보니 어땠는가?”를 중심으로 AI에게 개발을 맡겨본 경험을 회고할 예정입니다.
이번 글은 그 전 단계인 제작 과정 기록입니다. 🚀

---

드디어 개발을 시작했습니다

지난 글에서는 JapanTrip AI의 MVP를 정의했습니다.

JapanTrip AI는 일본 여행을 준비하는 사용자가 여행지, 여행 기간, 여행 스타일을 선택하면 AI가 한국어로 여행 일정을 만들어주는 서비스입니다.

기획이 끝났으니 이제 실제로 만들어야 했습니다.

보통 프로젝트를 시작하면 개발자는 직접 파일을 만들고, 컴포넌트를 나누고, API를 설계하고, 스타일을 입히고, 에러를 하나씩 해결합니다.

하지만 이번 프로젝트에서는 조금 다른 방식으로 진행했습니다.

이번에는 제가 처음부터 코드를 하나씩 작성하기보다, OpenAI Codex에게 개발을 맡기고 저는 요구사항을 전달하고 결과를 검수하는 방식으로 진행했습니다.

제가 궁금했던 것은 단순했습니다.

“AI에게 MVP 개발을 맡기면 실제로 어디까지 만들어 줄 수 있을까?”

단순히 버튼 하나나 함수 하나가 아니라,
프론트엔드와 백엔드가 연결되고, AI API를 호출하고, 실제 사용자가 사용할 수 있는 웹앱 형태까지 만들 수 있는지 확인해보고 싶었습니다.

 

---

기존 Gencow Fullstack 프로젝트에서 시작했습니다

이번 프로젝트는 완전히 빈 프로젝트에서 시작한 것이 아니라,
이미 만들어져 있던 Gencow Fullstack 프로젝트 안에 새로운 기능을 추가하는 방식으로 진행했습니다.

여기서 중요한 점이 하나 있었습니다.

Gencow 프로젝트에는 이미 Gencow가 관리하는 파일과 구조가 있습니다.
특히 AI 관련 코드나 자동 생성 파일을 함부로 수정하면 기존 구조가 깨질 수 있습니다.

그래서 Codex에게 처음부터 아주 강하게 요청했습니다.

자동 생성 파일은 수정하지 말 것.
특히 gencow/ai.ts는 직접 수정하지 말 것.
기존 Gencow AI 구조를 재사용할 것.

AI에게 개발을 맡긴다고 해서 아무렇게나 코드를 생성하게 두면 안 된다고 생각했습니다.
기존 프로젝트의 규칙을 지키게 하는 것이 중요했습니다.

는 화면 캡처]

---

실제로 Codex에게 입력한 프롬프트

이번 개발에서 가장 중요한 시작점은 프롬프트였습니다.

제가 Codex에게 전달한 프롬프트는 아래와 같았습니다.

You are a senior full-stack engineer experienced with Gencow.

I already have a Gencow Fullstack project.

IMPORTANT:

- Do NOT modify any auto-generated files.
- Especially DO NOT edit gencow/ai.ts.
- Reuse the existing Gencow AI architecture.
- Use the existing AI helper exported from gencow/ai.ts.
- Follow the existing project conventions.

First, analyze the current project and understand how the existing AI system works.

Then build a new feature called:

🇯🇵 JapanTrip AI

This is an MVP AI web app.

====================================

GOAL

Create an AI-powered Japan travel planner.

The user selects:

1. Destination
2. Travel Duration
3. Travel Style

Then AI generates a travel itinerary.

====================================

UI

Create a clean modern responsive page.

Title

🇯🇵 JapanTrip AI

Subtitle

AI가 일본 여행 일정을 만들어드립니다.

------------------------------------

Inputs

Destination (Dropdown)

- Tokyo
- Osaka
- Kyoto
- Fukuoka
- Sapporo
- Okinawa

------------------------------------

Travel Duration (Dropdown)

- 당일치기
- 1박 2일
- 2박 3일
- 3박 4일
- 4박 5일

------------------------------------

Travel Style

Selectable buttons or cards

- 🍣 맛집
- 🛍 쇼핑
- 🌸 감성
- 🏯 관광
- 💑 커플
- 👤 혼자
- 👨‍👩‍👧 가족

------------------------------------

Main Button

✨ AI 일정 만들기

====================================

AI OUTPUT

Generate the response in Korean.

Format exactly like this.

여행지:

여행 기간:

여행 스타일:

------------------------------------

Day 1

오전

점심

오후

저녁

------------------------------------

Day 2

...

Generate only the number of days requested.

At the end also generate:

🍣 추천 음식 3가지

📍 추천 장소 3곳

🗣 유용한 일본어 표현 3개

====================================

UX

Add:

- Loading state
- Error state
- Copy Result button

====================================

Implementation

Reuse the existing AI backend.

Do not create another AI engine.

Create only the minimum backend procedure needed.

Connect the React frontend to that procedure.

====================================

When finished, explain:

1. Which files were modified
2. Which new files were created
3. How to run locally
4. How to deploy using Gencow

프롬프트에서 신경 쓴 부분은 크게 세 가지였습니다.

첫 번째는 기존 프로젝트 구조를 먼저 분석하라는 것이었습니다.
바로 코드를 만들지 말고, 현재 Gencow 프로젝트가 어떻게 구성되어 있는지 먼저 이해하라고 요청했습니다.

두 번째는 자동 생성 파일을 수정하지 말라는 것이었습니다.
특히 gencow/ai.ts는 Gencow AI 구조와 관련된 파일이기 때문에 직접 수정하지 않도록 명시했습니다.

세 번째는 UI와 AI 출력 형식을 구체적으로 지정한 것입니다.
여행지, 여행 기간, 여행 스타일을 어떻게 입력받을지, 결과는 어떤 형식으로 나와야 하는지까지 적어두었습니다.

그냥 “일본 여행 플래너 만들어줘”라고 했다면 결과가 훨씬 애매했을 것 같습니다.
이번에는 MVP 요구사항을 거의 문서처럼 정리해서 전달했습니다.

 

---

Codex가 처음 구현한 결과

Codex는 약 14분 정도 작업한 뒤 JapanTrip AI 기능을 구현했다고 알려주었습니다.

처음 결과에서는 다음 파일들이 수정되었습니다.

Modified:
- gencow/index.ts
- src/App.tsx
- src/styles.css
- package.json
- package-lock.json

Created:
- gencow/japanTrip.ts

그리고 Gencow CLI를 통해 생성된 파일들도 있었습니다.

Generated by Gencow CLI:
- src/gencow/api.ts
- src/gencow/operations.d.ts
- src/gencow/db.d.ts
- gencow/generated/*
- .gencow/codegen/manifest.json

Codex는 npm run typecheck와 npm run build도 통과했다고 알려주었습니다.

로컬 실행 방법은 다음과 같이 정리되었습니다.

npm install
npm run dev:backend
npm run dev

배포 방법도 함께 안내했습니다.

npm run build
gencow deploy --static dist/

프로덕션 배포는 아래 명령어로 안내되었습니다.

gencow deploy --static dist/ --prod

여기까지만 보면 꽤 순조롭게 보였습니다.

하지만 실제 개발은 여기서 끝나지 않았습니다.
오히려 여기서부터 “AI가 만든 결과를 실제 서비스 요구사항에 맞게 다듬는 과정”이 시작되었습니다.

 

---

첫 번째 문제: 왜 Morrow 사이트가 나오지?

처음 로컬에서 실행한 뒤 브라우저로 접속해봤습니다.

개발 서버 주소는 아래와 같았습니다.

http://127.0.0.1:5173/

그런데 제가 기대한 화면은 JapanTrip AI였지만, 실제로는 Morrow라는 기존 앱 화면이 나왔습니다.

처음에는 조금 당황했습니다.

분명 JapanTrip AI를 만들라고 했는데, 왜 전혀 다른 서비스처럼 보이는 화면이 나오는지 이해가 되지 않았습니다.

그래서 Codex에게 바로 물어봤습니다.

왜 Morrow~ 사이트가 나오는 거지?

Codex가 확인한 결과, 이유는 간단했습니다.

기존 Gencow 프로젝트가 원래 Morrow라는 태스크/메모 앱 형태였고,
Codex가 JapanTrip AI를 첫 화면으로 만든 것이 아니라 기존 Morrow 앱 안에 기능을 추가한 상태였던 것입니다.

즉, JapanTrip AI 기능은 들어갔지만 사용자가 처음 보는 화면은 여전히 Morrow 로그인 화면이었습니다.

이건 제가 원했던 MVP와 달랐습니다.

제가 만들고 싶었던 것은 Morrow 앱 안에 숨어 있는 기능이 아니라,
처음 접속했을 때 바로 JapanTrip AI 서비스처럼 보이는 웹앱이었습니다.

그래서 Codex가 다시 수정했습니다.

수정 내용은 다음과 같았습니다.

• 첫 화면 브랜딩을 JapanTrip AI로 변경
• 브라우저 탭 제목을 JapanTrip AI로 변경
• 로그인 후 기본 화면이 JapanTrip AI가 되도록 변경
• Morrow 문구가 첫 화면에 나오지 않도록 수정

이후 다시 브라우저에서 확인했을 때,
첫 화면에는 JapanTrip AI 로그인 화면이 표시되었습니다.

 

---

두 번째 문제: 내가 준 프롬프트처럼 디자인이 나오지 않았다

Morrow 화면 문제는 해결됐지만, 아직 만족스럽지는 않았습니다.

제가 처음 프롬프트에서 요청한 것은 명확했습니다.

• 🇯🇵 JapanTrip AI 타이틀
• AI가 일본 여행 일정을 만들어드립니다. 부제
• Destination 드롭다운
• Travel Duration 드롭다운
• Travel Style 선택 버튼 또는 카드
• ✨ AI 일정 만들기 버튼
• 결과 영역
• Copy Result 버튼

하지만 처음 수정된 화면은 제가 상상한 JapanTrip AI MVP 페이지라기보다,
기존 앱 구조 안에 JapanTrip 기능을 얹은 느낌에 가까웠습니다.

그래서 다시 Codex에게 말했습니다.

내가 아까 준 프롬프트 처럼 디자인이 나오지 않는데?

이 피드백 이후 Codex는 기존 Morrow 앱 안에 기능을 넣는 방식이 아니라,
첫 화면 자체를 JapanTrip AI MVP 페이지로 다시 구성했습니다.

수정 후에는 다음 요소들이 화면에 직접 표시되었습니다.

• 🇯🇵 JapanTrip AI 타이틀
• AI가 일본 여행 일정을 만들어드립니다. 부제
• Destination 드롭다운
• Travel Duration 드롭다운
• Travel Style 버튼들
• ✨ AI 일정 만들기 버튼
• 결과 영역
• Copy Result 버튼

또한 Morrow 관련 문구와 로그인 화면도 사라졌습니다.

이때 중요한 점을 느꼈습니다.

AI가 기능을 구현했다고 해서 반드시 사용자가 의도한 제품 화면이 나오는 것은 아닙니다.
특히 기존 프로젝트가 있는 경우, AI는 기존 앱 구조를 유지하려는 방향으로 구현할 수 있습니다.

그래서 “기능을 추가해줘”인지,
“첫 화면 자체를 새로운 MVP 서비스로 바꿔줘”인지 명확히 말해야 했습니다.

---

세 번째 문제: Authentication required

디자인을 다시 잡은 뒤 이제 실제로 AI 일정 생성을 테스트했습니다.

그런데 이번에는 버튼을 눌렀을 때 다음 문제가 발생했습니다.

Authentication required

처음에는 왜 인증이 필요한지 의문이었습니다.

제가 만들고 싶었던 MVP는 사용자가 별도 로그인 없이 여행 조건을 선택하고 AI 일정을 생성해보는 형태였습니다.

그래서 Codex에게 물었습니다.

Authentication required

왜 이게 뜨지?

Codex가 확인한 결과 원인은 두 가지였습니다.

첫 번째 원인은 Gencow 클라이언트와 공개 mutation 설정의 문제였습니다.

백엔드에서는 japanTrip.generate를 공개 mutation으로 열었지만,
현재 Gencow 클라이언트 버전의 defineProcedureMutation이 익명 호출 옵션을 자동으로 반영하지 않아 프론트엔드에서 먼저 “로그인이 필요하다”고 판단한 것입니다.

두 번째 원인은 CORS 문제였습니다.

인증 문제를 고친 뒤에는 브라우저가 Gencow cloud API를 직접 호출하면서 Failed to fetch가 발생했습니다.

즉, 단순히 AI API 코드만의 문제가 아니었습니다.

프론트엔드에서 Gencow 백엔드를 어떻게 호출하는지,
익명 사용자 요청을 어떻게 처리하는지,
로컬 개발 환경에서 API 요청을 어떻게 프록시하는지까지 함께 봐야 했습니다.

---

Authentication required 문제를 어떻게 고쳤는가

이 문제를 해결하기 위해 Codex는 몇 가지를 수정했습니다.

정리하면 다음과 같습니다.

• japanTrip.generate를 공개 mutation으로 유지
• 프론트엔드에서 이 mutation만 익명 Gencow auth strategy로 호출하도록 수정
• 로컬 개발에서는 /api를 Vite proxy로 Gencow cloud backend에 전달하도록 수정
• AI 호출은 gencow/ai.ts의 createGencowAI()를 재사용하도록 변경
• 모델은 호환성 문제 때문에 gpt-4o-mini로 변경

여기서 가장 중요했던 부분은 기존 Gencow AI 백엔드를 재사용했다는 점입니다.

처음 프롬프트에서도 요청했듯이,
새로운 AI 엔진을 따로 만드는 것이 아니라 기존 Gencow AI 구조를 활용해야 했습니다.

그리고 gencow/ai.ts를 직접 수정하지 않는 것도 중요했습니다.

Gencow가 제공하는 구조를 유지하면서,
JapanTrip AI에 필요한 최소한의 backend procedure만 추가하는 방향으로 수정했습니다.

수정 후 다시 브라우저에서 확인했습니다.

http://127.0.0.1:5173/

이번에는 더 이상 Authentication required가 나오지 않았습니다.
Failed to fetch도 발생하지 않았습니다.

그리고 드디어 AI 일정 생성이 성공했습니다.

결과에는 여행지:, 여행 기간:, 여행 스타일:이 표시되었고,
마지막에는 🍣 추천 음식 3가지까지 정상적으로 출력되었습니다.

---

로컬 실행 과정

최종적으로 로컬에서 실행할 때는 아래 흐름을 사용했습니다.

먼저 필요한 패키지를 설치합니다.

npm install

그다음 Gencow 백엔드 개발 서버를 실행합니다.

npm run dev:backend

그리고 프론트엔드 개발 서버를 실행합니다.

npm run dev

브라우저에서는 아래 주소로 접속했습니다.

http://127.0.0.1:5173/

초기에는 프론트엔드 화면만 확인하는 수준이었지만,
나중에는 실제로 Gencow backend와 연결해서 AI 일정이 생성되는지 확인했습니다.

개발 중에는 다음 항목들을 계속 확인했습니다.

• 화면이 JapanTrip AI로 바로 보이는가?
• Destination 드롭다운이 표시되는가?
• Travel Duration 드롭다운이 표시되는가?
• Travel Style 버튼들이 표시되는가?
• ✨ AI 일정 만들기 버튼이 동작하는가?
• 로딩 상태가 표시되는가?
• 에러 상태가 표시되는가?
• AI 결과가 한국어로 생성되는가?
• Day 수가 여행 기간에 맞게 생성되는가?
• Copy Result 버튼이 동작하는가?

이 과정을 거치면서 단순히 “빌드가 된다”가 아니라,
실제 사용 흐름이 동작하는지 확인했습니다.

 

---

JapanTrip AI의 입력 UI

최종 화면에서 사용자는 먼저 여행지를 선택합니다.

Destination 드롭다운에는 아래 옵션이 들어갔습니다.

Tokyo
Osaka
Kyoto
Fukuoka
Sapporo
Okinawa

그다음 여행 기간을 선택합니다.

Travel Duration 드롭다운에는 아래 옵션이 들어갔습니다.

당일치기
1박 2일
2박 3일
3박 4일
4박 5일

마지막으로 여행 스타일을 선택합니다.

Travel Style은 버튼 또는 카드 형태로 구성했습니다.

🍣 맛집
🛍 쇼핑
🌸 감성
🏯 관광
💑 커플
👤 혼자
👨‍👩‍👧 가족

이 입력 구조는 일부러 단순하게 유지했습니다.

MVP 단계에서 너무 많은 입력을 받으면 사용자가 부담을 느낄 수 있기 때문입니다.
그래서 “어디로 갈지”, “얼마나 갈지”, “어떤 스타일로 갈지”만 선택하게 했습니다.

이 세 가지 정보만 있어도 AI가 기본적인 여행 일정을 생성하기에는 충분했습니다.

---

AI 출력 형식

AI 결과는 한국어로 나오도록 요청했습니다.

또한 결과 형식도 최대한 일정표처럼 보이게 지정했습니다.

기본 구조는 아래와 같습니다.

여행지:

여행 기간:

여행 스타일:

------------------------------------

Day 1

오전

점심

오후

저녁

------------------------------------

Day 2

...

여행 기간에 따라 Day 수가 달라지도록 했습니다.

예를 들어 당일치기를 선택하면 Day 1만 생성되고,
2박 3일을 선택하면 Day 1, Day 2, Day 3이 생성되는 방식입니다.

그리고 마지막에는 추가 정보도 생성하도록 했습니다.

🍣 추천 음식 3가지

📍 추천 장소 3곳

🗣 유용한 일본어 표현 3개

이 부분은 JapanTrip AI의 작은 재미 요소이기도 했습니다.

단순히 시간대별 일정만 보여주는 것이 아니라,
일본 여행에서 바로 활용할 수 있는 음식, 장소, 표현까지 함께 제공하면 사용자가 더 유용하게 느낄 수 있다고 생각했습니다.

---

로딩 상태, 에러 상태, 복사 기능

MVP라고 해도 기본 UX는 필요했습니다.

그래서 프롬프트에 처음부터 아래 기능을 넣었습니다.

- Loading state
- Error state
- Copy Result button

AI 일정 생성은 즉시 끝나지 않을 수 있습니다.

사용자가 버튼을 눌렀는데 아무 변화가 없으면 서비스가 멈춘 것처럼 느껴질 수 있습니다.
그래서 일정 생성 중에는 로딩 상태가 보이도록 했습니다.

또한 API 호출이 실패할 수 있기 때문에 에러 상태도 필요했습니다.

실제로 이번 개발 과정에서도 Authentication required, Failed to fetch 같은 문제가 발생했습니다.
이런 문제가 사용자에게 그대로 노출되면 좋지 않습니다.

그래서 최종적으로는 에러가 발생했을 때 사용자가 이해할 수 있는 방식으로 표시되도록 수정했습니다.

복사 기능도 추가했습니다.

AI가 생성한 여행 일정을 사용자가 메모 앱이나 카카오톡, 노션 등에 붙여넣을 수 있어야 한다고 생각했습니다.

그래서 결과가 생성된 뒤에는 Copy Result 버튼을 통해 내용을 클립보드에 복사할 수 있게 했습니다.

 

---

배포 방법

Codex가 안내한 배포 흐름은 다음과 같았습니다.

먼저 빌드를 실행합니다.

npm run build

그다음 Gencow를 통해 정적 파일을 배포합니다.

gencow deploy --static dist/

프로덕션 배포는 아래 명령어를 사용합니다.

gencow deploy --static dist/ --prod

이번 프로젝트에서 중요한 점은 로컬에서만 동작하는 것이 아니라,
Gencow 백엔드와 프론트엔드가 배포 환경에서도 연결되어야 한다는 점이었습니다.

특히 AI 기능이 있는 서비스는 환경변수나 백엔드 연결 문제 때문에
로컬에서는 되는데 배포 환경에서는 실패할 수 있습니다.

그래서 배포할 때는 다음 항목을 확인해야 합니다.

• 프론트엔드 빌드가 성공하는가?
• Gencow backend procedure가 정상적으로 배포되어 있는가?
• AI 호출에 필요한 설정이 배포 환경에서도 유효한가?
• 브라우저에서 API 호출 시 CORS 문제가 없는가?
• 익명 사용자 호출이 필요한 경우 auth strategy가 맞게 적용되어 있는가?

이번에도 실제로 Authentication required와 Failed to fetch 문제를 겪으면서,
AI 기능이 있는 웹앱은 화면만 만드는 것보다 연결 구조를 맞추는 것이 더 중요하다는 걸 확인했습니다.

---

최종적으로 만들어진 MVP 흐름

여러 번의 수정 끝에 JapanTrip AI의 MVP 흐름은 다음과 같이 정리되었습니다.

1. 사용자가 JapanTrip AI 페이지에 접속한다.
2. Destination에서 일본 여행지를 선택한다.
3. Travel Duration에서 여행 기간을 선택한다.
4. Travel Style에서 여행 스타일을 선택한다.
5. ✨ AI 일정 만들기 버튼을 누른다.
6. 로딩 상태가 표시된다.
7. 프론트엔드가 Gencow backend procedure를 호출한다.
8. backend는 기존 Gencow AI helper를 재사용해 AI 일정을 생성한다.
9. 결과가 한국어로 화면에 표시된다.
10. 사용자는 Copy Result 버튼으로 결과를 복사할 수 있다.

처음 생각했던 MVP의 핵심 기능은 구현되었습니다.

물론 아직 완성형 서비스라고 하기는 어렵습니다.

지도 연동도 없고,
숙소 추천도 없고,
실제 이동 동선 최적화도 없고,
일정 저장 기능도 없습니다.

하지만 MVP의 목표는 모든 기능을 넣는 것이 아니었습니다.

이번 단계에서 가장 중요한 것은
사용자가 간단한 조건을 선택하면 AI가 일본 여행 일정 초안을 만들어주는 것이었습니다.

그 핵심 흐름은 구현할 수 있었습니다. 🗾

---

이번 편 정리

이번 4편에서는 JapanTrip AI를 실제로 어떻게 만들었는지 정리해보았습니다.

이번 개발은 일반적인 방식처럼 처음부터 코드를 직접 하나씩 작성하는 방식이 아니었습니다.

먼저 MVP 요구사항을 프롬프트로 정리하고,
OpenAI Codex에게 기존 Gencow Fullstack 프로젝트를 분석하게 하고,
Gencow의 기존 AI 구조를 재사용하면서 JapanTrip AI 기능을 추가하는 방식으로 진행했습니다.

개발 과정에서 실제로 겪은 문제도 있었습니다.

• 처음에는 기존 Morrow 앱 화면이 나왔던 문제
• 제가 요청한 MVP 디자인과 다르게 구현된 문제
• Authentication required가 발생한 문제
• 이후 Failed to fetch가 발생한 문제
• 익명 호출과 Gencow auth strategy를 맞춰야 했던 문제
• 로컬 개발에서 Vite proxy 설정이 필요했던 문제
• 기존 gencow/ai.ts를 직접 수정하지 않고 AI helper를 재사용해야 했던 점

이런 문제들을 하나씩 해결하면서 최종적으로 JapanTrip AI는
여행지, 여행 기간, 여행 스타일을 선택하면 AI가 한국어 여행 일정을 생성해주는 MVP 형태로 동작하게 되었습니다.

이번 글이 “어떻게 만들었는가?”에 대한 기록이었다면,
다음 5편에서는 “만들어보니 어땠는가?”에 대해 이야기해보려고 합니다.

AI에게 개발을 맡겨보니 어떤 점이 좋았는지,
어떤 부분은 여전히 사람이 봐야 했는지,
Codex와 Gencow 조합이 MVP 개발에 얼마나 도움이 되었는지,
그리고 다음에 다시 만든다면 무엇을 다르게 할지 정리해보겠습니다.

다음 편에서는 조금 더 솔직한 회고로 이어가 보겠습니다. ✨