테스트 시나리오와 콘솔 에러 확인하기
테스트는 전문가만 쓰는 코드가 아니라, 사용자가 할 행동을 순서대로 눌러보는 것에서 시작합니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
에러 메시지는 단서입니다
초보자는 에러 메시지를 보면 실패했다고 느끼지만, 개발에서는 에러가 가장 정확한 단서입니다. 브라우저 콘솔에는 어떤 파일의 몇 번째 줄에서 문제가 났는지, 어떤 값이 없었는지, 어떤 함수가 정의되지 않았는지 같은 정보가 나옵니다.
AI에게 '안 돼요'라고 말하면 추측이 돌아옵니다. 대신 기대한 동작, 실제 동작, 재현 단계, 콘솔 에러, 최근 변경사항을 같이 주면 훨씬 정확한 답을 받을 수 있습니다. 에러를 숨기지 말고 복사해서 보여주는 습관이 중요합니다.
재현 단계 만들기
디버깅에서 중요한 질문은 '언제나 같은 방식으로 실패하는가'입니다. 페이지를 열고, 어떤 버튼을 누르고, 어떤 값을 입력했을 때 문제가 생기는지 순서대로 적어보세요. 재현 단계가 있으면 AI도 원인을 좁히기 쉽고, 수정 후 고쳐졌는지도 확인할 수 있습니다.
재현 단계가 없는 버그는 고쳤다고 생각해도 다시 나타나기 쉽습니다. 그래서 수정 요청 전에는 항상 '내가 한 행동'과 '브라우저가 보여준 결과'를 분리해 적는 연습을 하세요.
원인 후보를 좁히기
AI에게 바로 고치라고 하기보다 원인 후보를 먼저 좁혀달라고 요청하면 좋습니다. 예를 들어 '이 에러의 원인을 3가지 후보로 나누고, 가장 가능성이 높은 순서대로 확인 방법을 알려줘'라고 물어보면 디버깅이 학습이 됩니다.
이 방식은 코드를 모르는 초보자에게 특히 유용합니다. 수정 코드를 받기 전에 원인과 확인 방법을 알게 되면, 다음에 비슷한 문제가 생겼을 때 혼자서도 첫 단서를 찾을 수 있습니다.
테스트는 기대와 실제를 비교하는 일입니다
공부 기록 앱을 직접 눌러보고 기대 동작, 실제 동작, 에러, 수정 요청을 순서대로 정리합니다.
- 01 직접 눌러보기
사용자가 할 행동을 순서대로 해봅니다.
행동을 따라합니다 - 02 기대 동작
원래 일어나야 하는 결과를 적습니다.
기대와 비교합니다 - 03 실제 동작/에러
실제로 일어난 일과 콘솔 에러를 그대로 봅니다.
에러와 함께 요청합니다 - 04 수정 요청
AI에게 재현 단계와 에러를 붙여 요청합니다.
핵심 정리
초보자의 첫 테스트는 수동 테스트입니다. 기대 동작, 실제 동작, 재현 단계, 콘솔 에러를 적으면 AI에게 더 정확한 수정 요청을 보낼 수 있습니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "테스트 시나리오와 콘솔 에러 확인하기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 테스트는 전문가만 쓰는 코드가 아니라, 사용자가 할 행동을 순서대로 눌러보는 것에서 시작합니다.
내 앱의 핵심 기능을 사용자가 누르는 순서대로 테스트 시나리오로 만들어줘. 실패했을 때 AI에게 보낼 디버깅 질문 예시도 함께 작성해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 원래 기대한 동작을 한 문장으로 씁니다., 실제로 일어난 동작을 그대로 씁니다., 콘솔 에러와 방금 바꾼 내용을 함께 붙입니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 원래 기대한 동작을 한 문장으로 씁니다.
- 실제로 일어난 동작을 그대로 씁니다.
- 콘솔 에러와 방금 바꾼 내용을 함께 붙입니다.
실습
핵심 기능 하나를 골라 사용자가 누르는 순서 3단계를 적고 실제로 따라 해보세요.
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 테스트 1: 빈 입력으로 저장하면 기록이 추가되지 않는다
- 공부 기록 앱 테스트 2: 공부 내용을 입력하고 저장하면 목록에 보인다
- 공부 기록 앱 테스트 3: 삭제 버튼을 누르면 해당 기록이 사라진다
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.