AI와 함께 디버깅하기

🐛 에러는 흔하고, 두렵지 않다

바이브 코딩을 하다 보면 에러는 반드시 납니다. 이것은 당신의 실력 문제가 아니라 소프트웨어 개발의 본질입니다. 숙련된 개발자도 에러를 만납니다 — 차이는 에러를 만났을 때 어떻게 대응하느냐입니다. 이번 강의에서는 AI와 함께 에러를 체계적으로 해결하는 방법을 배웁니다.

📋 Step 1 — 에러 메시지 전체를 그대로 전달

에러가 났을 때 가장 흔한 실수는 에러 메시지를 요약하거나 해석해서 전달하는 것입니다. AI에게는 에러 메시지 전체를 그대로 복사해서 붙여넣으세요.

❌ 나쁜 예:
"로그인할 때 에러가 나"

✅ 좋은 예:
"아래 에러가 발생해. 해결해줘:

TypeError: Cannot read properties of undefined (reading 'email')
at LoginForm (./components/LoginForm.tsx:47:23)
at renderWithHooks (./node_modules/react-dom/...)
..."

에러 메시지에는 무엇이 잘못됐는지(TypeError), 어디서 잘못됐는지(LoginForm.tsx 47번 줄)가 이미 들어있습니다. AI는 이 정보를 바탕으로 정확한 수정을 합니다.

🔁 Step 2 — 재현 단계를 설명하기

에러가 언제, 어떤 조건에서 발생하는지 알면 더 빠르게 해결됩니다:

에러 재현 방법:
1. 로그인 페이지 열기
2. 이메일 입력: test@example.com
3. 비밀번호는 비워둔 채 로그인 버튼 클릭
→ 위 에러 발생

정상적인 경우: 두 필드 모두 입력 시 에러 없음

"항상 나는 에러"인지 "특정 조건에서만 나는 에러"인지도 명시하면 좋습니다.

🧾 Step 3 — 추측이 아닌 로그·증상 공유

"아마도 이것 때문인 것 같아"라는 추측보다, 실제로 관찰한 것을 공유하세요:

• 콘솔 로그 전체
• 네트워크 탭의 실패한 요청 (상태 코드, 응답 본문)
• 에러 발생 전후 화면 상태
• 언제부터 에러가 났는지 (특정 변경 이후?)

💡 팁: "어제까지 됐는데 오늘부터 이 에러가 나"라면, 어젯밤과 오늘 사이에 무엇을 변경했는지 AI에게 알려주세요. 변경과 에러 사이의 연관성을 AI가 찾아줍니다.

↩️ AI가 엉뚱한 수정을 할 때 되돌리기

AI가 에러를 수정하다가 오히려 다른 문제를 만들거나, 엉뚱한 방향으로 수정하는 경우가 있습니다. 이럴 때는 주저하지 말고 되돌리세요:

• 에디터의 Undo: Ctrl+Z / Cmd+Z로 변경 취소
• Git으로 되돌리기: git checkout -- [파일명]으로 마지막 커밋 상태로 복구
• AI에게 되돌려 달라고: "방금 변경한 것을 되돌리고 다른 방법으로 시도해줘"

⚠️ 중요: 바로 이 이유 때문에 8강에서 "자주 커밋"을 강조했습니다. 커밋이 없으면 잘못된 수정을 되돌릴 방법이 없습니다.

💬 실전 디버깅 대화 예시

상황	좋은 메시지
에러 발생	"[에러 메시지 전체] 이 에러가 로그인 버튼 클릭 시 발생해."
AI 수정 후 다른 에러	"수정 후 기존 에러는 사라졌는데 이제 [새 에러]가 나. 원래 코드로 되돌리고 다른 방법 있어?"
에러는 없는데 이상함	"에러는 없는데 버튼을 두 번 클릭하면 API가 두 번 호출돼. 왜 그런지 알아?"
특정 상황에서만 발생	"개발 환경에서는 되는데 배포하면 안 돼. 환경 차이 때문일 것 같은데 어디를 봐야 해?"

✅ 정리

• 에러 메시지는 전체를 그대로 AI에게 붙여넣으세요. 요약하지 마세요.
• 재현 단계를 설명하면 AI가 더 정확한 원인을 찾습니다.
• AI가 잘못된 방향으로 수정하면 즉시 되돌리고 다른 방법을 요청하세요.
• 자주 커밋하는 습관이 디버깅의 안전망이 됩니다.