바이브코딩 부록 · 개념편 ⑥

서버·호스팅·배포 — 내 집 시제품에서 진짜 가게 오픈까지

언제 보나 "배포"가 뭔지, localhost가 왜 남에게 안 보이는지

한 줄 정의 내 컴퓨터에만 있던 사이트를 세상에 공개하는 것

짝 모듈 M06

1한 줄로

localhost = 내 집 시제품. 나만 볼 수 있는 견본. 배포 = 진짜 가게 오픈. 세상 누구나 주소로 들어오게 여는 것.

내 컴퓨터(localhost) → GitHub(금고) → Vercel(자판기)이 가져다 배포 → 세상 누구나 여는 공개 URL.

내 컴퓨터에서 만든 사이트(localhost)는 나에게만 보입니다. 남에게 보여주려면 24시간 켜져 있는 남의 컴퓨터(서버)에 올려서 배포해야 합니다.

2좀 더 자세히 — 네 단어의 관계

서버는 사이트를 24시간 켜서 손님에게 내주는 컴퓨터입니다. 내 노트북으로도 잠깐은 가능하지만(그게 localhost), 노트북을 끄면 사이트도 꺼지고 나만 볼 수 있죠. 그래서 항상 켜져 있는 남의 서버가 필요합니다.

호스팅은 그 서버 자리를 빌려주는 서비스이고, Vercel이 대표적입니다. Vercel은 "코드를 넣으면 알아서 사이트를 내주는 자판기" 같아요. 배포(deploy)는 내 코드를 그 자판기에 넣어 세상에 여는 동작입니다.

전체 흐름은 위 그림처럼 내 컴퓨터 → GitHub → Vercel → 공개 URL입니다. GitHub에 올리면(push) Vercel이 그걸 자동으로 가져다 배포하고, 세상 누구나 들어올 수 있는 .vercel.app 주소(또는 내 도메인)가 생깁니다.

3흐름 한 장

내 컴퓨터(localhost) → GitHub(인터넷 금고) → Vercel(자판기) → 세상에 공개 URL

완성한 사이트가 너무 뿌듯해서 친구에게 주소를 보냈습니다. 그런데 친구가 "안 열리는데?" 합니다. 알고 보니 보낸 게 localhost:3000이었어요. 그건 내 컴퓨터에서만 열리는 주소입니다. 배포된 .vercel.app 주소를 보내야 친구도 볼 수 있어요. 그리고 그 배포본은 내 노트북을 꺼도 계속 살아있습니다(남의 서버에 있으니까).

4용어 미니사전

용어	쉬운 뜻
`localhost`	내 컴퓨터에서만 보이는 미리보기
`서버`	사이트를 24시간 켜주는 컴퓨터
`호스팅`	서버 자리를 빌려주는 서비스
`배포(deploy)`	세상에 사이트를 여는 동작
`Vercel`	코드 넣으면 사이트 나오는 자판기형 호스팅

localhost는 나만 보는 시제품, 배포는 세상에 오픈. GitHub에 올리면 Vercel이 가져다 공개 URL로 내준다.

"localhost 주소를 친구에게 보냈는데 안 열려요" → localhost는 내 컴퓨터에서만 보입니다. 배포된 URL을 보내야 해요.
"컴퓨터를 끄면 사이트도 꺼지나요?" → 배포본은 Vercel 서버에 있어 내 컴퓨터를 꺼도 살아있습니다.
"수정했는데 사이트에 반영이 안 돼요" → GitHub에 푸시 → Vercel 재배포까지 돼야 반영됩니다.

5직접 확인 (내 것으로)

내 사이트의 공개 URL(배포본):

내 컴퓨터에서만 보이는 주소: http://localhost:3000

가져갈 문장 3개.

"localhost는 나만 보는 시제품, 배포는 세상에 오픈."
"배포본은 내 컴퓨터를 꺼도 살아있다 (남의 서버에 있으니까)."
"수정 반영 = GitHub 푸시 → Vercel 재배포."