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