첫 웹사이트를 배포하는 법: 로컬에서 실제 URL까지

내 컴퓨터에서는 잘 돌아가던 사이트가, 친구에게 보여주려는 순간 막힙니다. "링크 하나만 보내줘"라는 말에 답을 못 하는 거죠. 웹사이트 배포는 바로 그 지점을 해결합니다. 내 노트북 안에만 있던 코드를 인터넷 어디서든 열리는 실제 주소로 바꾸는 작업입니다.

이 글에서는 localhost:3000 같은 로컬 주소에서 벗어나, 누구나 접속할 수 있는 URL을 갖기까지의 과정을 초보자 눈높이로 정리합니다. 서울에서 독학으로 시작하는 분이든, 부트캠프 수강 중인 분이든 똑같이 막히는 지점들이 있어서 그 부분을 집중해서 짚겠습니다.

배포가 정확히 무슨 뜻인가

배포(deployment)는 완성한 코드를 외부에서 접속 가능한 서버에 올려서 공개하는 과정입니다. 로컬 환경은 내 컴퓨터가 서버 역할을 하기 때문에 전원을 끄면 사이트도 사라집니다. 반면 배포하면 항상 켜져 있는 서버가 그 역할을 대신합니다.

예를 들어 카페를 생각해 보세요. 집 주방에서 커피를 내리면 나만 마실 수 있습니다. 그런데 길가에 매장을 열고 간판을 걸면 지나가던 누구나 들어올 수 있죠. 배포는 집 주방의 커피 레시피를 실제 매장으로 옮기는 일입니다. 주소(URL)가 간판이고, 서버가 매장 공간입니다.

정적 사이트와 동적 사이트, 배포 방식이 다르다

배포 방법을 고르기 전에 내 사이트가 어떤 종류인지부터 알아야 합니다. 이게 갈리지 않으면 엉뚱한 서비스를 고르기 쉽습니다.

정적 사이트는 HTML, CSS, 자바스크립트 파일만으로 돌아갑니다. 서버에서 따로 계산할 게 없어서 파일만 올리면 끝입니다. 포트폴리오, 소개 페이지, 간단한 랜딩 페이지가 여기 속합니다.

동적 사이트는 요청이 들어올 때마다 서버가 데이터베이스를 조회하거나 로그인을 처리합니다. 게시판, 쇼핑몰, 회원 기능이 있는 서비스가 대표적입니다. 서버가 코드를 실행해야 하므로 배포 환경도 더 복잡합니다.

구분	정적 사이트	동적 사이트
예시	포트폴리오, 랜딩 페이지	쇼핑몰, 게시판, SaaS
필요한 것	파일 호스팅	서버 + 데이터베이스
추천 서비스	Netlify, GitHub Pages, Vercel	Vercel, Render, AWS, Cloudtype
난이도	낮음	중간~높음
비용	대부분 무료	무료 구간 있으나 규모 커지면 유료

처음 배포를 해본다면 정적 사이트로 시작하길 권합니다. 성공 경험을 빨리 쌓는 게 중요하거든요. 프론트엔드와 백엔드 중 어디부터 손댈지 아직 고민된다면 프론트엔드와 백엔드를 비교한 입문 가이드를 먼저 읽어보면 방향이 잡힙니다.

실제 배포 과정: 5단계

가장 흔한 흐름을 순서대로 보겠습니다. React나 정적 HTML 프로젝트를 Vercel이나 Netlify에 올리는 경우를 기준으로 했습니다.

1. Git으로 코드를 관리한다

요즘 배포 서비스는 대부분 GitHub 저장소와 연결하는 방식을 씁니다. 프로젝트를 Git으로 관리하고 GitHub에 올려두세요. 코드를 수정해서 push할 때마다 사이트가 자동으로 다시 배포되는 구조라, 이 단계를 건너뛰면 나중에 번거로워집니다.

2. 빌드 설정을 확인한다

React, Vue 같은 프레임워크는 작성한 코드를 브라우저가 읽을 수 있는 형태로 변환하는 '빌드' 과정이 필요합니다. npm run build를 돌리면 dist나 build 폴더가 생깁니다. 배포 서비스에 이 빌드 명령어와 출력 폴더 이름을 알려주면 됩니다. 순수 HTML이라면 이 단계는 필요 없습니다.

3. 호스팅 서비스에 연결한다

Vercel이나 Netlify에 GitHub 계정으로 로그인한 뒤, 저장소를 선택합니다. 빌드 명령어와 출력 폴더를 입력하고 배포 버튼을 누르면, 몇 분 안에 .vercel.app 또는 .netlify.app으로 끝나는 임시 URL이 생깁니다. 이 순간이 보통 가장 뿌듯합니다.

4. 환경 변수를 분리한다

API 키나 데이터베이스 접속 정보를 코드에 직접 적어두면 안 됩니다. GitHub에 그대로 올라가서 누구나 볼 수 있게 되거든요. 이런 값은 배포 서비스의 환경 변수(Environment Variables) 설정에 따로 넣습니다. 동적 사이트를 배포하는 분들이 가장 많이 실수하는 부분입니다.

5. 도메인을 연결한다

임시 URL 대신 mysite.com 같은 나만의 주소를 쓰고 싶다면 도메인을 구매해야 합니다. 가비아, 후이즈 같은 국내 등록 업체나 Cloudflare, Namecheap에서 살 수 있습니다. 구매 후 DNS 설정에서 배포 서비스가 안내하는 레코드를 입력하면 연결됩니다. 반영까지 몇 시간 걸릴 수 있으니 바로 안 된다고 당황하지 마세요.

초보자가 자주 막히는 지점

로컬에서는 멀쩡했는데 배포하니 흰 화면만 뜨는 경우가 많습니다. 대부분 경로 문제입니다. 로컬에서 쓰던 절대 경로가 배포 환경과 맞지 않아서 생기죠. 이미지나 CSS가 안 불러와진다면 경로 설정부터 의심해 보세요.

또 하나 흔한 건 빌드는 성공했는데 API 호출이 실패하는 경우입니다. 환경 변수를 로컬 .env 파일에만 넣고 배포 서비스에는 등록 안 한 상황이 대부분입니다. 배포 환경은 내 노트북의 .env를 모른다는 걸 기억하세요.

이런 디버깅은 글로만 익히기 어렵습니다. 직접 배포하다 막히고, 로그를 읽고, 고쳐보는 반복이 실력을 만듭니다. 혼자 하기 버겁다면 멘토와 함께 프로젝트를 배포까지 끌고 가는 웹 개발 부트캠프 커리큘럼이 도움이 됩니다. 시간을 자유롭게 쓰고 싶다면 자기주도형 웹 개발 과정으로 본인 페이스에 맞춰 연습할 수도 있습니다.

배포는 끝이 아니라 시작이다

배포를 한 번 해보면 웹 개발의 전체 그림이 눈에 들어옵니다. 코드를 짜는 것과 그 코드가 실제로 세상에 돌아가게 만드는 건 다른 기술이고, 취업 시장에서는 후자를 할 줄 아는 사람을 찾습니다. 포트폴리오에 "배포된 실제 URL"이 있는 것과 없는 것의 차이는 생각보다 큽니다.

오늘 당장 작은 정적 페이지 하나를 Netlify에 올려보세요. 임시 URL이 생기는 순간, 다음 단계가 훨씬 덜 막막해집니다. 더 체계적으로 배우고 싶다면 Code Labs Academy의 전체 코스 목록에서 본인에게 맞는 과정을 비교해 보세요.