강의 목차펼치기

15강: 디버깅

V5작성2026-04-13읽는 시간7분

에러를 건네고, 고치고, 안전하게 되돌려요

디버깅 — 에러 해결 3단계 흐름도

오늘 끝나면 이런 걸 갖게 돼요. 에러가 나도 원인을 확인하고 고치거나, 잘 되던 상태로 돌아가는 순서가 생겨요.

14강에서는 로그인과 사용자별 데이터 분리를 만들었어요. 이번에는 그 기능을 바꾸다가 문제가 생겼다고 생각하고 해결해 봅니다.

1. 오류 화면부터 클로드에게 보여 주세요

화면이 멈추거나 버튼이 작동하지 않으면, 무엇을 했을 때 문제가 생겼는지 적어 두세요. 같은 동작을 다시 하지 말고 보이는 오류부터 복사합니다.

브라우저 개발자 도구 콘솔 — 빨간 글씨로 에러가 표시된 모습

브라우저 화면에 오류가 보이지 않으면 개발자 도구의 콘솔(Console, 브라우저의 작동 기록을 보는 곳)을 열어요. 윈도우는 F12, 맥은 Cmd + Option + J를 누르면 됩니다.

콘솔의 빨간 글씨를 드래그해서 복사하세요. 여러 줄이라 범위를 모르겠다면 콘솔에서 마우스 오른쪽 버튼을 누르고 Copy console을 선택해도 돼요.

브라우저 콘솔에서 에러를 우클릭하여 복사하는 모습

이제 클로드에게 아래처럼 말하세요. 대괄호 안의 내용만 내 상황으로 바꾸고, 복사한 오류는 맨 아래에 붙이면 됩니다.

[문제가 생긴 페이지]에서 [누른 버튼이나 한 동작]을 했어.
그 뒤 [화면에서 보인 변화]가 생겼고, 아래 오류가 나왔어.

[복사한 오류 메시지 붙이기]

아직 파일을 고치지 마.
먼저 원인, 확인할 파일, 가장 작은 수정 방법을 쉬운 말로 설명해 줘.
내가 확인하면 그때 수정해 줘.

페이지를 열고 같은 동작을 다시 해보는 일, 오류를 복사하는 일만 직접 하시면 돼요. 원인 찾기와 파일 수정은 클로드가 해요.

2. 설명을 확인한 뒤 고쳐요

클로드가 원인과 바꿀 파일을 보여 주면 요청한 기능과 관련 있는지 확인하세요. 로그인 오류인데 디자인 파일을 여러 개 바꾸겠다고 한다면, 범위를 줄여 달라고 말하면 됩니다.

방금 설명한 원인과 관련된 부분만 고쳐 줘.
다른 기능과 디자인은 바꾸지 마.

수정한 뒤 같은 상황을 다시 확인해 줘.
무엇을 바꿨는지와 오류가 사라졌는지를 짧게 정리해 줘.
내가 브라우저에서 직접 확인할 순서도 한 단계씩 알려 줘.

브라우저에서 같은 동작을 다시 해보세요. 화면이 정상이고 콘솔에 같은 빨간 오류가 나타나지 않으면 해결됐어요.

새 오류가 생기면 첫 프롬프트에 새 메시지를 붙여 다시 진단받으세요. 앞서 무엇을 바꿨는지도 함께 알려 주면 원인을 좁히기 쉬워요.

3. 세 번 고쳐도 풀리지 않으면 돌아가요

이 강에서는 같은 문제를 세 번 고쳐도 풀리지 않으면 멈추고 돌아가요. 수정이 계속 겹치기 전에 잘 되던 상태에서 다른 방법을 찾습니다.

안전장치는 두 단계예요. 먼저 클로드 코드의 체크포인트(지시 직전 상태를 잠시 저장한 지점)를 쓰고, 해결되지 않으면 Git(깃, 파일의 변경 기록을 저장하는 도구)으로 돌아가요.

첫 번째: 체크포인트로 방금 수정을 되돌려요

클로드 코드 대화창의 입력칸을 비운 뒤 Esc를 두 번 누르세요. 되돌릴 지시를 고르고, 코드와 대화를 함께 복원하는 항목을 선택하면 됩니다.

체크포인트는 클로드가 직접 고친 파일을 되돌릴 때 알맞아요. 내가 따로 고친 파일이나 다른 창에서 바꾼 내용까지 모두 복원하는 기능은 아니에요.

두 번째: 저장한 Git 기록으로 돌아가요

체크포인트로 해결되지 않으면 클로드에게 아래처럼 말하세요. 먼저 무엇이 사라지는지 확인해야 해요.

잘 되던 때로 되돌려 줘.
지우기 전에 무엇이 사라지는지 먼저 보여 줘.

최근 저장 기록 가운데 정상 작동하던 후보를 찾아서 알려 줘.
현재 변경 파일과 새로 생긴 파일을 나눠 보여 주고,
되돌리면 없어질 작업을 쉬운 말로 설명해 줘.

아직 되돌리지 말고 내 승인을 기다려 줘.
내가 승인하면 선택한 저장 시점으로 복구하고, 화면이 다시 작동하는지 확인해 줘.

목록에 남겨야 할 파일이 보이면 복구를 승인하지 마세요. 그 파일을 보관하는 방법부터 물어본 뒤 진행하세요.

오류는 세 종류로 나눠 보면 쉬워요

디버깅(Debugging, 프로그램의 오류를 찾아 고치는 과정)은 요리 중 문제를 찾는 일과 비슷해요. 어느 때 멈췄는지만 알아도 오류를 건넬 곳을 찾을 수 있어요.

시작하기 전에 멈췄어요

빌드 오류(build error)는 재료가 빠져 요리를 시작하지 못한 상태와 비슷해요. 프로그램이 켜지지 않고 작업 창에 빨간 글씨가 나타납니다.

터미널에서 빌드 에러가 나타난 모습

이때는 빨간 글씨 전체를 복사해 첫 프롬프트에 붙이세요. 어느 파일을 바꾸다가 생겼는지도 함께 적으면 됩니다.

켜졌지만 동작하다가 멈췄어요

실행 중 오류(runtime error)는 완성한 요리를 먹다가 재료가 잘못된 것을 발견한 상태와 비슷해요. 버튼이 작동하지 않거나 화면이 하얗게 변할 수 있어요.

Next.js 화면에 검은 오류 창이 뜨면 그 내용을 복사하세요. 오류 창이 없다면 앞에서 본 브라우저 콘솔을 확인합니다.

작동하지만 주의가 보여요

경고(warning)는 당장 멈추지는 않지만 살펴볼 문제가 있다는 뜻이에요. 먼저 하던 기능이 작동하는지 확인하고, 경고도 같은 방식으로 클로드에게 설명과 수정 범위를 물어보세요.

해결한 상태를 저장해요

화면과 콘솔을 확인했다면 다음 작업 전에 저장 지점을 남겨요. 클로드에게 한 번에 부탁하면 됩니다.

방금 고친 기능을 다시 확인해 줘.
같은 오류가 사라졌고 다른 기능에 문제가 없는지 점검해 줘.
비밀번호나 인증 정보가 저장 대상에 들어가지 않았는지도 확인해 줘.

문제가 없으면 지금 상태 저장하고 깃허브에 올려 줘.
실행 전에 무엇을 할지 먼저 보여 줘.
로그인이나 권한 승인이 필요하면 그 화면에서 멈춰서 알려 줘.

브라우저 로그인과 권한 승인만 직접 하세요. 이것만 직접 하시면 나머지는 클로드가 해요.

이번 강에서 기억할 것

문제가 생긴 페이지, 직전에 한 동작, 화면 변화, 오류 메시지를 함께 건네요.
파일을 고치기 전에 원인과 수정 범위를 먼저 확인해요.
같은 문제를 세 번 고쳐도 풀리지 않으면 체크포인트나 Git 기록으로 돌아가요.
복구 전에는 사라질 내용을 먼저 보고 승인해요.

이런 분께 추천해요

오류 화면을 보면 어디서 시작할지 막막한 분께 필요해요. 클로드의 수정이 겹쳐 잘 되던 기능까지 망가질까 걱정되는 분도 안전한 복구 순서를 익힐 수 있어요.

참고 링크

다음 강

16강: 배포 — 세상에 공개하기에서는 지금까지 만든 서비스를 Vercel에 올리고 인터넷 주소로 확인해요.

16강으로 넘어가기

▸개정 이력5건

v52026-10-01초보 이탈 개선 — 명령어를 프롬프트로, 분량 축소, 첫 화면 재구성
v42026-07-191~20강 공통으로 반복되던 `!` 셸 모드 안내 문구를 하나로 통일 — 실행 결과에 클로드가 한마디 덧붙인다는 현행 동작과, 터미널에서 연 클로드 코드에서만 되고 VS Code 확장 채팅 창에서는 안 된다는 조건을 추가
v32026-07-19실습 폴더명을 시리즈와 통일 — cd my-vibecoding-project(존재하지 않는 폴더)를 11~14강에서 쓰는 cd ~/my-service로 교체
v22026-07-19되돌리기 절차를 2단(클로드 코드 체크포인트 → 깃)으로 재구성하고 Esc 두 번·/rewind 실습 추가. 크롬 콘솔 우클릭 메뉴 항목을 실제 메뉴(Copy console)로 정정, 개발자 도구 단축키에 맥 Cmd+Option+J 반영, Next.js 개발 서버 에러 오버레이 안내와 개발 서버는 별도 창에서 켜라는 주의 보강, 파일 경로를 11강 v2 기준(src/ 미사용)으로 통일
v12026-04-13초판

이 글은 오토프로그(AutoFrog) 랩스에서 씁니다 — (주)디온웍스가 운영하는 AI 업무 자동화·바이브 코딩 교육 브랜드 · autofrog.kr