왜 웹 앱부터 시작하나

결론부터 말하면, 처음에는 웹 앱(web app)이 제일 쉽습니다. 결과물이 빨리 나오고, 내 컴퓨터에서 바로 확인할 수 있기 때문이에요. 화면이 눈앞에 뜨면 재미가 붙고, 재미가 붙으면 계속하게 됩니다. 모바일 앱이나 게임은 그다음에 욕심내도 늦지 않습니다.

그래서 이 가이드도 "내 컴퓨터에서 도는 작은 웹 앱 하나 띄우기"를 목표로 잡습니다.

1단계 — 딱 두 개만 깔자

준비물은 두 개뿐입니다.

1. Node.js — 코드를 실행시켜 주는 기반 도구
2. 코딩 툴(에디터) — AI가 내 컴퓨터에서 파일을 만들고 고치게 해주는 프로그램

Node.js 먼저

먼저 윈도우 검색창에 cmd를 쳐서 명령 프롬프트(터미널) 를 엽니다. 거기에 이렇게 쳐보세요.

npm

설치가 안 돼 있으면 에러가 납니다. 그게 정상이에요. 이걸 깔아주면 됩니다.

구글에서 "Node.js 설치" 를 검색 → 다운로드 페이지에서 LTS(장기 지원) 버전 → 윈도우용 설치 프로그램(MSI)을 받습니다. 실행한 다음에는 그냥 다음 → 동의 → 다음 → 설치만 누르면 됩니다. 기본값 그대로 두세요.

설치가 끝나고 다시 npm을 쳤을 때 사용법 안내가 주르륵 나오면 성공입니다. npm은 Node Package Manager의 줄임말인데, 지금은 "홈페이지를 만들려면 무조건 깔아야 하는 기본"이라고만 이해하면 충분합니다.

그다음 코딩 툴

이 글에서는 커서(Cursor) 를 기준으로 설명합니다. 구글에 영어로 cursor를 검색해서 공식 다운로드 페이지로 들어가면 윈도우용 설치 파일이 있습니다. Node.js 깔 때처럼 다음 → 동의 → 설치만 누르면 됩니다. 바탕화면 바로가기는 만들어 두는 게 편해요. 앞으로 매일 쓸 거니까요.

여기까지가 "개발 환경 설정"의 전부입니다. Node.js 설치, 커서 설치. 딱 두 개.

2단계 — 왜 커서로 시작하라고 하나

도구는 많습니다. 그런데 완전 초보에게 커서를 먼저 권하는 이유는 분명합니다.

• 오토 모드(Auto Mode)가 사실상 부담이 적다. 난이도에 따라 모델을 알아서 골라 쓰기 때문에, "토큰 아껴 써야 하나" 같은 걱정 없이 일단 마음껏 시켜볼 수 있습니다.
• 화면이 직관적이다. AI가 고친 부분이 색으로 표시되고, 마음에 들면 Keep, 이상하면 Undo로 되돌립니다. 초보가 "지금 무슨 일이 일어났는지" 눈으로 따라가기 좋아요.
• 에디터가 익숙하다. 커서는 VS Code 기반이라, 나중에 어떤 도구로 옮기든 화면 구성이 비슷합니다.

클로드 코드(Claude Code)가 똑똑하다는 건 다들 압니다. 다만 처음에는 터미널 위주라 진입 장벽이 있고, 사용량 제한에 신경 쓰다 보면 정작 배우는 데 집중을 못 하기도 합니다. 그래서 처음 한 달 정도는 커서로 감을 잡는 걸 권합니다. 한 달만 해보면 "나는 계속 커서로 갈까, 클로드로 갈까, 아니면 다른 도구를 써볼까"가 스스로 보이기 시작합니다.

비용은 도구마다 다르고 자주 바뀝니다. 구독하기 전에 각 도구의 공식 요금 페이지에서 현재 가격을 직접 확인하세요. 무료로 시작할 수 있는 구간도 대부분 있습니다.

3단계 — 첫 실행: 폴더부터, 그리고 계획부터

커서를 켜고 로그인(구글 로그인이 제일 무난합니다)한 뒤, New Project로 작업할 폴더를 하나 만듭니다. 이때 폴더 이름은 소문자 영문으로 짓는 게 좋아요. 대소문자가 섞이면 가끔 문제가 생깁니다.

폴더를 열면 보통 화면이 이렇게 나뉩니다.

• 왼쪽: 내 컴퓨터의 폴더·파일 목록
• 가운데: 만들고 있는 결과물·파일 내용
• 오른쪽: AI 채팅 (여기에 시키면 됩니다)
• 아래: 터미널 (Ctrl + J로 열고 닫기 — 이 단축키는 꼭 외우세요)

처음 켜면 화면 위쪽에 파일 / 편집 / 보기 같은 메뉴가 보이지만, 솔직히 거의 안 씁니다. 겁먹지 마세요. 설정은 우측 상단 톱니바퀴 안에 다 있고, 거기서 레이아웃을 에디터 모드로 두면 위에 적은 "왼쪽-가운데-오른쪽-아래" 구성이 편하게 잡힙니다. 설정 항목 중에 모르는 게 보이면? 그것도 그냥 AI한테 "이거 뭐야?" 하고 물어보면 됩니다.

터미널이 도대체 뭔가

터미널을 처음 보면 "이 까만 창은 뭐지" 싶죠. 쉽게 말하면 사람과 컴퓨터가 글자로 대화하는 창구입니다. 컴퓨터는 원래 0과 1로만 알아듣는데, 우리가 그렇게 말할 수는 없으니 터미널이라는 통역 창을 통해 명령을 주고받는 거예요. 바이브 코딩에서 AI도 결국 이 터미널 안에서 명령어를 쳐가며 일을 합니다. 그래서 "AI가 지금 터미널에 뭘 치고 있구나" 정도만 눈으로 따라가면 충분합니다.

윈도우에서 처음에 검색창에 cmd를 쳐서 연 그 명령 프롬프트가 바로 터미널입니다. 커서 안에 있는 터미널도 똑같은 거예요. 위치만 다를 뿐입니다.

꼭 외울 단축키 4개

화면을 자유롭게 다루려면 이 네 개면 충분합니다.

터미널은 + 버튼으로 계속 늘릴 수 있고, 휴지통 아이콘으로 닫습니다. 여러 개 띄워 놓고 헷갈리면 일단 하나만 남기고 닫아도 됩니다.

바로 시키지 말고, 계획부터

초보가 가장 많이 하는 실수가 "그냥 다 만들어 줘"입니다. 그래도 만들어주긴 하는데, 나중에 방향이 흐려지고 고칠 게 많아집니다. 그래서 계획(Plan)을 먼저 짜는 습관이 중요합니다.

방법은 두 가지입니다.

1. AI한테 계획 문서를 시킨다. 예를 들어 이렇게요.

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

그러면 AI가 README 문서에 기술 스택, 폴더 구조, 단계별 로드맵, 완료 기준까지 정리해 줍니다. 한번 쭉 읽어보고 "괜찮다, 진행해!"라고 하면 됩니다.

1. 플랜 모드(Plan Mode)를 쓴다. 커서에는 에이전트 모드 말고 플랜 모드가 따로 있습니다. 요청을 던지면 AI가 스스로 계획 문서를 만들고, 애매한 부분은 거꾸로 나에게 질문합니다. 계획을 확인한 뒤 Build를 누르면 그 순서대로 구현을 시작합니다.

계획을 먼저 잡으면 나도 흐름을 이해하기 쉽고, AI도 더 정확하게 코딩합니다. 이건 어떤 도구를 쓰든 똑같이 통하는 원칙이에요.

4단계 — 질문과 요청이 전부다

바이브 코딩의 핵심을 딱 하나만 꼽으라면 "질문" 입니다.

• 모르는 단어가 나오면 → "버셀이 뭐야?" "깃허브가 뭐야?" 그냥 물어봅니다.
• 막히면 → "이거 왜 안 돼?" 하고 던집니다.
• 기능을 더 붙이고 싶으면 → "메모에 링크도 클릭되게 해줘" 하고 시킵니다.

한 번에 답이 나오기도 하고, 다섯 번 열 번 되물어야 할 때도 있습니다. 그게 정상이고, 그 과정 자체가 배움입니다. 비싼 도구일수록 "이런 사소한 걸 물어봐도 되나" 싶어 망설이게 되는데, 부담 없이 물어볼 수 있는 환경이 초보에게는 더 중요합니다. 그래서 또 커서 오토 모드를 권하는 거고요.

정리하면 흐름은 이렇게 반복됩니다.

요청한다 → 결과를 본다 → 모르면 묻는다 → 또 요청한다 → 또 확인한다

이 루프가 전부입니다. 신규 기능, 버그 수정, 업데이트 전부 이 반복으로 굴러갑니다.

5단계 — Allow List는 안전벨트다

AI가 터미널 명령어를 칠 때마다 "이 명령 써도 될까요?" 하고 물어봅니다. 여기서 선택지는 보통 이렇습니다.

• Ask Every Time — 매번 물어보기
• Use Allow List(허용 목록) — 이 명령은 앞으로 알아서 써도 됨
• Run Everything — 뭐든 다 실행 (위험, 비권장)

ls(파일 목록 보기), npm install 같은 안전한 명령은 Allow List에 넣어 두면 편합니다. 반대로 del처럼 파일을 지우는 명령이 보이면 Skip으로 막으세요. 이 과정이 있어야 "멀쩡히 잘 돌던 프로젝트를 AI가 이상하게 건드리는" 사고를 막을 수 있습니다. 요즘 도구들이 이렇게 사용자 승인을 받게 만든 데는 다 이유가 있습니다.

AI가 고친 코드, 이렇게 확인하고 승인한다

AI한테 시키면 내 컴퓨터에 파일이 막 생기고 바뀝니다. "이걸 그냥 믿어도 되나?" 싶을 때 보는 게 이 화면이에요.

• AI가 코드를 만들거나 고치면, 바뀐 줄에 노란빛·연두빛 표시가 생깁니다. "여기를 이렇게 바꿨어요"라는 표시예요.
• 왼쪽 파일 목록에서 그 파일을 클릭하면, 무엇이 어떻게 바뀌었는지 눈으로 볼 수 있습니다. (코드를 다 이해할 필요는 없어요. "아, 이 파일을 건드렸구나" 정도면 충분합니다.)
• 마음에 들면 Keep(유지), 이상하면 Undo(되돌리기) 를 누릅니다. Undo를 누르면 방금 한 작업이 싹 취소돼요.
• 파일을 여러 개 한꺼번에 고쳤다면 Keep All / Undo All 로 전부 한 번에 처리할 수 있습니다.

Keep을 몇 번 누르다 보면 커서가 이런 걸 물어봅니다 — "Enable Auto Keep"(자동 승인 켜기). 이걸 켜면 매번 Keep을 누르지 않아도 AI가 고친 걸 자동으로 반영하고, 문제가 있을 때만 Undo All 버튼이 따로 떠요. 익숙해지면 켜두면 편한데, 처음에는 하나씩 직접 Keep/Undo 해보면서 "AI가 무슨 짓을 하는지" 감을 잡는 걸 권합니다. 이 설정은 나중에 커서 설정에서 언제든 바꿀 수 있습니다.

6단계 — 설치하고, 띄우고, 막히면 에러를 그대로 던진다

AI가 코드를 만들면 보통 이 흐름을 거칩니다.

npm install   # 의존성(필요한 부품 묶음) 설치
npm run dev    # 개발 서버 실행 (내 컴퓨터에서 미리보기)
npm run build  # 배포용 빌드 (오류·타입 점검)

npm install을 안 하면 npm run dev도, npm run build도 안 됩니다. 그래서 이게 기본 중의 기본입니다. 설치가 끝나고 npm run dev를 돌리면 터미널에 localhost:3000 같은 주소가 뜨는데, 거기를 Ctrl + 클릭 하면 내가 만든 화면이 브라우저에 뜹니다.

localhost 주소는 내 컴퓨터에서만 보입니다. 다른 사람한테 그 주소를 보내도 안 열려요. 바깥에서 보이게 하려면 나중에 배포(Vercel, Cloudflare 등)를 해야 합니다.

트러블슈팅 = 에러 복붙

처음엔 거의 100% 에러가 납니다. 당황하지 마세요. 에러 메시지를 그대로 긁어서 AI 채팅에 붙여넣고 "해결해줘" 하면 됩니다. 커서에서는 터미널 내용을 드래그해 Add to Chat(또는 Ctrl + L)으로 바로 넘길 수 있어요.

코딩을 몰라도 됩니다. AI가 원인을 분석하고 "1번 방법으로 해결할게요" 식으로 제안해 주면 "1번으로 해줘"라고만 답하면 됩니다. 이 과정이 진짜 끝없이 반복되는데, 그게 바로 트러블슈팅이고 실력은 여기서 늡니다.

윈도우 터미널에서 꼭 알아둘 3가지

처음 며칠은 이것 때문에 거의 다 한 번씩 막힙니다. 미리 알아두면 시간을 아껴요.

1. 터미널에 붙여넣기는 Ctrl + V가 아니라 "마우스 우클릭"입니다. AI가 알려준 명령어를 복사해서 터미널에 넣을 때, Ctrl+V가 안 먹히면 그냥 우클릭하세요. 그러면 붙여넣어집니다. (이거 모르면 "왜 안 붙지?" 하고 한참 헤맵니다.)
2. 켜진 서버를 끄려면 Ctrl + C입니다. npm run dev로 띄운 미리보기 서버는 그냥 둬도 되지만, 멈추고 싶을 땐 그 터미널에서 Ctrl + C를 누르면 서버가 종료됩니다.
3. npm run dev는 되도록 직접 치는 걸 권합니다. AI한테 맡기면 가끔 localhost:3000을 안 닫고 3001, 3002로 계속 새로 띄워서 꼬일 때가 있어요. 여기서 3000, 3001 같은 숫자를 포트(port, 접속 번호) 라고 부릅니다. 미리보기는 내가 직접 켜고 끄는 게 깔끔합니다.

쌩초보가 처음에 자주 만나는 에러 2가지

실제로 거의 다 겪는 두 가지인데, 원인을 몰라도 됩니다. 에러를 그대로 AI한테 던지면 다 풀어줍니다. 다만 "아, 이런 거구나" 정도만 알아두세요.

• PowerShell 실행 정책 차단 — npm run dev를 쳤는데 빨갛게 "스크립트 실행이 차단되었습니다" 비슷한 말이 뜨는 경우. 윈도우가 보안상 막아둔 거라, AI가 "실행 정책을 바꾸는 명령(Set-ExecutionPolicy)으로 풀게요"라고 제안해 줍니다. Allow List에 넣고 실행하면 끝.
• 의존성·노드 버전 충돌 — "이 부품이 예전 노드 버전 기준으로 만들어졌는데 지금 노드는 버전이 달라서 안 맞는다" 같은 에러. AI가 알아서 기존 부품을 지우고(uninstall) 새로 맞는 걸 깔아(install) 다시 실행해 줍니다.

둘 다 핵심은 똑같아요. 에러 메시지를 통째로 복사 → AI 채팅에 붙여넣기 → "해결해줘" → 제안대로 진행. 이 리듬만 타면 됩니다.

7단계 — 데이터는 내 컴퓨터에 있다 (데이터 주권)

위 예시에서 메모는 SQLite 라는 로컬 데이터베이스에 저장됩니다. SQLite는 아주 가볍고 빠른 데이터베이스라, 인터넷 없이 내 컴퓨터 안에서 돕니다.

여기서 중요한 개념이 데이터 주권입니다. 기존 AI 채팅은 만든 결과물이 그 서비스 안에만 갇혀 있지만, 바이브 코딩 툴은 내 컴퓨터에 실제 파일을 만들어 줍니다. 데이터를 내가 온전히 들고 있고, 내가 마음대로 활용할 수 있다는 뜻이죠. 나중에 이 SQLite를 온라인으로 확장하고 싶으면 Turso, Supabase, MongoDB 같은 서비스로 넘어가면 됩니다. 천천히 배워도 됩니다.

모르면 그냥 넘어가도 되는 용어 미니 사전

코딩을 배우다 보면 처음 듣는 단어가 쏟아집니다. 다 외울 필요 없어요. AI가 화면에 띄우는 파일이나 단어를 봤을 때 "아, 그거구나" 하고 알아보는 정도면 충분합니다. 모르면 그 자리에서 "○○이 뭐야?" 하고 물어보면 되고요.

폴더·파일 이름들 (AI가 자동으로 만들어 줌)

자주 나오는 단어들

• 프레임워크 / Next.js — 홈페이지를 만드는 "정해진 길". Next.js는 10년 넘게 수많은 개발자가 다져놓은 길이라, AI가 가장 잘 알고 결과물도 빨리 나옵니다. 그래서 초보에게 무난해요.
• 의존성(dependency) — 내 홈페이지가 돌아가려면 필요한, 남들이 미리 만들어 둔 부품 묶음. 이게 없으면 처음부터 다 만들어야 해서 npm install로 가져옵니다.
• 컨텍스트(context) — AI가 "어디까지 기억하느냐"의 범위. 요즘 커서 오토 모드는 보통 20만 토큰쯤 기억해서, 앞에서 만든 메모 앱 내용을 뒤에서도 알고 있습니다. 그래서 "수정 기능 추가해줘" 한마디면 알아듣는 거예요.
• 타입스크립트(TypeScript) — 자바스크립트(JavaScript)에 안전장치를 한 단계 더한 언어. AI가 알아서 써줍니다.
• 테일윈드(Tailwind) — 디자인·꾸미기(스타일)를 빠르게 하는 도구. "권장" 정도로 보면 됩니다.
• MVP(최소 기능 제품) — 일단 "딱 돌아가는 최소한"부터 만들고 점점 키우자는 개념. 처음엔 작게 시작하는 게 정답입니다.

커서로 했지만, 다른 툴도 결국 똑같다

여기까지 커서로 설명했지만, 핵심 루프는 어떤 도구를 써도 동일합니다. "도구 두 개 설치 → 계획 → 요청·질문 → 승인(Allow List) → 실행 → 에러 복붙 → 반복." 이 흐름만 손에 익으면 도구는 갈아타도 됩니다. 2026년 기준으로 대표적인 선택지는 이렇습니다.

무엇을 고르든 정답은 없습니다. "내가 실제로 어떻게 일하는가" 에 맞추면 됩니다. 처음엔 커서로 감을 잡고, 익숙해지면 코덱스·클로드 코드·오픈코드·안티그래비티(+GLM)를 직접 써보면서 자기 손에 맞는 걸 찾아가세요. 한 가지에만 매일 필요도 없고, 실제로 상황에 따라 여러 개를 섞어 쓰는 사람도 많습니다.

강의가 끝나면, 그다음은?

뭔가를 배웠을 때 가장 어려운 건 "그래서 이제 뭘 하지?"입니다. 답은 단순합니다. 계속 만들어 보고, 계속 질문하세요.

• 작은 앱을 자꾸 만들어 봅니다. 메모 앱, 링크 저장기, 간단한 계산기, 미니 게임 무엇이든요.
• 써보다가 불편한 점이 생기면 그게 다음 기능 아이디어입니다. "이거 수정 기능이 없네?" → "수정 기능 추가해줘."
• 기존 걸 망치기 싫으면 "기존 건 그대로 두고 새 폴더로 만들어 줘"라고 분명히 말하면 됩니다.
• 모르는 용어가 나오면 무조건 그 자리에서 물어봅니다.
• 화면이 안 바뀐 것 같으면 브라우저에서 Ctrl + Shift + R(강제 새로고침) 을 눌러보세요. 분명히 고쳤는데 그대로면, 십중팔구 새로고침이 안 된 겁니다.

초보에게 특히 추천하는 요청 하나

이건 진짜 꿀팁인데, AI한테 이렇게 시켜보세요.

오늘 내가 물어본 것, 본 것, 같이 개발한 내용을
초보도 쉽게 이해할 수 있게 설명하는 '학습 코너' 페이지를 만들어 줘.
기존 앱은 그대로 두고, 새 폴더(예: learn)로 추가해줘.

그러면 AI가 오늘 다룬 개념(Next.js가 뭔지, 깃허브가 뭔지 등)과 겪은 에러, 해결 과정을 나만의 복습 페이지로 만들어 줍니다. 만들면서 배우고, 그 결과물로 또 복습하는 셈이라 초보에게 효과가 좋아요. 이때 "기존 건 그대로 두고 새 폴더로"라고 분명히 말하는 것, 그리고 플랜 모드로 시켜서 계획을 먼저 확인하는 습관까지 같이 연습하면 딱입니다.

이렇게 요청을 하나하나 쌓아가다 보면, 처음엔 상상도 못 했던 사이트나 도구가 어느새 완성돼 있습니다. 직접 모든 언어를 배워 만들려면 몇 년이 걸렸을 일을, 요즘은 바이브 코딩 툴로 해낼 수 있습니다. 화면의 버튼 하나, 문구 하나까지 AI가 한 방에 다 해주진 않아요. "여기 이 버튼 만들어줘, 이 문구 바꿔줘" 하고 하나하나 요청해서 다듬어 가는 것 — 그게 바이브 코딩의 진짜 모습입니다.

마무리

다시 한번 정리하면 이게 전부입니다.

1. Node.js와 코딩 툴(커서) 딱 두 개 설치
2. 폴더 만들고 계획부터
3. 요청하고, 확인하고, 모르면 묻고, 반복
4. 위험한 명령은 Allow List로 안전하게
5. 에러는 그대로 복붙해서 해결
6. 커서로 시작하되, 코덱스·클로드 코드·오픈코드·안티그래비티+GLM도 결국 같은 흐름

완벽하게 이해하고 시작할 필요 없습니다. 일단 깔고, 폴더 하나 만들고, AI한테 말을 걸어보세요. 막히면? 저한테 묻지 말고 그 AI한테 물어보세요. 다 알려줍니다. 그게 바이브 코딩의 시작이자 끝입니다. 화이팅.

참고 링크 · 공식 사이트 모음

이 글을 따라오다 막히거나 더 깊이 파고들고 싶을 때 바로 열어볼 수 있게, 공식 사이트와 자료를 한곳에 모았습니다. 화면·정책·요금제는 수시로 바뀌니 설치·배포 전에는 늘 공식 문서를 함께 확인하세요.

먼저 챙길 3가지

• Node.js 공식 다운로드 — 코드를 실행해 주는 기반 도구. LTS(장기 지원) 버전을 받으세요.
• Cursor 공식 문서 — 이 글 기준 코딩 툴. 설치·단축키·모드 사용법이 정리돼 있습니다.
• Next.js 공식 문서 — 웹 앱을 만들 때 많이 쓰는 프레임워크 문서.

공식 사이트 전체 모음

처음부터 전부 외울 필요는 없습니다. npm · Cursor · Node.js만 먼저 익히고, DB·배포(Supabase·Turso·Vercel) 쪽은 앱이 실제로 돌아간 뒤 확장 단계에서 다시 봐도 충분합니다.