스크린샷 비교

스크린샷 비교의 정의, 시각적 차이 분석(visual diffing) 방식, QA에서 사용되는 경우를 설명합니다.

스크린샷 비교는 같은 화면, 페이지 또는 창을 찍은 두 스크린샷에서 차이를 찾는 작업입니다. 시각적으로 비교할 수 있으며, 두 이미지를 나란히 놓거나, 슬라이더로 겹쳐 보거나, 부분 투명도로 섞어 봅니다. 계산으로 비교할 수도 있으며, 이 경우 소프트웨어가 변경된 픽셀을 강조한 차이 이미지와 다른 픽셀의 개수 또는 비율을 출력합니다.

신뢰할 수 있는 비교에는 입력이 서로 맞아야 합니다. 두 이미지의 픽셀 크기, 배율, 자르기 영역이 같아야 합니다. 창 크기, Retina 배율 또는 스크롤 위치가 바뀌면 내용이 같아도 거의 모든 픽셀이 다르게 측정됩니다.

수동 비교와 자동 비교

수동 비교는 이미지가 적거나 판단이 필요한 경우에 적합합니다. 예를 들어 리디자인이 더 읽기 쉬운지 확인할 때 사용합니다. 자동 비교는 이미지가 많거나 반복 실행하는 경우에 적합합니다. 스크립트가 새 캡처를 저장된 기준 이미지(baseline)와 비교하고, 임계값을 넘는 변경만 보고합니다.

스크린샷 비교를 사용하는 경우

코드 변경 후 시각적 회귀 테스트 수행
경쟁사 또는 자사 페이지의 콘텐츠 변경 확인
디자인 리뷰와 릴리스 노트용 변경 전후 이미지 작성
문서나 대시보드가 이전 버전과 일치하는지 확인

시각적 차이 분석 방식

두 이미지를 같은 크기로 정렬
각 픽셀의 색상 값을 비교
안티앨리어싱 노이즈를 흡수하는 허용 오차 미만의 차이를 무시
변경된 픽셀을 강조색으로 표시하고 전체 개수를 집계

SSIM과 같은 지각 기반(perceptual) 방식은 색상 값을 정확히 비교하지 않고 구조와 대비를 비교합니다. 이 방식은 렌더링에서 발생하는 미세한 위치 차이에 따른 오탐을 줄입니다.

스크린샷 비교에서 흔한 실수

크기 또는 배율이 다른 이미지를 비교함
시계, 광고, 캐러셀 또는 애니메이션이 프레임에 남아 있음
설치된 글꼴이나 브라우저 버전이 다른 상태에서 캡처함
임계값을 지나치게 높게 설정하여 실제 변경이 통과함

같은 스크린샷을 반복해서 찍고 있습니까?

Temposhot Website Capture는 URL별 Device, Area, Wait 설정을 유지하므로 반복 실행해도 비교 가능한 이미지가 생성됩니다. 화면 영역은 저장된 Custom Area로 같은 사각형을 유지합니다. 자세한 내용은 캡처 옵션을 참조합니다.

자주 묻는 질문

적절한 diff 임계값은 얼마입니까?

페이지에 따라 다릅니다. 낮은 값에서 시작하여 오탐을 검토하고, 임계값을 올리는 대신 동적 영역을 마스킹합니다.

아무것도 설치하지 않고 두 스크린샷을 비교할 수 있습니까?

예. Compare Images가 브라우저에서 차이를 강조 표시합니다.

출처

같은 스크린샷을 반복해서 찍고 계십니까?

Temposhot은 타이머에 맞춰 화면, 창 또는 영역을 캡처하고 결과를 PDF, 이미지, ZIP 또는 MP4로 내보냅니다. 무료 브라우저 도구는 단일 이미지만 다룹니다.

Mac용 다운로드 기능 보기