localhost가 무슨 뜻인가요? 내 컴퓨터에서만 열리는 주소

localhost는 지금 쓰는 컴퓨터 자신을 가리켜서, localhost:3000 주소를 남에게 보내도 그 사람 화면에서는 내 웹앱이 열리지 않아요. 배포는 코드를 인터넷 서버에 올려 누구나 접속할 공개 주소를 만드는 과정입니다.

핵심 요약

바이브코딩으로 뭔가 만들다 보면 이 주소를 매일 봐요. AI가 "http://localhost:3000 (새 탭에서 열림) 에서 확인해보세요"라고 하고, 열어보면 방금 만든 화면이 떠 있어요. 그런데 이 주소를 친구에게 보내면 이상한 일이 생겨요. 친구 화면에서는 안 열려요. 왜 그런지, 그리고 어떻게 해야 남들도 들어올 수 있게 되는지 정리해드릴게요.

localhost는 '지금 이 컴퓨터'라는 뜻이에요

localhost는 특별한 사이트 주소가 아니라, "지금 이 컴퓨터"를 가리키는 이름이에요. 뒤에 붙는 :3000은 컴퓨터 안에 열려 있는 문 번호(포트) 정도로 이해하면 돼요.

npm run dev 같은 명령으로 개발 서버를 켜면, 내 컴퓨터 안에서 작은 서버가 돌기 시작해요. 브라우저로 localhost:3000을 여는 건 그 서버에 "지금 만들고 있는 화면 보여줘"라고 말을 거는 거예요. 만들면서 바로바로 확인하라고 있는, 일종의 작업실이에요. 왜 파일을 그냥 열지 않고 서버를 실행해야 하는지는 HTML 파일과 웹앱이 왜 다르게 열리는지 설명한 글에서 더 자세히 다뤄요.

그래서 남들은 못 열어요

localhost가 "지금 이 컴퓨터"라는 뜻이라는 게 함정이에요. 친구가 자기 브라우저에 localhost:3000을 치면, 친구는 자기 컴퓨터를 열어보는 거예요. 거기엔 내 사이트가 없으니 아무것도 안 떠요.

작업실에서 구운 빵은 작업실에 와야만 먹을 수 있는 것과 같아요. 지금 내 사이트는 내 컴퓨터라는 작업실 안에서만 돌아가고 있어요. 내 컴퓨터를 끄면 같이 꺼져요.

배포가 그 벽을 넘는 일이에요

배포는 내 코드를 인터넷 위의 컴퓨터에 올려서, 누구나 들어올 수 있는 진짜 주소를 받는 일이에요.

인터넷에 항상 켜져 있는 컴퓨터(서버)에 내 코드를 실어두면, 누가 언제 접속해도 그 서버가 내 사이트를 보여줘요. 예전엔 이 서버를 직접 구하고 관리하는 일이 만만치 않았는데, 지금은 Vercel 같은 배포 서비스가 그 인프라를 대신 맡아줘요. 코드를 올리면 몇 분 안에 내프로젝트.vercel.app 같은 주소가 생기고, 원하면 따로 산 도메인(mybakery.kr 같은)을 연결할 수도 있어요. 기본 배포 주소와 자체 도메인 중 무엇을 써야 할지는 홈페이지 도메인이 꼭 필요한지 설명한 글에서 이어서 확인할 수 있습니다.

배포하면 달라지는 것들

localhost가 필요 없어지는 게 아니에요. 역할이 나뉘는 거예요. localhost는 작업실, 배포된 주소는 매장. 새 기능은 작업실에서 만들어 확인하고, 다 됐으면 매장에 내보내요. 지난 글에서 말한 것처럼 GitHub에 푸시할 때마다 매장이 자동으로 새 버전이 되게 해두면, 이 리듬이 아주 편해져요.

다만 배포했다고 구글 검색에 바로 나타나는 것은 아니에요. 매장 문을 여는 일과 사람들이 검색으로 매장을 발견하는 일이 왜 다른지는 SEO와 검색 노출의 과정을 설명한 글에서 살펴볼 수 있어요.

배포할 준비가 됐는데 Vercel, Netlify, Railway 중 어디를 골라야 할지 고민된다면 프로젝트 실행 방식에 따른 배포 플랫폼 비교를 참고하세요.

바이브코딩에서는 어렵지 않아요

배포라고 하면 거창하게 들리지만, 실제로는 AI에게 시키면 돼요. "이거 배포해줘"라고 하면 클로드코드(Claude Code)가 Vercel 연결부터 올리는 것까지 순서대로 안내해줘요. 처음 한 번 계정을 만들고 연결하는 과정만 거치면, 그다음부터는 몇 마디로 끝나요.

배포할 땐 주의할 점이 있어요. 배포하는 순간부터 남들이 진짜로 들어올 수 있는 곳이 돼요. 시험 삼아 넣어둔 데이터나 아직 공개하면 안 되는 내용이 없는지 한 번 둘러보고 내보내세요.

정리

처음 배포한 날의 기분이 꽤 오래 가요. 내가 만든 화면이 진짜 주소를 달고, 폰으로도 열리고, 링크를 받은 친구가 "오 이거 뭐야"라고 답하는 순간이요. localhost에서 충분히 만들었다면, 한 번 내보내 보세요.

Vercel에 올리고 배포 후 설정까지 확인하려면 바이브코딩 가이드 13장의 배포 실습을 따라 해보세요.

#기초#localhost#배포#Vercel#바이브코딩

인스타그램 @ddukddak.build · 페이스북 뚝딱