1단계에서 만들 것을 정했다면, 이번 단계는 그걸 실제로 코드로 옮기고 인터넷에 올리는 환경을 준비하는 단계입니다. 늑구맵이 실제로 쓰는 조합은 Claude Code(개발) + GitHub(버전관리) + Vercel(배포)입니다. 이 조합의 핵심은 코드를 한 줄씩 직접 짜는 시간을 줄이고, '무엇을 만들지 판단하는 시간'에 집중하는 것입니다.
준비물
셋업 순서
GitHub 레포지토리 생성
새 프로젝트마다 GitHub에 빈 레포지토리를 하나 만듭니다. 나중에 Vercel과 연결하면 이 레포에 커밋(코드 변경 저장)이 올라갈 때마다 자동으로 배포되는 구조가 됩니다.
로컬에 Claude Code 설치하고 레포 연결
터미널에서 방금 만든 레포를 로컬로 내려받고, 그 폴더 안에서 Claude Code를 실행합니다. 이제부터는 "이런 기능을 만들어줘"라고 자연어로 요청하면 Claude Code가 실제 코드를 작성/수정합니다.
Next.js 프로젝트로 초기화
늑구맵도 처음엔 워드프레스로 급하게 검증했다가, 제대로 키우기로 하면서 Next.js로 옮겼습니다. 처음부터 제대로 만들 생각이라면 바로 Next.js로 시작해도 됩니다. Claude Code에게 "Next.js 프로젝트로 초기화해줘"라고 요청하면 기본 골격을 만들어줍니다.
Vercel에 연결해 자동 배포 세팅
Vercel 대시보드에서 방금 만든 GitHub 레포를 'Import'하면 끝입니다. 이후로는 로컬에서 작업한 내용을 GitHub에 커밋/푸시할 때마다 Vercel이 자동으로 빌드하고 배포합니다. 배포 도메인이 바로 생기기 때문에, 이 시점부터 이미 '인터넷에 올라간 서비스'가 됩니다.
커스텀 도메인 연결 (선택)
Vercel이 자동으로 주는 도메인으로도 충분히 서비스가 됩니다. 반응이 좋아서 계속 키우기로 했을 때, 그때 원하는 도메인을 사서 Vercel 설정에서 연결하면 됩니다. 처음부터 도메인부터 사지 않아도 됩니다.
실전 프롬프트 팁
바이브 코딩에서 결과물의 품질은 얼마나 구체적으로 요청하는가에 달려 있습니다. "지도 넣어줘"보다는 "카카오맵 API로 서울 지역 매장 20곳을 마커로 표시하고, 마커를 누르면 이름/주소/영업시간이 뜨는 팝업을 보여줘"처럼 화면에 뭐가 보여야 하는지, 어떤 데이터가 필요한지를 구체적으로 풀어서 요청하면 훨씬 빠르게 원하는 결과에 가까워집니다.
흔한 실수
처음부터 완벽한 스택을 고르려는 것
어떤 프레임워크/DB/API가 최선인지 비교하느라 시간을 쓰지 말고, 오늘 당장 손에 있는 도구로 니즈부터 검증하는 게 우선입니다. 스택은 필요할 때 옮기면 됩니다.
데이터를 화면 코드에 직접 박아넣는 것
가게 목록이나 문항처럼 나중에 계속 추가/수정할 데이터는 처음부터 별도 JSON 파일로 분리해두면, 이후에 내용만 바꿔서 업데이트하기가 훨씬 쉬워집니다.
늑구맵의 생각
이 단계의 목표는 '완성된 서비스'가 아니라 '배포된 화면 하나'입니다. 아무리 허접해도 인터넷에 올라가서 URL로 접속할 수 있는 상태를 최대한 빨리 만드는 게 중요합니다. 다음 단계에서 다룰 MVP 설계도, 이미 배포된 화면이 있어야 '뭘 더 빼도 되는지'를 판단하기 쉬워집니다.