AI 서비스 개발 일지 #05 | JapanTrip AI 디자인을 다듬고 배포까지

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

 

 

지난 글에서는 OpenAI Codex와 Gencow를 활용해 JapanTrip AI를 어떻게 만들었는지를 정리했습니다.

이번 5편에서는 개발 과정 전체를 다시 반복하기보다는,
그중에서도 제가 가장 많이 고민했던 두 가지를 중심으로 정리해보려고 합니다.

첫 번째는 AI가 생성한 여행 일정을 어떻게 보기 좋게 보여줄 것인가입니다.
두 번째는 이 MVP를 실제로 배포 가능한 형태로 마무리할 수 있을까입니다.

즉, 이번 글은 JapanTrip AI의 결과 화면 디자인 개선과 배포 준비 회고에 가깝습니다. 🚀

---

기능은 됐지만, 화면은 아직 아쉬웠습니다

JapanTrip AI의 핵심 기능은 어느 정도 동작하게 되었습니다.

사용자가 여행지를 선택하고,
여행 기간을 선택하고,
여행 스타일을 고르면,
AI가 한국어로 일본 여행 일정을 만들어주는 흐름까지는 완성되었습니다.

하지만 막상 결과 화면을 보니 한 가지 아쉬움이 있었습니다.

기능은 되는데, 서비스처럼 보이지는 않는다.

AI가 생성한 일정은 텍스트로 잘 나왔습니다.
Day 1, Day 2가 있고, 오전, 점심, 오후, 저녁 일정도 있었습니다.

그런데 화면에서는 그 결과가 조금 딱딱하게 보였습니다.

여행 서비스라면 사용자가 결과를 봤을 때
“아, 이 일정대로 움직이면 되겠구나”라는 느낌이 들어야 합니다.

하지만 단순 텍스트 출력만으로는 그 느낌이 조금 부족했습니다.

---

이미지로 만들까, 타임테이블로 만들까

결과 화면을 보면서 처음 든 생각은 이것이었습니다.

“여행 일정을 이미지처럼 예쁘게 만들 수 있지 않을까?”

이미지 형태로 만들면 장점이 있습니다.

공유하기 좋고,
시각적으로 예쁘고,
블로그나 SNS에 올리기도 좋습니다.

예를 들어 Day 1, Day 2 일정이 카드 이미지처럼 만들어지고,
추천 음식과 추천 장소가 예쁜 여행 포스터처럼 보이면 훨씬 완성도 있어 보일 수 있습니다.

하지만 바로 고민되는 지점이 있었습니다.

여행 일정은 단순히 보기만 하는 콘텐츠가 아닙니다.
사용자는 그 내용을 복사해서 메모장에 붙여넣거나,
친구에게 공유하거나,
나중에 직접 수정하고 싶어 할 수 있습니다.

만약 결과를 이미지로 만들어버리면 이런 문제가 생깁니다.

• 텍스트를 복사하기 어렵다
• AI가 만든 원문과 화면에 표시된 내용이 달라질 수 있다
• 이미지 생성 과정에서 정확성이 떨어질 수 있다
• 사용자가 일정을 수정하거나 재활용하기 불편하다
• 접근성 측면에서도 텍스트보다 불리하다

그래서 고민 끝에 이미지 방식은 이번 MVP에는 맞지 않다고 판단했습니다.

JapanTrip AI는 “예쁜 여행 포스터 생성기”가 아니라
실제로 여행 일정을 확인하고 복사할 수 있는 AI 여행 플래너에 가까웠기 때문입니다.

---

최종 선택은 타임테이블 카드 UI였습니다

이미지 대신 선택한 방식은 타임테이블 카드 UI였습니다.

AI 응답 원문은 그대로 보관하고,
화면에서는 그 내용을 Day별 카드와 시간대별 타임테이블로 보여주는 방식입니다.

이 방식은 디자인과 실용성 사이에서 가장 균형이 좋았습니다.

사용자는 화면에서 보기 좋은 일정표를 볼 수 있고,
동시에 Copy Result 버튼을 누르면 원본 AI 텍스트 전체를 그대로 복사할 수 있습니다.

수정 후 결과 화면은 이렇게 바뀌었습니다.

• AI 응답 원문은 내부적으로 그대로 유지
• 화면에는 Day 1, Day 2 형태의 카드로 렌더링
• 각 Day 안에는 오전 / 점심 / 오후 / 저녁 타임테이블 표시
• 하단에는 추천 음식, 추천 장소, 일본어 표현 카드 표시
• Copy Result 버튼은 원본 AI 텍스트 전체를 복사

이 구조가 마음에 들었던 이유는 명확했습니다.

화면은 훨씬 보기 좋아졌지만,
결과를 복사하고 재활용하는 기능은 그대로 유지할 수 있었기 때문입니다.

 

 

---

추천 음식, 장소, 일본어 표현도 카드로 분리했습니다

AI 결과에는 일정만 있는 것이 아니라,
마지막에 추가 정보도 포함되도록 했습니다.

예를 들면 이런 항목입니다.

• 🍣 추천 음식 3가지
• 📍 추천 장소 3곳
• 🗣 유용한 일본어 표현 3개

처음에는 이 내용도 일정 텍스트 아래에 그대로 이어서 보여줬습니다.

하지만 이렇게 하면 정보의 구분이 약했습니다.

여행 일정과 추천 음식, 추천 장소, 일본어 표현은 성격이 조금 다릅니다.
일정은 시간 순서대로 보는 정보이고,
추천 음식과 장소는 참고 정보에 가깝습니다.

그래서 하단 추천 정보는 별도의 카드 영역으로 분리했습니다.

이렇게 바꾸니 결과 화면이 훨씬 정리되어 보였습니다.

사용자는 먼저 Day별 여행 일정을 확인하고,
아래에서 추가로 먹을 것, 가볼 곳, 간단한 일본어 표현을 확인할 수 있습니다.

작은 변화였지만,
화면이 “AI가 뱉은 텍스트”에서 “여행 플래너 결과 화면”으로 바뀌는 느낌이 들었습니다.

---

복사 기능은 원문 기준으로 유지했습니다

타임테이블 UI로 바꾸면서 가장 신경 쓴 부분은 복사 기능이었습니다.

화면에는 예쁘게 가공된 UI가 보이지만,
사용자가 복사할 때는 AI가 생성한 원문 전체가 복사되도록 유지했습니다.

이유는 간단합니다.

화면에 보이는 카드 UI를 그대로 복사하려고 하면
형식이 깨질 수 있습니다.

반면 AI 원문 텍스트를 복사하면
메모 앱, 카카오톡, 노션, 블로그 초안 등에 붙여넣기 쉽습니다.

그래서 JapanTrip AI의 결과 구조는 이렇게 정리했습니다.

화면 표시용:
Day별 타임테이블 카드 UI

복사용:
AI 응답 원문 텍스트

이 방식은 MVP 단계에서 꽤 좋은 선택이었다고 생각합니다.

사용자는 보기 좋은 화면을 얻고,
동시에 실용적인 텍스트도 가져갈 수 있습니다.

디자인과 사용성을 둘 다 어느 정도 만족시키는 타협점이었습니다.

 

---

디자인을 다듬으며 느낀 한계

이번 작업을 하면서 AI에게 디자인을 맡기는 것의 한계도 느꼈습니다.

Codex는 기능 구현에는 꽤 강했습니다.

결과를 파싱하고,
Day별로 나누고,
카드 형태로 렌더링하고,
빌드가 통과하도록 수정하는 작업은 잘 해냈습니다.

하지만 “좋은 디자인”은 단순히 요소를 배치하는 것만으로 끝나지 않았습니다.

여행 서비스다운 분위기,
카드 간격,
정보의 우선순위,
모바일에서의 가독성,
복사 버튼의 위치,
결과 화면의 밀도 같은 부분은 계속 사람이 확인해야 했습니다.

특히 AI에게 “예쁘게 만들어줘”라고 하면 결과가 애매할 수 있습니다.

대신 이렇게 말해야 더 원하는 결과에 가까워졌습니다.

AI 응답 원문은 그대로 보관하고,
화면에는 Day별 카드로 렌더링해줘.

각 Day 안에는 오전 / 점심 / 오후 / 저녁을
타임테이블 형태로 구분해서 보여줘.

추천 음식, 추천 장소, 일본어 표현은
결과 하단에 별도 카드로 분리해줘.

Copy Result는 화면에 보이는 UI가 아니라
원본 AI 텍스트 전체를 복사하게 해줘.

이번 경험을 통해 다시 느꼈습니다.

AI에게 디자인을 맡길 때도 프롬프트는 구체적이어야 합니다.

디자인 감각 자체를 완전히 맡기기보다는,
내가 원하는 정보 구조와 사용자 흐름을 먼저 정리해주는 것이 중요했습니다.

---

Gencow 덕분에 디자인 개선 후 확인도 빨랐습니다

디자인을 다듬을 때도 Gencow 기반 프로젝트라는 점이 도움이 되었습니다.

JapanTrip AI는 단순한 화면 데모가 아니라,
AI 호출 결과가 실제로 화면에 반영되는 앱입니다.

그래서 디자인을 수정할 때도
정적인 더미 데이터만 보는 것이 아니라 실제 AI 응답이 들어왔을 때 결과 화면이 어떻게 보이는지 확인할 수 있었습니다.

이 부분이 좋았습니다.

Gencow를 사용하면서 AI 기능을 붙이는 구조가 이미 잡혀 있었기 때문에,
저는 “AI 결과를 어떻게 보여줄 것인가”에 더 집중할 수 있었습니다.

AI 서비스를 만들 때 가장 번거로운 부분 중 하나가
프론트엔드와 백엔드, AI 호출을 연결하는 과정입니다.

그런데 Gencow가 이 기반을 제공해주니,
디자인 개선도 실제 동작 흐름 안에서 바로 확인할 수 있었습니다.

베타 크리에이터로 직접 써보면서 느낀 Gencow의 장점은 바로 이 부분이었습니다.

AI 기능을 붙이는 과정의 부담을 줄여주고, 아이디어를 실제 화면에서 빠르게 검증할 수 있게 해준다.

JapanTrip AI처럼 작은 MVP를 빠르게 실험해보는 데 잘 맞는 도구라고 느꼈습니다.

---

이제 남은 단계는 배포입니다

로컬에서 어느 정도 만족스러운 형태가 되었으니,
다음으로는 배포까지 이어가고 싶었습니다.

AI 서비스는 로컬에서만 동작하면 반쪽짜리입니다.

다른 사람이 접속해서 직접 여행지를 선택하고,
AI 일정을 생성해보고,
결과를 복사해볼 수 있어야 서비스에 가까워집니다.

이번 JapanTrip AI도 로컬에서는 다음 흐름이 동작했습니다.

• 여행지 선택
• 여행 기간 선택
• 여행 스타일 선택
• AI 일정 생성
• 타임테이블 UI 표시
• 추천 음식 / 장소 / 일본어 표현 표시
• 결과 복사

이제 이 흐름을 실제 배포 환경에서도 확인해야 합니다.

배포에서 중요한 것은 단순히 화면이 뜨는지가 아닙니다.

AI 호출이 배포 환경에서도 정상적으로 되는지,
API 요청이 막히지 않는지,
환경 설정이 빠진 것은 없는지,
모바일에서도 화면이 잘 보이는지 확인해야 합니다.

---

배포 전 확인해야 할 것들

배포 전에는 몇 가지를 꼭 확인해야 합니다.

첫 번째는 빌드입니다.

npm run build

로컬 개발 서버에서는 잘 보이더라도,
빌드 과정에서 타입 오류나 번들링 문제가 드러날 수 있습니다.

이번에도 결과 화면을 타임테이블 UI로 바꾼 뒤
npm run build가 통과하는지 확인했습니다.

두 번째는 AI 호출 환경입니다.

로컬에서는 잘 되더라도 배포 환경에서는 API 호출 방식이 달라질 수 있습니다.

특히 AI 서비스는 백엔드 연결, 인증, CORS, 환경변수 같은 부분을 확인해야 합니다.

세 번째는 화면 확인입니다.

배포 후에는 데스크톱뿐 아니라 모바일 화면에서도 확인해야 합니다.

JapanTrip AI는 여행 서비스이기 때문에
사용자가 모바일에서 볼 가능성이 높습니다.

따라서 모바일에서도 드롭다운, 스타일 버튼, 타임테이블 카드, Copy Result 버튼이 자연스럽게 보여야 합니다.

---

Gencow로 배포까지 이어갈 수 있다는 점

Gencow를 사용하면서 좋았던 또 하나의 지점은
MVP를 만든 뒤 배포 흐름까지 이어갈 수 있다는 점이었습니다.

프론트엔드 빌드를 만든 뒤,
Gencow 배포 명령어를 통해 정적 파일을 배포할 수 있습니다.

예를 들면 이런 흐름입니다.

npm run build

그다음 배포를 진행합니다.

gencow deploy --static dist/

프로덕션 배포를 한다면 아래처럼 진행할 수 있습니다.

gencow deploy --static dist/ --prod

물론 배포 후에는 반드시 실제 사이트에서 다시 확인해야 합니다.

로컬에서 성공한 것과
배포 환경에서 성공한 것은 다를 수 있기 때문입니다.

특히 JapanTrip AI처럼 AI 호출이 들어가는 서비스는
화면만 뜨는지 보는 것으로 끝나면 안 됩니다.

실제로 여행지를 선택하고,
AI 일정 만들기 버튼을 누르고,
결과가 생성되고,
Copy Result까지 되는지 확인해야 합니다.

[모바일] JapanTrip AI

 

---

배포까지 마무리하면 진짜 MVP가 됩니다

이번 작업을 하면서 느낀 것은,
MVP는 로컬에서 동작하는 순간 끝나는 것이 아니라는 점입니다.

내 컴퓨터에서만 되는 상태는 개발 결과물에 가깝습니다.

하지만 링크를 통해 다른 사람이 접속할 수 있고,
직접 기능을 사용해볼 수 있고,
피드백을 받을 수 있어야 진짜 MVP에 가까워집니다.

JapanTrip AI도 마찬가지입니다.

로컬에서 타임테이블 UI까지 다듬은 상태는 꽤 만족스러웠습니다.
하지만 실제 배포 후 다른 사람이 사용해보면 또 다른 문제가 보일 수 있습니다.

예를 들어 이런 피드백이 나올 수 있습니다.

• 여행 스타일을 여러 개 선택하고 싶다
• 일정이 너무 빡빡하다
• 실제 이동 시간이 궁금하다
• 지도에서 보고 싶다
• 결과를 이미지로도 저장하고 싶다
• 친구에게 공유 링크를 보내고 싶다
• 추천 음식이 너무 일반적이다

이런 피드백은 배포 후에야 더 잘 보입니다.

그래서 JapanTrip AI의 다음 단계는
배포 후 실제 사용자 관점에서 다시 다듬는 것이 될 것 같습니다.

---

이번 편 정리

이번 5편에서는 JapanTrip AI의 디자인 개선과 배포 준비 과정을 중심으로 정리했습니다.

이번에 가장 많이 고민한 부분은
AI가 생성한 여행 일정을 어떻게 보여줄 것인가였습니다.

이미지처럼 예쁘게 만들 수도 있었지만,
정확성과 복사 편의성을 생각하면 이번 MVP에는 맞지 않았습니다.

그래서 최종적으로는 타임테이블 카드 UI를 선택했습니다.

이 방식은 화면을 보기 좋게 만들면서도,
Copy Result 버튼으로 원본 AI 텍스트를 그대로 복사할 수 있다는 장점이 있었습니다.

또한 Gencow를 사용하면서 AI 기능을 붙이는 흐름이 생각보다 간편하다는 점도 다시 느꼈습니다.

AI 호출 구조를 처음부터 모두 만들지 않아도 되었고,
실제 AI 응답을 기반으로 화면 디자인을 빠르게 확인할 수 있었습니다.

이제 남은 단계는 배포입니다.

로컬에서 동작하는 MVP를 넘어서,
실제 링크로 접속하고,
다른 사람이 JapanTrip AI를 사용해보고,
그 피드백을 바탕으로 다시 개선하는 단계로 넘어가고 싶습니다.

JapanTrip AI는 아직 완성된 서비스는 아닙니다.

하지만 이번 과정을 통해
AI가 만든 결과를 단순 텍스트가 아니라 사용자에게 보기 좋은 형태로 다듬는 방법,
그리고 Gencow를 통해 AI MVP를 배포 가능한 형태로 가져가는 흐름을 경험할 수 있었습니다.

다음 단계에서는 배포까지 마무리하고,
실제 사용자 피드백을 바탕으로 여행 일정의 현실성과 사용성을 더 개선해보려고 합니다. ✨