웹앱은 어디에서 실행될까? localhost를 먼저 이해해야 하는 이유
웹사이트를 이용하는 것과 웹앱을 개발하는 것은 실행 방식부터 다릅니다. 일반적인 웹사이트는 인터넷 주소(URL)를 입력하면 바로 접속할 수 있지만, 개발 중인 웹앱은 처음부터 인터넷에 공개되지 않습니다. 먼저 개발자의 컴퓨터에서 실행하고 테스트한 뒤, 정상적으로 동작하는 것을 확인한 후 인터넷에 배포하는 과정을 거칩니다.
이러한 개발 과정에서 가장 먼저 등장하는 용어가 localhost입니다.
웹 개발을 처음 접한 사람이라면 http://localhost:3000이라는 주소를 보고 인터넷 사이트라고 생각하기 쉽습니다. 하지만 localhost는 인터넷 주소가 아니라 자신의 컴퓨터 안에서 실행 중인 웹앱을 확인하기 위한 개발용 주소입니다.
반대로 개발이 완료된 웹앱을 다른 사람도 사용할 수 있도록 공개할 때는 Vercel과 같은 배포 플랫폼을 사용합니다.
이번 글에서는 먼저 localhost의 개념과 역할을 자세히 살펴보고, 2부에서는 Vercel과의 차이, 실제 배포 과정까지 이어서 설명하겠습니다.
localhost란 무엇일까?
localhost는 웹앱을 자신의 컴퓨터에서 실행하고 테스트하기 위해 사용하는 로컬(Local) 개발 환경의 주소입니다.
쉽게 말해 아직 인터넷에 공개되지 않은 웹앱을 개발자가 자신의 컴퓨터에서 확인하는 화면이라고 이해하면 됩니다.
예를 들어 Next.js 프로젝트를 실행하면 브라우저에서 다음과 같은 주소가 열립니다.
http://localhost:3000많은 초보자가 이 주소를 하나의 웹사이트라고 생각하지만 실제로는 그렇지 않습니다.
이 주소는 현재 사용 중인 컴퓨터를 의미하기 때문에 다른 사람은 접속할 수 없습니다. 같은 사무실에 있는 사람이라도 자신의 컴퓨터에서 localhost:3000을 입력하면 내 웹앱이 아니라 자신의 컴퓨터를 찾게 됩니다.
즉, localhost는 인터넷이 아닌 내 컴퓨터 안에서만 사용할 수 있는 개발 전용 주소입니다.
로컬 개발 환경(Local Development Environment)이란?
localhost를 이해하려면 먼저 로컬 개발 환경이라는 개념을 알아야 합니다.
로컬(Local)은 자신의 컴퓨터를 의미합니다.
개발 환경(Development Environment)은 프로그램을 개발하고 테스트하는 환경을 말합니다.
따라서 로컬 개발 환경은 내 컴퓨터에서 웹앱을 만들고 수정하며 테스트하는 공간이라고 정의할 수 있습니다.
웹앱을 개발하는 동안에는 새로운 기능을 추가하거나 오류를 수정하는 작업이 계속 반복됩니다. 만약 이런 작업을 인터넷에서 서비스 중인 웹사이트에 바로 적용한다면 사용자가 오류를 그대로 경험하게 될 수 있습니다.
그래서 대부분의 웹 개발은 다음과 같은 순서로 진행됩니다.
- 자신의 컴퓨터(localhost)에서 개발한다.
- 기능을 충분히 테스트한다.
- 오류를 수정한다.
- 문제가 없으면 인터넷 서버에 배포한다.
이 과정은 AI를 활용한 웹앱 개발에서도 동일하게 적용됩니다.
localhost는 어떻게 동작할까?
localhost는 혼자서 동작하는 것이 아닙니다.
웹앱 프로젝트를 실행하면 개발 서버(Development Server) 가 함께 실행됩니다.
개발 서버는 현재 작성한 코드를 읽어 웹페이지를 만들어 브라우저에 보여주는 프로그램입니다.
예를 들어 Next.js 프로젝트에서는 다음과 같은 명령어를 실행합니다.
npm run dev이 명령어를 실행하면 개발 서버가 시작되고 브라우저에서 localhost 주소를 사용할 수 있게 됩니다.
즉,
- 프로젝트 실행
- 개발 서버 시작
- localhost 접속
이라는 순서로 동작하는 것입니다.
많은 초보자가 localhost가 하나의 프로그램이라고 생각하지만, 실제로는 개발 서버가 실행된 결과를 확인하는 주소에 가깝습니다.
localhost와 브라우저는 어떤 관계일까?
웹앱은 브라우저에서 실행되는 것처럼 보이지만 실제로는 조금 다른 구조를 가지고 있습니다.
브라우저는 화면을 보여주는 역할을 합니다.
반면 개발 서버는 HTML, CSS, JavaScript와 같은 파일을 처리하여 브라우저가 이해할 수 있는 형태로 전달합니다.
즉, 브라우저는 화면을 표시하고, localhost는 개발 서버와 연결되는 주소입니다.
이 구조를 이해하면 개발 과정에서 오류가 발생했을 때 원인을 찾기도 훨씬 쉬워집니다.
localhost:3000에서 3000은 무엇을 의미할까?
localhost 주소를 보면 뒤에 숫자가 붙어 있습니다.
http://localhost:3000여기서 3000은 포트(Port) 번호입니다.
포트는 하나의 컴퓨터 안에서 여러 프로그램을 구분하기 위해 사용하는 번호라고 생각하면 이해하기 쉽습니다.
예를 들어 한 컴퓨터에서는 웹 개발뿐 아니라 메신저, 데이터베이스, 음악 프로그램 등 여러 프로그램이 동시에 실행됩니다.
컴퓨터는 포트 번호를 이용해 어떤 프로그램과 연결해야 하는지를 구분합니다.
Next.js 프로젝트는 기본적으로 3000번 포트를 사용하는 경우가 많습니다.
하지만 사용하는 개발 도구에 따라 다른 번호가 사용되기도 합니다.
대표적인 예시는 다음과 같습니다.
| Next.js | 3000 |
| Vite | 5173 |
| Angular | 4200 |
| 일부 웹 서버 | 8080 |
따라서 localhost 뒤에 붙는 숫자가 다르다고 해서 오류가 발생한 것은 아닙니다.
localhost에서 할 수 있는 작업
localhost는 개발 중인 웹앱을 자유롭게 수정하고 테스트할 수 있는 공간입니다.
대표적으로 다음과 같은 작업을 수행합니다.
화면(UI) 확인
버튼 위치, 글자 크기, 색상, 이미지 배치 등을 수정한 뒤 바로 결과를 확인할 수 있습니다.
기능 테스트
회원가입, 로그인, 검색 기능, 데이터 저장 등 새로 만든 기능이 정상적으로 동작하는지 확인합니다.
오류 확인
코드에 문제가 있으면 개발 서버가 오류 내용을 표시합니다.
오류가 발생한 파일과 줄 번호를 함께 보여주는 경우가 많기 때문에 문제를 찾는 데 도움이 됩니다.
AI가 생성한 코드 실행
AI는 코드를 생성해 줄 수 있지만 실행까지 대신해 주지는 않습니다.
생성된 코드를 프로젝트에 적용한 뒤 실제로 동작하는지 확인하는 과정은 localhost에서 이루어집니다.
따라서 AI 웹앱 개발에서도 localhost는 가장 많이 사용하는 환경이라고 할 수 있습니다.
localhost에서 자주 발생하는 오류
웹 개발을 처음 시작하면 localhost가 열리지 않는 상황을 자주 경험하게 됩니다.
하지만 대부분은 복잡한 문제가 아니라 기본적인 설정이나 실행 과정에서 발생합니다.
대표적인 사례는 다음과 같습니다.
첫째, 개발 서버를 실행하지 않은 경우입니다.
localhost는 개발 서버가 실행되어야 사용할 수 있습니다. 서버가 실행되지 않았다면 브라우저는 연결할 대상을 찾지 못합니다.
둘째, 프로젝트 폴더가 아닌 다른 위치에서 명령어를 실행한 경우입니다.
터미널은 현재 위치를 기준으로 명령을 실행하기 때문에 프로젝트 폴더 안에서 작업해야 합니다.
셋째, 필요한 라이브러리가 설치되지 않은 경우입니다.
프로젝트를 처음 내려받았을 때는 필요한 패키지를 먼저 설치해야 정상적으로 실행됩니다.
넷째, 이미 같은 포트를 다른 프로그램이 사용하고 있는 경우입니다.
이 경우에는 다른 포트를 사용하거나 기존 프로그램을 종료해야 합니다.
이러한 오류는 대부분 오류 메시지에 원인이 함께 표시되므로, 메시지를 확인하는 습관을 들이는 것이 중요합니다.
Vercel이란 무엇일까?
localhost에서 웹앱을 개발했다고 해서 다른 사람이 바로 사용할 수 있는 것은 아닙니다.
localhost는 자신의 컴퓨터에서만 동작하는 개발 환경이기 때문에 인터넷을 통해 다른 사람이 접속할 수 없습니다.
웹앱을 실제 서비스로 운영하려면 인터넷에 공개하는 과정이 필요하며, 이 과정을 배포(Deployment) 라고 합니다.
Vercel은 이러한 배포 과정을 간편하게 수행할 수 있도록 제공하는 클라우드 기반 배포 플랫폼입니다.
특히 Next.js를 개발한 Vercel에서 직접 운영하는 서비스이기 때문에 Next.js 프로젝트와의 호환성이 뛰어나며, 별도의 서버를 직접 구축하지 않아도 웹앱을 배포할 수 있다는 장점이 있습니다.
배포(Deployment)란 무엇일까?
배포는 개발이 완료된 프로그램을 실제 사용자가 이용할 수 있도록 서버에 올리는 과정을 의미합니다.
예를 들어 localhost에서 다음과 같은 주소로 웹앱을 확인하고 있었다고 가정해 보겠습니다.
http://localhost:3000이 상태에서는 자신의 컴퓨터에서만 접속할 수 있습니다.
하지만 Vercel에 배포하면 다음과 같은 인터넷 주소가 생성됩니다.
https://프로젝트이름.vercel.app이 주소는 인터넷이 연결된 환경이라면 PC, 스마트폰, 태블릿 등 다양한 기기에서 접속할 수 있습니다.
즉, 배포란 내 컴퓨터에서만 실행되던 웹앱을 인터넷 서비스로 전환하는 과정이라고 이해하면 됩니다.
왜 Vercel을 많이 사용할까?
웹앱을 배포하는 방법은 여러 가지가 있습니다.
AWS, Azure, Google Cloud와 같은 클라우드 서비스를 이용할 수도 있고, 직접 서버를 구축하여 운영할 수도 있습니다.
하지만 이러한 방식은 서버 설정, 운영체제 관리, 보안 설정 등 초보자가 이해하기 어려운 작업이 함께 필요합니다.
반면 Vercel은 이러한 과정을 상당 부분 자동화하여 제공합니다.
대표적인 장점은 다음과 같습니다.
Next.js와 높은 호환성
Next.js 프로젝트를 별도의 복잡한 설정 없이 배포할 수 있습니다.
무료 요금제 제공
개인 프로젝트나 학습용 웹앱은 무료 요금제로도 충분히 운영할 수 있습니다.
HTTPS 자동 적용
배포가 완료되면 보안 연결(HTTPS)이 자동으로 적용됩니다.
별도의 SSL 인증서를 직접 설치할 필요가 없습니다.
자동 배포
GitHub와 연결하면 수정한 내용을 저장소에 업로드하는 것만으로 새로운 버전이 자동으로 배포됩니다.
빠른 배포 속도
프로젝트 규모에 따라 차이는 있지만 대부분 수 분 이내에 새로운 버전을 확인할 수 있습니다.
GitHub와 Vercel은 어떤 관계일까?
웹앱 개발에서는 GitHub와 Vercel을 함께 사용하는 경우가 많습니다.
GitHub는 프로젝트의 코드를 저장하고 버전을 관리하는 서비스입니다.
반면 Vercel은 GitHub에 저장된 코드를 읽어 실제 인터넷 서비스로 배포하는 역할을 합니다.
일반적인 개발 과정은 다음과 같습니다.
- VS Code에서 코드를 수정한다.
- GitHub에 변경 사항을 업로드한다.
- Vercel이 변경 사항을 감지한다.
- 새로운 버전으로 자동 배포한다.
- 인터넷에서 최신 버전을 확인한다.
이처럼 GitHub와 Vercel은 서로 다른 역할을 수행하지만 함께 사용하면 매우 효율적인 개발 환경을 만들 수 있습니다.
localhost와 Vercel은 언제 사용할까?
웹앱 개발은 대부분 다음과 같은 순서로 진행됩니다.
① 기능 개발
새로운 화면이나 기능을 localhost에서 개발합니다.
② 테스트
기능이 정상적으로 동작하는지 확인합니다.
③ 오류 수정
발견된 문제를 수정하고 다시 테스트합니다.
④ GitHub 업로드
수정이 완료된 코드를 저장소에 업로드합니다.
⑤ Vercel 배포
인터넷 서버에 새로운 버전이 반영됩니다.
⑥ 서비스 운영
사용자는 인터넷 주소를 통해 최신 버전의 웹앱을 이용합니다.
이 과정을 반복하면서 웹앱은 점차 완성도를 높여 갑니다.
localhost와 Vercel을 혼동하기 쉬운 이유
웹 개발을 처음 접하면 localhost와 Vercel을 같은 개념으로 생각하기 쉽습니다.
하지만 실제로는 사용하는 목적이 전혀 다릅니다.
예를 들어 localhost에서 버튼을 수정하면 바로 화면이 바뀝니다.
하지만 Vercel에서는 수정한 코드가 자동으로 반영되지 않습니다.
먼저 GitHub에 변경 사항을 업로드하고, 배포가 완료되어야 인터넷에서 새로운 화면을 확인할 수 있습니다.
또한 localhost에서는 인터넷 연결 없이도 개발을 진행할 수 있지만, Vercel은 클라우드 기반 서비스이므로 인터넷 연결이 필요합니다.
이처럼 두 환경은 개발 과정에서 서로 다른 역할을 담당합니다.
localhost와 Vercel 비교
| 목적 | 개발 및 테스트 | 서비스 배포 |
| 실행 위치 | 자신의 컴퓨터 | 클라우드 서버 |
| 접속 가능 대상 | 개발자 본인 | 인터넷 사용자 |
| 주소 예시 | localhost:3000 | 프로젝트명.vercel.app |
| 인터넷 연결 | 없어도 가능 | 필요 |
| 수정 내용 반영 | 즉시 확인 | 배포 후 확인 |
| 주요 작업 | 기능 개발, 오류 수정 | 서비스 운영 |
AI 웹앱 개발에서는 어떤 흐름으로 사용할까?
AI를 활용한 웹앱 개발에서도 기본적인 개발 절차는 동일합니다.
먼저 AI에게 필요한 기능을 요청하여 코드를 생성합니다.
생성된 코드는 VS Code에서 프로젝트에 적용한 뒤 localhost에서 실행하여 정상적으로 동작하는지 확인합니다.
기능이 원하는 대로 동작하면 GitHub에 변경 사항을 업로드합니다.
이후 Vercel이 GitHub의 변경 내용을 감지하여 자동으로 배포를 진행하고, 새로운 인터넷 주소에서 최신 버전을 확인할 수 있습니다.
즉, AI는 개발을 보조하는 도구이고, localhost와 Vercel은 개발과 서비스 운영을 담당하는 환경입니다.
초보자가 자주 하는 오해
"localhost가 열리면 다른 사람도 사용할 수 있을까?"
아닙니다.
localhost는 자신의 컴퓨터에서만 접속할 수 있습니다.
다른 사람이 사용하려면 반드시 배포가 필요합니다.
"Vercel만 있으면 localhost는 필요 없을까?"
아닙니다.
대부분의 개발은 localhost에서 진행합니다.
Vercel은 개발이 끝난 결과를 공개하는 단계에서 사용합니다.
"웹앱을 수정하면 Vercel도 바로 바뀔까?"
아닙니다.
localhost에서 수정한 내용은 GitHub에 업로드되고 배포가 완료된 이후에야 Vercel에 반영됩니다.
이번 글 핵심 요약
- localhost는 자신의 컴퓨터에서 웹앱을 개발하고 테스트하는 로컬 개발 환경이다.
- Vercel은 localhost에서 개발한 웹앱을 인터넷에 공개하는 배포 플랫폼이다.
- GitHub는 코드의 변경 사항을 관리하고, Vercel은 GitHub의 코드를 배포하는 역할을 한다.
- 대부분의 AI 웹앱 개발은 localhost → GitHub → Vercel 순서로 진행된다.
- localhost와 Vercel의 역할을 구분하면 웹앱 개발 과정을 훨씬 쉽게 이해할 수 있다.
2026.07.09 - [AI 활용] - AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다
AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다
반복되는 엑셀 업무와 수기 관리에 지쳐 AI를 활용한 업무용 웹앱을 직접 만들었습니다.개발 경험이 없었던 제가 ChatGPT와 Claude를 이용해 업무 자동화를 시작하게 된 과정과 실제 변화, 느낀 점을
oloone.com
2026.07.20 - [AI 웹앱 제작기] - 바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유
바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유
"AI가 코드를 대신 써주는 시대가 왔다."최근 몇 년 동안 가장 많이 들리는 이야기 중 하나입니다. 하지만 정말 중요한 변화는 AI가 코드를 작성한다는 사실이 아닙니다. 더 큰 변화는 사람이 프로
oloone.com
'AI 웹앱 제작기' 카테고리의 다른 글
| AI 웹앱 제작기 ③ 개발 환경부터 만들기, 왜 Node.js와 VS Code가 필요할까? (0) | 2026.07.25 |
|---|---|
| README.md는 왜 항상 있을까? Markdown(.md)이란 무엇이며 AI가 기본으로 사용하는 이유 (0) | 2026.07.24 |
| Supabase란? AI와 함께 웹앱을 만들면서 가장 먼저 선택한 데이터베이스 (0) | 2026.07.22 |
| 바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유 (0) | 2026.07.20 |
| AI 웹앱 제작기 | 왜 Supabase를 선택했을까? 비개발자의 실제 경험 (0) | 2026.07.14 |
