바이브코딩 왕초보가 첫날 겪은 것 환경설정부터 첫 실행까지 삽질기: Cursor 첫 실행에서 막힌 지점만 정리

바이브코딩 첫날에 가장 많이 막히는 지점은 AI가 코드를 못 짜서가 아니라, 내 컴퓨터에서 프로젝트가 실행되지 않는 문제입니다. 결론부터 말하면 왕초보라면 Cursor + Node.js LTS + GitHub 조합으로 아주 작은 화면 하나를 띄우는 데만 집중하는 것이 가장 안전합니다.

Node.js와 Cursor 설치 후 Vite 샘플을 먼저 실행해보세요. 첫날 목표는 완성품이 아니라 ‘내 컴퓨터에서 돌아가는 첫 화면’입니다.

첫날 목표를 ‘멋진 앱 완성’으로 잡으면 거의 반드시 꼬입니다. 대신 개발 환경 설치 → 샘플 프로젝트 생성 → AI에게 작은 수정 요청 → 브라우저에서 확인까지만 끝내면 다음 날부터 속도가 붙습니다.

첫날 셋업은 이 순서가 덜 꼬였습니다

왕초보가 바로 Claude Code나 복잡한 MCP 서버부터 잡으면 설치 단계에서 체력이 빠집니다. 저는 첫 실행 기준으로 Cursor를 먼저 열고, 로컬에서 Vite 프로젝트를 띄운 뒤, AI에게 버튼 문구를 바꾸게 하는 방식이 가장 단순하다고 봅니다.

1. 최소 설치 목록: 욕심내지 말고 3개만

• Node.js LTS: React, Vite 같은 프론트엔드 샘플을 실행하기 위한 기본 도구입니다.
• Git: 나중에 GitHub에 올리거나 되돌리기 위해 필요합니다.
• Cursor: VS Code와 비슷하지만 AI 채팅과 코드 수정 흐름이 더 자연스럽습니다.

여기서 Python, Docker, Supabase, Stripe까지 한 번에 설치하려고 하면 첫날은 대부분 환경설정으로 끝납니다. 작은 웹 화면을 띄운 다음 필요할 때 하나씩 추가하는 편이 낫습니다.

2. 첫 실행 명령어는 짧게 가져가기

터미널에서 아래 흐름만 성공하면 ‘내 컴퓨터에서 AI 코딩을 시작할 준비’는 된 것입니다.

npm create vite@latest vibe-day1 -- --template react
cd vibe-day1
npm install
npm run dev

브라우저에 로컬 주소가 열리면 성공입니다. 여기서 Cursor 채팅에 ‘초보자 기준으로 이 React 프로젝트 구조를 설명하고, 첫 화면의 제목과 버튼 하나만 바꿔줘’라고 요청하면 됩니다.

도구 선택: 첫날에는 강력함보다 덜 헷갈리는지가 중요합니다

AI 코딩 도구는 많지만, 처음부터 전부 비교하면 시작이 늦어집니다. 아래 표는 첫날 환경설정과 첫 실행 관점에서만 정리했습니다.

실제 첫날에 자주 터지는 삽질 포인트

터미널에서 npm을 찾을 수 없다고 나올 때

이 경우는 대개 Node.js가 설치되지 않았거나, 설치 후 터미널을 다시 열지 않아서 생깁니다. Node.js 공식 사이트에서 LTS 버전을 설치한 뒤 Cursor를 완전히 종료하고 다시 여는 것이 빠릅니다.

AI가 코드를 고쳤는데 화면이 안 바뀔 때

저장되지 않았거나, 개발 서버가 꺼졌거나, 다른 폴더에서 명령어를 실행한 경우가 많습니다. Cursor 왼쪽 파일 목록에서 현재 프로젝트 폴더가 vibe-day1인지 확인하고, 터미널에 npm run dev가 살아 있는지 먼저 보세요.

AI에게 한 번에 앱 전체를 맡겼을 때

‘로그인, 결제, 관리자 페이지까지 만들어줘’처럼 큰 요청을 하면 초보자는 결과를 검증하기 어렵습니다. 첫날에는 버튼, 입력창, 카드 목록처럼 눈으로 바로 확인되는 단위만 요청하는 것이 좋습니다.

구체 예시: 첫날 만들기 좋은 미니 과제

가상의 예시로, ‘오늘 할 일 3개를 보여주는 작은 페이지’를 만든다고 해보겠습니다. 실제 결과는 사용한 모델, 요금제, 프로젝트 상태에 따라 달라질 수 있습니다.

Cursor 채팅에는 이렇게 요청하면 충분합니다.

이 React/Vite 프로젝트에서 초보자도 이해할 수 있게 App.jsx만 수정해줘.
오늘 할 일 3개를 카드 형태로 보여주고,
완료 버튼을 누르면 문구가 완료됨으로 바뀌게 만들어줘.
CSS는 App.css에 간단히 작성해줘.

이 요청의 장점은 범위가 좁다는 점입니다. AI가 건드릴 파일이 1~2개라서 실패해도 되돌리기 쉽고, 브라우저에서 바로 확인할 수 있습니다.

이런 사람은 이렇게 시작하세요

• 코딩이 완전 처음인 사람: Cursor와 ChatGPT를 같이 쓰세요. Cursor는 수정, ChatGPT는 오류 설명용으로 나누면 덜 헷갈립니다.
• VS Code 경험이 있는 사람: Cursor로 기존 단축키를 거의 그대로 쓰면서 AI 수정 기능을 붙이는 방식이 편합니다.
• 터미널이 익숙한 사람: Claude Code까지 시도해볼 만합니다. 다만 첫날부터 실제 서비스 코드를 맡기기보다는 새 샘플 폴더에서 테스트하세요.
• 빠르게 배포까지 보고 싶은 사람: 첫날은 로컬 실행, 둘째 날에 Vercel 배포로 나누는 편이 안전합니다.

초보자가 가장 많이 하는 실수 하나

가장 큰 실수는 오류 메시지를 읽지 않고 AI에게 계속 ‘고쳐줘’만 반복하는 것입니다. 오류의 첫 줄과 마지막 줄, 그리고 실행한 명령어를 함께 붙여야 AI가 제대로 판단합니다.

예를 들어 npm run dev에서 실패했다면, ‘어떤 폴더에서 실행했는지’, ‘전체 오류 메시지’, ‘방금 AI가 바꾼 파일’을 같이 알려주세요. 이 세 가지가 있으면 해결 속도가 확 달라집니다.

FAQ: 첫날 막힐 때 바로 보는 질문

맥북과 윈도우 중 어느 쪽이 더 쉬운가요?

둘 다 가능합니다. 다만 윈도우는 경로와 권한, PowerShell 실행 정책에서 가끔 막힐 수 있습니다. 초보자는 공식 설치 파일을 쓰고, Cursor를 재시작하는 습관을 들이면 대부분 해결됩니다.

Claude Code부터 시작해도 되나요?

터미널 사용이 낯설지 않다면 괜찮습니다. 하지만 왕초보라면 Cursor에서 파일 변경 과정을 눈으로 확인한 뒤 Claude Code로 넘어가는 순서를 추천합니다.

첫날 GitHub까지 꼭 해야 하나요?

필수는 아니지만 추천합니다. 최소한 프로젝트가 실행된 시점에 첫 커밋을 해두면 AI가 코드를 망쳤을 때 되돌리기 쉽습니다.

오늘의 다음 행동

지금 바로 할 일은 하나입니다. Node.js LTS와 Cursor를 설치하고, Vite 샘플 프로젝트를 띄운 뒤 AI에게 파일 1~2개만 수정하는 요청을 해보세요. 첫날 성공 기준은 앱 완성이 아니라, 내 컴퓨터에서 코드가 실행되고 AI 수정 결과를 확인하는 것입니다.

이 기준을 넘기면 다음 단계인 GitHub 저장, Vercel 배포, Claude Code나 MCP 연결도 훨씬 덜 무섭습니다.

관련 링크

• ai 코딩 구독 요금 비교: Claude Code·Cursor·Copilot, 빌드용으로 돈값 하는 조합
• ai 코딩 에이전트 테스트 자동화, 생성 코드 믿고 배포하려면 제가 두는 5개 게이트
• AI한테 코드 시킬 때 안 막히는 질문법: Claude Code와 Cursor에서 통하는 작업 지시 순서
• 관련 태그 더 보기
• 카테고리 더 보기
• 검색 결과 더 보기
• 참고 링크