로컬호스트(localhost) 뜻과 배포된 웹의 차이, NPM·NPX·터미널까지 한 번에 정리

AI로 쇼핑몰을 만들었는데 왜 나만 볼 수 있을까

AI에게 "쇼핑몰 하나 만들어줘"라고 부탁합니다. 몇 분 뒤 AI가 코드를 다 짜고 "이제 localhost:3000에서 확인하세요"라고 말합니다. 주소창에 http://localhost:3000을 치면, 정말로 내가 만든 쇼핑몰이 열립니다.

신이 나서 친구에게 "내가 쇼핑몰 만들었어, localhost:3000 들어가봐"라고 메시지를 보냅니다. 친구가 접속해봅니다. "아무것도 안 뜨는데?"

여기서부터 혼란이 시작됩니다. 나는 분명히 보이는데 친구는 못 보고, 터미널 창을 닫으면 내 화면에서도 갑자기 사라지고, 주소도 숫자가 붙어 있어서 뭔가 엉성해 보입니다.

이 현상은 고장이 아닙니다. "내 컴퓨터에서 웹을 돌리는 것"과 "인터넷에 올리는 것"은 완전히 다른 일이기 때문입니다. 이 글에서 그 차이를 초보자가 읽어도 이해되게 풀어보겠습니다.

로컬호스트(localhost)가 뭔가요

로컬호스트는 "내 컴퓨터가 자기 자신을 가리킬 때 쓰는 주소"입니다.

쉽게 말하면 이렇습니다. 여러분 집에 방이 여러 개 있다고 해보세요. 거실에서 "안방으로 가자"라고 말할 때는 정식 주소("서울시 어디어디 아파트 몇 동 몇 호")가 필요 없습니다. 그냥 "안방"이라고 하면 됩니다. 같은 집 안에서는 간단한 별명만으로 충분하죠.

로컬호스트가 딱 그런 역할입니다. 인터넷 세상에서 집집마다 번지수에 해당하는 게 IP 주소입니다. 그중에서 127.0.0.1이라는 주소는 전 세계가 공유하는 약속으로 "그 주소를 입력한 컴퓨터 자기 자신"을 가리킵니다. localhost는 이 127.0.0.1의 별명일 뿐입니다.

그래서 http://localhost:3000을 주소창에 치면, 브라우저는 외부 인터넷으로 나가지 않고 내 컴퓨터 안에서 실행 중인 프로그램을 찾아서 연결합니다.

즉, localhost:3000은 "내 컴퓨터의 3000번 문에서 돌아가는 프로그램"을 의미합니다. 이 주소는 내 컴퓨터 내부에서만 유효해서, 친구 컴퓨터에서 아무리 쳐도 친구 자기 컴퓨터를 가리킬 뿐 내 쇼핑몰은 나오지 않습니다.

"내 컴퓨터에서 돌아간다"는 게 뭔가

바이브코딩으로 만든 웹 앱을 실행한다는 건 이런 일입니다.

“

"내 노트북을 작은 웹 서버로 잠깐 변신시킨다."

평소 우리가 네이버나 쿠팡에 접속할 때는 어딘가에 있는 거대한 서버 컴퓨터가 24시간 돌면서 우리 요청에 응답합니다. 그 서버는 사람이 노트북을 닫거나 껐다 켜도 영향을 받지 않도록 전용 공간(데이터센터)에 놓여 있습니다.

반면 localhost:3000은 내 노트북 안에서 작은 서버 프로그램이 돌고 있는 상태입니다. 노트북을 닫거나, 프로그램을 종료하거나, 전원이 꺼지면 즉시 사라집니다. 친구가 접속할 수 없는 건 당연합니다. 내 노트북이라는 '방'에 대한 문은 방 밖으로 열려 있지 않거든요.

이 상태는 이런 장점이 있습니다.

• 빠르고 안전합니다. 코드를 고치면 곧바로 반영되고, 외부에 노출되지 않으니 실수해도 남들이 못 봅니다.
• 무료입니다. 서버 비용이 들지 않습니다. 내 컴퓨터 자원만 씁니다.
• 개발과 실험에 최적입니다. 만들고 부수고를 반복하기에 좋습니다.

대신 치명적인 한계가 있죠.

• 나만 볼 수 있습니다. 친구, 고객, 검색엔진 모두 접근 불가입니다.
• 컴퓨터를 끄면 꺼집니다. 당연한 얘기지만, 노트북을 닫으면 "서버"도 같이 잠듭니다.
• 주소가 이상합니다. localhost:3000은 진짜 웹사이트 주소가 아닙니다.

그럼 로컬호스트 서버는 어떻게 실행될까요?

여기서 NPM, NPX, 터미널 같은 단어들이 쏟아집니다. 차근차근 풀어봅시다.

1. 터미널 — 컴퓨터에게 명령을 입력하는 창

터미널(Terminal)은 키보드로 명령어를 입력해 컴퓨터를 조작하는 창입니다. 검은 바탕에 흰 글씨가 뜨는 그 화면이 맞습니다. 마우스 클릭 대신 텍스트로 지시하는 방식이라고 이해하면 됩니다.

바이브코딩으로 웹 앱을 실행할 때는 보통 이런 흐름을 거칩니다.

터미널에서 서버가 떠 있는 동안은 화면에 계속 글자가 쏟아집니다. 이게 서버가 살아 있다는 신호입니다. 이 창을 닫으면 서버도 같이 꺼집니다.

2. Node.js — 자바스크립트를 브라우저 밖에서 돌리는 부엌

여러분이 AI에게 만든 웹 앱은 대부분 자바스크립트(JavaScript)로 쓰여 있습니다. 원래 자바스크립트는 브라우저 안에서만 돌아갔는데, Node.js라는 도구가 등장하면서 내 컴퓨터에서 바로 실행할 수 있게 됐습니다.

요리로 비유하면 Node.js는 부엌 자체입니다. 레시피(코드)를 받아서 재료를 섞고 끓이는 공간이죠. 이 부엌이 없으면 NPM, NPX 같은 도구도 쓸 수 없습니다.

3. NPM — 재료 창고이자 장보기 앱

NPM은 Node Package Manager의 약자입니다. Node.js와 함께 기본 탑재되는 도구로, 두 가지 역할을 합니다.

• 재료 창고: 전 세계 개발자들이 공유한 코드(패키지)가 수백만 개 모인 저장소
• 장보기 앱: 그 창고에서 필요한 재료를 내 프로젝트 폴더로 가져오는 명령어

npm install을 치면, 프로젝트에 필요하다고 명시된 재료 목록을 읽어서 창고에서 자동으로 가져와 node_modules라는 냉장고에 쌓습니다. 그 뒤로 npm run dev 같은 명령을 치면, 냉장고에 있는 재료를 써서 서버를 띄우는 겁니다.

4. NPX — 한 번만 꺼내 쓰고 버리는 도구

NPX는 npm install로 냉장고에 쟁여두지 않고 창고에서 바로 꺼내 한 번 쓰고 버리는 방식입니다. npx create-next-app처럼 쓰면, 그 순간 창고에서 도구를 잠깐 빌려와 실행합니다.

정리하면, 부엌은 Node.js, 창고 관리자는 NPM, 빌려쓰는 도구 실행기가 NPX, 주문을 넣는 창구가 터미널입니다. 네 가지는 한 팀으로 움직입니다.

실제 흐름 예시 — 바이브코딩으로 만든 쇼핑몰이 열리기까지

AI가 "쇼핑몰 만들어줬어"라고 한 순간부터 localhost:3000에 화면이 뜨기까지, 뒤에서는 대체로 이런 일이 벌어집니다.

1. AI가 코드를 폴더에 써넣습니다. my-shop/ 같은 프로젝트 폴더가 생기고, 그 안에 수십 개 파일이 생성됩니다.
2. 터미널을 엽니다. 내가 직접 열거나, 바이브코딩 도구가 알아서 엽니다.
3. npm install이 실행됩니다. AI가 작성한 코드가 쓰는 재료(라이브러리)들이 인터넷에서 내려와 node_modules 폴더에 채워집니다.
4. npm run dev가 실행됩니다. 내 노트북 안에서 작은 웹 서버 프로그램이 켜집니다. 보통 3000번 포트에 자리 잡습니다.
5. 브라우저가 http://localhost:3000을 엽니다. 브라우저는 "이 주소는 내 컴퓨터니까 밖으로 나갈 필요가 없네"라고 판단하고, 방금 켜진 서버 프로그램에게 "페이지 줘"라고 요청합니다.
6. 서버가 HTML을 돌려줍니다. 브라우저가 그걸 그려주면 내가 만든 쇼핑몰 화면이 뜹니다.

여기서 어느 하나라도 멈추면 화면이 뜨지 않습니다. 터미널을 닫으면 4번이 죽고, 포트가 겹치면 3000 대신 3001이 뜨고, 의존성 설치가 실패하면 3번에서 막힙니다. 바이브코딩 초보자가 만나는 대부분의 "안 돼요"는 이 6단계 중 어디에서 막혔는지를 보면 원인이 보입니다.

로컬호스트와 배포된 웹의 차이

친구한테 보여주려면 "배포(deploy)"라는 별도 단계가 필요합니다. 배포는 내 노트북에서 돌리던 프로그램을 인터넷 어딘가의 서버 컴퓨터로 옮겨 24시간 돌아가게 만드는 일입니다.

최근에는 Vercel, Netlify, Cloudflare Pages 같은 서비스가 코드를 GitHub에 올리기만 하면 자동으로 배포해주는 환경을 제공합니다. 바이브코딩 초보자도 몇 번의 클릭으로 진짜 도메인 주소를 얻을 수 있습니다. 다만 이건 "내 노트북에서만 돌던 걸 남의 서버 컴퓨터로 옮겼다"는 의미라는 걸 기억하면 개념이 한결 명확해집니다.

초보자가 자주 겪는 혼란과 해석

실제로 막 시작한 분들이 묻는 질문을 그대로 풀어보겠습니다.

"터미널 창을 실수로 닫았더니 localhost:3000이 안 열려요" → 서버가 꺼진 겁니다. 터미널 다시 열고 프로젝트 폴더로 이동한 뒤 npm run dev를 다시 치면 됩니다.

"친구가 같은 Wi-Fi인데도 localhost:3000이 안 뜬대요" → localhost는 각자의 "자기 컴퓨터"를 뜻하는 주소입니다. 친구 컴퓨터의 localhost는 친구 본인의 컴퓨터를 가리킵니다. 같은 Wi-Fi에서 보여주려면 내 컴퓨터의 내부 IP(예: 192.168.0.15:3000)를 알려주거나, 배포를 하거나, ngrok 같은 도구로 임시 터널을 만들어야 합니다.

"localhost:3000에서 localhost:3001로 바뀌었어요" → 3000번 포트가 이미 다른 프로그램한테 점령돼 있어서, 서버가 비어 있는 3001번을 찾아간 겁니다. 주소창에서 포트 번호만 바꿔 들어가면 똑같이 동작합니다.

"AI가 만든 코드를 지금 당장 회사에 공유하고 싶어요" → 로컬호스트 상태로는 공유 불가입니다. "배포" 단계를 거쳐야 합니다. Vercel 같은 서비스에 GitHub 레포지토리를 연결하면 수 분 안에 공개 URL이 생깁니다.

정리하며

로컬호스트는 어려운 기술이 아니라 "내 컴퓨터가 잠깐 웹 서버 역할을 하는 상태"일 뿐입니다. 그 상태를 설명하는 주소가 localhost:3000 같은 형태이고, 이 상태는 내 컴퓨터 바깥으로는 열려 있지 않습니다. 다른 사람에게 보여주려면 배포라는 별도 단계가 필요합니다.

NPM은 재료 창고, NPX는 한 번 빌려 쓰는 도구, Node.js는 부엌, 터미널은 주문 창구. 이 네 가지가 한 팀으로 움직이면서 여러분 노트북을 잠깐 웹 서버로 변신시킵니다. 바이브코딩을 시작하고 처음 며칠 동안 가장 헷갈리는 부분이 이 지점입니다. 한 번 개념을 잡아두면 이후 등장하는 배포, 환경 변수, 데이터베이스 연결 같은 주제들이 훨씬 수월하게 연결됩니다.

3줄 요약

• 로컬호스트(localhost)는 "내 컴퓨터가 자기 자신을 가리키는 주소"입니다. 내 노트북 안에서 잠깐 돌아가는 서버에 접속할 때만 유효합니다.
• NPM은 재료 창고, NPX는 한 번만 빌려 쓰는 도구, Node.js는 부엌, 터미널은 주문 창구입니다. 이 팀이 합작해서 localhost:3000을 띄웁니다.
• 다른 사람에게 보여주려면 배포라는 별도 단계가 필요합니다. Vercel 같은 서비스가 이 과정을 거의 자동으로 처리해줍니다.

Sources

• MDN Web Docs — Localhost
• Node.js 공식 문서 — About Node.js
• npm Docs — About npm
• npm Docs — npx
• Vercel 공식 가이드 — Deploying