홍드로이드의 야매코딩

AI로 만든 웹사이트 무료로 배포하기 — 인터넷에 공개까지 (Vercel·Netlify) 본문

AI & Vibe Coding

AI로 만든 웹사이트 무료로 배포하기 — 인터넷에 공개까지 (Vercel·Netlify)

홍드로이드 2026. 7. 13. 03:01

 

AI로 웹사이트를 만들었다면, 다음은 인터넷에 공개하는 거예요. 내 컴퓨터에만 있으면 나만 보잖아요. Vercel·Netlify 같은 무료 호스팅에 올리면 서버비 0원으로 전 세계가 볼 수 있는 주소가 생깁니다. GitHub 연결부터 자동 배포까지, 초보도 따라 하는 방법을 정리했습니다.

📌 30초 요약
🌐 배포 = 내 사이트를 인터넷에 올려 주소 만들기
🆓 Vercel·Netlify·Cloudflare — 개인 프로젝트 무료
🔗 GitHub 연결하면 코드 올릴 때마다 자동 배포
🏷️ 내 도메인(주소)도 연결 가능
⚠️ API 키·비밀번호는 코드에서 빼고 올리기

'배포'가 뭔가요

배포(deploy)는 내 컴퓨터에 있는 웹사이트를 인터넷 서버에 올려 누구나 접속할 수 있게 하는 거예요. 예전엔 서버를 사고 설정하느라 복잡했지만, 이제 무료 호스팅클릭 몇 번이면 끝. 주소(URL)가 생기면 그걸 공유만 하면 돼요.

무료 배포 플랫폼

플랫폼 특징
▲ Vercel 가장 쉬움 · 개인 프로젝트 무료(추천)
◆ Netlify 무료(월 100GB) · 랜딩·포트폴리오에 충분
☁️ Cloudflare Pages 무료 · 빠른 속도
🐙 GitHub Pages 무료 · 간단한 정적 사이트에 딱

💡 서버·DB가 필요하면 — 화면만 있는 사이트는 Vercel 하나로 충분해요. 로그인·데이터 저장 같은 백엔드가 필요하면 Railway·Render·Supabase를 함께 쓰면 됩니다.

배포하는 법 (Vercel 기준)

1️⃣ 코드를 GitHub에 올리기(AI에게 "깃허브 올리는 법" 물어봐도 돼요)

2️⃣ vercel.comGitHub 계정으로 가입

3️⃣ "Add New Project" → 내 저장소 선택(프레임워크 자동 인식)

4️⃣ Deploy 클릭 → 잠시 후 주소 완성! 이후엔 코드 올릴 때마다 자동 갱신

막히면 AI에게 — 에러가 나면 에러 메시지를 붙여넣고 "배포 에러 고쳐줘"라고 하세요. 대부분 금방 해결됩니다.

꼭 지킬 점

⚠️ 세 가지 — ① 코드에 API 키·비밀번호를 넣은 채 공개 저장소에 올리면 유출돼요. 환경변수로 빼세요(AI에게 방법 문의). ② 무료는 트래픽·기능 한도가 있어, 인기가 많아지면 유료가 필요할 수 있어요. ③ 상업적 이용은 각 플랫폼 약관을 확인하세요.

자주 묻는 질문

Q. GitHub이 뭔지도 몰라요.

코드를 온라인에 보관·공유하는 곳이에요. 처음이면 AI에게 "깃허브 저장소 만들고 코드 올리는 법 초보용으로"라고 물으면 단계별로 알려줍니다.

Q. 주소가 이상해요(길고 복잡).

기본 주소는 자동 생성돼요. 내 도메인(예: mysite.com)을 사서 연결하면 깔끔해집니다(도메인은 별도 구매).

Q. 크롬 확장도 배포하나요?

크롬 확장은 웹 스토어에 등록하는 방식이라 조금 달라요. 웹사이트·앱은 위 방법이 맞습니다.

정리 — 만들었으면 세상에 내보내야죠. Vercel·Netlify에 GitHub만 연결하면 무료로 자동 배포돼요. API 키 보안만 챙기면, 내 아이디어가 진짜 인터넷 서비스가 됩니다. 🌐


무료 호스팅의 트래픽·기능·상업 이용 한도는 플랫폼마다 다르고 수시로 바뀝니다(2026년 기준, 변동 가능). 공개 저장소·배포 시 API 키·비밀번호 등 민감 정보는 반드시 환경변수로 분리해 유출을 막으세요. 상업적 이용·도메인 연결 조건은 각 서비스 공식 문서를 확인하시기 바랍니다.

Comments