코드를 쓰다가 오류를 만나면 어떻게 해야 할까
이 장의 가이드
설명
이 장의 모든 방법은 Cursor/Trae/Claude 등 AI IDE의 실제 사용 경험을 기반으로 하며, 일상적인 개발에 바로 적용할 수 있습니다.
1. 핵심 비법: 스크린샷으로 AI에게 물어보기
왜 이 장이 중요할까요?
많은 초보자가 오류를 만났을 때 첫 번째 반응은:
- 당황해서 코드를 마구 고치기
- 30분 동안 "xxx 오류 해결 방법" 검색하기
- 스스로 오류의 의미를 이해하려고 시도하기
- 혼자 밤새 디버깅하기
이런 방식은 모두 시간 낭비입니다.
AI 시대에는 디버깅이 아주 간단해졌습니다:
오류 발견 -> 스크린샷 -> AI에게 물어보기 -> AI가 알려준 대로 하기오류를 이해할 필요도 없고, 디버깅을 할 줄 알 필요도 없으며, 문제가 어디 있는지 알 필요도 없습니다.
배워야 할 것은 어떻게 물어볼 것인가뿐입니다.
1.1 가장 간단한 질문 방식
복잡한 템플릿은 필요 없고, 두 가지 방식 중 하나를 선택하세요:
방식 1: 현상 설명
형식: 방금 무엇을 했고, 지금 무엇이 나타났는지
방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 변했어요. 어떻게 해야 하나요?방식 2: 스크린샷
현재 페이지나 오류 메시지를 바로 스크린샷
[스크린샷]
이 오류 어떻게 해결하나요?가장 좋은 방식: 설명 + 스크린샷
방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 변했어요.
[스크린샷]
어떻게 해야 하나요?기억하세요: 맥락을 명확하게 설명하고 스크린샷을 추가하면, AI가 더 빠르게 문제를 해결할 수 있습니다.
1.2 문제를 명확하게 설명하는 법
많은 초보자가 질문을 해야 한다는 것은 알지만, 어떻게 말해야 할지 모릅니다. 사실 세 가지만 명확하게 말하면 됩니다:
1. 방금 무엇을 했는지
방금 저장 버튼을 클릭했어요
방금 로그인 페이지 코드를 수정했어요
방금 페이지를 새로고침했어요2. 지금 무엇이 보이는지
지금 페이지가 비어 있어요
지금 버튼을 눌러도 반응이 없어요
지금 오류 메시지가 표시돼요3. 어떤 효과를 원하는지
데이터가 성공적으로 저장되길 원해요
페이지가 정상적으로 표시되길 원해요
버튼을 클릭하면 알림이 뜨게 하고 싶어요완전한 예시:
방금 저장 버튼을 클릭했는데, 페이지에 "저장 실패"라는 오류가 표시돼요.
[스크린샷]
양식 데이터를 데이터베이스에 성공적으로 저장하고 싶은데, 어떻게 해야 하나요?핵심 원칙:
- 전문 용어 없이 일상적인 말로 설명하기
- 시간 순서대로 말하기: 먼저 무엇을 했고, 그 다음 무슨 일이 일어났는지
- 기대하는 바를 말하여 AI가 원하는 것을 알 수 있게 하기
2. 첫 번째 단계: 현상을 바로 설명하고 질문하기
문제를 만났을 때, F12를 서둘러 열지 마세요. 먼저 현상을 설명하고, 현재 페이지를 스크린샷하여 AI에게 보여주세요.
많은 경우 AI가 스크린샷만 보고도 바로 해결책을 줄 수 있습니다.
2.1 일반적인 현상 설명 방법
그냥 설명하면 됩니다
페이지가 하얗게 변함
페이지를 열었는데 비어 있어요. 어떻게 해야 하나요?
[스크린샷]버튼 클릭해도 반응 없음
이 버튼을 클릭해도 반응이 없어요. 확인해 주세요.
[스크린샷]데이터가 저장되지 않음
저장을 눌렀는데 데이터가 저장되지 않았어요. 어떻게 해야 하나요?
[스크린샷]스타일이 올바르지 않음
이 버튼의 위치가 어긋났어요. 어떻게 조정하나요?
[스크린샷]API 오류
API를 호출했는데 오류가 발생했어요. 확인해 주세요.
[스크린샷]2.2 AI가 바로 해결한 경우
축하합니다, 문제가 해결되었습니다! AI가 알려준 대로 수정하면 됩니다.
2.3 AI가 "추가 정보가 필요하다"고 한 경우
이때 비로소 F12를 열어 핵심 정보를 보충해야 합니다. 아래를 참고하세요.
3. 두 번째 단계: 핵심 정보 보충
AI가 추가 정보가 필요하다고 하면, 문제 유형에 따라 F12를 열어 해당 내용을 스크린샷합니다.
3.1 언제 추가 정보가 필요한가
AI가 이렇게 답변할 수 있습니다:
- "Console을 열어 오류가 있는지 확인해 주세요"
- "Network 패널을 스크린샷해서 보여 주세요"
- "구체적인 오류 메시지를 봐야 합니다"
이때 아래 안내에 따라 스크린샷을 보충합니다.
3.2 Console 정보 보충 (페이지가 하얗게 변함/오류 발생)
조작 단계
첫 번째: F12를 눌러 개발자 도구 열기
Mac은 Cmd+Option+I, 또는 페이지를 우클릭하고 "검사"를 선택하세요.
두 번째: Console 탭으로 전환
세 번째: 빨간색 오류 메시지 스크린샷
네 번째: AI에게 보내기
Console 오류는 다음과 같습니다:
[스크린샷]3.3 Network 정보 보충 (데이터 문제/API 오류)
조작 단계
첫 번째: F12를 눌러 개발자 도구 열기
두 번째: Network 탭으로 전환
세 번째: 다시 한번 조작하기 (저장 클릭/페이지 새로고침)
네 번째: 해당 요청을 찾아 스크린샷
- URL과 상태 코드 확인
- Payload(전달한 매개변수) 확인
- Response(반환 결과) 확인
다섯 번째: AI에게 보내기
Network 정보는 다음과 같습니다:
요청: [스크린샷1]
매개변수: [스크린샷2]
반환: [스크린샷3]3.4 Elements 정보 보충 (스타일 문제)
조작 단계
첫 번째: 요소를 우클릭 -> "검사"
개발자 도구가 자동으로 해당 요소로 이동합니다.
두 번째: Styles 패널 스크린샷
세 번째: AI에게 보내기
요소 스타일은 다음과 같습니다:
[스크린샷]4. 세 번째 단계: 해결될 때까지 반복
4.1 비효율적인 방법
이런 방법은 시간을 낭비합니다:
오류를 보고 당황해서 코드를 마구 고치기 30분 동안 오류 해결 방법 검색하기 모든 오류의 의미를 스스로 이해하려고 시도하기 혼자 밤새 디버깅하기
4.2 효율적인 방법
이 흐름에 따라 진행하세요:
먼저 현상을 설명하고 스크린샷으로 질문하기 AI가 추가 정보가 필요하다고 하면, F12를 열어 보충하기 제안에 따라 코드 수정하기 수정 후 테스트하고, 문제가 남아 있으면 계속 스크린샷으로 질문하기
5. 요약: 전체 흐름
문제 발생
↓
현상 설명 + 스크린샷
↓
AI에게 보내기: "어떻게 해야 하나요?"
↓
AI가 바로 해결?
↓ 예
AI가 알려준 대로 하기
↓
해결되었는지 테스트
↓
↓ 아니오 / AI가 추가 정보 필요
F12를 열어 핵심 정보 보충
↓
다시 AI에게 보내기
↓
해결될 때까지 반복