Node.js 비개발자 입문
Lovable 다음, VS Code 환경에서
왜 이게 필요한지만 알면 됩니다
설치하라고 해서 설치만 했던 그것 —
이 글을 읽고 나면 왜 필요한지 이해됩니다
📋 목차
Lovable로 만들다 보면 반드시 오는 순간
Lovable에서 Todo 앱을 만들었습니다. 꽤 잘 됩니다. 기쁩니다.
그런데 조금씩 더 만들다 보니 이런 순간들이 옵니다.
"이 차트 라이브러리를 추가하고 싶은데 Lovable에서 안 되네."
"코드 구조를 직접 보면서 수정하고 싶은데 방법이 없네."
"GitHub에 올리고 Vercel로 배포하고 싶은데 연결이 안 되네."
그래서 VS Code를 설치했습니다. 열었더니 이런 안내가 나왔습니다.
"Node.js를 설치해야 합니다."
검색해봤습니다. "Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 서버 사이드 JavaScript 런타임 환경입니다." 읽다가 창을 닫았습니다.
왜 결국 VS Code 환경으로 오게 되는가
Lovable, Bolt.new, v0 같은 브라우저 기반 도구는 진입 장벽이 낮고 빠릅니다. 처음 시작하기에 이보다 좋은 방법이 없습니다. 하지만 만들면서 욕심이 생기다 보면 이런 순간들이 옵니다.
- 기본 화면 생성
- 간단한 기능 추가
- 빠른 프로토타입
- 비개발자 첫 경험
- 코드 구조 직접 보고 수정
- 특정 라이브러리·패키지 설치
- GitHub 연동 + 자동 배포
- AI와 파일 단위 세밀한 수정
- Cursor 등 AI IDE 활용
이 중 하나라도 필요해지는 순간, VS Code 환경으로 넘어오게 됩니다. 그리고 VS Code 환경을 열면 가장 먼저 만나는 것이 Node.js입니다.
Node.js의 작동 원리를 이해할 필요는 없습니다. 비개발자에게 필요한 것은 딱 두 가지입니다. 왜 필요한지 아는 것, 그리고 제대로 설치하는 것. 이 글은 그 두 가지만 다룹니다.
Node.js가 뭔지 한 줄로 — 비개발자 언어로
개발자 언어로 된 설명은 잠깐 내려두겠습니다. 비개발자에게 가장 와닿는 비유는 이것입니다.
🔧 Node.js를 가장 쉽게 이해하는 방법
실행되는 기반 환경
실행되는 기반 환경
Node.js가 없으면 바이브 코딩 앱이 내 컴퓨터에서 실행되지 않습니다
더 직접적으로 말하면 이렇습니다. AI가 만들어준 React, Next.js 기반 코드는 브라우저가 아니라 내 컴퓨터 위에서 먼저 실행됩니다. 그 실행을 가능하게 해주는 것이 Node.js입니다. Node.js가 없으면 npm run dev(앱 실행)도, npm install(기능 설치)도 작동하지 않습니다.
한 줄 요약: Node.js = 내 컴퓨터에서 앱을 돌리는 엔진. 이것만 기억하면 됩니다.
Lovable과 Bolt.new는 브라우저에서 전부 처리합니다. 내 컴퓨터에서 실행하는 것이 없으니 Node.js가 필요 없었습니다. VS Code 환경은 내 컴퓨터에서 직접 실행하기 때문에 Node.js가 필요해지는 것입니다.
npm은 또 뭔가요? Node.js와 어떻게 다른가
Node.js를 설치하면 자동으로 함께 설치되는 것이 있습니다. 바로 npm입니다. 바이브 코딩을 하면서 아마 가장 자주 보게 될 단어입니다.
📦 Node.js와 npm의 관계
기반 환경
설치하는 도구
스마트폰을 사면 앱스토어가 기본으로 들어있는 것처럼
npm을 통해 설치하는 것들을 패키지(Package)라고 합니다. 차트 기능, 날짜 처리, 로그인 연동 등 누군가 이미 만들어둔 기능들을 내 앱에 가져다 쓰는 것입니다. AI가 "npm install 무언가"라고 하면, 그 기능을 앱스토어에서 내려받는 것이라고 생각하면 됩니다.
| npm 명령어 | 하는 일 | 비유 |
|---|---|---|
npm install |
패키지(기능) 설치 | 앱스토어에서 앱 설치 |
npm run dev |
개발 서버 실행 (앱 미리보기) | 앱 실행 버튼 누르기 |
npm run build |
배포용 파일 생성 | 앱 출판 준비 |
npm -v |
npm 버전 확인 | 앱스토어 버전 확인 |
AI가 "npm install recharts를 실행하세요"라고 하면 그냥 터미널에 복붙하면 됩니다. 이 표는 나중에 "이 명령어가 뭘 하는 건지"가 궁금할 때 다시 보는 용도입니다.
바이브 코딩에서 Node.js가 등장하는 순간들
Node.js와 npm은 언제 등장할까요? 미리 알아두면 그 순간이 왔을 때 당황하지 않습니다.
-
1지금 바로
VS Code에서 처음 프로젝트를 열 때
AI가 "npm install을 실행해서 패키지를 먼저 설치하세요"라고 합니다. 프로젝트에 필요한 모든 기능을 한 번에 설치하는 과정입니다. Node.js가 없으면 이 명령어 자체가 작동하지 않습니다.
-
2지금 바로
앱을 내 컴퓨터에서 미리보기 할 때
npm run dev를 실행하면 브라우저에서 localhost:3000 같은 주소로 내 앱을 바로 확인할 수 있습니다. 배포 전에 내 컴퓨터에서 먼저 테스트하는 것입니다. -
3지금 바로
새 기능을 추가할 때마다
AI가 "차트 기능이 필요하니 npm install recharts를 실행하세요"처럼 기능을 추가할 때마다 npm install을 씁니다. 앱에 새 기능을 추가하는 모든 순간에 npm이 사용됩니다.
-
4조금 후
Vercel 배포를 자동화할 때
Vercel이 GitHub에서 코드를 가져와 자동으로 배포할 때 내부적으로 npm을 사용합니다. 직접 명령어를 칠 일은 없지만, 배포 오류가 났을 때 로그에서 npm 관련 내용이 나올 수 있습니다.
Node.js 설치 — 4단계로 끝내기
설치 자체는 어렵지 않습니다. Mac과 Windows 모두 동일한 흐름입니다. LTS 버전을 선택하는 것만 기억하세요. LTS는 "Long Term Support"의 약자로, 안정성이 검증된 버전입니다. 최신 버전보다 LTS가 바이브 코딩 환경에서 훨씬 안전합니다.
nodejs.org 접속
브라우저에서 nodejs.org에 접속합니다. 메인 화면에 두 개의 버튼이 크게 표시됩니다.
Current 버튼 (오른쪽) → 바이브 코딩에서는 선택하지 않음
설치 파일 다운로드 및 실행
LTS 버튼을 클릭하면 운영체제에 맞는 설치 파일이 자동으로 다운로드됩니다.
Windows: .msi 파일 → 더블클릭 → Next → Install
설치 완료 후 컴퓨터 재시작 (선택)
설치가 완료됩니다. Windows는 재시작을 권장합니다. Mac은 대부분 재시작 없이 바로 사용 가능합니다.
설치 확인 — 다음 섹션에서 바로 진행
설치가 됐는지 확인하는 방법이 있습니다. 터미널에서 명령어 두 개를 입력하면 10초 안에 확인됩니다. 바로 아래 섹션에서 안내합니다.
제대로 설치됐는지 확인하는 법
설치 후 터미널(Mac) 또는 PowerShell(Windows)을 열고 아래 두 명령어를 순서대로 입력하세요. 터미널이 낯설다면 각 운영체제에서 이렇게 찾으면 됩니다.
Mac
Spotlight(⌘+Space) → "터미널" 검색 → 엔터
Windows
시작 버튼 → "PowerShell" 검색 → 엔터
✅ 설치 확인 명령어 2개
🚨 오류가 났을 때 대처법
"command not found" 또는 "'node'은 인식되지 않는 명령어"
설치가 완료되지 않았거나 PATH 설정이 안 됐습니다. 컴퓨터를 재시작한 후 다시 확인하세요.
버전 번호가 너무 낮게 나올 때 (v16 이하)
이전에 설치한 구버전이 있는 경우입니다. nodejs.org에서 최신 LTS를 다시 설치하면 자동으로 업데이트됩니다.
오류 메시지 전체를 복사해서 AI에게 "Node.js를 설치했는데 이 오류가 났습니다. [오류 메시지]. Mac / Windows 환경에서 어떻게 해결하면 되는지 단계별로 알려줘"라고 물으세요. 대부분의 오류는 이 방법으로 해결됩니다.
이전 글 → [[바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꿔버리지 않게 하는 방법]] 다음 글 → [[터미널이 처음인 비개발자 — 바이브 코딩에서 실제로 쓰는 명령어 5가지만]]
✅ Node.js 설치 실전 체크리스트
node -v를 입력해 버전 번호가 나오는 것을 확인했다npm -v를 입력해 npm도 정상 설치된 것을 확인했다📌 핵심 정리
- Lovable 같은 브라우저 기반 도구는 시작하기 좋지만, 코드 직접 수정·패키지 설치·GitHub 연동·AI IDE 활용이 필요해지는 순간 VS Code 로컬 환경으로 이동하게 됩니다. 그 순간 가장 먼저 만나는 것이 Node.js입니다.
- Node.js는 "내 컴퓨터에서 앱이 돌아가는 엔진"입니다. VS Code 환경에서 바이브 코딩을 하려면 반드시 필요합니다. Lovable처럼 브라우저 기반 도구만 쓴다면 없어도 됩니다.
- npm은 Node.js와 함께 자동으로 설치됩니다. npm은 "기능을 설치하는 앱스토어" 역할입니다. AI가 npm install을 시키면 새 기능을 가져다 쓰는 것입니다.
- 설치는 nodejs.org에서 LTS 버전을 선택하는 것이 전부입니다. 최신 버전이 아닌 LTS를 선택해야 안정적으로 작동합니다.
- 설치 후 터미널에서
node -v와npm -v두 명령어로 바로 확인할 수 있습니다. 버전 번호가 나오면 성공입니다. - 오류가 났을 때는 오류 메시지를 복사해 AI에게 "이 오류가 왜 났는지, 어떻게 해결하는지 알려줘"라고 물으면 됩니다. 대부분의 Node.js 설치 오류는 재시작이나 재설치로 해결됩니다.
❓ 자주 묻는 질문
Node.js를 설치하지 않으면 바이브 코딩을 할 수 없나요?
Lovable, Bolt.new처럼 브라우저 기반 도구만 쓴다면 Node.js 없이도 시작할 수 있습니다. 하지만 코드를 직접 보고 수정하거나, 특정 패키지를 설치하거나, GitHub 연동 및 Cursor 같은 AI IDE를 쓰려면 VS Code 로컬 환경이 필요하고, 그 순간부터 Node.js가 필수입니다. npm(패키지 설치), 로컬 서버 실행(npm run dev) 등 VS Code 기반 바이브 코딩의 핵심 기능들이 Node.js 위에서 작동하기 때문입니다.
Node.js와 npm의 차이가 뭔가요?
Node.js는 앱이 돌아가는 엔진이고, npm은 그 엔진 위에서 작동하는 기능 설치 도구입니다. Node.js를 설치하면 npm이 자동으로 함께 설치됩니다. 비유하면 Node.js는 스마트폰 자체이고, npm은 앱스토어입니다. 스마트폰(Node.js) 없이는 앱스토어(npm)도 쓸 수 없습니다.
Node.js는 어떤 버전을 설치해야 하나요?
2026년 기준으로 LTS(Long Term Support) 버전을 설치하는 것이 가장 안전합니다. LTS는 장기 지원 버전으로 안정성이 검증되어 있습니다. nodejs.org에 접속하면 메인 화면에 LTS 버전 다운로드 버튼이 크게 표시됩니다. 최신(Current) 버전보다 LTS를 우선 선택하세요.
Node.js를 설치한 후 제대로 설치됐는지 확인하는 방법은 무엇인가요?
터미널(Mac: 터미널 앱, Windows: PowerShell)을 열고 'node -v'를 입력한 후 엔터를 누르세요. 'v22.x.x'처럼 버전 번호가 나오면 정상 설치된 것입니다. 이어서 'npm -v'를 입력해 npm도 함께 설치됐는지 확인하세요. 숫자가 나오면 모두 준비된 것입니다.
Node.js 설치 완료했다면
이제 터미널과 친해질 차례입니다
Node.js와 npm이 준비됐습니다.
다음은 터미널에서 실제로 쓰는 명령어 5가지를 익힐 차례입니다.
검은 화면이 더 이상 무섭지 않게 됩니다.
댓글 쓰기