🧪 바이브코딩 심리테스트 사이트 만들기 1편 (IT비전공자 기준)

“좋아하는 사람이 어떤 동물을 닮았는지 테스트하는 반응형 웹사이트를 만들고 싶어. 다지선다 질문을 JSON으로 만들고, 결과마다 쿠팡파트너스 링크를 달아서 추천 상품도 넣고 싶어. 혹시 더 좋은 사이트를 만들기 위해 필요한 부분이 있다면 나한테 우선 질문해줘. 그리고 하나씩 질문에 답변하면서 PRD를 완성해나갈거야. 모든 질문에 답변한 후에 최종적으로 PRD를 완성하자.”

그 결과 GPT는 다음을 물어봤습니다.

테스트 구조
UX 흐름
결과 페이지 구성
상품 추천 방식
타겟 사용자

👉 여기서 느낀 점

GPT는 그냥 개발자가 아니라 기획자 역할까지 한다는 것

🧱 3. 데이터 구조 설계 (JSON으로 끝)

핵심 구조

질문 15개
4지선다 기반 점수
8개 결과 유형

결과 유형

토끼
고양이
강아지
여우
팬더
늑대
곰

각 결과에는 다음이 포함됩니다.

성격 설명
연애 스타일
접근 방법
추천 선물 3개

👉 여기서 중요한 포인트

콘텐츠 = 데이터 구조다

UI보다 먼저 설계해야 합니다.

🛠️ 4. 개발: mocha ai app builder로 UI 생성

gpt가 추천해준 기술 스택은 다음과 같습니다.

React + Vite
Vercel 배포

Mocha ai(https://getmocha.com/apps) 에 GPT가 만든 프롬프트를 그대로 넣었습니다.

결과는…?

바이브코딩 심리테스트 사이트 만들기를 통해 실제 완성된 사이트 이미지 — *어디선가 많이 봤을법한 트렌디한 바이럴 사이트가 완성됨*
(실제 완성된 사이트👉https://animal-test-tawny.vercel.app/)

그냥 gpt가 작성해준 prd를 붙여넣었을 뿐인데,

👉 디자인이 너무 잘 나옵니다

정리하면

UI 퀄리티: 매우 높음
속도: 빠름
자유도: 제한 있음

그런데 가장 중요한 문제,

👉 무료로 제공됐었던 크레딧이 모두 사라집니다

눈 깜빡하면 없어집니다. 진짜입니다.

⚠️ 5. 문제 발생: Mocha ai의 한계

문제는 여기서부터 시작됩니다.

오류 수정 필요
쿠팡 링크 삽입 필요
SEO 설정 필요

하지만

👉 Mocha 크레딧은 종료되었습니다.

그래서 선택한 다음 단계

👉 Codex로 이동해서 마저 작업

💥 6. Codex로 넘어간 이유

Mocha는 잘 만듭니다.

하지만

👉 수정은 유료입니다

Codex는 gpt를 구독하고 있다면 무료로 사용할 수 있습니다. 대신에,

속도: 다소 느림
디버깅: 잘함
가성비: 좋음

그래서 역할 분담이 됩니다.

👉 Mocha = 제작
👉 Codex = 유지보수

결국 사람은 매니저가 됩니다.

🧠 7. 바이브코딩 심리테스트 사이트 만들기_전체 흐름 정리

아이디어 도출 : 내 머리
PRD 설계 : GPT
질문/결과 데이터 생성 : GPT
UI 및 프로토타입 제작 : mocha ai
디버깅 : Codex
Vercel 배포

👉 여기까지가 1편입니다.

🎯 8. 바이브코딩 심리테스트 사이트 만들기_중요한 인사이트

1) 개발보다 구조가 중요

잘 만든 구조는 그대로 구현됩니다.

2) AI는 도구가 아니라 팀이다

GPT: 기획자
Mocha: 디자이너 + 개발 지식도 있는..
Codex: 개발자

3) 비전공자도 가능

단

👉 문제를 이해하려는 노력은 필요합니다

📌 다음 글 예고

👉 Codex로 디버깅 지옥 탈출하고 심리테스트 사이트 완성하기 (Git 브랜치, 404, OG 이미지 문제 해결)[https://lifetestlab.kr/vibe-coding-psychology-test-site-2/]

본 글은 개인적인 사용 경험과 데이터 분석을 바탕으로 작성되었으며, 개개인의 상태와 환경에 따라 체감은 달라질 수 있습니다.