삼일 AI 재무아카데미 실습 교재

WEB-FE-04 · 개발자 도구로 화면 오류 찾기

화면이 예상과 다를 때 AI에게 화면 전체를 다시 만들게 하기보다 브라우저 개발자 도구에서 사실을 먼저 확인합니다. Windows의 Chrome·Edge에서는 보통 F12로 열고 Console과 Network 탭을 사용합니다.

앞에서부터 실패 지점 찾기

  1. 같은 입력과 동작으로 오류를 다시 재현합니다.
  2. Console에서 JavaScript 오류의 첫 메시지와 파일 위치를 확인합니다.
  3. Network를 비운 뒤 문제가 된 버튼을 다시 누릅니다.
  4. 요청이 생겼는지, URL·메서드·상태 코드가 무엇인지 확인합니다.
  5. 요청 본문과 응답 본문에서 필드·오류 문구를 확인합니다.
  6. 요청이 백엔드에 도착했다면 서버 로그와 데이터베이스 결과로 이동합니다.
관찰 결과먼저 볼 곳
버튼을 눌러도 요청이 없음이벤트 연결, 입력 검사, Console 오류
요청 주소가 다르거나 404프론트엔드 URL과 백엔드 경로
401 또는 403로그인 상태와 서버 권한 검사
422 등 입력 오류요청 JSON과 백엔드 입력 계약
500대 오류백엔드 로그와 외부 서비스 상태
응답은 정상인데 화면이 다름응답 필드와 화면 상태 변환

오류 전체를 공유하기 전에 회사 정보, 개인정보, 쿠키, 인증 헤더와 토큰을 제거합니다. 상태 코드와 정제한 오류 첫 줄·마지막 줄, 재현 동작을 함께 전달하면 불필요한 추측을 줄일 수 있습니다.

사용자 입력을 안전하게 표시하기

사용자가 입력한 문자열을 HTML 코드로 해석하면 악성 스크립트가 실행되는 XSS가 발생할 수 있습니다. 텍스트는 프레임워크의 기본 텍스트 출력이나 textContent처럼 HTML로 실행하지 않는 방법으로 표시합니다. HTML 입력을 꼭 허용해야 할 때만 검증된 정제 방법과 제한된 허용 목록을 사용합니다.

사용자 입력은 텍스트로 표시
messageElement.textContent = userInput

브라우저 검사는 보안 경계가 아닙니다. 화면에서 숨긴 버튼도 요청을 직접 만들어 호출할 수 있으므로 권한과 업무 규칙은 백엔드가 다시 확인합니다.

오류 화면의 접근성

  • 오류를 빨간색만으로 구분하지 않고 문구를 함께 표시합니다.
  • 입력 오류는 문제가 있는 입력과 가까운 곳에 설명합니다.
  • 로딩이나 저장 결과처럼 바뀌는 상태는 스크린 리더에도 전달합니다.
  • 키보드 포커스가 오류 위치나 다시 시도 동작에 도달할 수 있게 합니다.
  • 기술 오류 원문 대신 사용자가 할 수 있는 다음 행동을 먼저 보여 줍니다.

1-05 · 결과 검증하고 복구하기에서 화면·API·SQLite·입력 원본을 함께 대조합니다.

공식 근거