Riilog
전체시리즈
Back
ESSAY비개발자를 위한 바이브코딩 안내서
DEC 16, 2025

Part 4.2 디버깅 입문: AI와 함께 버그 잡기

바이브코딩을 하면서 버그 없이 완성되는 경우는 '절대' 없습니다.

버그가 생기는 건 우리의 잘못이 아닙니다. AI가 생성한 코드도 완벽하지 않고, 기능들이 복잡하게 얽히면서 예상치 못한 문제가 생기는 건 자연스러운 현상입니다.

문제는 버그를 어떻게 잡느냐입니다.

무작정 AI에게 "안 돼요 고쳐줘"를 반복하면 시간만 낭비됩니다. 체계적으로 접근하면 같은 버그를 10분 만에 잡을 수 있습니다.

이번 챕터에서는 비개발자도 할 수 있는 실전 디버깅 기술을 알아보겠습니다.

디버깅의 6단계 프로세스

버그를 만나면 이 순서대로 접근하세요.

1. 재현하기 → 2. 에러 수집 → 3. 범위 좁히기 → 4. AI에게 질문 → 5. 수정 → 6. 검증

1단계: 재현 가능한 단계 정리하기

**"어떻게 하면 이 버그가 다시 나타나는가?"**를 정리하는 것이 첫 번째입니다.

버그를 재현할 수 없으면 고칠 수도 없습니다. AI에게 설명할 수도 없고요. 실제로 현업에서도 어떤 버그가 발생하면, 이를 재현할 수 있는 프로세스를 같이 리포팅합니다. 개발자한테서 재현이 안되는데, 고치기는 쉽지 않거든요.

재현 단계 작성 예시:

❌ 나쁜 설명:
"로그인이 안 돼요"

✅ 좋은 설명:
1. 홈페이지에서 '로그인' 버튼 클릭
2. 이메일: test@test.com, 비밀번호: 1234 입력
3. '로그인' 버튼 클릭
4. 예상: 대시보드로 이동
5. 실제: 화면이 깜빡이고 다시 로그인 페이지로 돌아옴

재현 단계 템플릿:

[환경]
- 브라우저: Chrome
- 로컬/배포: localhost:3000

[재현 단계]
1. _____ 페이지에서 시작
2. _____ 버튼/입력 클릭/입력
3. _____ 동작 수행
4. 예상 결과: _____
5. 실제 결과: _____

[추가 정보]
- 항상 발생 / 가끔 발생
- 특정 조건에서만 발생 (예: 새로고침 후에만)

왜 중요한가:

재현 단계를 정리하면:

  • 본인도 문제를 더 명확히 이해하게 됨

  • AI에게 정확한 상황을 전달할 수 있음

  • 수정 후 같은 단계로 테스트해서 고쳐졌는지 확인 가능

'재현'이라고 해서, 막 어렵게 생각하실 필욘 없습니다. 그냥 내가 에러를 겪기까지의 과정을 그대로 적으면 됩니다. 그리고, 만약 정보가 좀 부족하다면 AI가 다시 재질문을 할거에요. 너무 걱정하지 마세요.

2단계: 에러 로그 수집하기

버그가 발생했을 때 모든 에러 메시지를 수집하세요.

확인해야 할 곳 3군데:

  1. 브라우저 콘솔 (F12 → Console)
// 빨간색 에러 메시지 전체 복사
TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (src/components/ProductList.tsx:15:23)
  1. Cursor 터미널
# npm start 실행 중인 터미널에서 에러 확인
Error: ENOENT: no such file or directory
Module not found: Can't resolve './components/Button'
  1. 네트워크 탭 (F12 → Network)

API 호출이 실패했는지 확인합니다.

POST /api/login 500 (Internal Server Error)
GET /api/users 404 (Not Found)

에러 수집 체크리스트:

□ 브라우저 콘솔에 빨간 에러가 있는가?
□ 터미널에 에러 메시지가 있는가?
□ Network 탭에서 실패한 요청(빨간색)이 있는가?
□ 화면에 에러 메시지가 표시되는가?

에러가 없는데 안 될 때:

에러 메시지 없이 그냥 "안 되는" 경우도 있습니다. 이럴 때는 3단계(console.log)로 넘어가세요.

Tip: chrome devtools MCP를 사용하면 브라우저 관련 디버깅조차 MCP에 맡길 수 있습니다. AI한테 chrome devtools mcp 활용해서 디버깅을 해달라고 한 후, 관련 에러로그를 수집해 달라고 하면 잘 정리해줍니다.

3단계: console.log로 범위 좁히기

에러 위치를 모르겠을 때, console.log를 찍어서 데이터를 추적합니다.

기본 사용법:

// 의심되는 위치에 console.log 추가
const handleLogin = async () => {
  console.log("1. handleLogin 시작");
  console.log("2. 입력값:", email, password);
  
  const response = await loginAPI(email, password);
  console.log("3. 서버 응답:", response);
  
  if (response.success) {
    console.log("4. 로그인 성공, 이동 시도");
    navigate("/dashboard");
  } else {
    console.log("4. 로그인 실패:", response.error);
  }
};

브라우저 콘솔(F12)에서 결과 확인:

1. handleLogin 시작
2. 입력값: test@test.com 1234
3. 서버 응답: {success: false, error: "Invalid password"}
4. 로그인 실패: Invalid password

( 잠깐! 만약 개발을 좀 해보셨다면, try catch를 말씀주실 수 있을텐데, 여기서는 그런 문법적인 것은 지양하고, console.log로 디버깅하는 과정을 살펴보는 것이니, 잠시 넘어가겠습니다 )

이제 문제가 보입니다: 서버에서 "Invalid password"를 반환했네요.

console.log 찍는 요령:

// 1. 숫자로 순서 표시 (어디까지 실행됐는지 파악)
console.log("1. 함수 시작");
console.log("2. API 호출 전");
console.log("3. API 호출 후");

// 2. 변수명과 값을 함께 출력
console.log("user:", user);
console.log("products:", products);

// 3. 타입 확인 (undefined인지 null인지)
console.log("user 타입:", typeof user);
console.log("products가 배열?:", Array.isArray(products));

// 4. 조건문 안에서 어느 분기로 갔는지
if (user) {
  console.log("user가 있음");
} else {
  console.log("user가 없음!!");  // 여기가 문제
}

범위 좁히기 전략:

문제 영역을 반으로 나눠가면서 찾습니다.

전체 흐름: 입력 → 처리 → 저장 → 표시

1차: "처리" 전후로 console.log → 처리까지는 OK, 저장에서 문제
2차: "저장" 내부에서 console.log → DB 호출은 OK, 응답 처리에서 문제
3차: "응답 처리" 내부에서 console.log → 정확한 위치 발견!

4단계: AI에게 맥락과 함께 질문하기

이제 수집한 정보를 AI에게 전달합니다.

나쁜 질문:

안 돼요. 고쳐줘.

좋은 질문:

[상황]
로그인 기능을 만들고 있어. React + Supabase 사용 중.

[재현 단계]
1. 로그인 페이지에서 이메일/비밀번호 입력
2. 로그인 버튼 클릭
3. 화면이 깜빡이고 다시 로그인 페이지로 돌아옴

[에러 메시지]
콘솔에 에러 없음.
하지만 console.log 찍어보니 여기서 문제:
- "3. 서버 응답: {success: true, user: {...}}" 까지는 출력됨
- "4. 이동 시도" 가 출력 안 됨

[의심되는 코드]
// LoginPage.tsx 35번째 줄
if (response.success) {
  navigate("/dashboard");  // 이게 안 되는 것 같아
}

왜 navigate가 작동 안 하는지, 어떻게 고쳐야 하는지 알려줘.

맥락 제공 템플릿:

[프로젝트 정보]
- 기술 스택: React / Next.js / Supabase 등
- 현재 작업: 어떤 기능을 만들고 있는지

[문제 상황]
- 재현 단계 (1, 2, 3...)
- 예상 결과 vs 실제 결과

[수집한 정보]
- 에러 메시지 (있으면)
- console.log 결과
- Network 탭 정보 (API 실패 등)

[의심되는 코드]
- 파일명과 줄 번호
- 해당 코드 스니펫

[질문]
- 구체적으로 알고 싶은 것

5단계: 새 채팅창 활용하기

AI와 대화가 길어지면 맥락이 오염됩니다.

새 채팅을 열어야 할 때:

  • 같은 문제로 계속 대화했는데 해결 안 됨

  • AI가 이전에 했던 수정을 또 제안함

  • AI가 점점 엉뚱한 방향으로 감

새 채팅에서 하는 법:

1. 새 채팅 열기
2. 처음부터 맥락 제공 (4단계 템플릿 사용)
3. 이전에 시도했던 것들 언급:
   "이미 시도해본 것: 
    - useState 초기값 변경 → 안 됨
    - useEffect 의존성 배열 수정 → 안 됨"
4. 새로운 접근법 요청

실제 예시:

(새 채팅)

로그인 후 페이지 이동이 안 되는 문제를 해결하고 있어.

[환경] React + React Router + Supabase Auth

[현상] 
- 로그인 API는 성공 (console.log로 확인)
- navigate("/dashboard")가 실행은 되는데 페이지가 안 바뀜

[이미 시도한 것]
1. navigate 대신 window.location.href → 페이지는 이동하는데 로그인 상태 유실
2. useNavigate 훅 위치 변경 → 변화 없음
3. Router 설정 확인 → 이상 없어 보임

새로운 관점에서 원인이 뭘 수 있는지 분석해줘.

6단계: 단계별 테스트로 검증하기

AI가 수정해준 코드를 바로 믿지 마세요. 단계별로 테스트합니다.

테스트 순서:

1. 수정된 코드 저장
2. 브라우저 새로고침 (또는 자동 리로드 확인)
3. 콘솔 에러 확인 → 새 에러 없는지
4. 재현 단계 다시 수행 → 문제 해결됐는지
5. 관련 기능 테스트 → 다른 게 망가지진 않았는지
6. 해결됐으면 git commit!

중요: 한 번에 하나만 수정하기

❌ AI가 제안한 수정 5개를 한꺼번에 적용
   → 뭐가 효과 있었는지 모름
   → 새 버그 생기면 원인 파악 불가

✅ 수정 1개 적용 → 테스트 → 안 되면 되돌리기
   → 수정 2개 적용 → 테스트 → 됐다! 커밋!

A/B 테스트 방식:

변경 전 코드를 주석으로 남겨두고 비교합니다.

// 변경 전 (문제 있던 코드)
// const user = response.user;

// 변경 후 (AI가 제안한 코드)
const user = response?.user ?? null;

이렇게 하면 안 되면 바로 되돌릴 수 있습니다.

Cursor에서 디버깅 편하게 하기

1. 문제 파일 열어두고 질문하기

해당 파일을 열어둔 상태에서 AI에게 물어보면, AI가 그 파일을 참조할 수 있습니다.

2. 에러 메시지 드래그해서 질문하기

콘솔의 에러 메시지를 드래그 → Cursor 채팅창에 붙여넣기 → "이 에러 설명해줘"

3. 특정 코드 선택해서 질문하기

문제 코드 드래그 → 우클릭 → "Ask AI" → "이 코드 왜 안 되는지 설명해줘"

Related Articles

Part 5.4 유지보수와 모니터링: 끝은 곧 시작

비개발자를 위한 바이브코딩 안내서

Part 5.3 사용성 높이기

비개발자를 위한 바이브코딩 안내서

Part 5.2 배포하기: Vercel로 자동배포하기

비개발자를 위한 바이브코딩 안내서

Thank you for reading.

Based in Seoul
Since 2024