에러가 나도 괜찮습니다 . 빨간 화면 공포 극복 가이드 — 바이브 코딩 시즌1 #2

📍 시리즈 위치

0편: 환경 세팅 ✓

→

1편: 첫 앱 완성 ✓

→

▶ 2편: 에러 공포 극복 (지금)

→

3편: Vercel 배포

😰 비개발자가 에러 앞에서 포기하는 이유

💬 이 순간, 겪어보셨나요?

1편을 따라 첫 앱을 완성했습니다. 브라우저에서 화면도 떴습니다.

뭔가 수정해보려고 AI에게 요청했습니다. 코드를 받아서 붙여넣었습니다.
npm run dev를 눌렀습니다. 그런데 터미널이 빨개졌습니다.

영어로 된 에러 메시지가 쏟아집니다. 이해가 안 됩니다.
브라우저를 새로고침했습니다. 화면이 하얗게 됐습니다.
"내가 뭔가 망가뜨린 건가?" 싶어서 그냥 창을 닫았습니다.

이건 실력의 문제가 아닙니다. 에러를 어떻게 받아들여야 하는지 아무도 알려주지 않아서입니다.

비개발자가 바이브 코딩에서 이탈하는 가장 큰 지점이 바로 이 순간입니다. 첫 앱이 뜬 기쁨은 에러 하나로 "역시 나는 안 되는 사람"이라는 생각으로 바뀝니다. 저도 처음 시작에서 첫 에러 발생의 순간에 무엇을 해야 될지도 모르고 막막하니 그런 마음이었습니다. 하지만 그 생각은 틀렸습니다.

에러는 개발자에게도 매일 납니다. 차이는 단 하나입니다. 에러가 났을 때 어떻게 행동하는지를 알고 있느냐입니다. 이 글은 그 행동 방법을 알려드립니다.

🔄 에러를 보는 관점부터 바꿔야 합니다

에러 앞에서 비개발자와 개발자의 차이는 실력이 아닙니다. 에러를 어떻게 해석하느냐의 차이입니다.

❌ 기존 관점

→

✅ 바꿀 관점

"에러가 났다 = 내가 뭔가 망가뜨렸다"
→ "에러가 났다 = 컴퓨터가 무엇이 문제인지 알려주고 있다"

❌ 기존 관점

→

✅ 바꿀 관점

"에러 메시지를 내가 이해해야 한다"
→ "에러 메시지는 AI에게 전달하면 된다"

❌ 기존 관점

→

✅ 바꿀 관점

"에러가 나면 처음부터 다시 해야 한다"
→ "에러는 대부분 명령어 하나로 해결된다"

❌ 기존 관점

→

✅ 바꿀 관점

"에러 없이 잘 되어야 정상이다"
→ "에러가 나는 것이 정상, 에러 없이 되는 게 오히려 드물다"

에러는 실패 신호가 아닙니다.
"여기에 문제가 있으니 이 정보를 가지고 다음 요청을 하라"는
시스템이 보내는 안내 메시지입니다.

👨‍💻

실제 개발자도 하루 종일 에러를 봅니다

10년차 개발자와 바이브 코딩을 시작한 비개발자의 차이는 에러가 나느냐 아니냐가 아닙니다. 에러를 보고 어떻게 반응하느냐의 차이입니다. 개발자는 에러를 보면 "어, 또 왔네" 하고 메시지를 읽습니다. 비개발자는 에러를 보면 "내가 망친 건가" 하고 멈춥니다. 이 글을 읽고 나면 그 차이가 사라집니다.

💥 실제 해결 성공 시나리오 — 이 흐름 하나만 기억하세요

에러가 났을 때 어떻게 하면 해결되는지, 처음부터 끝까지 실제 흐름으로 보여드립니다.

실제 해결 흐름 — Cannot find module 에러

① 에러 발생

Error: Cannot find module 'express'
→ "망했다…" 하고 멈추는 대신 — 전체 복사

② AI 전달

npm run dev를 했더니 아래 에러가 났어.
Error: Cannot find module 'express'
원인 먼저 설명해줘. 그다음에 해결 방법 알려줘.

③ AI 답변

"express 패키지가 설치되지 않아서 발생한 에러야.
아래 명령어 실행하면 해결돼."

npm install

④ 실행 결과

Server running on http://localhost:3000
→ 에러 해결. 브라우저에서 앱 정상 실행 확인

⏱ 에러 발생부터 해결까지 걸린 시간: 약 2분. 에러를 이해할 필요가 없었습니다.

바이브 코딩 에러 관점 전환 — 실패가 아닌 다음 요청의 재료

👀 빨간 화면, 이것만 읽으면 됩니다

에러 메시지 전체를 이해할 필요가 없습니다. 딱 두 가지만 확인하면 됩니다.

터미널 — 에러가 났을 때 화면 예시

$ npm run dev

> my-project@1.0.0 dev

> node server.js

Error: Cannot find module 'express' ← ① 에러 종류 (여기만 읽으면 됨)

Require stack:

- /Users/user/my-project/server.js

at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)

at Function.Module._load (node:internal/modules/cjs/loader:885:27)

at /Users/user/my-project/server.js:1:17 ← ② 어느 파일 몇 번째 줄 (참고용)

at Object.<anonymous> (node:internal/modules/cjs/loader...)

① 첫 번째 빨간 줄 = 에러의 핵심 내용 → 이것만 복사해도 충분
② 나머지 긴 내용 = 에러가 발생한 경로 추적 → 이해 안 해도 됨, 전체 복사 후 AI에게 전달

에러(Error) vs 경고(Warning) — 반응이 달라야 합니다

🔴 즉시 대응 필요

Error: ...

npm error ...

Cannot find module ...

실행이 멈추거나 앱이 작동하지 않음. AI에게 전달 필요.

🟡 무시해도 됨

npm warn ...

DeprecationWarning ...

ExperimentalWarning ...

경고일 뿐 실행에 문제없음. 대부분 무시하고 계속 진행.

🟢 정상 작동 중

Server running on ...

Listening on port ...

✓ compiled successfully

앱이 정상 실행 중. 브라우저에서 확인하면 됨.

🔴 브라우저 에러

SyntaxError ...

ReferenceError ...

404 / 500 상태 코드

F12 → Console 탭에 나타남. 빨간 줄 전체 복사 후 AI 전달.

핵심 원칙: 노란 글씨(warn)는 무시, 빨간 글씨(error)는 전체 복사 후 AI에게 전달.
이 두 가지 반응만 기억하면 대부분의 에러 상황을 통과할 수 있습니다.

🗂️ 자주 만나는 에러 유형 5가지와 즉각 대처법

🎯 초보자 에러의 90%는 아래 1·2번입니다

바이브 코딩 초반에 가장 자주 나오는 에러는 정해져 있습니다. 특히 npm install 누락과 터미널 위치 오류 두 가지가 전체의 90%를 차지합니다. 아래 다섯 가지를 알고 있으면 대부분의 에러 앞에서 당황하지 않을 수 있습니다.

⚠️ 가장 흔한 실수 — 저장을 빠뜨리는 것

코드를 붙여넣고 Ctrl+S를 안 했다면 — 수정이 반영되지 않습니다

AI가 준 코드를 붙여넣고 npm run dev를 다시 실행했는데 변화가 없다면, 저장을 빠뜨린 경우가 대부분입니다. 파일명 옆에 ● 표시가 있으면 아직 저장되지 않은 상태입니다. 에러처럼 보이지만 에러가 아닙니다.

✅ 코드 수정 후 반드시 Ctrl+S (Mac: Cmd+S) → 파일명 옆 ● 사라지면 저장 완료

📦

유형 1 — 모듈을 찾을 수 없음

가장 흔함

Error: Cannot find module 'express'

원인: npm install을 안 했거나, package.json 없이 실행하려 했을 때. 또는 새 라이브러리가 추가됐는데 다시 설치를 안 한 경우.

✅ 해결: 터미널에서 npm install 실행 → 완료 후 npm run dev 다시 실행.

📂

유형 2 — 파일을 찾을 수 없음

두 번째로 흔함

Error: Cannot find 'server.js' / ENOENT: no such file or directory

원인: 터미널 위치가 프로젝트 폴더가 아닌 경우. 또는 파일 이름을 잘못 저장한 경우 (예: server.JS, Server.js).

✅ 해결: 터미널 경로 확인 (프로젝트 폴더명이 보여야 함). 다르면 cd my-project 입력. VS Code에서 파일 이름 대소문자도 확인.

🔌

유형 3 — 포트가 이미 사용 중

서버 재시작 시 자주 발생

Error: listen EADDRINUSE: address already in use :::3000

원인: 이전에 실행한 서버가 아직 종료되지 않은 상태에서 다시 실행하려 할 때. Ctrl+C로 제대로 종료하지 않은 경우.

✅ 해결: 터미널에서 Ctrl+C로 현재 프로세스 종료 → 잠시 대기 → npm run dev 다시 실행. 또는 VS Code를 완전히 닫고 다시 열기.

🔑

유형 4 — 문법 오류

코드 수정 후 자주 발생

SyntaxError: Unexpected token '}' / SyntaxError: missing ) after argument list

원인: AI가 준 코드를 붙여넣는 과정에서 일부가 잘리거나 중복됐을 때. 또는 코드 안에 이모지나 특수문자가 섞인 경우.

✅ 해결: AI에게 해당 파일 전체 코드를 다시 달라고 요청. 붙여넣을 때 기존 내용 전체 삭제(Ctrl+A) 후 새 코드 붙여넣기.

🌐

유형 5 — 브라우저 연결 거부

실행 후 브라우저 확인 시

브라우저: 이 사이트에 연결할 수 없습니다 / ERR_CONNECTION_REFUSED

원인: 서버가 실행 중이 아닌데 브라우저에서 접속하려 했을 때. 또는 포트 번호가 다른 경우.

✅ 해결: 터미널로 돌아가 서버가 실행 중인지 확인. "Server running on http://localhost:3000" 메시지가 보여야 함. 없으면 npm run dev 실행.

바이브 코딩 자주 나오는 에러 유형 5가지와 즉각 해결법

⚡ 에러가 났을 때 행동 순서 — 3단계

에러가 났을 때의 행동 순서를 몸에 익혀두면 어떤 에러가 나도 패닉 없이 통과할 수 있습니다.

1

에러 메시지 전체를 복사한다

이해하려 하지 마세요. 빨간 글씨가 보이면 터미널을 클릭하고 전체 드래그 후 복사합니다. 에러가 여러 줄이어도 전부 복사해야 합니다. 첫 줄만 복사하면 AI가 원인을 잘못 진단하는 경우가 생깁니다.

터미널 전체 선택 방법

# 방법 1: 마우스로 드래그해서 복사 (Ctrl+C) # 방법 2: 터미널 클릭 → Ctrl+A → Ctrl+C (전체 선택 후 복사) → 에러 메시지가 길수록 더 많이 복사해야 정확한 진단이 나옵니다

2

AI에게 "원인 먼저 설명해줘"로 요청한다

에러 메시지만 붙여넣지 말고, 무엇을 했을 때 났는지와 원인 설명 요청을 함께 보내야 합니다. 수정 코드를 바로 달라고 하기 전에 원인을 먼저 파악하는 것이 같은 에러의 반복을 막습니다.

✅ 복붙용 — 에러 전달 템플릿

npm run dev를 했더니 아래 에러가 났어. [에러 메시지 전체 붙여넣기] 이 에러가 왜 났는지 원인을 먼저 설명해줘. 그다음에 해결 방법을 알려줘. 수정할 파일이 있으면 파일 전체 코드로 줘.

※ "고쳐줘"만 반복하면 AI가 매번 다른 방식으로 수정하다가 코드가 더 꼬입니다.

3

AI가 알려준 방법을 그대로 따르고 재확인한다

AI가 명령어를 알려줬다면 그대로 터미널에 입력합니다. 수정 코드를 줬다면 해당 파일에 붙여넣고 저장(Ctrl+S) 후 npm run dev를 다시 실행합니다.

재실행 순서

# 서버가 실행 중이면 먼저 종료 Ctrl + C # 필요 시 다시 설치 npm install # 서버 재시작 npm run dev → 에러 없이 "Server running on..." 메시지가 나오면 성공

⚠️ 같은 에러가 3번 반복된다면 → AI에게 "이 에러가 계속 반복되는 근본 원인을 설명해줘"로 질문 방식을 바꿔보세요.

❌ 이 방식은 AI가 원인을 제대로 진단 못 합니다

✕

"안 돼요" / "에러 났어요"만 보냄

→ AI가 어떤 에러인지 알 수 없어 엉뚱한 수정을 합니다

✕

에러 메시지 첫 줄만 복사해서 보냄

→ 전체 맥락이 없으면 진단 정확도가 크게 낮아집니다

✕

에러 화면 스크린샷만 첨부

→ 텍스트 복사가 훨씬 정확합니다. AI는 이미지보다 텍스트를 더 잘 분석합니다

✕

"고쳐줘"만 반복

→ 원인 파악 없이 수정만 반복하면 코드가 점점 꼬입니다

✕

여러 에러를 한 번에 묶어서 질문

→ 에러 하나씩 해결해야 원인을 정확히 파악할 수 있습니다

❌ 이렇게 하면 더 꼬입니다

에러 첫 줄만 복사해서 AI에게 보냄

"안 돼요", "에러 났어요"만 보냄

AI 말대로 했는데 또 에러 → 다른 AI한테 물어봄

에러 날 때마다 파일 전체 지우고 처음부터

✅ 이렇게 하면 통과합니다

에러 메시지 전체 텍스트 복사 후 전달

"어떤 명령어 했을 때 났는지" 한 줄 추가

원인 설명 먼저 요청 → 이해 후 수정 요청

반복되면 근본 원인 질문으로 전환

에러 앞에서 패닉하지 않는 것과 올바른 순서로 AI에게 전달하는 것, 이 두 가지가 전부입니다.

💪

에러를 한 번 통과해본 사람은 달라집니다

처음 에러를 AI에게 전달해서 해결한 순간,
다음 에러가 났을 때 공포 대신 "또 전달하면 되지"라는 감각이 생깁니다.
그 감각이 생기면 바이브 코딩을 오래 지속할 수 있습니다.

⬜ 에러 메시지도 없는데 화면이 하얗다면

터미널에 에러는 없는데 브라우저가 하얗거나 "연결할 수 없습니다"가 뜰 때가 있습니다. 이건 에러 메시지가 다른 곳에 있는 경우입니다.

🔍

확인 1 — 서버가 실행 중인지

가장 흔한 원인입니다. npm run dev를 실행하지 않은 상태에서 브라우저를 열면 항상 흰 화면이 나옵니다.

✅ 터미널에서 npm run dev 실행 → "Server running on http://localhost:3000" 메시지 확인 → 브라우저에서 localhost:3000 접속.

📍

확인 2 — 브라우저 주소창이 맞는지

검색창에 "localhost:3000"을 입력하면 구글 검색이 됩니다. URL 주소창(상단 주소 입력 칸)에 직접 입력해야 합니다.

✅ 브라우저 상단 주소창(URL 창)에 http://localhost:3000 입력 → Enter. 검색창이 아닌 주소창에 입력.

🛠️

확인 3 — 브라우저 개발자 도구에서 에러 찾기

서버는 실행 중인데 브라우저 화면이 비거나 깨지는 경우, 에러가 브라우저 안에 있습니다. F12를 누르면 개발자 도구가 열립니다.

✅ F12 → Console 탭 클릭 → 빨간 에러 메시지 전체 복사 → AI에게 "브라우저 콘솔에 이 에러가 났어. 원인 설명해줘"로 전달.

📖 수정 요청을 더 잘 하고 싶다면:
[[관련 글: 바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꿔버리지 않게 하는 구조화 가이드]] — 에러를 전달한 다음, 수정 요청의 범위를 좁히는 방법을 다룹니다.

바이브 코딩 흰 화면 대처 — F12 개발자 도구에서 브라우저 에러 확인하는 법

📌 핵심 요약

• 🔄에러는 실패 신호가 아닙니다. "여기에 문제가 있으니 이 정보로 다음 요청을 하라"는 시스템의 안내입니다. 에러를 보는 관점이 바뀌면 이탈하지 않게 됩니다.
• 👀노란 글씨(warn)는 무시, 빨간 글씨(error)만 대응하면 됩니다. 에러 메시지를 이해할 필요 없이 전체를 복사해 AI에게 전달하면 됩니다.
• ⚡에러 대처 3단계: 전체 복사 → "원인 먼저 설명해줘" 요청 → AI가 알려준 방법 그대로 실행. "고쳐줘"만 반복하면 코드가 더 꼬입니다.
• 🗂️가장 자주 나오는 에러는 npm install 누락, 터미널 위치 오류, 포트 충돌, 문법 오류, 브라우저 연결 거부 다섯 가지입니다. 이 다섯 가지를 알면 대부분 즉각 해결됩니다.
• ⬜브라우저 흰 화면은 서버 실행 여부와 URL 주소창 확인이 먼저입니다. 터미널 에러가 없다면 F12 → Console 탭에서 브라우저 에러를 찾을 수 있습니다.

❓ 자주 묻는 질문

바이브 코딩에서 에러가 났을 때 가장 먼저 해야 할 행동은 무엇인가요?

터미널에 나온 에러 메시지 전체를 복사하는 것입니다. 에러를 이해하려 하지 말고, 빨간 글씨가 보이는 즉시 드래그해서 전체 복사합니다. 그다음 AI에게 "이 에러가 났는데 원인이 뭔지 먼저 설명해줘. 수정은 그다음에"라고 보내면 됩니다. 원인을 먼저 파악해야 같은 에러가 반복되지 않습니다.

바이브 코딩 npm install 중 WARN 경고가 뜨면 에러인가요?

아닙니다. npm warn은 경고(warning)이지 오류(error)가 아닙니다. 설치가 정상 완료되는 경우에도 warn은 항상 나타납니다. 실제로 문제가 있는 상황은 빨간 글씨로 "npm error" 또는 "Error:"가 나왔을 때입니다. 노란 warn 메시지는 무시하고 npm run dev를 실행해도 됩니다.

바이브 코딩 에러가 계속 반복되면 어떻게 해야 하나요?

같은 에러가 3번 이상 반복된다면 AI에게 수정 코드를 받는 것보다 "이 에러가 반복되는 근본 원인을 설명해줘. 어떤 구조적 문제가 있는지 먼저 알고 싶어"라고 질문 방식을 바꿔야 합니다. 또한 대화가 30번을 넘었다면 새 대화를 시작하고 현재 앱 상태를 한 문단으로 요약해서 첫 메시지에 붙여넣는 것이 더 효과적입니다.

에러 메시지 없이 브라우저 화면이 하얗게 비어버렸을 때는 어떻게 하나요?

브라우저 흰 화면은 크게 세 가지 원인입니다. 첫째, 서버가 실행 중이지 않은 경우 — 터미널에서 npm run dev가 실행 중인지 확인하세요. 둘째, 브라우저 주소창에 localhost:3000을 검색창이 아닌 URL 창에 직접 입력했는지 확인하세요. 셋째, 브라우저 개발자 도구(F12)를 열어 Console 탭의 빨간 오류 메시지를 AI에게 전달하세요.

에러를 보고 창을 닫던 사람에서
에러를 복사해서 AI에게 전달하는 사람이 됐습니다.
이 차이가 바이브 코딩을 오래 지속하게 만드는 전부입니다.

다음은 내 앱에 실제 인터넷 주소(URL)가 생기는 단계입니다.
"친구한테 링크 보냈더니 열렸다" — 그게 3편에서 일어납니다.

▶ 다음 편 — 3편

Vercel 배포, 바이브 코딩 앱을 인터넷에 공개하는 법

함께 읽기

바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꾸지 않게 하는 구조화 가이드