바이브코딩 오류 해결, 안 되는 버튼부터 고쳐보는 순서

바이브코딩 오류 해결은 어떤 행동을 했고, 무엇을 기대했는데, 실제로 무엇이 일어났는지를 좁히는 데서 시작합니다. 여기에 오류 문구를 붙이면 AI도 확인할 지점을 찾기 쉬워집니다. “안 돼. 다시 만들어줘”를 반복하기 전에, 고장 난 버튼 하나로 이 순서를 연습해 보세요.

이 글은 AI로 만든 웹페이지가 열리지만 기능이 움직이지 않는 상황을 다룹니다. 설치 명령부터 실행되지 않는다면 Claude Code 설치 오류 안내에서 증상에 맞는 항목을 먼저 확인하세요.

같은 행동을 해도 안 되는지 확인하세요

아래는 이 글을 위해 오류를 넣은 체크리스트입니다. 실제 사용자 사고 사례가 아니라, 버튼 이름을 잘못 연결했을 때 생기는 문제를 재현한 학습용 예제입니다. 설치와 가입 없이 브라우저에서 열립니다.

직접 눌러 보고 비교해 보세요

오류가 있는 체크리스트 열기수정한 체크리스트 열기

오류본·수정본·실습 안내 내려받기

1. 오류가 있는 체크리스트를 엽니다.
2. 입력칸에 물 마시기를 씁니다.
3. 추가를 누릅니다. 항목이 생기지 않는지 확인합니다.

기대한 결과는 “물 마시기가 목록에 추가된다”입니다. 실제 결과는 “버튼을 눌러도 목록이 비어 있다”입니다. 이 두 문장이 있어야 화면이 안 열리는 문제와 버튼만 안 되는 문제를 구분할 수 있습니다.

직접 실행한 오류본입니다. 예제는 브라우저에서 발생한 오류를 화면에도 표시하도록 만들었습니다.

자신의 앱에서 문제가 생겼다면 먼저 마지막으로 잘 되던 파일을 별도 복사해 두세요. 저장된 작업 이력이 있다면 그 시점을 기록합니다. 아직 원인을 모르는 상태에서 폴더를 지우거나 프로젝트 전체를 다시 만들 필요는 없습니다.

오류 문구는 어디에서 찾나요?

웹페이지 안의 버튼 문제는 브라우저의 Console부터 확인하세요. Console은 페이지가 남긴 메시지와 오류를 보는 창입니다. 터미널은 컴퓨터에 명령을 입력하고 실행 결과를 보는 별도 프로그램입니다.

막힌 위치	먼저 볼 화면	함께 기록할 내용
앱 실행 명령이 실패함	명령을 입력한 터미널	실행한 명령과 실패한 오류 블록
페이지는 열리는데 버튼이 안 됨	브라우저 Console	누른 버튼, 오류 문구, 관련 파일·줄 번호
인터넷에 올리는 과정이 실패함	배포 서비스의 빌드 로그	실패한 단계와 그 단계의 오류 블록

Chrome에서 예제 페이지를 연 상태로 Windows는 Ctrl + Shift + J, Mac은 ⌘ + Option + J를 누릅니다. Console을 연 뒤 새로고침하고 같은 행동을 다시 해보세요. 단축키는 Chrome 공식 Console 안내를 기준으로 했습니다.

예제에서는 다음 오류가 발생합니다.

TypeError: Cannot read properties of null (reading 'addEventListener')

첫 오류 문구를 복사하고, 펼쳤을 때 보이는 관련 파일 이름과 줄 번호도 붙입니다. 이 파일·줄 정보는 오류가 발생하기까지의 호출 경로인 스택 트레이스에 표시됩니다. 첫 오류만으로 원인이 확인되지 않으면 앞뒤 관련 메시지를 추가하세요. 시작부터 실행 기록 전체를 보내면 다른 오류와 섞여 읽기 어렵습니다.

화면 배치나 잘못된 결과는 캡처가 도움이 됩니다. 캡처에는 문제가 생긴 부분을 담고, 선택 가능한 오류 문구는 텍스트로도 넣어 주세요. 개발자 도구를 열었다고 해서 Console 입력칸에 출처를 모르는 코드를 붙여 넣을 필요는 없습니다.

오류와 수정 범위를 함께 AI에게 주세요

증상·재현 순서·오류·유지할 기능을 한 번에 전달하세요. 아래 요청은 위 예제를 고치는 데 쓰는 문장입니다. 자신의 앱에서는 실제로 확인한 부분만 바꿉니다.

브라우저에서 실행하는 HTML 체크리스트의 추가 버튼이 동작하지 않아.

기대한 동작: 할 일을 입력하고 추가를 누르면 목록에 나타나야 해.
실제 동작: 버튼을 눌러도 목록이 비어 있어.
재현 순서: 페이지 열기 → 물 마시기 입력 → 추가 클릭.
오류: TypeError: Cannot read properties of null (reading 'addEventListener')

첨부한 broken.html에서 오류가 나는 줄과 HTML 버튼을 함께 확인해줘.
원인을 확인할 수 없으면 추측해서 고치기 전에 필요한 정보를 물어봐.
원본은 보관하고, 수정본을 다른 파일로 저장해줘.
완료 체크와 삭제 기능은 유지하고 필요한 부분만 수정해줘.
바꾼 이유와 확인할 동작을 설명하고, 실행하지 못한 검사는 구분해줘.

문장을 채우기 어렵다면 내 오류 질문 정리하기를 이용하세요. 기대한 동작과 실제 결과를 입력하면 요청문으로 모아 줍니다. 이 도구는 입력을 서버로 전송하거나 저장하지 않습니다. 복사한 문장을 AI 서비스에 보내는 것은 별도 행동입니다.

이 예제의 원인은 이름 한 글자입니다

HTML에 적힌 버튼 이름은 add-task인데, 오류본의 JavaScript는 add-taks를 찾습니다.

// 오류본: 페이지에 없는 이름을 찾음
const addButton = document.querySelector('#add-taks');

// 수정본: HTML 버튼의 id와 맞춤
const addButton = document.querySelector('#add-task');

querySelector()는 해당 요소를 찾지 못하면 null을 반환합니다. 그래서 찾지 못한 버튼에 addEventListener로 클릭 동작을 연결하려다 멈췄습니다. 동작과 반환값은 MDN querySelector 문서에서 확인할 수 있습니다.

이 예제의 기능 수정은 두 이름을 맞추는 것입니다. 같은 오류 문구가 나온다고 모든 앱의 원인이 오타인 것은 아닙니다. 버튼이 생성되기 전에 찾았거나 화면 조건에 따라 버튼이 없을 수도 있습니다. AI에게 실제 HTML과 오류가 난 줄을 함께 확인하도록 요청하는 이유입니다.

고친 뒤에는 기존 기능도 다시 눌러보세요

수정한 체크리스트에서는 할 일을 추가한 뒤 완료 표시와 삭제까지 확인합니다. “수정 완료”라는 AI의 답변만으로 작업을 끝내지 마세요.

수정본에서 두 항목을 추가하고 첫 항목을 완료한 화면입니다.

확인할 행동	이 실습의 예상 결과
물 마시기 입력 후 추가 클릭	목록에 한 항목이 생김
입력칸을 비우거나 공백만 넣고 추가	빈 항목이 생기지 않음
새 항목을 입력하고 추가	이전 항목을 유지하며 새 항목이 생김
완료 체크 후 다른 항목 삭제	선택한 항목만 바뀌고 나머지는 유지됨
페이지 새로고침	이 오류 실습은 저장 기능이 없어 목록이 사라짐

저장이 필요한 앱이라면 마지막 기대 결과가 달라집니다. 브라우저 저장소를 쓰는 첫 체크리스트 만들기에서는 새로고침 후에도 목록이 남는지 확인합니다. 오류를 고칠 때도 처음 정한 요구사항을 기준으로 판단하세요.

같은 문제가 남으면 변경한 파일, 새 오류 문구, 아직 실패하는 행동을 다시 모읍니다. 한 번에 디자인·저장·로그인까지 바꾸면 어느 변경에서 문제가 생겼는지 찾기 어려워집니다. 우선 한 가지 증상이 사라지는지 확인한 뒤 다음 수정으로 넘어가세요.

오류를 보내기 전에 무엇을 가려야 하나요?

오류 문구와 캡처에서 API 키, 비밀번호, 인증 토큰, 실제 고객 정보, 비공개 문서 내용부터 확인하세요. 파일 경로에 본인 이름이나 비공개 프로젝트 이름이 있다면 필요한 파일명과 줄 번호를 남기고 민감한 부분을 가립니다.

예를 들어 실제 사용자 경로는 /Users/[사용자]/project/broken.html:42처럼 바꿀 수 있습니다. 오류 문구 자체와 관련 함수 이름까지 전부 가리면 원인을 찾기 어려우니, 정보의 역할을 구분해 주세요.

AI의 자동 점검은 보조 수단입니다. “비밀 값이 없다”는 답만 믿고 .env 파일 전체나 계정 설정 화면을 보내지 마세요. 이미 공개한 비밀키는 화면에서 지우는 것으로 끝나지 않습니다. GitHub의 민감 정보 제거 안내는 노출된 자격증명을 먼저 폐기하거나 교체하도록 안내합니다.

버튼 하나를 고쳤다면 다음 앱에서도 재현 → 오류 확인 → 작은 수정 → 다시 실행 순서로 진행해 보세요. 설치부터 배포까지 이어서 연습할 순서는 바이브코딩 시작하기에 모았습니다.

고친 버튼을 첫 앱의 저장·배포까지 이어가기

위의 작은 오류 예제를 이해했다면, 첫 앱 실습의 네 단계 묶음으로 옮겨가세요. 같은 체크리스트의 만들기→오류→수정→저장 파일과 실제 수정 차이가 함께 들어 있습니다.

이 묶음의 오류는 폼 이름 taskForm을 taskFrom으로 잘못 연결한 것입니다. 앞에서 본 add-taks 예제와 이름은 다르지만, 없는 요소에 이벤트를 연결하다 실패하는 원리를 연습합니다.

첫 앱의 오류 버전 열기수정·저장·배포 파일 함께 받기

검증 기준

• 마지막 업데이트일: 2026-09-07
• 확인 환경: macOS의 Orca 내장 Chromium 브라우저. 이 글의 오류본·수정본과 질문 정리 도구를 직접 실행했습니다. 화면 캡처는 재현용 예제이며 AI가 생성한 오류 화면이 아닙니다. Chrome 단축키는 공식 문서로 확인했고 Windows에서 별도 실행한 검사는 아닙니다. 특정 AI 서비스의 수정 성공률이나 실제 초보자 사용성은 측정하지 않았습니다.
• 주요 근거: Chrome Console 공식 안내 · MDN querySelector · GitHub 민감 정보 제거 안내