바이브코딩으로 만든 앱, 남들에게 링크로 자랑하는 5단계 배포 가이드

바이브코딩 배포가 필요한 순간은 생각보다 빨리 옵니다. 바이브코딩으로 작은 웹사이트를 만들면 처음에는 localhost:3000 같은 주소에서 확인하는데, 이 주소는 내 컴퓨터 안에서만 열립니다. 친구에게 보여주거나, 포트폴리오로 공유하거나, 실제 사용자에게 테스트를 부탁하려면 공개 링크가 필요합니다.

이 글을 따라 하면 내 컴퓨터에서만 보이던 웹사이트를 xxx.vercel.app 같은 공개 링크로 바꿀 수 있습니다. 여러 배포 방법 중 GitHub와 Vercel을 연결하는 방식을 예시로 씁니다. 필요한 준비물은 바이브코딩으로 만든 프로젝트 폴더와 AI 코딩 도구, 그리고 GitHub 계정과 Vercel 계정입니다. 계정은 2단계와 3단계에서 만들거나 로그인하면 됩니다. 이 글은 바이브코딩 첫 프로젝트 다음 단계입니다.

처음부터 도메인, 서버, 배포 자동화까지 다 이해하려고 하면 어렵습니다. 일단은 이 흐름만 잡으면 됩니다.

GitHub에 프로젝트를 올리고, Vercel이 그 프로젝트를 가져와서 인터넷에 띄운다.

이 정도만 이해해도 첫 배포는 충분합니다.

첫 실습과 같은 파일로 배포 준비하기

첫 체크리스트 실습을 했다면 앱을 새로 만들 필요가 없습니다. 네 단계 실습 ZIP을 풀고, deploy/index.html을 별도의 빈 폴더에 복사하세요. 이 파일은 추가·완료·삭제·브라우저 저장이 들어 있는 최종 버전입니다.

같은 파일로 배포 전 확인하기

1. 복사한 index.html을 열어 추가·완료·삭제가 되는지 확인합니다.
2. 이 폴더를 아래 과정에서 사용할 프로젝트로 준비합니다. 파일 하나짜리 정적 웹페이지라면 불필요한 서버나 데이터베이스를 만들 필요가 없습니다.
3. 공개된 주소에서 항목을 넣고 새로고침한 뒤, 다른 브라우저에서도 주소가 열리는지 확인합니다.

같은 최종 파일의 공개 실행 결과 · 전체 실행 방법과 확인표

이 예제는 seoin.dev의 기존 웹서버에 정적 파일로 올려 확인했습니다. 이 자료를 Vercel의 새 프로젝트에 올려 실기기 검증한 기록은 아닙니다. Vercel에서 진행한다면 아래 설명과 현재 공식 배포 안내를 함께 확인하세요.

공유되는 것은 앱입니다. 할 일 목록은 같은 브라우저의 같은 사이트에만 저장됩니다. 내 로컬 주소의 목록이 공개 주소나 다른 사람의 브라우저에 나타나지 않는 것은 정상입니다.

바이브코딩 배포가 필요한 순간

바이브코딩 배포는 로컬에서 만든 웹사이트를 다른 사람이 열 수 있는 공개 링크로 바꿀 때 필요합니다.

배포는 내 컴퓨터에 있는 웹사이트 파일을 인터넷 서버에 올려서, 주소만 알면 누구나 열 수 있게 만드는 일입니다. localhost는 내 컴퓨터 안에서만 열리는 테스트 주소이고, Vercel 같은 배포 서비스에 올리면 인터넷 주소가 생깁니다. 이 차이를 모르면 “분명 내 브라우저에서는 잘 되는데 왜 남들은 못 보지?”에서 막힙니다.

바이브코딩에서 첫 번째 결과물을 만드는 것만큼 중요한 게 이 지점입니다. 결과물이 내 컴퓨터에만 있으면 연습이고, 링크로 공유되기 시작하면 피드백을 받을 길이 열립니다.

바이브코딩 배포 전체 흐름 5단계

이번 글의 바이브코딩 배포 방법은 GitHub와 Vercel을 연결하는 5단계입니다. 아래 표만 봐도 각 단계에서 무엇이 만들어지는지 알 수 있습니다.

단계	하는 일	결과
1	프로젝트 폴더 확인	배포할 파일을 정리
2	GitHub 저장소 생성	코드가 온라인 저장소에 올라감
3	Vercel 가입	GitHub 계정으로 연결 준비
4	Import Git Repository	Vercel이 프로젝트를 가져옴
5	Deploy 후 URL 확인	공개 링크 생성

Vercel 공식 문서에서도 GitHub 저장소를 한 번 연결해두면 그 뒤로는 수정본을 올릴 때마다 배포가 이어지는 구조를 안내합니다. 수정본을 GitHub에 올리는 일을 push라고 부르는데, 이 작업도 AI 코딩 도구에 맡기면 됩니다.

1단계: 배포할 프로젝트 폴더 확인하기

기준 폴더를 먼저 정해두면 이후 단계에서 Vercel이 무엇을 읽어야 하는지 헤매지 않습니다. 이 폴더가 Vercel이 읽을 기준점입니다.

앞 글에서 만든 HTML 체크리스트 앱이라면 index.html이 들어 있는 폴더가 기준입니다. Next.js나 React로 만든 프로젝트라면 package.json이 있는 폴더가 기준입니다. index.html은 웹사이트의 첫 화면 파일이고, package.json은 이 프로젝트에 어떤 도구가 필요한지 적어둔 설정 파일입니다.

어느 폴더가 기준인지 직접 판단하기 어렵다면 AI 코딩 도구에 이렇게 요청하세요. AI가 폴더 구조를 살펴보고 기준 폴더와 올리면 안 되는 파일을 알려줍니다.

이 프로젝트를 Vercel에 배포하려고 해.
배포 기준이 되는 루트 폴더가 어디인지 확인해줘.
GitHub에 올리면 안 되는 파일이 있는지도 같이 확인해줘.

여기서 중요한 건 비밀 값입니다. API 키, 비밀번호, 토큰이 코드 안에 들어 있으면 그대로 인터넷에 올라갑니다. API 키와 토큰은 외부 서비스에 내 자격으로 접속할 때 쓰는 열쇠 같은 문자열입니다.

작은 HTML 앱이면 비밀 값을 쓸 일이 없어 걱정이 적지만, 로그인이나 외부 서비스를 붙인 프로젝트라면 배포 전에 꼭 확인해야 합니다.

2단계: GitHub 저장소에 프로젝트 올리기

2단계를 마치면 내 프로젝트가 인터넷 보관함에 올라가고, Vercel이 그 보관함을 가져갈 수 있습니다. GitHub 저장소(repository)는 Vercel이 가져갈 프로젝트의 온라인 보관함입니다. GitHub는 코드 파일을 온라인에 보관하고 수정 이력을 관리하는 서비스이고, 저장소는 그 안에서 프로젝트 하나가 들어가는 방입니다.

GitHub 공식 문서도 새 저장소를 만들고, README나 파일을 추가하고, commit하는 흐름을 기본 시작점으로 안내합니다. commit은 지금까지 만든 파일 상태를 한 번 저장해서 기록으로 남기는 일입니다.

비개발자라면 명령어를 외우기보다 AI에게 작업 단위를 정확히 맡기는 게 낫습니다. 아래 요청을 AI 코딩 도구에 그대로 붙여 넣고, 저장소 이름만 원하는 이름으로 바꾸면 됩니다. 여기서 정한 이름은 4단계에서 목록에서 프로젝트를 찾을 때 씁니다.

이 폴더를 GitHub 새 repository로 올리고 싶어.
repository 이름은 vibe-checklist로 해줘.

올리기 전에 다음을 확인해줘.
- API key, token, password 같은 비밀 값이 없는지
- node_modules 같은 불필요한 폴더가 올라가지 않는지
- README에 로컬 실행 방법이 적혀 있는지

문제가 없으면 git init, commit, GitHub repository 생성, push까지 진행해줘.
중간에 로그인이나 권한 승인이 필요하면 내가 승인할 수 있게 멈춰줘.

처음에는 이 과정에서 GitHub 로그인, 권한 승인, 저장소 생성 화면이 나오기도 하는데 정상입니다. 파일을 올리는 일은 AI가 하고, 로그인과 승인은 내가 합니다. 한 번 연결해두면 다음부터는 훨씬 짧아집니다.

3단계: Vercel에 가입하고 GitHub로 로그인하기

Vercel은 GitHub 계정으로 가입하면 이후 연결이 편합니다. 저장소 권한 승인까지 한 흐름으로 이어지기 때문입니다. Vercel은 GitHub에 올린 코드를 인터넷에 띄워주는 배포 서비스입니다.

Vercel 가입 화면에서 GitHub로 계속 진행하면 됩니다.

이 단계에서 새 계정을 또 만드는 느낌이 들 수도 있지만 구조는 단순합니다. GitHub는 코드를 보관하고, Vercel은 그 코드를 인터넷에 띄웁니다. 둘을 연결해두면 이후에는 GitHub에 수정본을 올릴 때마다 Vercel 배포가 이어집니다.

4단계: Import Git Repository에서 프로젝트 선택하기

이 단계에서 Vercel에게 어떤 저장소를 가져올지 알려줍니다. Vercel 대시보드에서 Add New 또는 New Project를 눌러 GitHub 저장소를 가져옵니다. 목록에 2단계에서 만든 저장소(예시에서는 vibe-checklist)가 보이면 Import를 누르면 됩니다.

원하는 저장소가 안 보이면 Adjust GitHub App Permissions를 눌러 권한을 추가합니다. Vercel이 내 GitHub의 어떤 저장소를 읽을 수 있는지 정하는 과정입니다. 모든 저장소 권한을 열기보다, 이번 프로젝트 하나만 선택하는 편이 좋습니다.

권한을 추가하면 다시 Import 화면에서 프로젝트가 보입니다.

5단계: Deploy 버튼 누르고 공개 URL 확인하기

이 단계를 마치면 다른 사람에게 바로 보낼 수 있는 공개 URL이 생깁니다. 설정이 특별히 필요 없는 간단한 웹사이트라면 기본값 그대로 Deploy를 눌러도 됩니다.

Next.js 같은 프레임워크는 Vercel이 자동으로 감지하는 경우가 많습니다. 프레임워크는 웹사이트를 만들 때 쓰는 기본 뼈대 도구를 말합니다. HTML 파일 중심의 정적 사이트라면 파일을 변환하는 빌드 과정 없이 그대로 배포합니다.

배포가 끝나면 Vercel에 공개 URL이 생깁니다. 이 URL을 브라우저에서 열어 실제 화면이 보이는지 확인합니다.

확인할 것은 네 가지입니다.

1. 공개 URL이 열리는가
2. 내가 만든 화면이 보이는가
3. 모바일에서도 크게 깨지지 않는가
4. 개인정보나 테스트용 문구가 그대로 노출되지 않는가

여기까지 되면 첫 Vercel 배포는 끝입니다.

공유한 링크가 다른 사람에게 안 열릴 때 확인하는 순서

배포 완료 화면에서 주소가 생겼더라도 그 주소가 바로 공유용 주소라는 뜻은 아닙니다. 먼저 공유한 주소 전체를 복사해 로그인하지 않은 브라우저 창에서 여세요. 그다음 보이는 화면을 아래 네 가지 중 하나로 나누면 다음 확인 위치가 정해집니다.

로그인 없는 창에서 보이는 화면	먼저 확인할 것	다음 행동
내가 만든 앱	주소는 외부에서 열림	추가·완료·삭제처럼 꼭 필요한 동작과 모바일 화면을 확인
404 또는 찾을 수 없음	주소 오타, 삭제된 배포, 잘못된 경로	Vercel 프로젝트의 Overview 또는 Deployments에서 현재 URL을 다시 복사
Vercel 로그인·권한 요청	Deployment Protection 또는 공유 권한	프로젝트 Settings > Deployment Protection에서 공유 대상과 보호 범위를 확인
이전 문구·이전 화면	preview 주소와 production domain 혼동, 최신 배포 미반영	최신 production 배포와 프로젝트의 공유용 domain을 확인

Vercel은 배포마다 고유 URL을 만들 수 있고, production domain은 최신 production 배포를 가리킵니다. 보호 설정을 켜면 URL을 알고 있어도 로그인이나 권한이 필요할 수 있습니다. 그래서 “내 브라우저에서 열린다”만으로는 외부 공개를 확인할 수 없습니다. 로그인 쿠키가 없는 창에서 같은 주소를 다시 여는 이유가 여기에 있습니다.

이 글의 공개 체크리스트 샘플은 회원가입 없이 화면이 열리도록 만든 예입니다. 다만 앱 화면이 공개된 것과 내 할 일 목록이 공유되는 것은 다릅니다. 이 예제의 목록은 같은 사이트를 연 같은 브라우저에 저장되므로, 다른 사람의 브라우저에는 내 목록이 나타나지 않는 것이 정상입니다.

공유 전에 마지막으로 주소, 로그인 없는 접근, 핵심 동작, 모바일 화면, 비밀 값과 테스트 문구 다섯 가지만 확인하세요. 실패했다면 상대에게 “안 열려요”라는 말만 받기보다 주소와 보인 화면의 종류를 확인하되, 로그인 정보나 보호용 비밀값을 보내 달라고 요청하지 마세요.

공식 확인: Vercel Generated URLs·Deployment Protection·Vercel Authentication·Domains 문서, 2026년 9월 18일 확인. 새 Vercel 프로젝트를 만들어 배포한 실기 기록은 아니며, 기존 공개 샘플의 로그인 없는 렌더만 Orca에서 확인했습니다.

수정한 뒤 다시 배포하는 방법

수정할 때는 로컬에서 고치고, GitHub에 push하면 Vercel이 다시 배포하는 흐름으로 반복합니다. 매번 Vercel 화면에서 프로젝트를 새로 만들 필요가 없어서, 두 번째 배포부터는 훨씬 빨라집니다.

처음 배포가 끝나면 다음부터가 더 중요합니다. 웹사이트는 한 번 올리고 끝나는 게 아니라, 계속 고치게 됩니다.

고칠 내용을 말하면서 commit과 push까지 함께 맡기면 됩니다. 아래는 헤더 문구와 모바일 여백을 고치는 요청 예시입니다.

방금 배포한 Vercel 프로젝트를 수정하려고 해.
헤더 문구를 "오늘의 체크리스트"로 바꾸고,
모바일에서 버튼이 너무 붙어 보이지 않게 여백을 조정해줘.

수정 후 로컬에서 확인하고,
문제가 없으면 commit, push까지 해줘.
Vercel 배포가 완료되면 공개 URL에서 다시 확인할 수 있게 알려줘.

여기서 핵심은 commit, push입니다. GitHub에 변경 사항이 올라가면 Vercel이 그 변경 사항을 보고 새 배포를 만듭니다. 바이브코딩 배포 흐름을 한 번 익히면, 이후에는 “수정하고 링크 갱신하기”가 하나의 루프가 됩니다.

GitHub가 어려울 때 쓰는 Vercel Drop

GitHub가 너무 어렵다면 Vercel Drop으로 폴더를 끌어다 놓는 방법도 있습니다. 브라우저에 폴더를 드래그해서 올리는 방식이라 첫 실험에는 편합니다.

Vercel 공식 문서에는 Git, Vercel Drop, CLI, Deploy Hooks, REST API 같은 여러 배포 방법이 정리되어 있습니다.

다만 저는 바이브코딩 시리즈에서는 GitHub 연결 방식을 먼저 추천합니다. 한 번 만든 웹사이트는 반드시 수정하게 되기 때문입니다. 폴더를 매번 끌어다 놓는 것보다, GitHub에 수정본을 올리고 Vercel이 자동으로 다시 배포하는 흐름이 장기적으로 덜 헷갈립니다.

터미널에 익숙할 때 쓰는 Vercel CLI

터미널을 쓰면 브라우저 화면을 오가지 않고 한자리에서 배포를 끝낼 수 있습니다. 터미널은 컴퓨터에 명령을 글로 입력하는 창이고, Vercel CLI는 그 창에서 Vercel 배포를 다루는 도구입니다.

Vercel 공식 문서에서는 CLI로 로컬 프로젝트를 Vercel 프로젝트에 연결하고, preview 배포와 production 배포까지 진행하는 흐름을 안내합니다. preview 배포는 공개 전에 결과를 먼저 확인하는 배포이고, production 배포는 실제 공유용 주소에 올리는 배포입니다.

명령어를 직접 외울 필요는 없습니다. AI 코딩 도구에 이렇게 요청하면 연결부터 production 배포까지 대신 처리합니다.

Vercel CLI로 이 프로젝트를 배포해줘.
지금 폴더를 Vercel 프로젝트에 연결한 다음,
먼저 preview 배포를 만들고 확인할 URL을 알려줘.
확인이 끝나면 production 배포까지 진행해줘.
중간에 로그인이나 팀 선택이 필요하면 내가 승인할 수 있게 멈춰줘.

다만 CLI를 쓴다고 해서 가입이 없어지는 것은 아닙니다. Vercel 계정 로그인은 필요하고, 처음 실행할 때는 브라우저 로그인이나 팀과 프로젝트를 선택하는 과정을 거칩니다. 그래서 비개발자에게 처음부터 추천할 방식은 아닙니다.

하지만 이미 터미널과 Claude Code를 쓰고 있다면 CLI 방식이 더 자연스러울 수 있습니다. 브라우저에서 클릭하는 대신, AI에게 “Vercel CLI로 preview 배포하고 URL 확인해줘”라고 맡길 수 있기 때문입니다.

세 가지 방법 중 무엇을 고를지는 상황으로 판단하면 됩니다.

상황	추천하는 방법
처음 한 번만 공개 링크를 만들 때	Vercel Drop
계속 수정할 프로젝트일 때	GitHub 연동
터미널 작업이 익숙할 때	Vercel CLI

배포 전에 꼭 확인할 것

Vercel 배포 전에 확인할 것은 기능, 보안, 모바일, 공개 URL입니다. 작은 체크리스트 앱이어도 인터넷에 올리는 순간부터는 “내 컴퓨터 안의 장난감”이 아닙니다.

최소한 이 정도는 확인합니다.

• 비밀번호, API 키, 토큰이 코드에 들어 있지 않은가
• 삭제하면 안 되는 개인 파일이 저장소에 들어가지 않았는가
• 모바일 화면에서 버튼과 글자가 겹치지 않는가
• 테스트 문구나 임시 이미지가 그대로 남아 있지 않은가
• 공개 URL을 시크릿 모드에서도 열 수 있는가

시크릿 모드는 내 로그인 정보 없이 브라우저를 여는 기능이라, 다른 사람이 보게 될 화면과 가장 가깝습니다.

저는 이 체크를 배포 전 루틴으로 두는 편이 좋다고 봅니다. 바이브코딩은 빠르게 만들 수 있다는 장점이 있지만, 빠르게 공개할수록 사람이 확인해야 하는 것도 생깁니다.

다음 글에서 만들 포트폴리오 사이트

다음 글에서는 단순 체크리스트 앱이 아니라, Claude Design과 Claude Code를 이용해 포트폴리오 사이트를 만드는 흐름으로 넘어갑니다.

이번 글에서 배포를 먼저 분리한 이유가 있습니다. 포트폴리오 사이트를 만들 때도 결국 마지막 질문은 같습니다.

“이걸 다른 사람이 볼 수 있는 링크로 어떻게 만들지?”

그 답이 바이브코딩 배포이고, 이 글에서는 그 예시로 Vercel을 썼습니다.

먼저 바이브코딩 시작 가이드에서 전체 순서를 보고, 개념이 헷갈리면 바이브코딩 뜻 정리를 다시 보면 됩니다.

자주 묻는 질문

참고 자료

• Vercel Deployments
• Vercel Git 연동 문서
• Vercel CLI
• Deploying Projects from Vercel CLI
• GitHub Repository Quickstart

실습 자료 확인: 2026년 9월 7일, 버전 1.0.0. 데스크톱 브라우저와 390px 화면에서 기능을 검사했습니다. 확인 항목과 환경은 실습 검증 기록에 있습니다. 실제 초보자 관찰이나 Windows 실기기 검증 결과는 포함하지 않습니다.

검증 기준

• 마지막 업데이트일: 2026-09-07
• 확인 환경: 기존 공개 글에 재현 실습과 안내를 추가했습니다. macOS의 Orca 내장 Chromium에서 실습을 실행하고 데스크톱·390px 화면을 확인했습니다. 실제 초보자 관찰, Windows 실기기, 새 Vercel 프로젝트 배포 결과는 포함하지 않습니다.
• 주요 근거: WordPress 글 상태·날짜 문서 · MDN 브라우저 저장소 · Vercel 배포 문서