tutorials

웹페이지 이미지 일괄 다운로드 방법

FlowPick 내장 이미지 다운로더로 웹페이지의 이미지를 한 번에 추출하고 저장하세요. JPG·PNG·WebP 형식, 파일 크기와 리소스 필터, 일괄 다운로드 과정을 안내합니다.
FlowPick 팀
10분 분량
# 이미지 # 일괄 다운로드 # jpeg # png # webp # 튜토리얼

디자인 리서치나 경쟁사 자료 수집할 때 가장 짜증나는 건 이미지를 하나하나 저장하는 일입니다. 공급업체 사이트의 제품 사진 80장, 갤러리 페이지의 고화질 이미지, 심지어 유명 회사 포트폴리오까지… 매번 우클릭해서 저장하는 건 작업이 아니라 단순 노동입니다.

우클릭 저장의 문제점

대부분의 사람들은 이미 반복 작업에 빠진 후에야 일괄 다운로드가 필요하다는 걸 깨닫습니다. 우클릭, 다른 이름으로 저장, 이름 변경, 우클릭, 다른 이름으로 저장, 이름 변경… 브라우저에는 "모든 이미지 선택 후 저장" 기능이 내장되어 있지 않습니다.

서드파티 도구는 있지만, 보통 두 부류로 나뉩니다. <img> 태그만 스캔하는 경량 확장 프로그램(지연 로딩 이미지나 배경 이미지를 놓침), 또는 설치가 필요한 데스크톱 프로그램(브라우저 로그인 세션을 우회할 수 없어 로그인이 필요한 이미지는 403 오류 발생).

FlowPick의 이미지 다운로더는 브라우저 안에서 실행되며, 현재 로그인 상태를 유지한 채 네트워크 요청을 모니터링해 이미지를 캡처합니다. <img> 태그에만 의존하지 않습니다.

FlowPick이 감지할 수 있는 이미지

모든 이미지가 <img> 태그 안에 숨어 있는 건 아닙니다. FlowPick은 브라우저가 실제로 보내는 네트워크 요청을 모니터링해 다음과 같은 소스에서 이미지를 캡처합니다.

  • 표준 <img> 요소 — 가장 흔한 유형
  • <picture> 및 <source> 요소 — 여러 해상도를 가진 반응형 이미지, FlowPick은 가장 높은 해상도를 선택
  • 지연 로딩 이미지 — 스크롤할 때 로드되는 이미지, DOM에 진입하면 캡처
  • <video> 커버 프레임 — 동영상의 poster 썸네일

스캐너는 DOM의 현재 상태에서 실행됩니다. 아직 스크롤하지 않은 영역, 로드되지 않은 이미지는 목록에 나타나지 않습니다. 이 점을 염두에 두고 작업하세요.

감지할 수 없는 경우:

  • Canvas로 렌더링된 이미지 — 네트워크 요청을 거치지 않아 확장 프로그램이 인식 불가
  • Base64 인라인 이미지 — HTML에 직접 포함되어 있어 독립 리소스가 아님
  • CSS background-image — 사이트 구현 방식에 따라 감지될 수도, 안 될 수도 있음

지원하는 이미지 포맷

포맷확장자주요 용도
JPEG.jpg, .jpeg사진, 제품 이미지
PNG.png스크린샷, 투명도 있는 그래픽
GIF.gif움짤, 아이콘
WebP.webp최신 웹 포맷, JPEG보다 용량 작음
SVG.svg아이콘, 로고, 벡터 일러스트

WebP 관련 참고: 주요 브라우저는 모두 지원하지만, 일부 구형 데스크톱 소프트웨어(2021년 이전 Photoshop 버전, 일부 Windows 프로그램)에서는 직접 열 수 없습니다. JPEG 호환 포맷이 필요하다면 FlowPick에서 .jpg/.jpeg만 필터링해 다운로드할 수 있습니다.

단계별 사용법

1단계: 페이지 열고 끝까지 스크롤

대상 이미지가 있는 페이지를 엽니다. 지연 로딩 갤러리 사이트(대부분의 최신 이미지 사이트)라면, 먼저 페이지를 천천히 끝까지 스크롤해서 이미지가 실제로 DOM에 로드되도록 한 후 FlowPick을 엽니다.

많은 사람이 이 단계를 건너뛰고 확장 프로그램에 몇 장만 표시되는 이유를 궁금해합니다. 페이지 상단은 로드됐지만, 스크롤하지 않은 하단 이미지는 DOM에 없기 때문에 FlowPick도 캡처할 수 없습니다.

2단계: FlowPick 팝업 열기

브라우저 도구 모음의 FlowPick 아이콘을 클릭합니다. 배지 숫자는 현재 페이지에서 감지된 미디어 리소스 총 개수입니다.

3단계: 이미지 탭으로 전환

팝업에서 이미지 탭(📷)을 클릭하면 감지된 이미지의 썸네일 그리드가 표시됩니다.

예상보다 많은 수가 나올 수 있습니다. 대부분의 페이지에는 콘텐츠 이미지 외에도 UI 요소, 아이콘, 광고 이미지가 섞여 있습니다. 그래서 필터링이 중요합니다.

4단계: 필요한 것만 필터링

포맷별 필터링: 필요한 포맷만 선택하세요. JPEG만 필요하면 .jpg/.jpeg만 체크하고, 움짤이 필요 없으면 .gif를 해제하세요.

파일 크기별 필터링: 최소 KB 값을 설정하는 것이 가장 효과적인 필터링 방법입니다. 5KB 미만은 거의 아이콘이나 장식 요소로, 실제 콘텐츠 이미지가 아닙니다.

상황권장 최소 파일 크기
아이콘 및 장식 제거10 KB
콘텐츠 갤러리50 KB
고화질 이미지만100 KB 이상

필터링 후 썸네일 그리드가 업데이트됩니다. 한 번 훑어보고 빠진 게 없는지 확인하세요. 다운로드 후 삭제하는 것보다 지금 체크 해제하는 게 훨씬 빠릅니다.

5단계: 대상 이미지 선택

  • 전체 선택으로 필터링된 모든 이미지를 한 번에 선택
  • 개별 썸네일 클릭으로 선택/해제 전환
  • Shift + 클릭으로 범위 선택

6단계: 다운로드

선택 항목 다운로드를 클릭합니다. FlowPick이 선택된 이미지를 동시에 다운로드하여 브라우저 기본 다운로드 폴더에 원본 파일명 그대로 저장합니다.

팝업에 진행 상황이 표시됩니다. 동시 다운로드 방식이므로 50장을 다운로드하는 데 1장의 50배 시간이 걸리지 않습니다.

다운로드된 파일 위치

모든 이미지는 브라우저 기본 다운로드 폴더(보통 시스템 Downloads 디렉터리)에 저장되며, 각 이미지는 원본 URL의 파일명을 유지합니다. ZIP으로 압축되지 않습니다.

다운로드된 이미지 파일명이 image.jpg, photo001.jpg처럼 너무 일반적이라면, 해당 사이트의 이미지 URL에 의미 있는 파일명이 원래 없는 것입니다. FlowPick의 문제가 아닙니다.

실제 활용 사례

제품 이미지 비교 리서치

여러 공급업체의 제품을 비교할 때, 각 상품 페이지마다 5-8장의 각도별 이미지가 갤러리에서 지연 로딩됩니다.

방법: 상품 페이지를 열고 각 썸네일을 클릭해 전체 크기 이미지를 로드한 후, FlowPick에서 최소 파일 크기(예: 150KB)를 설정해 제품 대형 이미지만 필터링하세요.

사진 포트폴리오 아카이빙

포트폴리오 사이트는 보통 전체 화면 스크롤 레이아웃에 지연 로딩 의존도가 높습니다. 해당 영역이 뷰포트에 들어와야 이미지가 로드됩니다.

방법: 정상 속도로 전체 페이지를 훑어본 후 FlowPick을 열고 최소 100KB로 설정하세요. 썸네일 없이 깔끔한 고화질 사진만 얻을 수 있습니다.

강의 자료 및 기술 문서

기술 문서나 온라인 강의에는 다이어그램과 프로세스 스크린샷이 많지만, 독립 다운로드 버튼이 없는 경우가 대부분입니다.

방법: 문서 페이지를 끝까지 스크롤한 후, FlowPick에서 파일 크기로 UI 요소를 필터링해 모든 다이어그램을 일괄 추출하세요.

Bilibili 피드 및 댓글

크리에이터 피드의 첨부 이미지, 댓글란의 이미지 모두 FlowPick이 감지할 수 있습니다. 페이지를 끝까지 스크롤해 이미지를 로드한 후 FlowPick을 열어 스캔하세요. 이 시나리오는 Bilibili 동영상 다운로드 와 함께 사용할 수 있습니다. 동영상은 동영상 탭, 이미지는 이미지 탭 — 같은 팝업에서 탭만 전환하면 됩니다.

잘 되는 사이트와 안 되는 사이트

잘 되는 사이트:

  • Pixiv / ArtStation: 갤러리형 사이트, 이미지가 표준 네트워크 요청을 통해 전송되므로 페이지를 끝까지 스크롤한 후 스캔하면 효과적
  • Notion 공개 페이지: 이미지가 포함된 Notion 공유 페이지, FlowPick으로 한 번에 모두 추출 가능
  • Bilibili 피드: 크리에이터 피드와 댓글란 이미지, 스크롤로 로드 후 일괄 캡처 가능

잘 안 되는 사이트:

  • Google 이미지 검색 결과: 검색 결과 이미지가 서드파티 도메인에 호스팅되어 CORS 제한으로 다운로드 실패 가능. 원본 페이지로 이동해 다운로드 권장
  • Canvas 렌더링 갤러리: 일부 사이트는 WebGL/Canvas로 이미지를 렌더링. 이 경우 이미지가 네트워크 요청을 거치지 않아 FlowPick이 감지 불가
  • 핫링크 방지 서명이 있는 이미지: 일부 사이트 이미지 URL에 IP 바인딩 서명 토큰이나 Referer 검증이 포함됨. FlowPick이 URL을 감지해도 직접 요청 시 403 오류 발생. 이때는 우클릭 → 새 탭에서 열기 → 수동 저장

개인정보 보호

FlowPick의 이미지 스캔은 전적으로 브라우저 탭 내에서 실행됩니다. 감지된 이미지 URL과 다운로드된 파일은 기기를 떠나지 않습니다. 다운로드는 브라우저가 이미지 호스팅 서버에 직접 요청하며, FlowPick 서버는 전혀 관여하지 않습니다.

같은 FlowPick 확장 프로그램에서 탭만 전환하면 다양한 미디어 유형을 처리할 수 있습니다. 이미지는 이미지 탭, 동영상은 동영상 탭, 오디오는 오디오 탭 — 다른 두 유형에 관심이 있다면 아래 튜토리얼을 참고하세요.

추천 글

Next

브라우저에서 비디오 리먹스: fMP4, ISOBMFF, 그리고 트랜스코딩하지 않는 이유