바이브 코딩 처음 시작 | Node.js LTS와 Cursor

바이브 코딩과 첫 화면의 정의

웹 앱은 브라우저만 있으면 결과를 바로 본다. 모바일 앱이나 게임보다 “만들었다”는 확인이 빠르다. 첫날의 완료 기준은 화면에 글자나 버튼이 보이고, 주소창에 localhost:3000 같은 호스트와 포트가 뜨는 상태다.

코딩을 한 번도 하지 않은 사람이 외울 루프는 짧다. 계획을 요청하고, 바뀐 줄을 Keep 또는 Undo로 확인하고, 에러 문구를 채팅에 그대로 넘긴다. 문법을 이해하지 못한 채로도 이 루프는 돈다.

핵심 포인트: 첫 목표는 배포된 사이트가 아니라, 자기 PC에서 localhost:3000이 열리는 것이다.

Node.js LTS와 npm

Node.js는 JavaScript를 브라우저 밖에서 실행하는 런타임이다. 웹 앱 도구 대부분이 이 런타임 위에 있다. LTS는 장기 지원 채널이다. Current(최신)보다 버전 숫자가 낮아 보여도, 입문 설치는 LTS가 덜 흔들린다.

윈도우 검색에서 cmd로 명령 프롬프트를 연다. 아직 Node가 없으면 npm 입력 후 에러가 난다. Node.js 공식 다운로드에서 LTS 설치 파일을 받아 설치 마법사는 기본값으로 진행한다. 설치 후 같은 창에서 node -v와 npm -v에 버전 숫자가 보이면 런타임이 잡힌 것이다.

npm은 Node Package Manager의 줄임말이다. 역할은 프로젝트에 적힌 부품(의존성)을 받아 오는 것이다. 설치 확인 명령은 아래와 같다.

npm

사용법 안내가 길게 나오면 npm이 PATH에 올라간 상태다. 안내가 없고 명령을 찾을 수 없다는 메시지만 나오면 설치가 끝나지 않았거나, 터미널을 설치 전에 열어 둔 창이다. 창을 닫고 다시 연다.

Cursor를 먼저 두는 이유

구글에서 cursor를 검색해 Cursor 공식 사이트의 윈도우 설치 파일을 받는다. 설치 마법사는 Node.js와 같이 다음 버튼으로 진행한다. 바탕화면 바로가기는 다음 실행을 짧게 만든다.

완전 초보에게 Cursor를 앞에 두는 이유는 세 가지다. 오토 모드가 있어 모델 이름을 몰라도 작업을 맡긴다. AI가 고친 줄이 색으로 보여 Keep과 Undo로 되돌린다. VS Code 기반이라 나중에 다른 에디터로 옮겨도 화면 배치가 익숙하다.

클로드 코드와 코덱스는 터미널 중심이라 첫날 진입이 가파르다. 한 달 정도는 Cursor로 Keep과 Allow List를 익힌 뒤 옮기는 편이 덜 지친다. 핵심 순서는 도구가 바뀌어도 같다.

구독료는 도구마다 자주 바뀐다. 결제 전 각 공식 요금 페이지의 현재 숫자를 본다. 회사 PC면 사내 보안 정책이 Node 설치와 외부 AI 로그인, 로컬 디스크 저장과 겹치는지가 앞선다.

작업 폴더와 README 계획

Cursor를 켜고 계정으로 로그인한 뒤 작업 폴더를 연다. 폴더 이름은 소문자 영문이 안전하다. my-first-app처럼 공백과 한글을 피한다.

화면은 대략 네 구역이다. 왼쪽 파일 목록, 가운데 코드, 오른쪽 AI 채팅, 아래 터미널이다. 터미널은 Ctrl + J로 열고 닫는다. 처음부터 완성 제품을 한 번에 맡기면 방향이 흐려진다. README에 계획을 먼저 적게 한다.

채팅에 넘기는 요청의 예는 아래와 같다.

README 파일 하나 만들어서 계획부터 짜줘.
- Next.js + React + 로컬 SQLite로
- 랜딩 페이지 + 간단한 메모 웹앱을 만들 거야
- 사이트명은 알아서 정해줘

README에 스택과 단계가 생기면 내용을 읽고 진행을 맡긴다. 플랜 모드를 쓰면 AI가 애매한 점을 되물은 뒤 구현으로 넘어간다. 왼쪽 목록에 README가 보이면 계획이 파일로 남은 것이다.

터미널 단축키와 윈도우 붙여넣기

터미널은 사람과 컴퓨터가 글자로 명령을 주고받는 창이다. AI도 여기서 npm install 같은 명령을 친다. 초보가 볼 것은 지금 터미널에 무엇이 찍히는지 정도면 충분하다.

윈도우 터미널에서 Ctrl + V가 먹지 않는 경우가 많다. 그때는 마우스 오른쪽 단추로 붙여넣는다. 이 한 가지를 모르면 에러 복사가 거기서 멈춘다. 개발 서버를 끄려면 그 터미널에서 Ctrl + C를 친다. npm run dev로 띄운 미리보기는 직접 켜고 끄는 편이 포트 꼬임을 줄인다.

Keep Undo와 Allow List

AI가 파일을 고치면 바뀐 줄에 색이 생긴다. 왼쪽에서 파일을 열어 어디를 건드렸는지만 본다. 코드 전체를 이해할 필요는 없다. 마음에 들면 Keep, 아니면 Undo다. 여러 파일이면 Keep All과 Undo All로 한 번에 처리한다.

터미널 명령을 칠 때 Cursor는 허용 여부를 묻는다. ls와 npm install처럼 파일을 지우지 않는 명령은 Allow List에 넣으면 같은 질문을 반복하지 않는다. del처럼 지우는 명령은 Skip으로 막는다. Allow List에 넣은 뒤 같은 명령을 다시 실행할 때 묻지 않으면 목록이 동작하는 것이다.

Run Everything(전부 실행)은 켜지 않는 편이 안전하다. AI가 범위를 넓혀 프로젝트를 한 번에 망가뜨릴 여지가 있다. 기존 폴더를 지키고 싶으면 채팅에 “기존 건 그대로 두고 새 폴더로 만들어 줘”라고 범위를 적는다.

npm install과 개발 서버

코드가 생기면 보통 설치, 개발 서버, 빌드 순이다. 각 줄은 프로젝트 폴더를 연 Cursor 터미널에서 친다. 세 명령의 뜻은 부품을 받고, 미리보기를 켜고, 배포용 묶음을 시험하는 것이다.

npm install
npm run dev
npm run build

npm install을 건너뛰면 dev와 build가 실패한다. npm run dev 후 터미널에 localhost:3000이 뜨면 그 주소를 브라우저에서 연다. 화면에 시킨 내용이 보이면 첫 실행은 통과다.

localhost는 자기 컴퓨터에서만 열린다. 친구에게 그 문자열을 보내도 상대 PC에서는 빈 연결이다. 바깥에 공개하려면 나중에 Vercel이나 Cloudflare 같은 배포가 필요하다.

처음에는 거의 항상 에러가 난다. 에러 메시지 전체를 복사해 채팅에 넘긴다. Cursor에서는 터미널을 드래그해 Add to Chat으로 붙인다. 윈도우에서 자주 나오는 두 가지는 PowerShell 실행 정책과 의존성 또는 Node 버전 충돌이다. 전자는 스크립트 실행이 막혔다는 빨간 메시지다. AI가 Set-ExecutionPolicy 변경을 제안하면 Allow List에 넣고 진행한다. 후자는 node_modules를 지우고 다시 설치하는 안내가 흔하다.

로컬 SQLite와 프로젝트 폴더

예시 메모 앱은 SQLite 로컬 DB에 저장된다. 인터넷 없이 PC 안에서 동작한다. 채팅형 AI와 달리 바이브 코딩 도구는 디스크에 실제 파일을 만든다. 코드와 데이터를 자기가 들고 있고, 나중에 Turso나 Supabase로 옮기는 선택은 그다음이다.

화면이 안 바뀐 것처럼 보이면 Ctrl + Shift + R로 강제 새로고침한다. 모르는 단어는 그 자리에서 채팅에 뜻을 묻는다. 오늘 다룬 개념을 learn 폴더의 학습 페이지로 따로 만들어 달라고 범위를 적으면, 기존 앱을 건드리지 않고 복습 노트가 생긴다.

다른 도구로 옮기는 같은 순서

Cursor 기준이지만 반복은 같다. 런타임과 편집기를 설치하고, 폴더와 계획을 남기고, 요청과 승인, 실행, 에러 복사다. 도구 이름만 바뀌고 이 순서는 남는다.

배포와 Git은 첫날 범위가 아니다. 로컬에서 화면이 안정적으로 열린 뒤에 공개 주소를 붙인다.

마무리

앞에서 다룬 바이브 코딩 입문의 뼈대는 아래와 같다.

• 첫 설치는 Node.js LTS와 Cursor 두 가지다.
• 완료 기준은 localhost:3000에서 화면이 보이는 것이다.
• README 계획 다음에 구현을 맡긴다.
• Keep과 Undo, Allow List가 초보의 안전장치다.
• 에러는 해석보다 메시지 전체를 채팅에 넘기는 쪽이 짧다.
• localhost는 자기 PC에서만 열린다.
• 요금과 메뉴 라벨은 공식 페이지의 현재 값을 본다.

「문법을 외우기 전에 LTS와 Cursor로 로컬 화면을 연다」 배포와 Git은 그다음 문서의 주제다.

출처와 링크

• Node.js 공식 다운로드: https://nodejs.org/ko
• Cursor 공식 사이트: https://cursor.com
• Cursor 문서: https://docs.cursor.com/
• Next.js 문서: https://nextjs.org/docs
• npm: https://www.npmjs.com
• React 문서: https://react.dev
• SQLite: https://www.sqlite.org

조사 기준: 2026년 8월. Cursor 메뉴, 요금, 모델 이름은 수시로 바뀐다. 설치 전 cursor.com과 docs.cursor.com을 함께 연다.