AI가 만들어준 사이트, 실제로 인터넷에 올리는 방법 — 바이브코딩 배포편

ChatGPT나 Claude한테 "내 포트폴리오 사이트 만들어줘"라고 했더니 HTML이랑 CSS 파일을 뽑아줬다. 파일을 열어보면 내 컴퓨터에서는 잘 보인다. 근데 이걸 어떻게 인터넷에 올리지?

이 질문으로 검색하다가 이 글에 들어온 거라면 제대로 찾아온 거다.

결론부터 말하면: GitHub 계정 하나 만들고, Vercel이나 Cloudflare Pages에 연결하면 끝이다. 비용은 0원이고, 세팅은 30분이면 된다. 한 번만 해두면 파일 수정할 때마다 자동으로 사이트가 업데이트된다.

 

---

 

먼저 이해해야 할 것: 정적 사이트란 무엇인가

 

"정적 사이트"라는 말이 낯설 수 있다.

AI한테 홈페이지를 만들어달라고 하면 보통 이런 파일들이 나온다:

• index.html — 페이지의 뼈대
• style.css — 디자인
• script.js — 움직이는 것들 (있을 수도, 없을 수도 있음)

이 파일들은 그냥 문서다. 서버가 별도로 뭔가를 처리하지 않는다. 방문자 브라우저에서 파일을 읽어서 보여주면 끝이다. 이걸 정적 사이트라고 부른다.

반대로 로그인 기능, 댓글 기능, 결제 같은 건 서버가 처리해야 한다. 그건 "동적 사이트"다. AI 바이브코딩으로 만든 결과물 대부분은 정적 사이트 범주에 들어가기 때문에, 이 글에서 다루는 방법으로 배포할 수 있다.

어떻게 구분하냐고? 간단하다. AI가 만들어준 파일 목록에 .html, .css, .js만 있으면 정적이다. package.json이 있거나 "npm install 하세요"라는 말이 나오면 조금 다른 얘기인데, 그건 이 글 마지막 부분에서 따로 다룬다.

 

---

 

배포 서비스 선택: Vercel vs Cloudflare Pages vs GitHub Pages

 

세 가지 모두 무료로 정적 사이트를 올릴 수 있다. 차이를 표로 먼저 보자.

VercelCloudflare PagesGitHub Pages

 

무료 플랜	✅	✅	✅
커스텀 도메인	✅ (무료)	✅ (무료)	✅ (무료)
속도	빠름	매우 빠름	보통
설정 난이도	쉬움	쉬움	중간
배포 자동화	✅	✅	✅
한국 서버	없음	있음 (CDN)	없음

처음이라면 Vercel 추천. UI가 가장 직관적이고, 에러가 나도 원인을 찾기 쉽다. Cloudflare Pages는 속도가 좀 더 빠른데, 첫 배포 경험으로는 Vercel이 더 낫다.

GitHub Pages는 무료이고 안정적인데, 설정이 조금 더 복잡하고 배포 속도(코드 올리고 실제 반영까지)가 느릴 수 있다.

이 글은 Vercel 기준으로 설명하고, Cloudflare Pages 차이점은 따로 짚는다.

 

---

 

필요한 것 두 가지

 

1. GitHub 계정 — github.com에서 무료 가입
2. Vercel 계정 — vercel.com에서 GitHub 계정으로 가입

GitHub는 코드를 올려두는 창고라고 생각하면 된다. Vercel은 그 창고에서 파일을 꺼내 인터넷에 올려주는 역할이다. 이 둘을 연결하는 게 이 작업의 전부다.

 

---

 

1단계: 파일을 GitHub에 올리기

GitHub에서 새 저장소(Repository) 만들기

저장소는 파일을 넣어두는 폴더라고 보면 된다.

1. github.com 로그인 후 오른쪽 상단 + 버튼 클릭
2. New repository 선택
3. Repository name에 원하는 이름 입력 (예: my-portfolio, company-site)
   • 영문 소문자, 하이픈만 쓰는 게 관례다. 한글이나 공백은 안 된다.
4. Public 선택 (Private도 되지만 무료 플랜에서 Vercel 연동이 편한 게 Public)
5. Add a README file 체크 (있으면 나중에 편하다)
6. Create repository 클릭

파일 올리기

저장소가 만들어지면 파일 목록 화면이 나온다.

방법 A — 드래그 앤 드롭 (가장 쉬움):

1. Add file 버튼 클릭 → Upload files 선택
2. AI가 만들어준 파일들을 드래그해서 올린다
3. 아래 Commit changes 버튼 클릭

파일이 폴더 구조로 돼 있다면 (예: css/style.css, js/script.js 등) 폴더째로 드래그해도 된다.

방법 B — GitHub Desktop 앱 사용: Git 명령어가 낯설면 GitHub Desktop(desktop.github.com)을 설치하면 드래그 앤 드롭으로 관리할 수 있다. 파일을 수정하고 다시 올릴 때도 편하다.

파일이 잘 올라갔으면 저장소 화면에서 index.html이 보여야 한다.

 

---

 

2단계: Vercel에 연결하기

1. vercel.com 접속 → Sign Up → Continue with GitHub
2. GitHub 계정으로 로그인 승인
3. Vercel 대시보드에서 Add New → Project 클릭
4. 방금 만든 GitHub 저장소가 목록에 보인다. Import 클릭
5. 설정 화면이 나오는데, 아무것도 건드리지 말고 그냥 Deploy 클릭

그러면 Vercel이 알아서 파일을 읽고 사이트를 만든다. 1~2분 후 yourproject.vercel.app 같은 주소로 사이트가 살아있다.

이게 전부다.

 

---

 

3단계: 파일 수정하면 자동으로 반영된다

 

여기서부터가 이 방식의 진짜 장점이다.

AI한테 "버튼 색깔 바꿔줘", "이 문장 고쳐줘"라고 해서 수정된 파일을 받으면:

1. GitHub에 접속
2. 해당 파일 클릭 → 연필 아이콘(Edit) 클릭 → 내용 수정 → Commit changes 또는 GitHub Desktop으로 파일 교체 후 올리기
3. 자동으로 Vercel이 감지해서 새로 배포

따로 버튼 누를 필요 없다. GitHub에 파일이 올라가는 순간 1~2분 내로 사이트가 업데이트된다.

 

---

커스텀 도메인 연결하기 (선택)

 

myname.vercel.app 대신 myname.com 같은 주소를 쓰고 싶다면 도메인을 구매해야 한다. 도메인 자체는 유료(보통 연 1~2만원)지만, Vercel에 연결하는 건 무료다.

도메인은 가비아, 닷홈, Namecheap, Cloudflare Registrar 등에서 살 수 있다.

연결 방법:

1. Vercel 프로젝트 → Settings → Domains
2. 구매한 도메인 입력 → Add
3. Vercel이 알려주는 DNS 설정값을 도메인 구매처에서 입력

도메인 회사마다 화면이 다르지만, 대부분 "DNS 관리" 또는 "네임서버 설정" 메뉴에서 할 수 있다. Vercel이 화면에 정확히 어떤 값을 입력하라고 안내해준다.

 

---

 

Cloudflare Pages로 하는 경우

 

과정은 Vercel과 거의 동일하다. GitHub 저장소를 연결하고 배포하는 흐름이 같다.

pages.cloudflare.com 접속 → Create a project → GitHub 연결 → 저장소 선택 → Save and Deploy

다른 점:

• 무료 플랜 트래픽 제한이 Vercel보다 여유 있다 (Cloudflare Pages는 무제한, Vercel 무료는 월 100GB)
• 속도가 한국에서 조금 더 빠른 편 (Cloudflare CDN 인프라 덕분)
• UI가 Vercel보다 약간 복잡하게 느껴질 수 있음

트래픽이 많이 예상된다면 처음부터 Cloudflare Pages로 가는 게 낫다.

 

---

 

AI 결과물이 HTML 파일이 아닌 경우

 

AI한테 사이트를 만들어달라고 했을 때 이런 말이 나오면:

• "npm install 하고 npm run dev 하세요"
• "Node.js 설치가 필요합니다"
• package.json 파일이 있음

이건 React, Vue, Next.js 같은 프레임워크 기반 프로젝트다. 단순 HTML보다 한 단계 복잡한데, 그래도 Vercel이 자동으로 처리해줘서 배포 과정 자체는 비슷하다.

Vercel은 이런 프레임워크를 자동으로 감지해서 빌드한다. 저장소 연결 → Deploy 누르면 알아서 된다. 다만 오류가 생길 경우 원인 파악이 어려울 수 있으니, 이 경우엔 AI한테 "Vercel에 배포하려는데 오류가 났다"고 로그를 보여주면 해결해준다.

 

---

한 번만 세팅해두면 계속 쓴다

처음 한 번 GitHub 저장소 만들고 Vercel 연결하는 게 어색해서 그렇지, 두 번째부터는 5분이면 새 사이트를 올릴 수 있다.

실제로 이 방식이 자리잡으면:

• AI한테 코드 받는다
• GitHub에 올린다
• 사이트가 자동으로 업데이트된다

이게 반복되면 "AI로 만든 걸 어떻게 올리지?"라는 질문 자체를 안 하게 된다.

무료 호스팅 업체가 사업을 접어서 사이트가 날아갈 일도 없다. GitHub에 파일이 있는 한 언제든 다른 서비스로 옮길 수 있다. 데이터가 내 손에 있다는 게 서비스형 블로그 플랫폼과 결정적으로 다른 점이다.