사이트 이미지 일괄 다운로드가 필요할 때 작은 썸네일만 내려받거나 빈 파일이 생기는 이유는 다양합니다. 먼저 핵심을 짚으면: 페이지가 렌더링할 때 실제로 어떤 이미지 파일을 불러오는지 확인해야 합니다. 이 가이드는 증상별 원인 진단과 실무에서 쓰는 최소한의 해결 절차를 단계별로 설명합니다. 이 과정에서는 Image Downloader Pro를 사용합니다.
현실적인 상황 예
예를 들어 상품 카테고리 페이지에서 120개의 SKU 이미지를 한 번에 받으려 했는데 150x150 픽셀짜리 썸네일 120개가 내려오거나, 50개만 중복으로 나오거나, 레이지로드 자리표시자 때문에 누락이 발생할 수 있습니다. 수작업으로 다시 받는 것은 현실적이지 않으므로 문제가 발생한 원인을 빠르게 좁혀야 합니다.
자주 발생하는 원인과 동작 방식
- srcset 또는 picture 사용 - img 태그의 src는 작은 썸네일을 가리키지만 srcset이나 picture 소스에 더 큰 후보 URL이 있습니다. 단순히 img src만 수집하면 작은 파일을 가져옵니다. MDN의 반응형 이미지 설명을 참고하세요. MDN - Responsive images
- 레이지로드와 data-src 패턴 - 실제 URL을 data-src, data-srcset, data-bg 같은 속성에 보관하고 요소가 보일 때 스크립트가 교체합니다. 정적 HTML만 스캔하면 교체된 URL을 볼 수 없습니다. 브라우저 개발자도구의 네트워크 패널에서 어떤 파일이 실제로 내려왔는지 확인할 수 있습니다. MDN - Lazy loading
- 상세 페이지에서만 고해상도 로드 - 목록 페이지는 썸네일만 보여주고 상세 페이지 진입 시 마스터 파일을 요청합니다. 이 경우 각 상세 페이지를 열어 스캔해야 합니다.
- CSS background-image로 제공되는 자산 - 일부 이미지는 img 태그가 아니라 CSS 백그라운드로 제공되므로 계산된 스타일이나 네트워크 요청을 검사해야 합니다.
- 무한 스크롤 또는 페이지네이션 - 처음 로드된 DOM만 스캔하면 보이지 않는 항목은 누락됩니다. 스크롤을 시뮬레이션하거나 모든 페이지를 로드해야 합니다.
- 크기별 중복 파일 - 동일 파일의 여러 사이즈가 존재하면 파일명이나 경로에 크기 토큰이 포함되어 거의 동일한 파일이 중복으로 내려옵니다.
빠른 체크리스트 - 최소한의 해결책 결정
아래 순서대로 점검하면 대부분의 문제는 빠르게 진단됩니다.
- Developer Tools의 네트워크 탭(Network)을 열고 페이지를 새로고침합니다. 클릭이나 스크롤로 고해상도 요청이 발생하는지 확인하세요. Chrome DevTools - Network
- 요소 패널(Elements)에서 img 요소를 검사해 srcset, sizes, data-src가 있는지 확인합니다.
- 레이지로드가 의심되면 페이지를 스크롤하거나 확장의 "대기 후 스캔" 옵션을 사용해 요소가 교체되도록 합니다.
- 썸네일이 상세 페이지로 링크된다면 링크 목록을 추출해 각 상세 페이지를 대량 스캔합니다.
- 이미지가 CSS background-image라면 계산된 스타일이나 네트워크 로그를 통해 URL을 확보합니다.
정확한 해결법과 어느 경우에 쓰는지
- 문제: 다운로더가 img src만 가져와서 썸네일만 수집할 때
- 해결: srcset 후보 중 가장 큰 URL을 선택하거나 확장의 "가장 큰 후보 선택" 옵션을 사용합니다. 수동 추출 시 srcset에서 가장 긴 후보를 복사해 테스트하세요.
- 문제: 빈 칸이나 플레이스홀더가 보일 때
- 해결: 페이지의 레이지 로더를 트리거한 뒤 재스캔 합니다. 스크롤 시뮬레이션 또는 확장의 "Mass Scan" 기능으로 스크립트가 완료되도록 기다립니다.
- 문제: 상세 페이지에서만 원본 파일을 제공할 때
- 해결: 목록에서 링크를 추출해 각 상세 페이지를 열어 스캔하는 두 단계 방식을 사용합니다. 느리지만 필요한 경우가 많습니다.
- 문제: 이미지가 CSS background-image로 설정되어 있을 때
- 해결: 계산된 스타일이나 네트워크 캡처 모드를 사용해 백그라운드 요청을 기록하는 도구를 사용합니다.
- 문제: 여러 사이즈의 중복 파일이 많을 때
- 해결: 픽셀 면적 또는 긴 쪽 길이로 필터링하거나 파일명 템플릿에 크기를 포함해 대표 파일만 남깁니다. 중복 제거 기능이 있는 도구를 사용하면 편합니다.
실전 적용 순서 예시
간단한 두 가지 예로 구체적인 절차를 제시합니다.
예시 A - 목록 페이지가 레이지로드, 상세 페이지에서 마스터 로드
- 카테고리 페이지를 열고 DevTools의 네트워크 탭에서 이미지 필터(Images)를 켭니다.
- 상품 하나를 클릭해 상세 보기를 연 다음 네트워크에 어떤 이미지 URL이 요청되는지 확인합니다.
- 마스터가 상세에서만 로드되면 목록에서 링크를 추출해 Mass Scan으로 각 상세 페이지를 열고 500ms 정도 대기합니다.
- 다운로더 설정에서 srcset의 가장 큰 후보 또는 네트워크 캡처 모드를 선택합니다.
예시 B - 무한 스크롤 갤러리와 CSS 기반 이미지
- 페이지를 끝까지 스크롤해 모든 항목을 로드합니다. 필요 시 더 보기(Load more) 버튼을 모두 누르세요.
- 요소 패널의 계산된 스타일에서 background-image URL을 확인해 새 탭에서 테스트합니다.
- 렌더링 캡처 모드나 네트워크 캡처로 CSS 백그라운드 요청까지 기록하도록 합니다.
전문가 팁: srcset과 picture 요소는 브라우저가 어떤 후보를 요청할지 결정합니다. 프로그래밍적으로 img src만 가져오면 보통 가장 작은 후보를 얻게 됩니다. srcset을 읽거나 네트워크 요청을 관찰해 실제 마스터 URL을 확인하세요. MDN 참고 자료
실제 한계와 윤리적 고려
일부 사이트는 서명된 URL, 세션별 접근 제어, 인증 API 등을 통해 원본 접근을 제한합니다. 이러한 경우 합법적인 API 접근 권한이나 소유자의 허가가 필요합니다. 확장 프로그램이나 도구가 모든 보호된 자산을 보장할 수는 없습니다.
간단 체크리스트(티켓에 붙여넣기용)
- 1) 페이지 열기, 네트워크 탭 - 이미지 필터.
- 2) 클릭 또는 스크롤로 고해상도 이미지 로드 트리거.
- 3) 네트워크에서 가장 큰 이미지 요청이나 srcset 후보 확인.
- 4) srcset을 읽거나 네트워크 캡처 모드로 재스캔.
- 5) 픽셀 면적 기준 중복 정리 적용.
Image Downloader Pro는 레이지로드 지원, 크기 필터, 탭 및 링크 대량 스캔, 중복 정리 기능을 제공하여 위의 의사결정 순서를 따르도록 설계되어 있습니다. 지금 확장 기능을 사용해 보세요: Image Downloader Pro 한국어 페이지. 개발자 문서를 확인하려면 여기를 참조하세요: Image Downloader Pro 문서(한국어).
추가 참고 자료: MDN의 반응형 이미지 가이드와 Chrome DevTools 네트워크 문서를 보면 브라우저가 실제로 어떤 이미지를 요청하는지 이해하는 데 도움이 됩니다. MDN - Lazy loading · Chrome DevTools - Network