🧠 바이브코딩으로 심리테스트 사이트 만들기 결론
👉 Mocha로 만들고 끝? 절대 아니다
👉 진짜 시작은 디버깅이다
예쁘게 만드는 건 쉬웠고, 제대로 돌아가게 만드는 건 어려웠습니다.
[바이브코딩으로 심리테스트 사이트 만들기 1편부터 보고 싶다면?👉https://lifetestlab.kr/vibe-coding-psychology-test-site-1/]
🧪 바이브코딩으로 심리테스트 사이트 만들기 1. Codex로 프로젝트 이어받기
Mocha에서 만든 코드를 그대로 쓰면 끝일 줄 알았습니다.
아니었습니다.
👉 오류가 터집니다
👉 링크가 깨집니다
👉 공유가 안 됩니다
그래서 Codex로 넘어갔습니다.
진행 방식
- Mocha에서 만든 Git 브랜치를 코덱스에 연결 (코덱스는 git 연결이 가능합니다)
- Codex에게 프로젝트 설명
- 코드 구조 이해하라고 시키기
👉 여기서 중요한 포인트
AI한테도 “설명”을 해줘야 제대로 일합니다
사람이든 AI든 모르면 못합니다. 당연합니다.
💥 바이브코딩으로 심리테스트 사이트 만들기 2. 주요 문제 & 해결 과정
❌ 문제 1: 로컬 실행 안됨
원인
Codex는 다른 브랜치에서 작업 중이었고(왜? 지멋대로??)
저는 main 브랜치에서 서버를 띄우고 있었습니다.
👉 서로 다른 세계를 보고 있었던 것
같은 프로젝트인데 다른 우주에 살고 있었던 상황입니다.
해결 방법 (비개발자용 설명)
👉 Git 브랜치 이동하기
터미널에서 다음 입력
git branch
👉 현재 브랜치 목록 확인(* 붙은 게 현재 브랜치)
git switch 브랜치이름
👉 Codex가 작업한 브랜치로 이동
npm install
npm run dev
👉 다시 서버 실행
핵심 개념 한 줄
👉 브랜치 = 같은 프로젝트의 다른 버전이더군요..
❌ 문제 2: 결과 페이지 공유하면 404
원인
SPA 구조 (React)
👉 Vercel은 실제 파일을 찾으려 함
👉 /result/cat → 파일 없음 → 404
해결
👉 vercel.json 추가
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
👉 모든 요청을 index.html로 보내기
핵심 개념
👉 SPA는 서버가 아니라 브라우저가 라우팅합니다
비개발자용 설명
일반 웹사이트는 이렇게 동작합니다
👉 페이지 이동 → 서버가 새 파일을 찾아서 보여줌
예:
- /about → about.html 파일 찾음
- /contact → contact.html 파일 찾음
근데 SPA는 다릅니다
👉 파일은 하나(index.html)인데
👉 화면만 바뀌는 구조입니다
즉
👉 /result/cat 이라고 주소는 바뀌었지만
👉 실제로는 파일이 따로 존재하지 않습니다
그래서 Vercel 입장에서는
👉 “이 경로에 파일 없는데?” → 404
이게 문제의 본질입니다
한 줄 비유
👉 일반 웹 = 방마다 문이 따로 있음
👉 SPA = 집은 하나인데 내부에서 방만 바뀜
주소는 바뀌는데 파일은 없으니 서버는 당황하고, 우리는 더 당황합니다.
❌ 문제 3: 공유 시 x.com으로 이동
원인
fallback이 Twitter intent로 설정됨
해결
👉 fallback을 “링크 복사” 문구 팝업으로 변경
결과
👉 사용자 경험 개선됨
갑자기 트위터로 튀는 건 아무도 원하지 않습니다.
❌ 문제 4: OG 이미지 안 뜸
원인
Mocha CDN 이미지 사용 중
👉 외부 이미지 → 크롤링 안됨
해결
👉 public/images/og-main.png -> 이 경로로 이미지 파일 생성
- 직접 만들거나 (추천 👍)
- 캡쳐해서 써도 됩니다.
- 사이즈: 1200×630 (이거 거의 표준)
👉 그 다음 index.html 수정
<meta property="og:image" content="https://도메인/images/og-main.png" />
핵심
👉 OG 이미지는 반드시 내 서버에 있어야 합니다.
❌ 문제 5: 상품 이미지 안 보임
원인
외부 URL 이미지 사용
👉 CORS / 접근 제한 문제
해결
👉 public/images 폴더에 직접 저장
- 상품 이미지를 일일이 캡쳐
- 직접 업로드
- 로컬 경로 연결
👉 이게 제일 힘들었습니다
개발보다 노가다가 더 오래 걸립니다. 인생은 공평합니다.
🎯 바이브코딩으로 심리테스트 사이트 만들기 3. UX 개선 (핵심 전략)
기존 문제
👉 결과만 공유됨
👉 첫 시작 페이지로 유입이 안됨
개선 구조
버튼 분리
👉 🧪 테스트 공유 (/)
👉 🔗 결과 공유 (/result/xxx)
전략
👉 결과 공유 → 바이럴
👉 테스트 공유 → 유입
👉 퍼널 2개 구조 완성
📊 바이브코딩으로 심리테스트 사이트 만들기 4. Analytics 적용 (운영 시작)
설치
npm i @vercel/analytics
<Analytics />
확인 가능한 것
- 방문자 수
- 페이지 이동
- 유입 경로
핵심 변화
👉 이제부터는
- 개발 ❌ \
- 감 ❌ \
- 추측 ❌
👉 데이터 기반 운영 시작
🧠 바이브코딩으로 심리테스트 사이트 만들기 5. 전체 흐름을 정리하면 다음과 같습니다.
- 아이디어
- PRD 작성
- 데이터 설계
- UI 제작 (Mocha)
- 디버깅 (Codex)
- 배포 (Vercel)
- UX 개선
- OG 설정
- Analytics 적용
👉 여기까지 오면
서비스 하나 완성입니다
🚀 완성된 사이트
👉 https://animal-test-tawny.vercel.app/
🧠 6. 현실적인 결론
Mocha
- 디자인: 매우 강함
- 한계: 크레딧
👉 프로토타입 최적화
Codex
- 속도: 느림
- 디버깅: 강함
👉 완성 단계 필수
핵심 전략
👉 GPT로 설계
👉 Mocha로 생성
👉 Codex로 완성
결국 우리는 개발자가 아니라 지휘자에 가깝습니다.
📌 처음부터 심리테스트 사이트 만드는 방법이 궁금하다면?
👉 바이브코딩으로 심리테스트 사이트 만들기 1편(IT비전공자기준)👉https://lifetestlab.kr/vibe-coding-psychology-test-site-1/
- 본 글은 개인적인 사용 경험과 데이터 분석을 바탕으로 작성되었으며, 개개인의 상태와 환경에 따라 체감은 달라질 수 있습니다.