[4부] 대마도 하나비 민숙 구축기: 디버깅과 바이브 코딩 후기
🏕️ [4부] 대마도 하나비 민숙 구축기: 디버깅과 바이브 코딩 최종 회고 "모든 모듈을 하나로 엮었다. 이제 진짜 실전, 형님과의 통합 테스트다." 1부부터 3부까지 숨 가쁘게 달려온 바이브 코딩의 결과물을 마침내 하나로 합쳤습니다. 예약 캘린더, 소셜 로그인, 카...
[4부] 대마도 하나비 민숙 구축기: 디버깅과 바이브 코딩 후기
🏕️ [4부] 대마도 하나비 민숙 구축기: 디버깅과 바이브 코딩 최종 회고
"모든 모듈을 하나로 엮었다. 이제 진짜 실전, 형님과의 통합 테스트다."
1부부터 3부까지 숨 가쁘게 달려온 바이브 코딩의 결과물을 마침내 하나로 합쳤습니다. 예약 캘린더, 소셜 로그인, 카카오톡 플로팅 버튼, 그리고 결제 시스템까지. 로컬 환경에서 완벽해 보였던 코드들을 운영 중인 서버의 PM2 환경에 올리고, 대마도에 계신 형님과 떨리는 마음으로 첫 실전 테스트를 진행했습니다. 하지만 시스템 개발의 법칙이 늘 그렇듯, 한 번에 완벽하게 돌아갈 리 없었죠.
💻 코딩: 결제 상태 꼬임과 렌더링 오류의 실시간 픽스
테스트 과정에서 마주친 가장 큰 난관은 역시 가장 민감한 '결제 및 예약 확정' 구간이었습니다. Toss Payments 연동 후 테스트 결제를 시도했는데, 간헐적으로 시스템에 예상치 못한 꼬임 현상이 발생했습니다.
- 상태 꼬임 현상: PG사에서는 결제 승인이 떨어졌는데, 네트워크 지연이나 비동기 처리 타이밍 문제로 Prisma DB의 예약 데이터가 '결제 완료'로 정상 업데이트되지 않는 병목이 있었습니다.
- 화면 렌더링 오류: 캘린더 컴포넌트나 동적으로 데이터를 불러오는 구간에서, Next.js의 서버사이드 렌더링(SSR) 결과물과 클라이언트의 데이터가 불일치하여 화면이 깨지거나 에러를 뱉는 현상도 나타났습니다.
- 실시간 돌파: 과거 같았으면 스택 오버플로우를 뒤지며 밤을 새웠겠지만, 이번엔 달랐습니다. 에러 로그와 해당 로직의 코드를 그대로 복사해 AI 창에 던졌습니다. "Next.js에서 캘린더 렌더링 시 발생하는 에러인데 수정해 줘", "결제 완료 웹훅 처리 로직에서 DB 트랜잭션이 꼬이는 것 같아. 방어 코드를 짜줘"라는 식의 대화를 통해, 말 그대로 **실시간 픽스(Real-time Fix)**를 진행하며 버그를 쳐냈습니다.
📝 바이브 코딩 팁 (Tip)
- 에러 로그는 날것 그대로 던져라: 테스트 중 서버가 죽거나 빨간색 에러(예: 3부에서 겪은
.next폴더 관련ENOENT오류 등)가 뿜어져 나올 때 당황할 필요가 전혀 없습니다. 터미널에 찍힌 에러 메시지 전체를 복사해서 "이거 무슨 오류야?"라고 묻는 것이 가장 빠르고 정확한 지름길입니다. 원인 분석부터 해결을 위한 터미널 명령어까지 완벽하게 떠먹여 줍니다. - 핵심 로직은 '방어적' 프롬프팅이 필수: 돈이 오가는 결제나 예약 확정 코드를 짤 때는 커서(Cursor)에게 한 번 더 깐깐하게 지시해야 합니다. "결제는 성공했는데 DB 업데이트가 실패할 경우를 대비해, 예외 처리(Try-Catch) 로직과 함께 슬랙이나 이메일로 관리자에게 알림을 보내는 코드를 추가해 줘"라고 요구하여 시스템의 안정성을 확보해야 합니다.
치열했던 실시간 디버깅을 거쳐 치명적인 버그들을 잡아냈고, 모든 세팅을 끝마친 후 현재는 최종 승인과 라이브 오픈을 대기 중인 상태입니다.
거창한 기획서나 다이어그램 한 장 없이, 오직 대화와 프롬프트 엔지니어링만으로 이 복잡한 종합 플랫폼의 뼈대를 세우고 살을 붙였습니다. 1인 개발의 물리적 한계를 부수고, 아이디어를 즉각적으로 구동 가능한 현실로 만들어내는 힘. 이것이 제가 이번 hanabi.camp 프로젝트를 통해 증명해 낸 **'바이브 코딩'**의 진정한 가치입니다. 앞으로 이 플랫폼이 대마도 현지에서 어떻게 활약하고 발전해 나갈지 무척 기대됩니다!