바이브코딩으로 만든 사이트, 인터넷에 올리는 방법 (클로드 코드·러버블·커서)

바이브코딩으로 만든 사이트를 인터넷에 올리려면 코드를 깃허브에 올리고, Vercel 같은 배포 서비스에 연결한 뒤, 환경 변수(비밀 키)를 넣어 주면 돼요. 러버블처럼 자체 배포 버튼이 있는 툴은 버튼 한 번으로 임시 주소가 생기고, 내 도메인은 그다음에 연결해요.

이런 상황이라면 이 글이 맞아요

• localhost:3000에서는 잘 되는데, 친구에게 보낼 주소가 없어요.
• AI가 "배포했어요"라고 했는데 실제로는 아무 주소도 없어요.
• 올리긴 했는데 하얀 화면이나 404: NOT_FOUND만 나와요.

먼저 알아 둘 것: 배포는 3단계예요

AI 툴은 1단계까지는 잘 도와주지만, 2단계에서 계정 연결과 비밀 키 설정을 사람이 직접 해야 해서 여기서 가장 많이 멈춰요.

툴별로 순서대로 해 보세요

클로드 코드·커서·코덱스로 만들었다면

1. 깃허브 저장소 만들기. GitHub에서 새 저장소(New repository)를 만들어요. 공개하기 싫으면 Private으로 골라요.
2. 코드 올리기. 터미널에서 AI에게 "이 프로젝트를 방금 만든 깃허브 저장소에 push 해 줘"라고 부탁해요. 끝나면 깃허브 웹사이트에서 파일이 정말 올라갔는지 꼭 눈으로 확인해요. AI가 올렸다고 말해도 로그인이 안 되어 있어서 실패한 경우가 많아요.
3. Vercel에 연결하기. vercel.com에 깃허브 계정으로 가입하고, Add New → Project에서 방금 만든 저장소를 골라요. Next.js, Vite 같은 프레임워크는 대부분 자동으로 알아봐요.
4. 환경 변수 넣기. 프로젝트 폴더의 .env 파일에 있던 값(예: NEXT_PUBLIC_SUPABASE_URL)을 Vercel 프로젝트의 Settings → Environment Variables에 똑같은 이름으로 넣어요. .env 파일은 깃허브에 올라가지 않는 게 정상이라, 여기서 따로 넣어 줘야 해요.
5. 다시 배포하기. 환경 변수는 넣은 뒤 새로 배포해야 적용돼요. Deployments 탭에서 Redeploy를 눌러요.

러버블(Lovable)로 만들었다면

1. 편집 화면 오른쪽 위의 Publish를 누르면 프로젝트이름.lovable.app 주소가 생겨요. 이것만으로도 누구나 들어올 수 있어요.
2. 내 도메인을 붙이고 싶다면 프로젝트 설정의 Domains 메뉴에서 연결해요. 요금제에 따라 유료 플랜이 필요할 수 있어요.
3. 나중에 다른 개발자에게 맡기거나 직접 고치려면 GitHub 연동을 켜 두세요. 코드가 깃허브 저장소로 계속 복사돼서, 그 저장소를 Vercel에 연결하는 방법도 쓸 수 있어요.

볼트(Bolt)·v0로 만들었다면

볼트는 Netlify로, v0는 Vercel로 바로 올리는 배포 버튼이 있어요. 버튼으로 먼저 띄워 보고, 계속 고쳐 나갈 생각이면 코드를 깃허브로 옮겨 두는 게 안전해요.

올렸는데 안 열린다면 여기부터 보세요

• 하얀 화면만 나와요. 브라우저에서 F12를 눌러 Console 탭을 보세요. supabaseUrl is required.처럼 나오면 환경 변수가 빠진 거예요. 위 4번, 5번을 다시 확인해요.
• 새로고침하면 404가 나와요. 리액트 라우터 같은 화면 이동을 쓰는 Vite 프로젝트라면, 모든 주소를 index.html로 보내는 설정이 필요해요. 자세한 방법은 Vercel 배포가 실패할 때 가장 많은 원인 5가지에 정리했어요.
• 빌드 단계에서 빨간 글씨가 나와요. 배포 로그 맨 아래쪽 오류 문장을 복사해서 AI에게 그대로 보여 주는 게 가장 빨라요.

혼자 하기 어려운 신호

아래 중 하나라도 해당되면, 계속 AI에게 맡기기보다 사람이 코드를 한 번 봐 주는 게 시간과 비용을 아끼는 길이에요.

• 같은 오류를 AI에게 다섯 번 넘게 부탁했는데 그대로예요.
• 고치고 나면 다른 기능이 깨지는 일이 반복돼요.
• 로그인, 결제, 회원 정보처럼 남의 정보를 다루는 기능이 들어가 있어요. 배포는 됐는데 다른 사람 정보가 보이면 큰일이에요.
• 배포 비용이나 무료 한도 초과 알림이 갑자기 와요.

막히면 이어서 마무리해 드려요

날다데브는 클로드 코드, 러버블, 커서로 만들다 멈춘 서비스를 지금 만든 그대로 이어받아 고치고 배포해 드려요. 처음부터 다시 만들 필요는 대부분 없어요. 어떤 걸 도와드리는지는 바이브코딩 마무리·배포에서 볼 수 있고, 쓰신 툴과 막힌 화면만 무료 상담 문의로 보내 주시면 돼요. 내 도메인을 붙이는 방법은 내 도메인 연결하기에서 이어서 볼 수 있어요.