2026년 9월 19일 토요일

[바이브 코딩 디버깅] "안 돼요, 고쳐줘!"라고 하면 AI는 멀쩡한 코드까지 파괴합니다 — 에러 악순환을 끊는 '4대 단서(어디서·무엇을·실제로·단서) 격리 디버깅' 공식

[바이브 코딩 디버깅] "안 돼요, 고쳐줘!"라고 하면 AI는 멀쩡한 코드까지 파괴합니다 — 에러 악순환을 끊는 '4대 단서(어디서·무엇을·실제로·단서) 격리 디버깅' 공식

💡 30초 핵심 요약
바이브 코딩 중 버튼이 안 눌리거나 화면이 멈췄을 때, AI 대화창에 "작동이 안 돼요. 고쳐주세요!"라고 한 줄만 던져본 적 있으신가요? 그 순간 AI는 문제 원인을 좁히지 못하고 기존의 멀쩡했던 화면 레이아웃과 정상 작동하던 다른 기능까지 전부 제멋대로 갈아엎어 버립니다(스파게티화)! 디버깅은 정답을 아무렇게나 찍는 요행이 아니라 '오류 원인의 범위를 한 단계씩 줄여나가는 과학적 탐정 과정'입니다. [어디서 + 무엇을 기대했는지 + 실제로 발생한 현상 + 결정적 단서] 4요소와 '기존 기능 보존 락(Lock)'으로 에러 악순환을 끊어내는 실전 디버깅 공식을 공개합니다!

1. "고쳐달라"고 하면 코드가 망가지는 이유

현장 연수에서 선생님들이 바이브 코딩 실습을 할 때 가장 많이 좌절하는 장면이 있습니다:

  1. 첫 버전 웹앱이 예쁘게 잘 나왔는데, '따라가기' 버튼을 누르니 아무 반응이 없습니다.
  2. 선생님이 AI에게 "따라가기 버튼이 작동하지 않아요. 고쳐주세요."라고 프롬프트를 보냅니다.
  3. AI가 "코드를 수정했습니다"라며 새 코드를 주는데, 열어보니 버튼은 여전히 안 되고 아까 예쁘게 나오던 격자판과 상단 제목 디자인마저 싹 사라져 버립니다!

왜 이런 일이 일어날까요? 생성형 AI는 구체적인 오류 맥락이 주어지지 않으면 "아예 코드를 처음부터 다시 짜는 게 낫겠다"고 판단하여 전체를 재작성하기 때문입니다. 보이는 현상(버튼 무반응)과 실제 원인(이벤트 리스너 미등록, 오타, 변수 스코프 충돌, 데이터 미입력)은 완전히 다릅니다. 따라서 오류를 보고할 때는 기존 코드를 손대지 못하게 묶어두고 원인만 좁히는 프롬프트를 주어야 합니다.

2. AI를 유능한 탐정으로 만드는 디버깅 4대 단서

단서 요소 초보자를 위한 쉬운 설명 실전 프롬프트 예시
1. 어디서
(Where)		 오류가 발생한 구체적인 화면 위치, 파일명, 조작한 요소를 명확히 지목합니다. "우측 하단의 [실행하기] 버튼을 클릭했을 때"
2. 무엇을
(Expected)		 정상적으로 작동한다면 어떤 결과가 나와야 하는지 기댓값을 서술합니다. "조립 슬롯의 1번 블록에 주황색 불이 켜지고 캐릭터가 오른쪽으로 1칸 움직여야 합니다."
3. 실제로
(Actual)		 실제로 화면에서 무슨 일이 일어났는지(화면 멈춤, 빈 화면, 무반응)를 기술합니다. "하지만 버튼이 눌린 모양으로만 유지되고 캐릭터와 블록에 아무런 변화가 없습니다."
4. 결정적 단서
(Clue & Log)		 브라우저 개발자 도구(F12) 콘솔(Console)의 빨간색 에러 메시지나 직전 변경 사항을 첨부합니다. "F12 콘솔에 'Uncaught TypeError: Cannot read properties of null (reading addEventListener)'가 뜹니다."

💡 초보자를 위한 바이브 코딩 실전 사용 예시

좋은 디버깅 프롬프트는 '길어진 프롬프트'가 아니라 '근거가 추가되고 수정 범위가 격리된 프롬프트'입니다. 아래 격리 디버깅 템플릿을 복사해 사용해 보세요.

📋 [복사해서 사용하는 '기존 코드 보존형 격리 디버깅' 프롬프트]

방금 작성해 준 단일 HTML 코드에서 특정 동작 오류가 발생했습니다.
아래 디버깅 정보를 바탕으로 오류 원인을 좁히고 해결해 주세요.

[1. 오류 리포트 (4대 단서)]
- 위치(Where): 우측 하단의 [실행하기(id='btn-run')] 버튼을 클릭하는 순간
- 기대 동작(Expected): 블록 리스트를 순서대로 순회하며 캐릭터 이동 애니메이션이 시작되어야 함
- 실제 현상(Actual): 버튼을 눌러도 콘솔에 에러만 뜨고 화면 변화가 전혀 없음
- 콘솔 로그 단서(Clue): 브라우저 F12 콘솔에 다음과 같은 에러가 출력됨:
  "Uncaught TypeError: currentBlock is undefined at runStep (index.html:142)"

[2. 엄격한 수정 제약 조건 (Code Preservation Lock)]
- 절대 금지: 기존의 전체 HTML 구조, CSS 디자인 스타일, 이미 잘 작동하는 [초기화] 및 [블록 드래그] 함수는 일절 수정하거나 재작성하지 마세요.
- 단계별 접근:
  1단계: 왜 `currentBlock`이 `undefined`로 평가되었는지 발생 원인을 2줄 이내로 명쾌하게 설명하세요.
  2단계: 전체 코드를 다시 출력하지 말고, '수정해야 할 특정 함수 부분(최소 단위)'만 교체 가능한 형태로 코드 스니펫을 제시하세요.

🎯 에디터 한줄평

"막힐 때마다 '고쳐줘'를 연발하면 코드는 누더기가 됩니다. 어디서, 무엇이, 어떻게 어긋났는지 4대 단서를 짚어주는 순간, AI는 최고의 시니어 개발자 동료로 변신합니다!"

출처 및 참고 자료: 2026 정보교원 AI 실전 연수 설계하고 적용하기 TRACK3 (9차시 막힌 부분 해결 및 디버깅 노하우 익히기)
By 시간: