호스팅, 환경변수, 도메인, 배포를 한 번에 이해하기
배포까지 해봐야 내가 만든 것이 실제 사용자의 브라우저에서 열리는지 알 수 있습니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
배포는 내가 만든 것을 현실로 보내는 과정입니다
내 컴퓨터에서만 열리는 페이지는 아직 다른 사람이 사용할 수 없습니다. 배포는 만든 결과물을 공개 URL로 올려 실제 브라우저에서 접근할 수 있게 만드는 과정입니다. 이 단계를 거쳐야 내 프로젝트가 진짜 웹사이트가 됩니다.
정적 사이트는 배포가 비교적 쉽습니다. 빌드 결과물이나 HTML/CSS/JS 파일을 정적 호스팅에 올리면 됩니다. Cloudflare Pages, Vercel, Netlify 같은 도구는 GitHub 저장소와 연결해 배포 흐름을 단순하게 만들어줍니다.
배포 전에 확인할 것
배포 전에는 첫 화면이 열리는지, 이미지와 CSS 경로가 맞는지, 모바일에서 버튼을 누를 수 있는지 확인해야 합니다. 로컬에서는 대소문자가 느슨하게 동작했지만 배포 환경에서는 파일 이름 대소문자가 달라 문제가 생길 수 있습니다.
또한 비밀키, 테스트용 문구, 개인 메모가 들어가지 않았는지도 봐야 합니다. 배포는 공개 행위이므로 기능 확인과 보안 확인이 함께 필요합니다.
배포 후 점검
배포가 끝나면 내 컴퓨터가 아니라 휴대폰이나 다른 브라우저에서 공개 URL을 열어보세요. 링크가 실제로 접근되는지, 새로고침해도 깨지지 않는지, 이미지가 보이는지, 버튼이 작동하는지 확인합니다.
문제가 생기면 배포 로그와 브라우저 콘솔을 함께 봅니다. 이때 앞에서 배운 웹 구조, 디버깅, Git 커밋이 연결됩니다. 배포는 마지막 시험이 아니라 지금까지 준비운동이 이어지는 지점입니다.
로컬 앱을 공개 URL로 보내는 흐름입니다
공부 기록 앱을 배포할 때 로컬 확인, 환경변수, 호스팅, 공개 URL을 순서대로 확인합니다.
- 01 로컬 확인
내 컴퓨터에서 먼저 화면과 기능을 봅니다.
내 화면에서 확인 - 02 환경변수
비밀값은 코드가 아니라 설정에 둡니다.
설정을 분리 - 03 호스팅
앱 파일을 공개 서버에 올립니다.
공개 주소로 배포 - 04 공개 URL
다른 사람이 열 수 있는 주소로 확인합니다.
핵심 정리
인프라는 앱이 돌아가는 바깥 환경입니다. 초보자는 호스팅, 환경변수, 도메인, 배포 로그 네 가지만 먼저 구분하면 됩니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "호스팅, 환경변수, 도메인, 배포를 한 번에 이해하기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 배포까지 해봐야 내가 만든 것이 실제 사용자의 브라우저에서 열리는지 알 수 있습니다.
이 프로젝트를 Cloudflare Pages 같은 정적 호스팅에 배포한다고 가정하고, 호스팅, 환경변수, 도메인, 배포 로그를 초보자용 체크리스트로 설명해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 공개 URL에서 첫 화면이 열리는지 확인합니다., 환경변수에 비밀값이 들어가고 코드에는 없는지 확인합니다., 배포 로그에서 실패 메시지가 있는지 확인합니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 공개 URL에서 첫 화면이 열리는지 확인합니다.
- 환경변수에 비밀값이 들어가고 코드에는 없는지 확인합니다.
- 배포 로그에서 실패 메시지가 있는지 확인합니다.
실습
내 프로젝트를 배포한다고 가정하고 호스팅, 환경변수, 도메인, 배포 로그 네 칸에 확인할 일을 적어보세요.
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 공개 URL에서 첫 화면이 열린다
- 공부 기록 앱 저장 버튼과 삭제 버튼이 배포 환경에서도 작동한다
- 공부 기록 앱 배포 로그에 실패 메시지가 없다
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.