디버깅 (Debugging)
홍승협(준이아빠) / 데이터 분석, AI 실무 교육
코드에서 발생한 오류(버그)의 원인을 찾아내고 수정하는 과정입니다.
🤔 혹시 이런 경험 있나요?
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의 수정이 상황을 더 악화시켜도 언제든 되돌릴 수 있습니다.
📋 3줄 요약
-
디버깅은 코드에서 난 오류의 원인을 찾아 고치는 과정입니다.
-
에러 메시지에는 오류 종류와 문제가 난 파일, 줄 번호가 함께 적혀 있어서 맨 윗줄부터 읽으면 어디를 볼지 정해집니다.
-
브라우저 쪽 오류는 F12 개발자 도구의 Console과 Network 탭에서 보이고 서버 쪽 오류는 npm run dev를 실행한 터미널에 찍힙니다.
이 글이 도움이 되셨다면 공유해 주세요
메신저로 바로 보내거나 링크를 복사할 수 있습니다.
바이브코딩으로 만든 앱에서 에러가 발생했을 때, AI에게 가장 효과적으로 도움을 요청하는 방법은?
이어서 배우면 좋은 개념
터미널과 CLI (Terminal & CLI)
컴퓨터에게 텍스트 명령어를 입력해서 작업을 수행하는 도구입니다. AI 코딩 도구가 '이 명령어를 실행하세요'라고 할 때 사용하는 바로 그 검은 화면입니다.
프론트엔드와 백엔드 (Frontend & Backend)
프론트엔드는 사용자가 보고 상호작용하는 화면(브라우저) 부분이고, 백엔드는 데이터 처리와 비즈니스 로직을 담당하는 서버 부분입니다. 이 구분을 이해해야 바이브코딩에서 보안 사고를 방지할 수 있습니다.
생성형 엔진 최적화 (GEO) 뜻과 SEO 차이
생성형 엔진 최적화(GEO, Generative Engine Optimization)는 챗GPT와 제미나이 같은 생성형 AI가 만드는 답변 안에 내 콘텐츠가 인용되도록 만드는 작업입니다.
답변 엔진 최적화 (AEO) 뜻과 SEO 차이
답변 엔진 최적화(AEO, Answer Engine Optimization)는 검색 결과 맨 위의 답변 상자나 AI 요약에 내 콘텐츠가 답으로 뽑히도록 만드는 작업입니다. 평가 단위는 페이지가 아니라 문단입니다.
관련 인사이트
- 딥시크(DeepSeek) 정리: 무료 사용 범위와 데이터 처리, 고르는 기준딥시크(DeepSeek)는 중국 항저우의 AI 기업 딥시크가 만든 대화형 AI 서비스이자 그 회사가 공개하는 언어모델의 이름입니다. 무료로 쓸 수 있는 범위와 API 요금, 공식 개인정보처리방침에 적힌 데이터 처리 조건, 챗지피티나 클로드 대신 고를 기준을 2026년 9월 15일 자료로 정리했습니다.
- 클로드 프로젝트 지침 쓰는 법: 실제로 듣는 지침 예시 3개와 팀 공유 설정클로드 프로젝트 지침은 그 프로젝트 안에서 열리는 모든 대화에 자동으로 적용되는 작업 규칙입니다. 결과가 일정해지는 지침의 조건과 그대로 복사해 쓸 수 있는 예시 3개, 2026년 9월 15일 기준 팀 공유 권한 설정을 공식 문서 기준으로 정리했습니다.
- 미드저니 사용법: 웹에서 시작하는 순서와 프롬프트, 요금제 정리미드저니(Midjourney)는 글로 설명한 장면을 이미지로 만들어 주는 구독형 생성 서비스입니다. 디스코드 없이 웹에서 시작하는 순서와 프롬프트 작성 규칙, 네 가지 요금제와 GPU 시간 단위를 2026년 9월 기준 공식 문서로 확인해 정리했습니다.
- 마크다운 뜻과 문법 정리: md 파일 쓰는 법과 여는 법마크다운은 글자 앞에 기호를 붙여 문서의 구조를 표시하는 서식 방법입니다. 제목과 강조, 목록, 링크, 코드 블록, 표를 입력과 결과로 나란히 놓고 정리했고, md 파일을 어디서 열고 어떻게 저장하는지까지 담았습니다.
- 맥용 클로드 데스크톱 앱 설치와 사용법: 클로드 코드와 다른 점클로드 데스크톱 앱은 앤트로픽이 맥과 윈도우, 리눅스용으로 내놓은 설치형 프로그램입니다. 2026년 9월 15일 기준 맥 설치 순서와 요금제별로 열리는 기능, 브라우저판이나 터미널용 클로드 코드와 달라지는 점을 공식 문서 기준으로 정리했습니다.
- 뤼튼 사용법 정리: 도구 19종과 무료 범위, 업무에 쓸 때 확인할 점뤼튼(wrtn)은 뤼튼테크놀로지스가 운영하는 한국어 AI 서비스입니다. 2026년 9월 15일 기준 도구 19종의 구성과 로그인 전후 이용 범위, 이용약관에 적힌 무료 제공 조건을 업무 기준으로 정리했습니다.
