바이브 코딩 처음 시작 | Node.js와 Cursor로 첫 화면 띄우기

처음 목표는 작은 웹 앱 하나뿐

모바일 앱이나 게임은 나중에 해도 늦지 않습니다. 웹 앱(web app) 은 브라우저만 있으면 결과를 바로 볼 수 있어서, "만들었다"는 감이 빨리 옵니다. 이 글의 완료 기준도 그 정도입니다. 화면에 버튼이나 글자가 보이고, 주소창에 localhost:3000 같은 숫자가 뜨면 통과입니다.

Node.js를 먼저 깔고 npm이 반응하는지 본다

Node.js는 JavaScript 코드를 내 컴퓨터에서 실행하게 해 주는 기반입니다. 웹 앱을 만들 때 거의 항상 필요합니다.

윈도우 검색창에 cmd를 쳐 명령 프롬프트(터미널) 를 엽니다. 아래를 입력합니다.

npm

에러가 나면 Node.js가 없는 겁니다. Node.js 공식 다운로드에서 LTS(장기 지원) 버전을 받아 설치합니다. 설치 화면은 기본값 그대로 다음만 누르면 됩니다. 다시 npm을 쳤을 때 사용법 안내가 주르륵 나오면 성공입니다. 확인: node -v와 npm -v에 버전 숫자가 보이면 통과입니다.

npm은 Node Package Manager 줄임말입니다. 지금은 "웹 앱에 필요한 부품을 가져오는 도구" 정도만 알면 됩니다.

💡 Tip: LTS는 "당분간 안정적으로 쓰라"는 뜻입니다. Current(최신)보다 LTS를 고르는 편이 초보에게 덜 헷갈립니다.

Cursor를 설치하고 왜 여기서부터 시작하는지

구글에 cursor를 검색해 Cursor 공식 사이트에서 윈도우용 설치 파일을 받습니다. Node.js와 같이 다음 → 설치만 하면 됩니다. 바탕화면 바로가기를 만들어 두면 편합니다.

도구는 많습니다. 그런데 완전 초보에게 커서를 먼저 권하는 이유는 세 가지입니다. 오토 모드가 있어 모델 선택을 덜 신경 써도 되고, AI가 고친 줄이 색으로 보여 Keep과 Undo로 눈으로 확인할 수 있으며, VS Code 기반이라 나중에 다른 에디터로 옮겨도 화면이 익숙합니다.

클로드 코드(Claude Code)나 코덱스(Codex)는 터미널 중심이라 첫날부터 진입 장벽이 있습니다. 한 달 정도는 커서로 감을 잡고, 익숙해지면 본인 손에 맞는 도구를 고르면 됩니다.

⚠️ 주의: 구독료는 도구마다 자주 바뀝니다. 결제 전 각 공식 요금 페이지에서 현재 가격을 확인하세요. 회사 PC라면 사내 보안 정책도 먼저 봐야 합니다.

폴더를 열고 계획부터 요청한다

커서를 켜고 구글 로그인 후 New Project로 작업 폴더를 만듭니다. 폴더 이름은 소문자 영문이 안전합니다. my-first-app처럼 짓으면 됩니다.

화면은 대략 네 구역입니다. 왼쪽 파일 목록, 가운데 코드, 오른쪽 AI 채팅, 아래 터미널(Ctrl + J로 열고 닫기)입니다. 처음부터 "다 만들어 줘"라고 하면 방향이 흐려집니다. 계획(Plan)을 먼저 짭니다.

채팅에 이렇게 요청합니다.

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

README에 기술 스택과 단계가 나오면 읽고 "진행해"라고 합니다. 커서 플랜 모드(Plan Mode) 를 쓰면 AI가 애매한 점을 되물어 준 뒤 Build로 구현을 시작합니다. 확인: README 파일이 왼쪽 목록에 생기면 통과입니다.

터미널과 단축키, 처음 막히는 지점

터미널은 사람과 컴퓨터가 글자로 명령을 주고받는 창입니다. AI도 여기서 npm install 같은 명령을 칩니다. "AI가 지금 터미널에 뭘 치는구나" 정도만 따라가면 됩니다.

💡 Tip: 윈도우 터미널에 붙여넣기는 Ctrl + V가 안 먹히는 경우가 많습니다. 마우스 우클릭으로 붙여넣으세요. 이걸 모르면 "왜 안 되지?" 하고 한참 멈춥니다.

서버를 끄려면 그 터미널에서 Ctrl + C입니다. npm run dev로 띄운 미리보기는 직접 켜고 끄는 편이 포트(접속 번호) 꼬임을 줄입니다.

AI에게 시키고 Keep과 Undo로 확인한다

AI가 파일을 고치면 바뀐 줄에 색 표시가 생깁니다. 왼쪽에서 파일을 열어 "어디를 건드렸는지"만 봅니다. 코드 전체를 이해할 필요는 없습니다. 마음에 들면 Keep, 이상하면 Undo입니다. 여러 파일이면 Keep All / Undo All로 한 번에 처리합니다.

터미널 명령을 칠 때 "이 명령 써도 될까요?"라고 묻습니다. ls, npm install 같은 안전한 명령은 Allow List(허용 목록) 에 넣으면 편합니다. del처럼 지우는 명령은 Skip으로 막으세요. 확인: Allow List에 넣은 뒤 같은 명령을 다시 실행할 때 매번 묻지 않으면 통과입니다.

⚠️ 주의: Run Everything(전부 실행)은 켜지 마세요. AI가 실수로 프로젝트를 망가뜨릴 수 있습니다.

npm install과 dev 서버, 에러는 그대로 붙여넣는다

코드가 생기면 보통 아래 순서입니다. 각 줄은 프로젝트 폴더를 연 커서 터미널에서 칩니다.

npm install
npm run dev
npm run build

npm install은 필요한 부품(의존성)을 받습니다. 이걸 건너뛰면 dev와 build가 실패합니다. npm run dev 후 터미널에 localhost:3000 같은 주소가 뜨면 Ctrl + 클릭으로 브라우저에서 엽니다. 확인: 브라우저에 내가 시킨 화면이 보이면 통과입니다.

localhost는 내 컴퓨터에서만 보입니다. 다른 사람에게 그 주소를 보내도 열리지 않습니다. 바깥에 공개하려면 나중에 Vercel이나 Cloudflare 같은 배포를 합니다.

처음엔 거의 항상 에러가 납니다. 에러 메시지 전체를 복사해 AI 채팅에 붙여넣고 "해결해줘" 하면 됩니다. 커서에서는 터미널 내용을 드래그해 Add to Chat으로 넘길 수 있습니다.

윈도우에서 자주 나오는 두 가지입니다. PowerShell 실행 정책 차단은 npm run dev 시 빨간 메시지로 스크립트 실행이 막혔다고 나옵니다. AI가 Set-ExecutionPolicy 변경을 제안하면 Allow List에 넣고 진행합니다. 의존성·Node 버전 충돌은 AI가 node_modules를 지우고 다시 설치하도록 안내합니다. 둘 다 "에러 복붙 → 해결해줘 → 제안대로 진행"이면 됩니다.

데이터는 내 컴퓨터 파일로 남는다

예시 메모 앱은 SQLite 로컬 DB에 저장됩니다. 인터넷 없이 내 PC 안에서 동작합니다. 채팅형 AI와 달리, 바이브 코딩 툴은 내 디스크에 실제 파일을 만듭니다. 코드·데이터를 내가 들고 있고, 나중에 Turso나 Supabase로 옮길 수도 있습니다. 처음엔 "파일이 내 컴퓨터에 있다"는 것만 알면 충분합니다.

다른 도구로 옮겨도 같은 루프다

여기까지 커서 기준이지만, 핵심 반복은 동일합니다. 두 프로그램 설치 → 폴더와 계획 → 요청·질문 → 승인 → 실행 → 에러 복붙. 도구를 바꿔도 이 순서만 익히면 됩니다.

모르는 단어는 그 자리에서 "○○이 뭐야?"라고 물으세요. 화면이 안 바뀐 것 같으면 Ctrl + Shift + R로 강제 새로고침합니다. 기존 프로젝트를 망치기 싫으면 "기존 건 그대로 두고 새 폴더로 만들어 줘"라고 분명히 말합니다.

AI에게 이렇게 시켜 보는 것도 좋습니다. 오늘 다룬 개념과 에러를 학습 코너 페이지로 만들어 달라고 하면, 나만의 복습 노트가 생깁니다. "기존 앱은 그대로, learn 폴더로 추가"라고 범위를 적어 주세요.

출처와 링크

• Node.js 공식 다운로드: LTS 설치
• Cursor 공식 문서: 설치, 모드, 단축키
• Next.js 공식 문서: AI가 자주 쓰는 프레임워크
• npm 공식 사이트: 패키지 검색
• React 공식 문서: UI 라이브러리
• SQLite: 로컬 DB 개요

조사 기준: 2026년 7월. Cursor 메뉴, 요금, 모델 이름은 수시로 바뀝니다. 설치 전 cursor.com과 docs.cursor.com을 함께 확인하세요.