MBTI 기반 맞춤 여행 추천 서비스 바이브코딩해보기
당신의 성격 유형에 맞는 여행을 찾아보세요!
1. 기획 배경
여행 플랫폼에서 PM으로 기획을 하다 보면, 늘 “재미있으면서도 사용자가 오래 머물 콘텐츠”에 대한 고민이 되곤 한다. 요즘 출퇴근하면서 ChatGPT와 대화를 나누곤 하는데, 회사에서 제공하는 상품과 연결되는 무엇인가의 아이디어 말고 조금 더 가볍게 다가갈 수 있는 아이디어에 대한 생각을 하던 도중 MBTI + 여행 추천이라는 결합 아이디어가 나왔다.
이 아이디어의 매력은 명확했다.
MBTI는 이미 대중적으로 인지도가 높음.
사람들은 자신의 유형에 관한 콘텐츠에 몰입도가 높음.
“나한테 맞는 여행지”라는 주제는 여행 콘텐츠와 찰떡궁합.
그리고 사실 고백하자면 'chatgpt roast me based on my past prompts'를 입력했다가,
'아이디어는 엄청 많은데 실행이 없다.' '머릿속에 탭이 너무 많이 떠있다' '아이디어 수집가다'
와 같은 회신을 보고 긁..
2. 첫 번째 고민 — 속도 vs 완성도
처음에는 API와 동적 페이지를 기반으로 구현하려 했지만, 몇 가지가 조금 고민되었다.
코딩의 ㅋ도 모르기에 우선은 0 to 1을 하는 게 목표였다
간편하고 빠르게 결과물을 보고 싶었다
최소한의 기능으로도 서비스 형태를 보고 싶었다
그래서 ChatGPT와 협의 끝에, 정적 HTML 기반의 MVP를 먼저 만들기로 결정했다.
각 MBTI별로 개별 HTML 파일을 생성하고
향후 디자인/기능 확장 가능하도록 파일 구조 설계하는 형태였다
3. 문구와 데이터 설계
MBTI별 여행 추천은 단순히 “여행지” 하나만 하자니 서비스가 볼 게 너무 없었다.
요즘은 워낙 많은 정보를 잘 정리해 주는 게 좋으니 무엇을 더 제공할까 하다,
다음 4가지를 고정 항목으로 제공하기로 했다.
추천 여행지
여행 스타일
추천 활동
숙소 유형
또 하나 중요한 의사결정은 시점에 대한 부분이었다.
2인칭(“너는…”) → 3인칭 서술형(“INTP는 이런 여행을 좋아한다”)으로 변경하였다.
그렇게 한 이유는 단순히 테스트 결과물이 아닌, 여행 정보 콘텐츠로서 객관성을 제공해 주기 위함도 있었고, 찾아보는 사람이 '나'라고 한정할 수 없다고 생각했기 때문이다.
코딩의 ㅋ 자도 모르는 상황에서
어떤 툴을 쓸지 고민을 하였는데 ChatGPT와 이야기하다 보니 Replit이라는 서비스를 추천했다
원래는 커서나 클로드를 쓸 줄 알았는데 replit이라는 서비스는 처음이라 응? 했는데,
사용해 보니 내가 요구한 툴의 요구사항을 적절하게 잘 반영하고 있는 툴이었다.
개발과 즉시 프리뷰를 볼 수 있어야 한다
무료인 상태에서도 결과물을 볼 수 있어야 한다
동적 / 정적 페이지 개발 등 다양한 형태의 개발이 가능해야 한다.
초보가 쉽게 할 수 있어야 한다.
물론 아주 기본적인 것만 무료고 조금만 더 하려고 하거나
에이전트 기능을 쓰려고 하면 유료 결제가 필수지만,
그래도 나처럼 일단 1개를 만들어보는 경험으로 사용하기에는 나쁘지 않은 것 같다
4. 구현 과정
4.1 Replit 프로젝트 생성
Replit에서 HTML/CSS 환경을 만들고,
index.html
을 메인 페이지로 설정했다.
메인 페이지에서 사용자가 자신의 MBTI를 선택하면,
해당 MBTI HTML 페이지로 이동하도록 내비게이션 구조를 만들었다.
<!-- index.html -->
<h1>MBTI 여행 추천 </h1>
<p> 당신의 MBTI를 선택하세요:</p>
<ul>
<li><a href="INTP.html">INTP</a></li>
<li><a href="ENFP.html">ENFP</a></li>
<li><a href="ISTJ.html">ISTJ</a></li>
<!-- 나머지 MBTI 유형 링크 -->
</ul>
4.2 첫 번째 결과 페이지(INFP 예시)
처음 완성한 페이지는 INTP.html이었다.
이 페이지에서 디자인, 문구 톤, 구조를 확정했다.
<!-- INTP.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INTP 여행 추천</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>INTP는 이런 여행을 좋아한다</h1>
<h2>추천 여행지</h2>
<p>조용한 북유럽 소도시</p>
<h2>여행 스타일</h2>
<p>깊이 있는 탐구와 여유로운 일정</p>
<h2>추천 활동</h2>
<p>현지 서점 탐방, 박물관 순회</p>
<h2>숙소 유형</h2>
<p>작은 부티크 호텔</p>
<a href="index.html">← 메인으로</a>
</body>
</html>
4.3 스타일링 적용
CSS는 가독성과 심플함을 우선시했다.
추후 이미지나 배경색, 반응형 디자인을 쉽게 추가할 수 있도록 최소한의 구조만 잡았다.
/* style.css */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 600px;
margin: auto;
padding: 20px;
}
h1, h2 {
color: #333;
}
a {
text-decoration: none;
color: #007BFF;
}
4.4 구조 복제와 확장
INTP.html
이 완성된 후, 동일한 구조로 다른 MBTI 파일을 생성했다.
각 파일은 문구만 변경하여, 16개의 MBTI 페이지를 완성.
처음 하다 보니 많이 헤매기는 했지만
그런 과정을 생략하고 가볍게 적어보면 위와 같다.
5. 결과
완성까지 걸린 시간: 약 3일 (중간 피드백 포함)
16개 MBTI HTML 페이지 완성
메인 내비게이션 + 기본 CSS 적용
배포까지 해보았다
https://mbti-travel-ui-branderds.replit.app
6. 한계와 다음 단계
한계
추천이 고정값이라 개인화 없어서 매번 동일한 결괏값을 제공한다
결과에 대해 한번 보면 끝나니 재방문을 유도하기 어렵다.
무엇인가 재미요소나 와우 포인트가 좀 한정적이다.
다음 단계
현재는 단일 조건이지만 MBTI + 관계를 추천한 형태로 발전시켜봐야겠다
이후에는 동적으로 전환해서 사용자가 원하는 답변을 조금 더 원활하게 만드는 방향으로 가봐야겠다
8. 느낀 점
이 프로젝트는 ‘완벽한 제품’보다 빠른 시각화의 가치를 다시 한번 느끼게 했다. 정적 HTML이라는 단순한 형태였지만, 아이디어를 실제 서비스 화면으로 구현하면서, 기획서에 머물던 생각이 살아 움직이는 경험을 할 수 있었다. 또한 한번 만들어보니 그다음도 쉽게 만들 수 있을 거란 자신감이 많이 생겼다. chatgpt 가 말한 여러 아이디어들을 하나씩 꺼내서 구현해 봐야겠다
