AI가 오류를 냈을 때
비개발자가 당황하지 않는
대처법
오류는 실패가 아닙니다. 개발 흐름의 일부입니다.
어디서 난 오류인지 파악하고, 정확하게 AI에게 전달하는 것이 전부입니다.
📋 목차
오류가 났을 때 가장 먼저 해야 할 것
AI에게 "로그인 기능 추가해줘"라고 했습니다. AI가 코드를 만들었습니다. 저장했습니다.
화면이 새빨간 에러 메시지로 가득 찼습니다.
"망했다. 다 날아간 건가? AI가 뭔가 망가뜨린 건가? 어떻게 하지?"
AI에게 "고쳐줘"라고 했습니다. AI가 뭔가 또 바꿨습니다. 이번엔 다른 화면이 안 됩니다.
다시 "고쳐줘"를 반복했습니다. 코드가 점점 이상해졌습니다.
먼저 중요한 마인드셋 하나를 확인하겠습니다. 이미 3편에서 배운 것이지만 오류 앞에서는 자꾸 잊게 됩니다.
개발자도 하루에 수십 번 오류를 봅니다. 오류는 "지금 여기에 문제가 있다"는 신호입니다.
신호를 읽고 AI에게 정확하게 전달하면 됩니다.
오류의 3가지 유형 — 어디서 난 건지 먼저 파악하자
오류마다 발생하는 위치가 다르고, 어디서 확인해야 하는지도 다릅니다. 가장 먼저 해야 할 것은 "이 오류가 어디서 난 건지" 파악하는 것입니다.
① 터미널 에러
npm run dev 실행 시 또는 실행 중에 터미널에 빨간 글씨로 나타납니다.
VS Code 터미널에서 확인② 브라우저 콘솔 에러
화면은 열리지만 기능이 작동하지 않을 때. 또는 화면에 에러 오버레이가 뜰 때.
F12 개발자 도구 Console 탭③ 빌드 에러
Vercel 배포 시 실패하거나, npm run build 실행 시 나타납니다.
터미널 또는 Vercel 대시보드바이브 코딩 입문 단계에서 가장 자주 만나는 것은 터미널 에러입니다. npm run dev 후 화면이 아예 안 열리거나, 빨간 에러 오버레이가 전체 화면을 덮을 때가 여기에 해당합니다. 7편(터미널 가이드)에서 복붙 → AI 질문 3단계를 배웠습니다. 이 글에서는 ② 브라우저 콘솔 에러와 "AI가 더 망가뜨렸을 때" 대처를 중심으로 다룹니다.
브라우저 콘솔 에러 — 개발자 도구(F12) 활용하기
화면은 열리는데 기능이 작동하지 않거나, "무언가 잘못됐는데 어디서 난 건지 모르겠다"는 상황이 있습니다. 이때 브라우저의 개발자 도구(F12)를 열면 숨겨진 오류 메시지를 볼 수 있습니다. 비개발자가 처음 접하는 도구지만 사용법은 매우 간단합니다.
🔍 브라우저 개발자 도구 여는 법
개발자 도구가 열리면 상단 탭에서 Console을 클릭하세요. 오류(빨간색)와 경고(노란색) 메시지를 볼 수 있습니다.
📋 콘솔 에러에서 AI에게 전달할 핵심만 골라내기
콘솔에서 오류를 발견했을 때는 빨간 텍스트 전체를 드래그해 복사한 후 AI에게 붙여넣으면 됩니다. F12를 처음 열어보는 것이 낯설다면 AI에게 "지금 localhost:3000 화면에서 F12를 열면 뭐가 보이는지 화면을 캡처해서 보여줄게"라고 해도 됩니다.
AI에게 오류를 정확하게 전달하는 법
오류를 AI에게 전달할 때 방식에 따라 해결 속도가 크게 달라집니다. 5편(AI 수정 요청법)에서 배운 "범위 통제" 원칙이 여기서도 똑같이 적용됩니다.
나쁜 패턴 vs 좋은 패턴
① 원인 먼저 — "고쳐줘" 전에 "왜 났는지 설명해줘"를 먼저. ② 텍스트 전체 복붙 — 오류 메시지의 첫 줄과 파일 위치 정보는 특히 중요합니다. 일부만 잘라 보내면 AI가 원인을 잘못 추론할 수 있습니다. 스크린샷보다 텍스트 전체를 복사하세요. ③ 범위 제한 — "이 파일만 수정해줘, 다른 파일 건드리지 마"를 명시하세요.
AI가 고치다 더 망가졌을 때 — 복구 순서
"고쳐줘"를 반복하다 오히려 더 많은 것이 망가지는 상황, 바이브 코딩에서 가장 많이 겪는 위기 중 하나입니다. AI가 한 번 잘못된 방향으로 수정하기 시작하면 관련 없는 파일까지 연쇄적으로 건드리는 경우가 많습니다. 그래서 수정 범위 제한과 GitHub 커밋이 함께 중요합니다. 이때 취해야 할 행동에는 순서가 있습니다.
즉시 멈추세요 — "고쳐줘" 반복을 중단합니다
계속 수정을 요청할수록 코드가 더 꼬입니다. 일단 AI와의 수정 대화를 멈추는 것이 첫 번째입니다.
GitHub 커밋이 있는지 확인합니다
수정 전에 커밋해뒀다면 즉시 복구가 가능합니다. 4편(GitHub 가이드)에서 배운 "AI에게 수정 요청하기 전 커밋 먼저" 원칙이 이 순간을 위한 것입니다.
커밋이 있는 경우 — GitHub으로 복구
AI에게 이렇게 요청하세요: "직전 커밋으로 되돌리는 방법 알려줘. GitHub Desktop 사용 중이야."
커밋이 없는 경우 — AI에게 원상복구 요청
AI에게 이렇게 요청하세요: "지금까지 수정한 것을 모두 원래대로 되돌려줘. 어떤 파일들을 수정했는지 먼저 목록으로 알려줘."
복구 후 — 원래 오류를 올바른 방법으로 다시 접근
복구가 됐다면 이번엔 이 글에서 배운 방법으로 다시 시도하세요. 오류 메시지 복붙 + 원인 설명 요청 + 파일 범위 제한.
🔐 이 상황을 예방하는 가장 좋은 방법
AI에게 수정을 요청하기 전에 GitHub 커밋을 먼저 하는 습관이 이 모든 위기를 예방합니다.
- 1기능이 완성되거나 잘 되는 상태에서 커밋
- 2AI에게 수정 요청
- 3오류가 나면 언제든 커밋 시점으로 즉시 복구 가능
[[비개발자가 바이브 코딩을 시작하면 GitHub를 가장 먼저 배워야 하는 이유]] — 4편 참고
같은 오류가 계속 반복될 때
AI에게 3번 이상 같은 오류를 보여줬는데 계속 실패한다면 접근 방식을 바꿔야 합니다.
🔄 방법 1 — 새 대화창에서 처음부터
현재 대화가 너무 길어져 AI가 맥락을 잃었을 수 있습니다. 새 대화창을 열고 현재 앱 상태와 오류를 처음부터 설명하세요. 5편에서 배운 "새 대화 시작 맥락 복원 템플릿"을 활용하면 됩니다.
🤖 방법 2 — 다른 AI에게 같은 오류 설명해보기
ChatGPT에서 막혔다면 Claude에게, Claude에서 막혔다면 ChatGPT에게 같은 오류를 보여주세요. 다른 AI에게 같은 오류를 설명해보면 다른 관점의 해결 방법을 받을 때도 있습니다.
🔍 방법 3 — 오류 메시지를 그대로 검색
오류 메시지의 핵심 부분을 구글에 그대로 검색해보세요. 예: TypeError Cannot read properties of undefined reading map Next.js. Stack Overflow나 GitHub Issues에서 같은 오류를 경험한 사람들의 해결법을 찾을 수 있습니다.
⏪ 방법 4 — 해당 기능을 포기하고 GitHub 복구
모든 방법이 실패했다면 해당 기능을 잠시 포기하고 이전 커밋으로 돌아가는 것도 전략입니다. 막힌 기능 하나에 너무 오래 소비하는 것보다 다른 기능을 먼저 완성하는 것이 더 효율적일 수 있습니다.
오류 유형별 빠른 대처 치트시트
자주 만나는 오류 상황별로 가장 빠른 대처법을 정리했습니다. 막힐 때 이 표를 참고하세요.
| 상황 | 유형 | 즉시 할 것 |
|---|---|---|
| Module not found / Cannot find package | 터미널 에러 | npm install 실행. 새로 clone한 프로젝트나 패키지 추가 후 자주 발생. 가장 흔한 초기 오류 |
| 화면 전체가 빨간 에러 오버레이 | 터미널 / 브라우저 | 에러 메시지 텍스트 전체 복사 → AI에게 붙여넣기 + 원인 설명 요청 |
| 화면은 열리는데 버튼이 작동 안 함 | 브라우저 콘솔 | F12 → Console 탭 → 빨간 오류 전체 복사 → AI 전달 |
| 화면은 열리는데 스타일이 깨짐 (CSS 반영 안 됨) | 브라우저 / 터미널 | ① 브라우저 강제 새로고침(Ctrl+Shift+R / Cmd+Shift+R) → ② 터미널 확인 → ③ Tailwind 관련이면 AI에게 "Tailwind 클래스가 반영 안 되는 이유" 질문 |
| npm run dev 실행했는데 화면이 안 열림 | 터미널 에러 | 터미널 빨간 글씨 전체 복사 → AI 전달 + 어느 파일만 수정할지 명시 |
| Vercel 배포 실패 | 빌드 에러 | Vercel 대시보드 → Deployments → 실패한 배포 클릭 → 로그 복사 → AI 전달 |
| 로컬에선 됐는데 배포 후 안 됨 | 환경 변수 | Vercel 대시보드 → Settings → Environment Variables 확인 후 누락된 키 추가 → 재배포 |
| AI가 고치다 더 망가짐 | 복합 | 수정 중단 → GitHub 커밋 확인 → 커밋 있으면 복구 → 없으면 원상복구 요청 |
| 같은 오류가 3번 이상 반복 | 맥락 소실 | 새 대화창 시작 → 현재 상태 요약 + 오류 메시지 새로 붙여넣기 |
관련 글 → [[바이브 코딩 AI 수정 요청법 — AI가 코드를 전부 바꿔버리지 않게 하는 구조화 가이드]] — 범위 통제 원칙 관련 글 → [[비개발자가 바이브 코딩을 시작하면 GitHub를 가장 먼저 배워야 하는 이유]] — 커밋 복구 관련 글 → [[터미널 비개발자 최소 생존 가이드 — 바이브 코딩에서 실제로 쓰는 명령어 5가지]] — 터미널 에러 기초
✅ 오류 대처 실전 체크리스트
📌 핵심 정리
- 오류 메시지를 이해하려고 하지 않아도 됩니다. 중요한 건 "복사해서 AI에게 전달할 수 있는가"입니다. 화면이 새빨개져도 코드 파일은 망가지지 않았습니다.
- "Module not found", "Cannot find package" 오류가 나면 가장 먼저
npm install을 실행해보세요. 패키지 설치가 안 된 것이 가장 흔한 초기 오류 원인입니다. - 터미널 에러는 앱 실행 자체의 문제, 브라우저 콘솔 에러(F12)는 실행은 되지만 특정 기능의 문제입니다. 어디서 난 오류인지 먼저 구분하세요.
- AI에게 오류를 전달할 때는 메시지 전체를 복붙하고, "원인을 먼저 설명해줘 + 이 파일만 수정해줘"로 요청하세요. 일부만 잘라 보내면 AI가 원인을 잘못 추론합니다.
- AI가 연쇄적으로 파일을 망가뜨리기 시작했다면 즉시 멈추고 GitHub 커밋으로 복구하세요. 수정 전 커밋 습관이 이 모든 위기를 예방합니다.
- 해결 자체보다 "왜 이런 오류가 났는지"를 AI에게 설명받는 습관이 장기적으로 더 중요합니다. 이해 없는 복붙 수정은 같은 오류를 반복시킵니다.
❓ 자주 묻는 질문
바이브 코딩에서 AI에게 오류를 전달할 때 어떻게 해야 가장 빠르게 해결되나요?
오류 메시지 전체를 복사해서 AI에게 붙여넣는 것이 가장 빠릅니다. 이때 단순히 '고쳐줘'라고 하지 말고, '이 오류가 왜 났는지 원인을 먼저 설명해줘. 그 다음 [파일명]에서만 수정해줘'처럼 원인 파악과 범위 제한을 함께 요청하면 AI가 관련 없는 파일까지 건드리는 것을 방지할 수 있습니다.
브라우저에서 개발자 도구를 여는 방법이 뭔가요?
Windows에서는 F12 키를 누르거나, 마우스 오른쪽 클릭 후 '검사'를 선택합니다. Mac에서는 Cmd+Option+I를 누르거나, 마우스 오른쪽 클릭 후 '요소 검사'를 선택합니다. 개발자 도구가 열리면 상단 탭에서 'Console'을 클릭하면 JavaScript 오류와 경고 메시지를 볼 수 있습니다.
AI가 오류를 고치다 더 이상해졌을 때 어떻게 해야 하나요?
먼저 AI와의 대화를 멈추고 GitHub에 커밋이 있는지 확인하세요. 커밋이 있다면 AI에게 '직전 커밋으로 되돌리는 방법 알려줘'라고 요청하면 됩니다. 커밋이 없다면 AI에게 '지금까지 수정한 파일 목록을 알려주고, 모두 원래대로 되돌려줘'라고 요청하세요. 앞으로는 AI에게 수정을 요청하기 전에 GitHub 커밋을 먼저 하는 습관을 만드는 것이 가장 중요합니다.
같은 오류가 계속 반복될 때 어떻게 해야 하나요?
AI와의 대화가 너무 길어져서 맥락을 잃은 것일 수 있습니다. 새 대화창을 열고 현재 앱 상태와 오류 메시지를 처음부터 설명하면 훨씬 정확한 답변을 받을 수 있습니다. 또는 다른 AI(ChatGPT에서 Claude로, 또는 반대로)에게 같은 오류를 물어보는 것도 좋습니다. 오류 메시지를 구글에 그대로 검색하면 같은 문제를 경험한 사람들의 해결법을 찾을 수도 있습니다.
오류가 났을 때
가장 먼저 할 것
멈추세요. 깊게 숨을 쉬세요.
오류 메시지를 복사하세요.
AI에게 "원인을 먼저 설명해줘"라고 하세요.
이 세 가지면 충분합니다.
댓글 쓰기