처음 만든 홈페이지, 이렇게 배포하세요! 바이브코딩 초보에게 가장 쉬운 방법
“내가 만든 홈페이지를 친구도 볼 수 있게 하려면 어떻게 해야할까?”
바이브코딩으로 홈페이지를 처음 완성하면 다음 단계는 배포(Deploy)입니다.
배포란 내 컴퓨터에만 있던 HTML, CSS, JavaScript 파일을 인터넷에 올려 다른 사람도 주소를 통해 접속할 수 있게 만드는 과정입니다.
초보자에게는 서버, 도메인, 호스팅 같은 용어가 어렵게 느껴질 수 있습니다.
하지만 간단한 정적 홈페이지라면 생각보다 쉽게 공개할 수 있습니다.
현재 GitHub Pages는 GitHub 저장소의 HTML·CSS·JavaScript 파일을 정적 사이트로 공개할 수 있고, Netlify Drop은 프로젝트 폴더나 ZIP 파일을 드래그앤드롭하는 방식으로 배포할 수 있습니다.
Vercel도 정적 사이트 배포와 Git 연동을 지원합니다.
바이브코딩 첫 프로젝트라면 복잡한 서버부터 공부하기보다 작동하는 홈페이지 하나를 인터넷 주소로 공개하는 경험부터 해보는 것이 좋습니다.
먼저 내 홈페이지가 ‘정적 사이트’인지 확인하세요
처음 만든 홈페이지가 다음 파일 위주라면 배포가 비교적 간단합니다.
index.html
style.css
script.js
images 폴더
HTML·CSS·JavaScript만으로 만들어진 포트폴리오, 퀴즈, 메모장, 계산기 같은 프로젝트를 말합니다.
GitHub Pages는 저장소의 HTML·CSS·JavaScript 같은 정적 파일을 웹사이트로 게시하는 서비스입니다.
반대로 서버에서 처리해야 하는 로그인, 데이터베이스, 비밀 API 키 등이 들어간 서비스라면 배포 방법이 조금 더 복잡해질 수 있습니다.
첫 배포는 서버가 필요 없는 작은 홈페이지로 경험하는 것이 가장 쉽습니다.
배포 전에 index.html 위치부터 확인하세요
초보자가 자주 놓치는 부분입니다.
프로젝트 폴더를 열었을 때 시작 페이지인 index.html을 쉽게 찾을 수 있도록 정리해 두는 것이 좋습니다.
예를 들면 다음과 같습니다.
my-homepage
index.html
style.css
script.js
images
정적 사이트 배포 서비스는 프로젝트 구조를 기준으로 시작 파일과 연결된 리소스를 찾습니다.
경로가 잘못되면 홈페이지는 열리지만 CSS나 이미지가 나오지 않을 수 있습니다.
배포하기 전 로컬 환경에서 새로고침하며 모든 파일이 정상적으로 연결되는지 확인하세요.
가장 단순한 방법은 드래그앤드롭 배포입니다
Git을 아직 배우지 않았다면 드래그앤드롭 방식이 편합니다.
Netlify Drop은 사이트 파일이 들어 있는 프로젝트 폴더를 배포 영역에 드래그해서 웹에 게시할 수 있도록 안내하고 있습니다.
현재 Netlify Drop 화면에서는 프로젝트 폴더, ZIP 파일 또는 단일 HTML 파일을 드래그해서 배포할 수도 있습니다.
기본 흐름은 간단합니다.
- 프로젝트 준비
- 배포 서비스에 로그인
- 프로젝트 폴더 또는 준비된 파일 업로드
- 배포 실행
- 생성된 주소로 접속
이 과정을 마치면 내 컴퓨터가 아닌 다른 기기에서도 홈페이지를 확인할 수 있습니다.
첫 배포의 목표가 친구나 가족에게 홈페이지를 보여 주는 것이라면 가장 부담이 적은 방법입니다.
Git을 배우고 있다면 GitHub Pages가 좋습니다
Git과 GitHub를 연습하고 있다면 GitHub Pages 방식도 추천할 수 있습니다.
GitHub Pages는 GitHub 저장소를 이용해 정적 사이트를 공개할 수 있습니다.
대략적인 흐름은 다음과 같습니다.
- GitHub 저장소 만들기
- 프로젝트 파일 업로드
- 저장소의 Settings 열기
- Pages 설정으로 이동
- 배포할 브랜치와 소스 선택
- 생성된 사이트 주소 확인
GitHub 공식 문서에서도 저장소의 Settings에서 Pages 항목으로 이동해 게시 소스를 설정하도록 안내합니다.
이 방법의 장점은 코드 관리와 배포를 함께 연습할 수 있다는 점입니다.
프로젝트를 계속 수정한다면 Git 연동 배포가 편합니다
첫 프로젝트는 한 번 올리고 끝나지 않는 경우가 많습니다.
버튼 색을 바꾸고,
새 페이지를 추가하고,
오류를 고치면서 계속 업데이트하게 됩니다.
이때 Git 저장소와 배포 서비스를 연결하면 변경 사항을 저장소에 올릴 때 새로운 버전을 자동으로 배포하는 방식으로 발전할 수 있습니다.
Vercel은 Git 저장소를 연결해 푸시할 때 배포하고 미리보기 환경을 제공하는 방식을 지원합니다.
처음에는 드래그앤드롭으로 배포를 경험하고, 프로젝트를 계속 운영하고 싶다면 Git 기반 방식으로 넘어가는 것도 자연스럽습니다.
배포 후 CSS가 깨지면 파일 경로부터 확인하세요
내 컴퓨터에서는 잘 보였는데 인터넷에 올린 뒤 디자인이 깨지는 경우가 있습니다.
이때 CSS를 새로 만들 필요는 없습니다.
먼저 파일 경로를 확인하세요.
예를 들어 실제 파일이
css/style.css
에 있는데 HTML에서는
style.css
를 찾고 있다면 배포 후 스타일이 적용되지 않을 수 있습니다.
이미지도 마찬가지입니다.
로컬에서는 우연히 작동했던 경로가 배포 환경에서는 실패할 수 있습니다.
배포 후 화면이 깨지면 CSS 내용보다 파일 이름과 상대경로부터 확인하는 것이 좋습니다.
대소문자가 다른 파일 이름도 조심하세요
내 컴퓨터에서
Logo.png
와
logo.png
를 비슷하게 취급하는 것처럼 느껴졌더라도 배포 환경에서는 정확한 대소문자가 중요할 수 있습니다.
HTML에서는
images/logo.png
를 불러오는데 실제 파일이
images/Logo.png
라면 이미지가 나오지 않을 수 있습니다.
CSS와 JavaScript 파일도 같은 원칙으로 관리하세요.
처음부터 파일 이름은 소문자 중심으로 단순하게 통일하면 경로 오류를 줄이기 쉽습니다.
localStorage 데이터는 다른 사람에게 공유되지 않습니다
초보자가 배포 후 자주 놀라는 부분입니다.
내 컴퓨터에서 가계부나 메모장을 만들어 localStorage에 저장했다고 생각해 보겠습니다.
사이트를 인터넷에 공개한다고 내가 저장한 기록까지 다른 사람에게 전달되는 것은 아닙니다.
브라우저 로컬 저장 데이터는 기본적으로 각 사용자의 브라우저 환경에 따로 저장됩니다. 그래서 친구가 같은 사이트 주소에 들어가면 자신의 새로운 데이터 공간을 사용하게 됩니다.
여러 사람이 같은 데이터를 공유해야 한다면 그때는 서버나 데이터베이스 같은 별도의 구조가 필요합니다.
홈페이지 배포와 데이터 공유는 서로 다른 문제입니다.
API 키가 코드에 들어 있다면 그대로 배포하지 마세요
AI 기능이나 외부 서비스를 연결하면서 API 키를 JavaScript 파일에 직접 적어 둔 경우라면 주의해야 합니다.
브라우저로 배포되는 코드에 비밀 값을 넣으면 방문자가 개발자 도구 등을 통해 확인할 가능성이 있습니다.
그래서 비밀 API 키나 인증 정보가 필요한 서비스는 단순 정적 배포만으로 처리해서는 안 되는 경우가 있습니다.
처음 배포하는 프로젝트라면 공개되어도 문제가 없는 HTML, CSS, JavaScript 위주로 시작하는 것이 안전합니다.
인터넷에 배포되는 프론트엔드 코드는 사용자가 볼 수 있다는 전제로 생각하세요.
배포가 끝나면 내 컴퓨터가 아닌 곳에서 테스트하세요
배포 버튼을 눌렀다고 작업이 끝난 것은 아닙니다.
생성된 주소를
스마트폰
다른 브라우저
가능하면 다른 컴퓨터
에서 열어 보세요.
확인할 항목은 다음과 같습니다.
- 첫 화면이 열리는가?
- CSS가 정상적으로 보이는가?
- 이미지가 표시되는가?
- 버튼이 작동하는가?
- 모바일에서도 화면이 깨지지 않는가?
- 페이지를 새로고침해도 오류가 없는가?
내 컴퓨터에서 정상이라는 것과 인터넷에 공개된 사이트가 정상이라는 것은 따로 확인해야 합니다.
초보자라면 어떤 배포 방법을 선택하면 좋을까?
단순하게 홈페이지를 한 번 공개해 보고 싶다면 드래그앤드롭 방식부터 시작하기가 쉽습니다.
Netlify Drop은 프로젝트 폴더나 파일을 업로드해 바로 사이트로 배포하는 흐름을 제공합니다.
Git도 함께 배우고 싶다면 GitHub Pages가 좋습니다. HTML·CSS·JavaScript 정적 프로젝트와 GitHub 저장소 관리 경험을 함께 쌓을 수 있습니다.
프로젝트를 계속 수정하고 프레임워크나 더 다양한 개발 흐름으로 확장하고 싶다면 Vercel, Cloudflare같은 Git 연동 배포 환경도 검토할 수 있습니다.
두 사이트 모두 정적 사이트를 포함한 프로젝트와 Git 기반 자동 배포를 지원합니다.
배포 전에 확인할 체크리스트
- index.html이 정상적으로 열리는가?
- CSS와 JavaScript 파일이 정확하게 연결되어 있는가?
- 이미지 경로가 올바른가?
- 파일 이름 대소문자가 일치하는가?
- 사용하지 않는 테스트 파일을 정리했는가?
- API 키나 비밀번호가 코드에 들어 있지 않은가?
- 모든 버튼과 입력 기능을 테스트했는가?
- 모바일 화면에서도 사용할 수 있는가?
- 배포 전 정상 버전을 따로 저장했는가?
- 배포 후 다른 기기에서도 직접 확인했는가?
이 정도를 확인한 뒤 공개하면 초보자가 겪는 기본적인 배포 실수를 상당히 줄일 수 있습니다.
AI에게 배포를 도와달라고 할 때 사용하는 프롬프트
아래 문장을 그대로 활용해 보세요.
“저는 바이브코딩 초보자이고 HTML, CSS, JavaScript로 만든 첫 홈페이지를 배포하려고 합니다. 현재 프로젝트에는 index.html, style.css, script.js, images 폴더가 있습니다. 로그인과 데이터베이스는 사용하지 않습니다. 먼저 이 프로젝트가 정적 사이트로 바로 배포 가능한 구조인지 확인해 주세요. 기존 코드를 수정하기 전에 CSS, JavaScript, 이미지 상대경로와 민감한 정보 포함 여부를 점검해 주세요. 그다음 초보자가 가장 간단하게 배포할 수 있는 방법을 단계별로 설명해 주세요. 배포 후 다른 기기에서 테스트해야 하는 항목도 정리해 주세요.”
핵심은 AI에게 바로 배포 명령부터 요청하지 않고 현재 프로젝트가 공개 가능한 상태인지 먼저 검사하게 하는 것입니다.
첫 배포는 코딩 공부에서 중요한 목표이자 전환점입니다
바이브코딩으로 처음 만든 홈페이지를 실제 인터넷에 공개하면 프로젝트에 대한 느낌이 완전히 달라집니다.
내 컴퓨터에서만 열리던 파일이 주소 하나로 스마트폰과 다른 컴퓨터에서도 열리기 때문입니다.
첫 프로젝트라면 복잡한 서버를 구축할 필요는 없습니다.
프로젝트 점검 → 정적 사이트 배포 → 실제 주소 접속 → 다른 기기 테스트 → 문제 수정 → 다시 배포
이 흐름부터 경험해 보세요.
Git을 아직 모른다면 간단한 업로드 방식부터 시작할 수 있고, Git을 배우기 시작했다면 GitHub Pages 같은 방식으로 코드 관리와 배포를 연결할 수 있습니다.
프로젝트가 발전하면 Git 연동 자동 배포 같은 방식으로 확장하면 됩니다.
홈페이지를 만드는 것과 다른 사람이 실제로 접속할 수 있게 만드는 것은 서로 다른 경험입니다.
첫 배포까지 성공해 보면 바이브코딩은 단순한 코드 연습을 넘어 내가 만든 것을 실제 세상에 공개하는 도구라는 사실을 더 확실하게 느낄 수 있습니다.