ImageGrab - 웹 이미지 일괄 다운로더 개발기 | URL 하나로 모든 이미지를 ZIP으로 뚝딱

안녕하세요! 오늘은 웹 페이지의 이미지를 한 번에 추출하고 ZIP으로 다운로드할 수 있는 유틸리티 서비스, ImageGrab의 개발 과정을 공유합니다.

디자인 소스를 수집하거나, 마케팅 자료를 정리하거나, 데이터셋을 모을 때 이미지를 하나하나 우클릭-저장하는 건 정말 번거롭죠. 그래서 URL 하나만 입력하면 해당 페이지의 모든 이미지를 탐색, 미리보기, 선택, ZIP 다운로드까지 한 번에 해결하는 도구를 만들었습니다.

---

1. 기획 배경: 왜 만들었나?

문제 인식

• 웹에서 이미지를 수집할 때마다 우클릭 > 다른 이름으로 저장을 반복하는 비효율
• 한 페이지에 이미지가 수십 장이면 체력과 시간이 동시에 소진
• 브라우저 확장 프로그램은 있지만, 설치가 귀찮고 무겁고 광고 덕지덕지

해결 방향

"URL 붙여넣기 한 번이면 끝나는, 깔끔한 웹 서비스를 만들자."

---

2. 기술 스택 선정

---

3. 핵심 개발 과정

3-1. 이미지 추출 엔진 구축 (API Route)

가장 핵심이 되는 /api/extract 엔드포인트를 설계했습니다.

기본 추출 대상:

• <img> 태그의 src 속성
• <picture> 태그의 <source> srcset
• CSS background-image: url(...) 패턴
• <meta> OG 이미지, Twitter Card 이미지 CORS 우회:

서버 사이드에서 HTML을 fetch한 후 Cheerio로 파싱하는 구조이므로, 브라우저 CORS 정책에 영향을 받지 않습니다. 이미지 다운로드 시에도 /api/proxy 엔드포인트를 통해 서버가 대신 가져다 주는 프록시 패턴을 적용했습니다.

3-2. 다크 테마 UI 설계

개발자/디자이너 타겟이므로 다크 모드 기본으로 설계했습니다.

• 컬러 팔레트: 딥 네이비 배경(hsl(220, 20%, 4%)) + 시안 계열 포인트(hsl(199, 89%, 48%))
• 타이포그래피: Inter(본문) + JetBrains Mono(코드/기술 표시)
• 이미지 그리드: 반응형 4열 그리드, 호버 시 체크박스와 메타 정보 오버레이

3-3. 한/영 다국어 지원 (i18n)

한국 사용자를 메인 타겟으로 한국어를 기본값으로 설정하되, 헤더의 토글 버튼으로 영어 전환이 가능하도록 구현했습니다.

• React Context 기반 I18nProvider
• useI18n() 훅으로 어디서든 t('키') 호출
• SSR Hydration 이슈 해결: mounted 가드 패턴 적용

---

4. 트러블 슈팅: Progressive Image Loading 대응

문제 발생

많은 모던 웹사이트가 Progressive Image Loading(blur-up) 패턴을 사용합니다. 처음에 흐릿한 저해상도 플레이스홀더를 보여주고, 스크롤이나 뷰포트 진입 시 고화질 원본으로 교체하는 방식이죠.

기존 추출 로직은 <img src="...">만 가져왔기 때문에, 저품질 blur 이미지만 추출되는 문제가 발생했습니다.

해결: 다중 속성 탐색 + 플레이스홀더 필터링

1) 저품질 플레이스홀더 자동 감지 및 제외

data: URI, base64 인라인 이미지
pixel.gif, spacer.gif, blank.gif 패턴
blur, lqip, placeholder 키워드가 포함된 URL
1x1, 2x2 등 극소 사이즈 지시자

2) 20개 이상의 lazy-load 데이터 속성 지원

data-src, data-lazy-src, data-original
data-hi-res-src, data-zoom-image (ElevateZoom)
data-pin-media (Pinterest), data-delayed-url (WordPress Jetpack)
data-bg-hidpi (lazySizes), data-photoswipe-src, data-fancybox-src
... 외 10여 개

3) noscript 폴백 추출

많은 lazy-load 라이브러리가 JavaScript 미지원 환경을 위해 <noscript> 태그 안에 원본 <img>를 숨겨놓습니다. 이를 별도로 파싱하여 누락 없이 수집합니다.

4) JSON-LD 구조화 데이터 추출

application/ld+json 스크립트 블록에서 image, thumbnailUrl, contentUrl 필드를 재귀적으로 탐색하여, 페이지 메타데이터에만 존재하는 이미지도 포착합니다.

우선순위 전략

1순위: data-* 속성 (가장 높은 확률로 원본 고화질)
2순위: srcset에서 가장 큰 width descriptor
3순위: 일반 src (플레이스홀더가 아닌 경우에만)

---

5. 주요 기능 요약

• URL 입력 한 번으로 페이지 내 모든 이미지 자동 추출
• 썸네일 그리드 미리보기: 해상도, 파일 확장자 표시
• 확장자별 필터링: JPG, PNG, GIF, WebP, SVG 등
• 전체 선택/해제 + 개별 선택: 필요한 이미지만 골라 담기
• ZIP 일괄 다운로드: 선택한 이미지를 하나의 압축 파일로, 실시간 진행률 표시
• 파일명 중복 처리: 동일 파일명 자동 넘버링 (image.jpg, image_1.jpg)
• 한/영 다국어: 한국어 기본, 영어 토글
• 저작권 경고 문구: 책임 있는 사용을 위한 안내 표시

---

6. 회고 및 다음 단계

잘된 점

• Cheerio 기반 서버사이드 파싱으로 CORS 문제 원천 차단
• Progressive Loading 대응으로 실제 운영 사이트에서도 정확한 추출 가능
• 다크 테마 + 반응형으로 모바일에서도 쾌적한 사용 경험

개선 예정 (Roadmap)

• 이미지 크기별 필터링: 100px 이하 아이콘/UI 요소 자동 제외 옵션
• Puppeteer 연동: JavaScript로 렌더링되는 SPA 페이지 대응
• 무한 스크롤 처리: 자동 스크롤 시뮬레이션으로 더 많은 이미지 탐지
• 파일 형식 변환: WebP를 PNG/JPG로 변환하여 다운로드

---

오늘의 개발일지는 여기까지입니다. URL 하나로 이미지를 한 방에 긁어오는 도구, 생각보다 고려할 점이 많았지만 완성하고 나니 뿌듯하네요. 특히 Progressive Loading 대응은 실전에서 바로 차이를 느낄 수 있는 부분이라 공들인 보람이 있었습니다.

읽어주셔서 감사합니다!