디버깅 (Debugging)
코드에서 발생한 오류(버그)의 원인을 찾아내고 수정하는 과정입니다.
🤔 혹시 이런 경험 있나요?
AI가 만들어준 코드를 복사해서 붙여넣었는데 화면에 아무것도 나오지 않습니다. 또는 빨간 에러 메시지가 잔뜩 뜨는데 뭔 말인지 하나도 모르겠습니다. AI에게 "에러 났어 고쳐줘"라고 했더니 또 다른 에러가 생깁니다. 이런 상황에서 필요한 것이 바로 디버깅입니다.
🐛 디버깅이란?
디버깅(Debugging)은 코드에서 발생한 오류(버그, Bug)의 원인을 찾아내고 수정하는 과정입니다. "Bug"는 벌레라는 뜻인데, 1947년에 실제로 컴퓨터에 나방이 들어가서 오작동이 생긴 사건에서 유래했습니다.
바이브코딩에서는 AI가 코드를 작성하지만, 에러가 발생했을 때 문제의 원인을 이해하고 AI에게 정확한 맥락을 전달하는 것은 여러분의 역할입니다. 디버깅 기초를 알면 에러 해결 속도가 완전히 달라집니다.
🔴 에러 메시지 읽는 법
에러 메시지가 무섭게 보여도, 대부분 일정한 구조를 따릅니다.
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:15:23)
at renderWithHooks (react-dom.development.js:14985:18)이 메시지에서 읽어야 할 핵심은 세 가지입니다.
- 에러 종류:
TypeError- 데이터 타입이 맞지 않는 문제입니다. - 에러 내용:
Cannot read properties of undefined- undefined인 값에서 뭔가를 읽으려 했습니다. - 에러 위치:
UserList.tsx:15:23- UserList 파일의 15번째 줄, 23번째 글자 근처입니다.
이 정보만 읽을 수 있어도 AI에게 "UserList.tsx 15번째 줄에서 undefined 에러가 나요"라고 정확하게 전달할 수 있습니다.
🔧 디버깅의 기본 도구들
1. console.log - 가장 간단한 디버깅
코드가 어디까지 실행되는지, 변수에 어떤 값이 들어 있는지 확인하는 가장 기본적인 방법입니다.
async function getUsers() {
console.log('1. 함수 시작') // 실행 확인
const response = await fetch('/api/users')
console.log('2. 응답:', response) // 응답 확인
const data = await response.json()
console.log('3. 데이터:', data) // 데이터 확인
return data
}이렇게 중간중간 console.log를 넣으면, 어디에서 문제가 발생하는지 정확히 파악할 수 있습니다. 만약 "1. 함수 시작"은 출력되는데 "2. 응답"이 출력되지 않는다면, fetch 요청에서 문제가 생긴 것입니다.
2. 브라우저 개발자 도구 (DevTools)
크롬에서 F12 키를 누르면 개발자 도구가 열립니다.
- Console 탭:
console.log의 출력과 에러 메시지를 확인합니다. - Network 탭: API 요청이 성공했는지, 어떤 데이터가 오갔는지 확인합니다.
- Elements 탭: HTML 구조가 올바른지 확인합니다.
특히 Network 탭은 API 관련 문제를 해결할 때 매우 유용합니다. 요청이 404(주소 오류)인지, 401(인증 실패)인지, 500(서버 오류)인지 한눈에 볼 수 있습니다.
3. 터미널 로그
서버 사이드 코드(API 라우트, 서버 함수 등)의 에러는 브라우저가 아니라 터미널에 출력됩니다. npm run dev를 실행한 터미널 창을 항상 확인하세요.
📝 흔한 에러 유형과 해결법
| 에러 유형 | 의미 | 흔한 원인 |
|---|---|---|
| SyntaxError | 문법 오류 | 괄호, 쉼표, 따옴표 누락 |
| TypeError | 타입 불일치 | undefined 값에 접근 |
| ReferenceError | 존재하지 않는 변수 | 오타, import 누락 |
| NetworkError | 네트워크 문제 | API URL 오류, 서버 미응답 |
| CORS Error | 교차 출처 차단 | 다른 도메인의 API 호출 시 |
CORS Error는 바이브코딩에서 특히 자주 만납니다. 프론트엔드에서 다른 도메인의 API를 직접 호출하면 브라우저가 보안상 차단하는데, 이때는 서버를 경유하거나 API 서버에서 CORS 설정을 추가해야 합니다.
💡 AI에게 디버깅을 잘 맡기는 방법
AI에게 단순히 "에러 났어"라고 하면 정확한 답을 얻기 어렵습니다. 다음 정보를 함께 전달하면 훨씬 빠르게 해결됩니다.
1. 에러 메시지 전문 (복사해서 전달)
2. 에러가 발생한 파일과 코드
3. 어떤 상황에서 에러가 나는지 (언제, 어떤 버튼 클릭 시 등)
4. 이미 시도한 해결 방법
5. 최근에 변경한 코드가 있다면 그 내용예를 들어 "로그인 버튼을 누르면 TypeError: Cannot read properties of undefined (reading 'email')이 뜹니다. LoginForm.tsx 23번째 줄이 문제 같습니다"라고 전달하면, AI가 정확한 수정안을 제시할 수 있습니다.
💼 디버깅 지식이 필요해지는 순간들
오픈 직전 이벤트 페이지의 버튼이 안 눌릴 때
캠페인 시작 몇 시간 전, 참여 버튼을 눌러도 아무 반응이 없는 것을 발견하는 상황입니다. F12로 개발자 도구를 열고 Console 탭을 확인하면 빨간 에러 메시지가 남아 있는 경우가 많습니다. 이 메시지를 그대로 복사해서 개발자나 AI에게 전달하면, "버튼이 안 눌려요"라고만 말할 때보다 해결이 훨씬 빨라집니다.
클릭 데이터가 GA4에 안 잡힐 때
버튼 클릭 이벤트를 심었는데 GA4에 숫자가 안 들어오는 경우, Network 탭에서 수집 요청이 실제로 나가는지 확인할 수 있습니다. 요청 자체가 없다면 태그 설정 문제이고, 요청은 나가는데 데이터가 비어 있다면 파라미터 문제로 범위를 좁힐 수 있습니다. 이렇게 문제를 반으로 나눠가며 좁히는 방식이 디버깅의 기본입니다.
AI가 같은 에러를 계속 못 고칠 때
"에러 고쳐줘"를 반복해도 AI가 계속 엉뚱한 곳을 수정하며 헤매는 경우가 있습니다. 이때 에러 메시지에서 파일명과 줄 번호를 직접 읽고 "이 파일 이 줄에서 나는 에러야"라고 짚어주면 AI의 수정 정확도가 올라갑니다. 수정 전 상태를 Git으로 저장해두면, AI의 수정이 상황을 더 악화시켜도 언제든 되돌릴 수 있습니다.
📋 30초 요약
-
디버깅은 코드의 오류를 찾아 수정하는 과정입니다. 에러 메시지에서 에러 종류, 내용, 위치를 읽는 습관을 들이세요.
-
console.log로 코드 실행 흐름을 추적하고, 브라우저 DevTools의 Network 탭으로 API 문제를 확인하세요. 서버 에러는 터미널에서 확인합니다.
-
AI에게 에러 메시지 전문, 해당 코드, 발생 상황을 함께 전달하면 디버깅 속도가 훨씬 빨라집니다. "에러 났어 고쳐줘"보다 구체적인 맥락이 핵심입니다.
이 글이 도움이 되셨다면 공유해 주세요
메신저로 바로 보내거나 링크를 복사할 수 있습니다.
바이브코딩으로 만든 앱에서 에러가 발생했을 때, AI에게 가장 효과적으로 도움을 요청하는 방법은?
이어서 배우면 좋은 개념
터미널과 CLI (Terminal & CLI)
컴퓨터에게 텍스트 명령어를 입력해서 작업을 수행하는 도구입니다. AI 코딩 도구가 '이 명령어를 실행하세요'라고 할 때 사용하는 바로 그 검은 화면입니다.
프론트엔드와 백엔드 (Frontend & Backend)
프론트엔드는 사용자가 보고 상호작용하는 화면(브라우저) 부분이고, 백엔드는 데이터 처리와 비즈니스 로직을 담당하는 서버 부분입니다. 이 구분을 이해해야 바이브코딩에서 보안 사고를 방지할 수 있습니다.
클로드 코드 플랜과 사용량 한도 이해하기
클로드 코드를 쓸 때 요금이 어떻게 매겨지고, 얼마나 쓰면 한도에 걸리는지를 정하는 구조입니다. 구독 플랜은 정해진 사용량이 포함되고, API 방식은 쓴 만큼 토큰 단위로 요금이 붙습니다.
Memory와 CLAUDE.md (영속 컨텍스트) 이해하기
Claude Code가 세션을 넘어 기억할 수 있도록 만든 영속 컨텍스트 시스템입니다. 사용자가 직접 적은 CLAUDE.md 파일과 Claude가 작업 중 자동으로 쌓는 auto memory 두 갈래로 구성됩니다.
관련 인사이트
- Qwen3.8 27B 로컬 실행 결과: 24GB 맥에서는 CPU로 떨어집니다Qwen3.8 27B는 알리바바 Qwen 팀이 2026년 8월 공개한 Apache 2.0 오픈 웨이트 모델입니다. 메모리 24GB 맥미니 M4 프로에 직접 설치해 돌려 보니 GPU에 올라가지 못하고 CPU로 실행됐고, 그때 측정한 속도를 그대로 정리했습니다.
- 코덱스 CLI와 클로드 코드 비교 (같은 도구를 만들게 해 봤습니다)코덱스 CLI와 클로드 코드는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 두 도구에 똑같은 규격서를 주고 같은 도구를 만들게 해서 걸린 시간, 결과물 규모, 안전장치가 어떻게 다른지 측정했습니다.
- 코덱스 CLI 사용법: 초보 블로거를 위한 GEO 인용 검사 도구 만들기 과정코덱스 CLI는 터미널에서 파일을 직접 읽고 만드는 코딩 도구입니다. 빈 폴더에서 시작해 내 글이 AI 답변에 인용되기 쉬운지 확인하는 GEO 점검 도구가 나올 때까지, 시킬 말 전문과 명령을 그대로 정리했습니다.
- 구글 픽셀 11, Qwen3.8, 커서 인수로 본 AI 배포 경쟁AI 배포 경쟁은 같은 모델을 몇 개의 화면에 넣어 두느냐로 우열이 정해지는 경쟁입니다. 2026년 8월 12일부터 15일 사이에 나온 발표 다섯 건을 놓고, 각 회사가 모델을 어디까지 밀어 넣었는지 공식 자료 기준으로 정리했습니다.
- VS Code에서 클로드 코드 실행하기 (윈도우 화면 그대로 따라하기)클로드 코드를 설치했는데 검은 PowerShell 창이 부담스러운 분을 위해, VS Code를 설치하고 그 안 터미널에서 클로드 코드를 실행하는 순서를 화면 그림과 함께 정리했습니다. 승인 질문을 건너뛰는 bypass 모드까지 담았습니다.
- 챗GPT 리눅스 데스크톱 앱 프리뷰 정리: 설치 패키지와 지원 기능챗GPT 리눅스 데스크톱 앱은 오픈AI가 2026년 8월 11일 프리뷰로 공개한 리눅스용 공식 앱으로, ChatGPT와 Work, Codex를 하나의 앱에서 쓸 수 있습니다. 설치 패키지 4종과 테스트된 배포판, 요금 조건에서 확인된 것과 아직 확정되지 않은 것을 구분해 정리했습니다.
