🛠 시즌 2 · 1편
👤 비개발자 전용
⏱ 읽는 시간 12분
첫 앱 완성 —
바이브 코딩으로
30분 만에 끝내는 법
잘 만들 필요 없습니다. 일단 끝까지 완성하는 것이 목표입니다.
AI에게 어떻게 요청해야 하는지, 막혔을 때 어떻게 뚫는지 — 전 과정을 공개합니다.
✅ 첫 프롬프트 작성법
✅ 파일 만들고 실행하기
✅ 막혔을 때 대처법
✅ AI 수정 요청 실전 흐름
📍 시리즈 위치
0편: 환경 세팅 ✓
→
▶ 1편: 첫 앱 완성 (지금)
→
2편: 에러 대처법
→
3편: Vercel 배포
😅 처음 앱을 만드는 사람이 가장 많이 하는 실수
💬 이런 경험, 있으신가요?
환경 세팅을 마쳤습니다. AI도 있고 VS Code도 열었습니다.
"이제 뭘 만들지?" 고민하다가 "어차피 만들 거 제대로 만들어보자" 생각했습니다.
로그인도 넣고, AI 기능도 넣고, 디자인도 깔끔하게.
AI에게 요청했습니다. 코드가 쏟아졌습니다.
붙여넣었더니 에러가 났습니다. 고치다가 더 꼬였습니다. 결국 포기했습니다.
이건 의지의 문제가 아닙니다. 첫 앱의 범위를 너무 크게 잡은 것입니다.
비개발자가 바이브 코딩에서 가장 많이 실패하는 지점이 바로 여기입니다. 처음부터 완성도 높은 앱을 목표로 잡으면 중간에 반드시 막힙니다. 막히면 포기하게 되고, 포기하면 "나는 역시 안 되는구나"라는 잘못된 결론을 내립니다.
첫 앱의 목표는 "잘 만들기"가 아니라
"끝까지 완성해보기"입니다.
"끝까지 완성해보기"입니다.
이 글에서는 비개발자가 30분 안에 첫 앱을 끝까지 완성하는 전 과정을 보여드립니다. 프롬프트 작성법부터 막혔을 때 뚫는 법, AI와 수정 대화를 이어가는 방법까지 한 편에서 완결합니다.
🎯 뭘 만들지 결정하기 — 첫 앱 고르는 법 ⏱ 3분
첫 앱의 조건은 딱 하나입니다. 30분 안에 "작동하는 화면"을 볼 수 있는 규모여야 합니다. 아래 중에서 마음에 드는 것을 하나 고르세요.
⏱ 30분 안에 이렇게 진행됩니다
0~3분
앱 선택
3~8분
프롬프트 입력
8~18분
파일 생성·실행
18~25분
수정 요청
25~30분
에러 대응
메모 앱
텍스트 입력 → 화면에 리스트 표시
👉 이 글에서 사용
카운터 앱
버튼 클릭으로 숫자 올리고 내리기
할 일 목록
항목 추가·완료 체크·삭제
단어 저장기
단어와 뜻 입력 → 카드 형태 출력
첫 앱에서 절대 넣지 말 것: 로그인, 회원가입, 결제, DB 연결, AI 기능, 소셜 공유.
이것들은 나중에 하나씩 추가하면 됩니다. 지금은 화면에 뭔가 "보이는 것"이 목표입니다.
이것들은 나중에 하나씩 추가하면 됩니다. 지금은 화면에 뭔가 "보이는 것"이 목표입니다.
이 글에서는 메모 앱을 예시로 진행합니다. 텍스트를 입력하면 화면에 리스트로 표시되고, 삭제 버튼도 있는 심플한 웹 앱입니다. 완성되면 브라우저에서 실제로 작동합니다.
바이브 코딩으로 만든 첫 앱 — 메모 앱 localhost:3000 실행 화면
💥 실제로 이렇게 실패합니다 — 한 번이라도 겪어봤다면
"로그인·결제·AI 요약·소셜 공유 기능이 있는 메모 앱 만들어줘"
AI가 React + TypeScript + Tailwind + Prisma + NextAuth + Stripe를 조합한 코드를 생성합니다. 파일이 12개입니다. 붙여넣었더니 에러가 14개 났습니다. 하나 고치면 다른 데서 에러가 납니다. 30분이 지났습니다. 결국 포기했습니다.
이게 실력 부족이 아닙니다. 범위를 너무 크게 잡은 것입니다. 첫 앱은 기능 2~3개로 시작해야 합니다.
✍️ 첫 프롬프트 작성법 — AI에게 어떻게 말할까 ⏱ 5분
첫 프롬프트가 구체적일수록 AI의 첫 결과물이 원하는 방향에 가깝게 나옵니다. 막연하게 요청하면 AI도 막연하게 만듭니다.
Node.js + Express란? 가장 단순하게 웹 앱을 띄울 수 있는 조합입니다. 둘 다 무료이고, AI가 생성하는 코드 대부분이 이 구조를 따릅니다. Express.js는 Node.js로 웹 서비스를 편하게 만들게 해주는 웹 개발 도우미 정도로 이해하시면 됩니다. 지금은 이름만 알아도 충분합니다.
package.json이란? package.json은 Node.js 프로젝트의 설정 파일입니다. 쉽게 말하면 “이 앱이 어떤 앱인지, 어떤 기능(라이브러리)을 쓰는지, 어떻게 실행하는지 적어두는 파일입니다. 게임으로 비유하면 게임 설치 설명서 느낌 정도로 이해하시면 됩니다.
❌ 이렇게 하면 안 됩니다
"메모 앱 만들어줘"
"뭔가 메모할 수 있는 웹사이트"
"예쁜 메모 앱 만들어줘"
✅ 이렇게 해야 합니다
기술 스택 명시 (Node.js + Express)
포트 번호 명시 (3000)
기능 목록 구체적으로 서술
파일 구성 요청 (package.json 포함)
AI는 범위가 명확한 요청에서 더 좋은 결과를 냅니다. 구체적일수록 첫 시도 성공률이 높아집니다.
📋 복붙용 완성형 첫 프롬프트
아래 프롬프트를 그대로 복사해서 ChatGPT 에게 붙여넣으세요. 괄호 안만 원하는 내용으로 바꾸면 됩니다. VS Code의 앞선 환경 설정에서 설치한 codex를 통해 할 수 도 있으나 파일 생성, 구조 등 기본 개념을 이해 하기 위해 이 문서에서는 챗봇에서 실행하는 것으로 합니다. 향후 디버깅 등은 VS Code에서 진행이 됩니다.
✅ 복붙용 — 메모 앱 첫 프롬프트
간단한 메모 앱 웹 서비스를 만들어줘.
기술 스택: Node.js + Express
포트: 3000
파일 구성: server.js, public/index.html
기능:
- 텍스트 입력창과 "추가" 버튼
- 추가하면 아래에 리스트 형태로 표시
- 각 메모 옆에 삭제 버튼 (클릭하면 해당 메모 삭제)
디자인:
- 흰 배경, 심플하고 깔끔한 카드 UI
- 모바일에서도 잘 보이게
package.json도 함께 만들어줘.
npm run dev로 실행되도록 scripts에 추가해줘.
실행 방법과 브라우저 접속 주소도 알려줘.
※ 기능 목록은 2~3개가 적당합니다. 처음부터 너무 많으면 실행이 복잡해집니다.
AI가 코드를 생성해줬다면, 이제 파일을 만들고 실행할 차례입니다.
▶️ 파일 만들고 실행하기 — 처음 화면 띄우기 ⏱ 10분
AI가 코드를 줬습니다. 이제 VS Code에서 파일을 만들고 실행합니다. 이 순서를 지키면 됩니다.
1
VS Code에서 파일 생성
왼쪽 탐색기 → 새 파일 아이콘(📄+) 클릭 → 파일명 입력 → server.js와 package.json 파일 생성 합니다. 다음으로 왼쪽 탐색기 → 새 폴더 아이콘(📁+) 클릭 public 폴더 생성, 생성된 public 폴더 선택한 다음 왼쪽 탐색기 → 새 파일 아이콘(📄+) 클릭 → 파일명 입력 → index.html 파일을 생성 하면 됩니다.
파일 생성 순서
1) server.js 파일 생성 → AI 코드 붙여넣기 → Ctrl+S 저장
2) public 폴더 생성 → index.html 파일 생성 → 코드 붙여넣기 → 저장
3) package.json 파일 생성 → 코드 붙여넣기 → 저장
2) public 폴더 생성 → index.html 파일 생성 → 코드 붙여넣기 → 저장
3) package.json 파일 생성 → 코드 붙여넣기 → 저장
⚠️ Ctrl+S 저장을 빠뜨리면 수정이 반영되지 않습니다. 파일명 옆에 ● 표시가 있으면 저장 안 된 상태입니다.
2
터미널 열고 위치 확인
VS Code 상단 메뉴 → 터미널 → 새 터미널 (또는 Ctrl+`). 터미널에 프로젝트 폴더명이 보이는지 확인합니다.
터미널 위치 확인
C:\Users\이름\my-project> ← 폴더명이 보이면 ✅ 정상
cd my-project ← 폴더명이 안 보이면 이 명령어 입력
cd my-project ← 폴더명이 안 보이면 이 명령어 입력
3
npm install → npm run dev
실행 전에 반드시 npm install을 먼저 합니다. 설치가 완료된 후 npm run dev로 서버를 시작합니다.
실행 명령어 순서
npm install ← 필요한 것 설치 (한 번만)
npm run dev ← 서버 시작
Server running on http://localhost:3000 ← 이 메시지가 나오면 성공
npm run dev ← 서버 시작
Server running on http://localhost:3000 ← 이 메시지가 나오면 성공
✅ 이 메시지가 나왔다면 — 브라우저 주소창에 http://localhost:3000 입력하세요
💚 npm install 중 이런 게 나와도 정상입니다
✅ 검은 화면에 글자가 빠르게 지나가도 정상 — 패키지 설치 중입니다
✅ 1~2분 걸려도 정상 — 인터넷 속도에 따라 달라집니다
✅ "npm warn" 노란 글씨가 떠도 대부분 괜찮습니다 — warn은 경고, 오류 아님
⛔ "npm error" 빨간 글씨가 뜨면 → 에러 메시지 전체 복사 → AI에게 전달
4
브라우저에서 확인
브라우저 주소창(URL 창)에 http://localhost:3000 을 직접 입력하고 Enter. 새 탭을 열어야 합니다. 즐겨찾기나 검색창이 아닌 주소창에 입력해야 합니다.
✅ 메모 앱 화면이 보이면 — 첫 앱이 작동하고 있습니다 🎉
⚠️ 화면이 안 보이거나 에러가 나면 → 다음 섹션(막혔을 때)을 보세요. running 중인 server를 종료 시키고자 할 경우는 터미널에 Ctrl + C 다음 종료 여부 물으면 Y 입력하시면 됩니다.
브라우저에 앱 화면이 보인다면
당신은 직접 코드 한 줄 안 쓰고 작동하는 웹 앱을 만든 것입니다.
이제 이걸 수정하고, 기능을 추가하고, 결국엔 배포까지 갈 수 있습니다.
첫 번째 관문을 통과했습니다.
🔄 AI 수정 요청 실전 흐름 — 완성까지 가는 대화법 ⏱ 7분
첫 실행에 성공했다면, 이제 "더 좋게 만들기" 단계입니다. 여기서 비개발자가 가장 많이 막히는 것이 수정 요청 방법입니다.
📋 바이브 코딩 수정 작업 흐름
1
수정 요청 전에 반드시 저장 상태 확인
파일명 옆에 ● 없으면 저장 완료. Ctrl+S 습관화.
VS Code
↓
2
범위를 좁혀서 요청 — 한 번에 하나씩
"예뻐 보이게" ❌ → "헤더 배경색만 #2563eb로 바꿔줘" ✅
AI 요청
↓
3
AI 코드 받으면 파일에 반영하고 저장
전체 선택(Ctrl+A) → 붙여넣기(Ctrl+V) → 저장(Ctrl+S)
VS Code
↓
4
브라우저 새로고침(F5)으로 변경 확인
서버를 Ctrl+C로 끄고 다시 npm run dev 해야 할 때도 있음
브라우저
↓
5
에러 나면 → 메시지 전체 복사 → AI에게 붙여넣기
이해하려 하지 말고 그대로 전달하는 것이 실력
반복
📌 수정 요청의 3가지 원칙
원칙 1 — 한 번에 하나씩
여러 가지를 한꺼번에 요청할수록 AI가 의도치 않은 부분까지 바꿉니다. 기능 하나, 스타일 하나씩 순서대로 요청하세요.
✅ 예: "삭제 버튼 색상만 빨간색으로 바꿔줘. 다른 부분 건드리지 마."
원칙 2 — "건드리지 말 것"을 반드시 명시
수정할 것만 말하면 AI가 다른 부분도 바꿀 수 있습니다. 보존할 영역을 함께 알려줘야 합니다.
✅ 예: "입력창 스타일만 수정해줘. 메모 리스트와 삭제 버튼은 건드리지 마."
원칙 3 — 현재 상태를 먼저 설명하고 원하는 것을 말하기
AI는 현재 코드 상태를 완벽히 기억하지 못할 수 있습니다. "현재는 ~이고, 이것을 ~으로 바꾸고 싶다"는 구조가 가장 효과적입니다.
✅ 예: "현재 메모가 추가될 때 바로 입력창이 안 비워집니다. 추가 후 자동으로 입력창이 빈칸이 되도록 바꿔줘."
📖 더 깊이 알고 싶다면:
[[관련 글: 바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꿔버리지 않게 하는 구조화 가이드]] — 범위 통제·맥락 유지·실전 템플릿 3가지를 다룹니다.
[[관련 글: 바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꿔버리지 않게 하는 구조화 가이드]] — 범위 통제·맥락 유지·실전 템플릿 3가지를 다룹니다.
바이브 코딩 AI 수정 요청 비교 — 좋은 요청 vs 나쁜 요청
🚨 막혔을 때 — 당황하지 않는 3단계 ⏱ 5분
에러가 났습니다. 화면이 하얗게 됐습니다. 또는 아무것도 안 됩니다. 이 상황은 누구에게나 옵니다. 중요한 건 이때 어떻게 행동하느냐입니다.
1
터미널 에러 메시지 전체를 복사한다
에러를 이해하려 하지 마세요. 빨간 글씨가 나왔다면 그 부분 전체를 드래그해서 복사합니다. 에러 메시지가 길어도 전부 복사해야 합니다.
이런 메시지가 나왔다면
Error: Cannot find module 'express'
→ 이 한 줄 전체를 복사해서 AI에게 보냄
→ 이 한 줄 전체를 복사해서 AI에게 보냄
2
AI에게 이렇게 요청한다
단순히 에러를 붙여넣기만 하지 말고, 무엇을 했을 때 났는지 한 줄을 덧붙이세요. 그리고 수정 코드를 바로 달라고 하기 전에 원인 설명을 먼저 요청합니다.
✅ 복붙용 에러 전달 템플릿
npm run dev를 했더니 아래 에러가 났어.
[에러 메시지 전체 붙여넣기]
이 에러가 왜 났는지 원인 먼저 설명해줘.
그다음에 수정 방법을 알려줘.
3
AI가 알려준 방법을 그대로 따른다
대부분의 에러는 npm install 누락, 파일 위치 문제, 포트 충돌 중 하나입니다. AI가 알려준 명령어를 그대로 터미널에 입력하면 거의 해결됩니다.
✅ 에러는 실패가 아닙니다. 다음 요청을 위한 재료입니다.
바이브 코딩 에러 대처 3단계 — 에러 복사 → AI 전달 → 해결
✅ 첫 앱 완성 실전 체크리스트
첫 앱의 기능을 2~3개 이하로 제한했다 (로그인·결제·AI 제외)
첫 프롬프트에 기술 스택, 포트, 기능 목록, package.json 포함을 명시했다
파일 저장(Ctrl+S)을 빠뜨리지 않고 있다 (파일명 옆 ● 없는지 확인)
터미널 위치가 프로젝트 폴더인지 확인했다
npm install을 먼저 하고 npm run dev를 실행했다
브라우저 주소창에 http://localhost:3000 을 직접 입력했다 (검색창 아님)
수정 요청 시 "건드리지 말 것"을 함께 명시하고 있다
에러가 났을 때 메시지 전체를 복사해서 AI에게 원인 설명을 먼저 요청했다
📌 핵심 요약
- 🎯첫 앱의 목표는 잘 만들기가 아니라 끝까지 완성하기입니다. 기능은 2~3개로 제한하고 로그인·AI·결제는 나중에 추가합니다.
- ✍️첫 프롬프트에는 기술 스택(Node.js + Express), 포트(3000), 기능 목록, package.json 포함 요청을 모두 넣어야 AI의 첫 결과물이 원하는 방향으로 나옵니다.
- ▶️실행 순서는 npm install → npm run dev → 브라우저 주소창에 localhost:3000 직접 입력입니다. 이 순서를 반드시 지켜야 합니다.
- 🔄수정 요청의 핵심 원칙은 "한 번에 하나씩", "건드리지 말 것 명시", "현재 상태 먼저 설명"의 세 가지입니다.
- 🚨에러가 났을 때는 이해하려 하지 말고 터미널 메시지 전체를 복사해 AI에게 "원인 먼저 설명해줘"와 함께 보내는 것이 가장 빠른 해결법입니다.
- ➡️첫 화면이 떴다면 다음 단계는 2편 에러 공포 극복입니다. 에러는 사라지지 않습니다. 대하는 방법이 달라질 뿐입니다.
❓ 자주 묻는 질문
바이브 코딩으로 처음 만들기 좋은 앱은 어떤 건가요?
처음에는 기능이 단순한 앱일수록 좋습니다. 메모 앱, 할 일 목록, 카운터 앱, 단어 저장기 같은 것들이 적합합니다. 중요한 건 완성까지 갈 수 있는 규모여야 한다는 점입니다. 처음부터 로그인·결제·AI 기능이 들어간 앱을 목표로 하면 중간에 막히고 포기하게 됩니다. 첫 앱의 목표는 "잘 만들기"가 아니라 "끝까지 완성해보기"입니다.
바이브 코딩 첫 앱 만들 때 AI에게 어떻게 요청해야 하나요?
첫 요청은 최대한 구체적이고 범위가 작게 작성해야 합니다. "앱 만들어줘" 대신 "메모를 입력하면 화면에 리스트로 표시되는 웹 앱 만들어줘. Node.js + Express, 포트 3000, package.json 포함"처럼 기술 스택, 포트, 원하는 기능을 명확히 적어야 합니다. 첫 프롬프트가 구체적일수록 AI의 첫 결과물이 원하는 방향에 가깝게 나옵니다.
바이브 코딩에서 AI가 만든 코드가 실행이 안 될 때 어떻게 하나요?
터미널에 나온 에러 메시지 전체를 복사해서 AI에게 그대로 붙여넣으면 됩니다. "안 돼요"라고만 보내면 AI가 무엇이 문제인지 알 수 없습니다. 에러 메시지 전체 + "이 에러가 났는데 원인이 뭔지 먼저 설명해줘"라고 요청하면 AI가 원인을 진단하고 수정 방법을 알려줍니다. 에러를 이해하려 하지 말고 그대로 전달하는 것이 핵심입니다.
바이브 코딩 첫 앱에서 기능을 추가하고 싶을 때 어떻게 요청하나요?
기능 추가 요청은 한 번에 하나씩 하는 것이 원칙입니다. "여러 기능 한 번에 추가해줘"보다 "메모 삭제 버튼만 추가해줘. 다른 부분은 건드리지 마"처럼 범위를 좁혀야 합니다. 추가하기 전에 GitHub에 현재 상태를 커밋해두면, AI가 수정을 잘못해도 이전 상태로 바로 되돌릴 수 있습니다.
첫 앱이 작동했다면 — 바로 다음 편으로 가세요 🚀
에러가 또 나면 어쩌지? 하는 걱정이 남아있다면
그게 바로 2편을 읽어야 하는 신호입니다.
에러는 사라지지 않습니다. 대하는 방법이 달라질 뿐입니다.
▶ 다음 편 — 2편(업로드 예정)
에러가 나도 괜찮은 이유 — 빨간 화면 공포 극복
이후 예정 — 3편
Vercel 배포 — 내 앱에 진짜 URL이 생기는 순간
댓글 쓰기