바이브 코딩으로 웹사이트 만들고 GitHub + Cloudflare로 실제 서비스하는 법 2026

바이브 코딩으로 웹사이트 만들고 GitHub + Cloudflare로 실제 서비스하는 법 2026

📅 2026년 1월  |  ⏱️ 읽는 시간 약 15분  |  🏷️ 바이브코딩, GitHub, Cloudflare, 웹사이트배포, 무료호스팅

💡 이 글에서 얻을 수 있는 것
Claude로 웹사이트 코드를 만들었는데, 이걸 실제 서비스로 올리는 방법을 모르셨나요? 이 글에서는 Claude로 웹사이트 제작 → GitHub으로 코드 관리 → Cloudflare Pages로 무료 배포 → 커스텀 도메인 연결까지 전 과정을 비개발자도 따라할 수 있도록 단계별로 안내합니다. 서버 비용 0원으로 실제 서비스를 운영할 수 있습니다.

📋 목차

1. 전체 흐름 한눈에 보기
2. Claude로 웹사이트 만들기
3. GitHub 계정 만들기
4. GitHub에 코드 올리기
5. Cloudflare 계정 만들기
6. Cloudflare Pages로 배포하기
7. 커스텀 도메인 연결하기
8. 코드 수정 → 자동 배포하기
9. 운영 꿀팁
10. 정리

1. 전체 흐름 한눈에 보기

먼저 전체 과정을 머릿속에 그려봅니다. 복잡해 보이지만 각 단계는 생각보다 간단합니다.

1. Claude → 웹사이트 코드 생성
2. 내 PC → 파일로 저장
3. GitHub → 코드 업로드 (버전 관리 + 백업)
4. Cloudflare Pages → GitHub 연결 → 자동 배포
5. 도메인 → 커스텀 주소 연결 (선택)
6. 이후 수정 → GitHub 업로드만 하면 자동 반영

서비스	역할	비용
Claude	코드 생성	무료 플랜 가능
GitHub	코드 저장 및 버전 관리	무료
Cloudflare Pages	웹사이트 호스팅 및 배포	무료
도메인	커스텀 주소	연 1~3만원 (선택사항)

💡 도메인을 구매하지 않아도 Cloudflare가 제공하는 프로젝트명.pages.dev 주소를 무료로 사용할 수 있습니다.

2. Claude로 웹사이트 만들기

먼저 서비스할 웹사이트 코드를 Claude로 만듭니다. 이미 만들어둔 코드가 있다면 이 단계는 건너뛰어도 됩니다.

예제 프롬프트 – 포트폴리오 사이트

"HTML, CSS, JavaScript로 1페이지 포트폴리오 웹사이트를 만들어줘. 섹션 구성: 1. 상단 히어로: 이름, 직함, 간단한 소개 2. 소개 섹션: 나에 대한 설명 3. 스킬 섹션: 카드 형태로 기술 목록 4. 프로젝트 섹션: 카드 3개 (이미지, 제목, 설명, 링크 버튼) 5. 연락처 섹션: 이메일, SNS 링크 디자인: - 다크모드 (짙은 남색 배경) - 네온 민트 포인트 컬러 - 스크롤 시 부드러운 애니메이션 - 모바일 반응형 필수 조건: - index.html 하나의 파일로 완성 - 외부 라이브러리 CDN 사용 가능 - 실제 텍스트 자리에 [이름], [직함] 같은 플레이스홀더 사용"

파일로 저장하기
Claude가 코드를 생성하면:

1. 코드 블록 복사
2. 메모장(Windows) 또는 텍스트 편집기(Mac) 열기
3. 붙여넣기
4. 다른 이름으로 저장 → 파일명: index.html
5. 저장 위치: 바탕화면에 my-website 폴더 만들어서 저장

✅ 바탕화면의 index.html을 더블클릭하면 브라우저에서 미리보기 가능합니다.

💡 여러 파일이 필요한 경우: CSS, JS를 별도 파일로 분리하고 싶다면 Claude에게 "CSS는 style.css, JavaScript는 script.js 파일로 분리해줘"라고 요청하세요. 모든 파일을 같은 my-website 폴더에 저장하면 됩니다.

3. GitHub 계정 만들기

GitHub은 코드를 저장하고 버전을 관리하는 서비스입니다. 개발자들의 구글 드라이브라고 생각하면 됩니다.

STEP 1
github.com 접속 → Sign up 클릭

STEP 2
이메일, 비밀번호, 사용자명 입력 후 계정 생성
사용자명은 나중에 사용자명.github.io 주소로 사용되니 신중하게 정하세요.

STEP 3
이메일 인증 완료 → GitHub 대시보드 접속 확인

4. GitHub에 코드 올리기

코드를 GitHub에 올리는 방법은 두 가지입니다. 비개발자에게는 웹 브라우저로 업로드하는 방법을 추천합니다.

방법 A. 브라우저에서 직접 업로드 (추천)

STEP 1 – 저장소(Repository) 만들기
GitHub 로그인 → 우측 상단 + → New repository

• Repository name: my-website (원하는 이름)
• Public 선택 (Cloudflare 무료 배포를 위해 필수)
• Add a README file 체크
• Create repository 클릭

STEP 2 – 파일 업로드
저장소 페이지에서 Add file → Upload files 클릭
my-website 폴더 안의 파일들을 드래그 앤 드롭

STEP 3 – 커밋(저장)
하단 Commit changes 버튼 클릭
커밋 메시지는 첫 번째 업로드 또는 initial commit 입력

✅ GitHub 저장소에 파일이 올라가면 준비 완료입니다.

방법 B. GitHub Desktop 사용 (파일 관리가 많을 때)

설치 및 사용
desktop.github.com에서 GitHub Desktop 설치
로그인 → 저장소 Clone → 파일 수정 → Commit → Push
이 방법은 파일이 많거나 자주 수정할 때 더 편리합니다.

5. Cloudflare 계정 만들기

Cloudflare는 전 세계 수백 개의 서버를 통해 웹사이트를 빠르고 안정적으로 제공하는 서비스입니다. Cloudflare Pages를 사용하면 GitHub 저장소와 연결해서 무료로 웹사이트를 배포할 수 있습니다.

STEP 1
cloudflare.com 접속 → Sign up

STEP 2
이메일, 비밀번호 입력 → 계정 생성 → 이메일 인증

STEP 3
로그인 후 Cloudflare 대시보드 확인

💡 Cloudflare Pages 무료 플랜 제공 내용:
· 무제한 사이트 수
· 월 500회 빌드
· 무제한 대역폭
· 무료 SSL(HTTPS) 자동 적용
· 전 세계 CDN 자동 적용

6. Cloudflare Pages로 배포하기

STEP 1 – Pages 메뉴 진입
Cloudflare 대시보드 → 좌측 메뉴 → Workers & Pages → Pages 탭 → Create a project

STEP 2 – GitHub 연결
Connect to Git 선택 → GitHub 계정 연동 허용
처음 연결 시 GitHub 권한 허용 팝업이 나타납니다. Authorize Cloudflare Pages 클릭

STEP 3 – 저장소 선택
아까 만든 my-website 저장소 선택 → Begin setup

STEP 4 – 빌드 설정
HTML/CSS/JS만 있는 정적 사이트의 경우 빌드 설정이 필요 없습니다.

• Framework preset: None
• Build command: 비워두기
• Build output directory: 비워두기 (또는 /)

Save and Deploy 클릭

STEP 5 – 배포 완료 확인
1~2분 후 배포가 완료되면 아래와 같은 주소가 생성됩니다.

https://my-website-abc.pages.dev

이 주소로 접속하면 전 세계 어디서나 내 웹사이트를 볼 수 있습니다.

✅ 무료 HTTPS, 전 세계 CDN이 자동 적용된 상태로 배포 완료입니다!

7. 커스텀 도메인 연결하기

my-website.pages.dev 대신 www.내도메인.com을 사용하고 싶다면 도메인을 구매하고 연결합니다.

도메인 구매

서비스	특징	가격 (연)
가비아 (gabia.com)	국내 서비스, 한국어 지원	.com 약 1.5만원
Namecheap	해외 서비스, 저렴함	.com 약 $10
Cloudflare Registrar	원가 도메인, Cloudflare 연동 편리	.com 약 $10

💡 Cloudflare에서 직접 도메인을 구매하면 DNS 설정이 자동으로 연결되어 가장 편리합니다.

Cloudflare Pages에 도메인 연결

STEP 1
Cloudflare Pages → 내 프로젝트 → Custom domains 탭 → Set up a custom domain

STEP 2
구매한 도메인 입력 (예: www.mydomain.com) → Continue

STEP 3 – DNS 설정
도메인을 Cloudflare에서 구매했다면 자동 설정됩니다.
다른 곳에서 구매했다면 도메인 구매처 DNS 설정에서 아래를 추가합니다.

타입: CNAME 이름: www 값: my-website-abc.pages.dev

STEP 4
DNS 전파까지 최대 24시간 소요. 보통 10~30분 안에 적용됩니다.
적용 후 https://www.mydomain.com으로 접속하면 내 웹사이트가 열립니다.

8. 코드 수정 → 자동 배포하기

Cloudflare Pages의 가장 큰 장점은 GitHub에 파일을 올리기만 하면 자동으로 배포된다는 것입니다.

Claude에서 코드 수정 → 새 코드 복사
index.html 파일 업데이트 → 저장
GitHub 저장소 → 파일 업로드 (Upload files)
Cloudflare Pages → 자동 감지 → 자동 배포 (1~2분)
웹사이트 → 새로고침하면 바로 반영

브라우저에서 파일 수정하는 방법

방법 1 – GitHub 웹에서 직접 수정
GitHub 저장소 → 파일 클릭 → 우측 상단 ✏️ 편집 아이콘 → 수정 → Commit changes
간단한 텍스트 수정에 적합합니다.

방법 2 – 파일 재업로드
Claude에서 수정된 전체 코드를 받아 → 로컬 파일 업데이트 → GitHub에 재업로드
코드 전체를 교체할 때 사용합니다.

✅ GitHub에 올리면 Cloudflare가 자동으로 감지해서 1~2분 안에 배포 완료됩니다.

9. 운영 꿀팁

팁 1. Cloudflare Analytics로 방문자 확인

Cloudflare Pages → 프로젝트 → Analytics 탭에서 방문자 수, 접속 국가, 인기 페이지를 무료로 확인할 수 있습니다. 별도 설정 없이 자동으로 수집됩니다.

팁 2. HTTPS는 자동 적용

Cloudflare Pages는 SSL 인증서를 자동으로 발급하고 갱신합니다. http://로 접속해도 자동으로 https://로 리다이렉트됩니다.

팁 3. 배포 히스토리로 롤백 가능

실수로 잘못된 코드를 올렸을 때 걱정하지 마세요. Cloudflare Pages → Deployments 탭에서 이전 버전으로 언제든지 롤백할 수 있습니다.

팁 4. Claude에게 유지보수 요청하기

"기존 웹사이트 코드야. 여기에 문의하기 폼 섹션을 추가해줘: [기존 코드 붙여넣기]" "모바일에서 메뉴가 이상하게 보여. 아래 코드를 수정해줘: [문제 있는 코드 붙여넣기]"

팁 5. GitHub 커밋 메시지로 변경 내역 관리

파일을 올릴 때 커밋 메시지를 구체적으로 적으면 나중에 어떤 변경을 했는지 확인할 수 있습니다.

좋은 예: "연락처 섹션 이메일 주소 수정" "모바일 메뉴 버그 수정" "프로젝트 카드 3개 추가" 나쁜 예: "수정" "업데이트"

10. 정리

• Claude로 웹사이트 코드 생성 완료
• index.html 파일로 저장
• GitHub 계정 생성
• GitHub 저장소(Repository) 생성
• 파일 업로드 및 커밋
• Cloudflare 계정 생성
• Cloudflare Pages에서 GitHub 연결
• 배포 완료 및 .pages.dev 주소 확인
• 커스텀 도메인 연결 (선택)
• 코드 수정 → GitHub 업로드 → 자동 배포 확인

항목	내용
총 비용	도메인 제외 시 완전 무료
배포 속도	GitHub 업로드 후 1~2분
HTTPS	자동 적용
전 세계 CDN	자동 적용
방문자 제한	없음 (무료 플랜)
코딩 필요 여부	없음 (Claude가 전부 생성)

이제 Claude로 만든 웹사이트를 실제 서비스로 운영할 수 있는 환경이 갖춰졌습니다. 아이디어가 있다면 오늘 바로 첫 번째 웹사이트를 만들어보세요. 코딩을 몰라도, 서버 지식이 없어도 충분합니다.

📌 바이브 코딩으로 실제 서비스를 만들어보고 싶으신가요?
구독하시면 실전 예제와 운영 노하우를 매주 무료로 받아보실 수 있습니다.