엑박 탐색기는 페이지 내 모든 <img> 태그와 CSS background-image를 스캔하여 로드 실패(404, CORS 오류 등)를 감지하고 목록으로 보여줍니다. 전체/손상됨/CSS 배경별로 필터링하고, 각 이미지의 위치를 찾아 하이라이트하며, 버그 리포트 작성을 위해 손상된 URL 목록을 복사할 수 있습니다.
손상된 이미지는 웹페이지에서 가장 눈에 띄는 버그 중 하나입니다. 하지만 무음으로 실패하기 때문에 QA 과정에서 놓치기 쉽습니다. 엑박 탐색기는 이를 모두 찾아냅니다. 도구를 활성화하면 DOM을 탐색하며 모든 <img> 요소(naturalWidth/naturalHeight를 체크하여 로드 실패 감지)와 모든 CSS background-image URL(새로운 Image() 객체로 로드 여부 검증)을 조사합니다. 결과는 '정상 / 손상됨 / 로딩 중'으로 분류되며 상단에 통계 수치와 함께 필터링 가능한 리스트로 표시됩니다. 각 항목에는 URL, 유형(이미지 태그 또는 CSS 배경), 크기(로드된 경우), alt 텍스트(있는 경우)가 표시됩니다. 손상된 이미지는 빨간색으로 표시되며 '위치 찾기' 버튼을 통해 해당 요소를 화면 중앙으로 스크롤하고 빨간색 테두리로 강조 표시합니다. '손상된 URL 복사' 버튼으로 리포트 작성을 위한 URL 목록을 한꺼번에 가져올 수 있습니다. 백엔드 로그 없이도 시각적인 QA를 빠르게 수행할 수 있는 도구입니다.
모든 <img> 요소와 계산된 스타일(Computed styles) 내의 모든 background-image URL을 검사합니다. Data URI 및 blob URL은 항상 유효하므로 건너뜁니다.
페이지 내 이미지 상태를 한눈에 보여주는 통계입니다. 비동기 조사가 완료됨에 따라 수치가 실시간으로 업데이트됩니다.
손상됨, 전체, CSS 배경 탭 사이를 전환하며 수정이 필요한 항목에만 집중할 수 있습니다.
이미지 항목의 '위치 찾기'를 클릭하면 페이지 내 해당 요소로 스크롤하고 2초간 빨간색 테두리로 강조합니다.
클릭 한 번으로 손상된 모든 이미지 URL 리스트를 복사하세요. 버그 리포트에 붙여넣거나 백엔드 팀에 공유하기에 유용합니다.
콘텐츠가 많은 페이지에서도 UI 응답성을 유지하기 위해 CSS 배경 스캔은 최대 500개까지만 수행합니다.
배포 전 스테이징 환경에서 실행하여 리팩토링, 파일명 변경, CDN 마이그레이션 등으로 발생한 404 오류를 잡아내세요.
정기적으로 운영 사이트를 스캔하세요. 손상된 이미지는 SEO와 사용자 신뢰도에 악영향을 주며, 종종 자동화 테스트를 통과해버리기도 합니다.
에디터가 이미지를 업로드할 때 최종 URL에 반영되지 않는 경우가 있습니다. 스캔을 통해 죽은 링크를 찾아내세요.
아바타나 외부 링크 상품 사진 등 외부 이미지 서비스를 이용하는 경우, 주기적으로 스캔하여 서비스 중단을 감지하세요.
에셋을 새로운 CDN이나 버킷으로 옮긴 후, 주요 페이지를 스캔하여 마이그레이션 중 깨진 부분은 없는지 검증하세요.
DevSuite Pro 독에서 엑박(Broken Images) 아이콘을 클릭합니다. 패널이 열리며 즉시 페이지 스캔을 시작합니다.
상단 통계에서 '손상됨' 수치가 0보다 큰 경우, '손상됨' 탭으로 전환하여 상세 내역을 확인하세요.
항목 옆의 '위치 찾기'를 클릭하면 해당 요소가 화면에 나타나고 빨간색 강조 표시가 2초간 깜빡입니다.
'손상된 URL 복사'를 클릭하여 전체 목록을 가져오세요. 티켓 시스템, 채팅방 등에 바로 붙여넣을 수 있습니다.
백엔드 수정 작업이 완료된 후 '페이지 재스캔'을 클릭하여 모든 이미지가 정상적으로 로드되는지 확인하세요.
