Skip to main content

스크린샷 캡처를 통한 시각적 회귀 테스트

개발팀은 유닛 테스트가 놓치는 버그를 잡으려고 Webshot을 사용합니다 — 깨진 레이아웃, 폰트 폴백, 사라진 아이콘, 망가진 반응형 화면 같은 것들이죠. 스테이징을 캡처하고, 프로덕션을 캡처한 다음 두 이미지를 비교해 보세요. 그 diff를 PR 코멘트에 첨부하면 변경 사항이 안전하다는 증거(혹은 새 버그가 방금 생겼다는 증거)가 됩니다.

🖥️ 데스크톱 전체 페이지 (PNG, 선명한 diff) 📱 모바일 전체 페이지 ⚙️ 무료 API로 자동화하기

모든 버튼은 설정이 미리 적용된 캡처 폼을 엽니다. 페이지가 열린 뒤 포맷과 뷰포트를 자유롭게 바꿀 수 있습니다.

이 작업에 Webshot이 좋은 이유

픽셀 단위로 정확한 캡처

PNG 모드는 텍스트와 경계선을 또렷하게 유지합니다 — JPG 압축 노이즈가 오탐을 일으키기 쉬운 픽셀 diff 도구(`pixelmatch`, ImageMagick `compare`)에 딱 맞습니다.

매번 동일한 뷰포트

Webshot은 매 실행마다 정확히 같은 뷰포트, 같은 스크롤 위치, 같은 폰트 로딩 대기 시간으로 캡처하기 때문에 diff 결과를 믿을 수 있습니다.

API 친화적

무료 Webshot API를 CI에 연결해 보세요: 배포 전과 배포 후를 캡처하고 `pixelmatch`로 비교한 뒤, 변경된 픽셀이 임계값을 넘으면 빌드를 실패 처리하면 됩니다.

헤드리스 Chrome 보일러플레이트가 필요 없음

Puppeteer 설정, 폰트 설치, 샌드박스 플래그는 잊으세요. Webshot이 그 모든 것을 저희 인프라에서 대신 운영합니다. CI는 HTTP 요청 한 번만 보내면 됩니다.

시각적 회귀 테스트 진행 방법

  1. 모니터링할 페이지를 고르세요 — 홈페이지, 핵심 랜딩 페이지, 결제 플로우 등 회귀가 생기면 타격이 큰 곳이면 어디든 좋습니다.
  2. 각 페이지를 PNG + desktop_full + mobile_full 조합으로 캡처해 현재 프로덕션 모습을 기준 이미지(baseline)로 남겨 두세요.
  3. 다음 배포가 끝나면 같은 URL을 다시 캡처하세요. `pixelmatch`나 ImageMagick으로 이전과 이후를 비교해서 픽셀 변화가 1%를 넘으면 사람이 직접 확인할 가치가 있습니다.
  4. CI에 연결하세요: 배포 전 훅이 스테이징을 캡처하고, 배포 후 훅이 프로덕션을 캡처하며, diff가 임계값을 초과하면 빌드가 실패하도록 만드세요.

자주 묻는 질문

CI에서 헤드리스 Chrome을 운영하려면 Chromium, 폰트, 샌드박스 커널 플래그를 설치하고 이 모든 것을 계속 최신 상태로 유지해야 합니다. Webshot을 사용하면 설치 과정을 통째로 건너뛸 수 있습니다 — CI가 저희 API에 HTTP 요청 한 번을 보내면 PNG를 바로 돌려받습니다. Chrome 업데이트, 폰트 캐싱, SSRF 보호는 저희가 알아서 처리합니다.

네, PNG 포맷 + 동일한 뷰포트 + 동일한 대기 전략을 쓴다면 안정적입니다. Webshot은 뷰포트 크기를 고정하고 fonts.ready + 네트워크 유휴 상태(network-idle) + `prefers-reduced-motion` 쿼리로 선언된 애니메이션까지 기다린 뒤 캡처합니다. 무작위 애니메이션(Lottie 루프, Date.now() 기반 배경)은 실행할 때마다 다른 diff를 만들어내므로, 테스트 환경에서는 고정해 두세요.

한 번의 호출로는 안 됩니다 — 각 URL을 따로 캡처한 뒤 별도의 라이브러리로 비교하면 됩니다. API는 캡처에만 집중하도록 유지하고 있으며, diff 처리는 30줄짜리 스크립트면 충분합니다. 예제 코드는 `/developers`에서 확인하세요.

네. Webshot은 캡처 전에 네트워크 유휴 상태(500ms 동안 요청 없음)와 fonts.ready를 기다리기 때문에 React, Vue, Svelte, Next.js 앱도 완전히 렌더링된 후에 스크린샷이 찍힙니다. 네트워크 유휴 상태에 도달하지 않는 사이트(롱 폴링, 웹소켓)라면 API로 `maxWait` 파라미터를 전달하면 됩니다.

무료 공개 폼은 IP당 15분에 5회로 제한되어 CI에 쓰기에는 부족합니다. 무료 API 티어는 훨씬 여유롭습니다. 자세한 내용은 `/developers`를 참고하세요. 대량 회귀 테스트(빌드당 캡처 50회 이상)라면 상용 API 플랜에서 IP별 제한이 사라집니다.

Webshot은 캡처만 담당하며, diff 레이어는 직접 붙이시면 됩니다. 두 줄이면 끝납니다: `npx pixelmatch baseline.png new.png diff.png`. 또는 관리형 비주얼 diff 서비스(Percy, Chromatic, BackstopJS)에 Webshot이 만든 PNG를 넣어 써도 됩니다.

캡처할 준비가 되셨나요?

무료이며 회원가입도, 워터마크도 없습니다. URL만 붙여넣으면 끝입니다.

📸 캡처 폼 열기

다른 활용 사례: Google 지도 스크린샷 · WordPress 스크린샷 · 랜딩 페이지 QA · 법적 증거 스크린샷 · 소셜 미디어 스크린샷 · 개발자 워크플로 스크린샷 · 전체 보기 →

Share: 𝕏 Twitter Facebook LinkedIn