[에필로그] 대마도 하나비 민숙 구축기: 바이브 코딩이 증명한 1인 개발의 무한한 가능성

🏕️ [에필로그] 대마도 하나비 민숙 구축기: 바이브 코딩이 증명한 1인 개발의 무한한 가능성

대마도에서 민숙을 운영하시는 형님의 전화 한 통으로 시작된 hanabi.camp 구축 프로젝트가 드디어 성공적으로 마무리되었습니다.

과거의 저였다면 요구사항을 듣자마자 다이어그램 도구를 켜고 며칠 동안 기획서와 DB 스키마를 그리며 밤을 새웠을 것입니다. 하지만 이번엔 달랐습니다. 복잡한 문서 작업은 과감히 생략하고, 제미나이(Gemini)와 대화하며 로직을 정리한 뒤 커서(Cursor)에게 곧바로 마스터 프롬프트를 던지는 **'바이브 코딩(Vibe Coding)'**의 방식을 택했습니다.

Next.js와 Prisma로 뼈대를 세우고, MariaDB에 예약 데이터베이스를 구축하며, Toss Payments 결제와 소셜 로그인을 붙이기까지. 이 모든 과정을 단기간에, 그것도 1인 개발로 완수할 수 있었던 것은 순전히 AI와의 유기적인 티키타카 덕분입니다. 개발 중 마주친 서버 빌드 오류나 렌더링 에러, 결제 트랜잭션 꼬임 같은 돌발 상황조차 에러 로그를 긁어 AI와 실시간으로 디버깅하며 돌파해 냈습니다.

완성된 코드를 제 연구실의 든든한 일꾼, Dell PowerEdge T550 서버에 올리고 PM2로 무중단 배포를 완료했을 때의 짜릿함은 이루 말할 수 없습니다. 단순히 코드를 빠르게 짜는 것을 넘어, 머릿속의 아이디어를 가장 직관적이고 빠르게 '작동하는 현실'로 만들어내는 힘. 이것이 바로 바이브 코딩이 가진 진정한 가치임을 이번 프로젝트를 통해 온몸으로 증명했습니다. 앞으로 하나비 민숙이 이 플랫폼을 통해 대마도의 낚시와 캠핑 명소로 더욱 크게 성장하길 응원합니다!

---

🛠️ [부록] 실전 바이브 코딩 & 블로그 운영 매뉴얼

프로젝트를 진행하고 완성된 사이트를 홍보하며 얻은, 피와 살이 되는 실무 기능 팁들을 매뉴얼로 정리했습니다.

1. 구글 블로그(Blogger) HTML 위젯 삽입 절대 실패하지 않는 법

블로그에 예쁜 커스텀 카드나 위젯 코드를 넣을 때, 코드가 화면에 그대로 글씨로 노출되는 대참사를 막기 위한 필수 규칙입니다.

• 1단계: 반드시 [HTML 보기] 모드로 진입 글쓰기 화면 좌측 상단의 연필 아이콘(✏️)을 눌러 [HTML 보기] (< > 아이콘)로 변경합니다. (절대 일반 작성 모드에서 코드를 붙여넣지 마세요.)
• 2단계: 코드 삽입 후 에디터 전환 금지 원하는 위치에 HTML 코드를 붙여넣었다면, 다시 연필 아이콘을 눌러 [작성] 모드로 돌아가지 마세요. 구글 블로그 에디터가 임의로 코드를 텍스트로 변환해버리는 버그가 있습니다.
• 3단계: 바로 [업데이트] 및 [미리보기] 코드를 넣은 HTML 화면 상태 그대로, 우측 상단의 **[미리보기]**로 정상 작동을 확인한 후 **[업데이트]**를 눌러 저장을 완료합니다.

2. 카카오톡 스마트 연동 (PC는 QR, 모바일은 자동 연결)

고객이 어떤 기기로 접속하느냐에 따라 가장 편한 방식으로 카카오톡 문의를 유도하는 스마트 UX 구현 방법입니다.

• 1단계: 내 카카오톡 QR 코드 및 링크 추출 카카오톡 앱의 [친구] 탭 우측 상단의 **[사람 모양 + 아이콘]**을 누르고 **[QR코드]**를 선택합니다. 내 계정의 QR코드가 화면에 뜨면 이를 이미지로 저장해 둡니다. 동시에 스마트폰 카메라로 이 QR을 스캔하면 나타나는 http://pf.kakao.com/... 또는 https://open.kakao.com/... 형태의 실제 연결 링크(URL)를 복사해 둡니다.
• 2단계: 반응형(Responsive) 노출 로직 적용 커서(Cursor)에게 다음과 같이 지시하여, 접속한 기기에 따라 다른 화면이 보이도록 CSS 미디어 쿼리(Media Query)를 적용합니다.

🗣️ 커서 지시어 예시:

"카카오톡 문의 영역을 만들 건데, 모바일 환경(화면 너비 768px 이하)에서는 방금 추출한 '카카오톡 링크'가 걸린 클릭 버튼이 나타나게 해줘.
반대로 PC 환경(화면 너비 768px 초과)에서는 버튼 대신 내 'QR 코드 이미지'가 화면에 크게 표시되도록 CSS 미디어 쿼리(또는 Tailwind의 `md:`, `hidden` 클래스)를 사용해서 반응형으로 짜줘."

이렇게 구현하면, 폰으로 사이트를 보던 고객은 버튼 터치 한 번으로 카톡 앱이 바로 열리고, PC로 보던 고객은 모니터에 뜬 QR 코드를 폰으로 스캔하여 아주 자연스럽게 문의를 이어갈 수 있습니다.

앞서 정리한 매뉴얼에 이어서, 복잡해 보이는 소셜 로그인을 '바이브 코딩'으로 순식간에 끝내는 구글 로그인 구현 매뉴얼을 추가해 드립니다. Next.js와 NextAuth.js(Auth.js), 그리고 Prisma를 사용하는 현재 스택에 완벽하게 맞춰진 가장 실용적인 가이드입니다.

---

3. 🔐 구글 소셜 로그인 초간단 구현 매뉴얼 (NextAuth & Vibe Coding)

예약 사이트의 필수 요소인 회원가입과 로그인을 비밀번호 찾기 같은 복잡한 로직 없이, 구글 계정 하나로 3초 만에 끝내도록 세팅하는 방법입니다.

1단계: 구글 클라우드 콘솔에서 API 키 발급받기 이 부분은 AI가 대신해 줄 수 없으므로 직접 세팅해야 합니다.

1. 구글 클라우드 콘솔에 접속해 새 프로젝트를 생성합니다.
2. 좌측 메뉴에서 **[API 및 서비스] > [사용자 인증 정보]**로 이동합니다.
3. 상단의 **[+ 사용자 인증 정보 만들기] > [OAuth 클라이언트 ID]**를 클릭합니다. (애플리케이션 유형은 '웹 애플리케이션' 선택)
4. 승인된 리디렉션 URI에 다음 두 가지를 반드시 정확하게 입력합니다.
   • 로컬 테스트용: http://localhost:3000/api/auth/callback/google
   • 실제 운영용: https://hanabi.camp/api/auth/callback/google
5. 발급이 완료되면 클라이언트 ID와 클라이언트 보안 비밀(Secret) 두 가지 값을 복사해 둡니다.

2단계: 환경 변수(.env) 세팅 프로젝트 최상단 폴더의 .env 파일을 열고, 1단계에서 받은 키와 보안을 위한 임의의 문자열을 추가합니다.

# Google OAuth
GOOGLE_CLIENT_ID="발급받은_클라이언트_ID"
GOOGLE_CLIENT_SECRET="발급받은_보안_비밀"

# NextAuth (NEXTAUTH_SECRET은 암호화용 난수, 아무거나 길게 입력)
NEXTAUTH_URL="https://hanabi.camp" 
NEXTAUTH_SECRET="asdf1234_hanabicamp_secret_key"

3단계: 커서(Cursor)에게 마스터 프롬프트 날리기 (핵심) 복잡한 인증 로직과 DB 스키마 수정은 직접 코딩할 필요 없이 커서에게 맡깁니다. 커서의 Composer(Ctrl+I 또는 Cmd+I)를 열고 아래 지시어를 그대로 복사해서 던져주세요.

🗣️ 커서 지시어:

"우리 프로젝트에 구글 로그인을 붙일 거야. 라이브러리는 `next-auth`를 사용하고, DB 연동을 위해 `@next-auth/prisma-adapter`를 적용해 줘.
> 
> 1. `schema.prisma` 파일에 NextAuth 공식 문서 기준의 User, Account, Session 모델을 추가하고 마이그레이션 할 수 있게 준비해 줘.
> 2. `app/api/auth/[...nextauth]/route.ts` 파일을 생성해서 구글 프로바이더 설정을 세팅해 줘. 키값은 `.env`의 `GOOGLE_CLIENT_ID`와 `GOOGLE_CLIENT_SECRET`을 사용해.
> 3. 메인 화면에 '구글로 시작하기' 버튼 컴포넌트를 예쁘게 만들어주고, 로그인에 성공하면 자동으로 `/booking` 페이지로 넘어가게 처리해 줘."

이렇게 지시하면 커서가 필요한 패키지 설치부터 복잡한 Auth.js의 콜백 라우팅, 그리고 MariaDB에 회원 정보를 저장하기 위한 Prisma 스키마 업데이트까지 단 몇 초 만에 완벽한 구조로 짜줍니다. 에러가 나더라도 터미널 에러를 그대로 커서에게 다시 던져주면 알아서 디버깅까지 완료합니다.