스크린샷 비교와 시각적 회귀 테스트는 무엇이 다른가요?

스크린샷 비교는 두 장 이상의 이미지를 대조하는 일반적인 작업입니다. 시각적 회귀 테스트는 이 방식을 CI/CD 파이프라인에서 자동으로 실행해 의도하지 않은 UI 변화를 찾는 구체적인 테스트 방법입니다.

레이아웃뿐 아니라 콘텐츠 변화도 찾을 수 있나요?

픽셀 기반 비교는 글자, 색상, 간격, 이미지를 포함해 화면에 보이는 모든 변화를 감지합니다. 다만 변화의 의미까지 판단하지는 못하며 무엇인가 달라졌다는 사실만 보여 줍니다.

비교하기 전에 두 캡처의 뷰포트 너비를 같게 맞추세요. 크기가 다른 스크린샷을 그대로 비교하면 실제 오류가 아닌 정상적인 반응형 레이아웃 변화까지 차이로 표시됩니다.

손실 없이 저장되는 PNG가 알맞습니다. JPEG는 저장할 때마다 압축 흔적이 조금씩 달라질 수 있어 픽셀 단위 비교에서 잘못된 차이를 만들 수 있습니다.

네. 여러 중단점, 브라우저, 시점에서 찍은 페이지를 동시에 검토할 수 있도록 다중 이미지 비교를 지원하는 도구가 있습니다.

스크린샷 비교는 버전, 상태, 실행 환경 사이의 시각적 차이를 찾기 위해 스크린샷 두 장 이상을 나란히 놓거나 겹쳐 보는 작업입니다.

가장 단순한 방법은 이미지 두 장을 나란히 열고 눈으로 차이를 찾는 것입니다. 디자인 시안과 실제 페이지를 대조하거나 UI 변경 전후를 빠르게 확인할 때는 이 정도로 충분합니다.

하지만 이미지가 많아지면 수동 비교만으로는 한계가 있습니다. 사람의 눈은 미세한 간격, 색상, 글꼴 렌더링 차이를 놓치기 쉽고, 모든 풀 리퀘스트나 배포 때 같은 과정을 반복하기도 어렵습니다.

자동 비교는 소프트웨어로 차이를 찾습니다. 기준 스크린샷을 저장하고 변경 뒤 새 스크린샷을 찍은 다음, 두 이미지를 픽셀 단위로 대조합니다. 보통 달라진 픽셀을 눈에 띄는 색으로 표시한 차이 이미지를 만들어 한 픽셀의 이동도 알아보기 쉽게 보여 줍니다.

시각적 일관성이 중요한 곳에서 스크린샷을 비교합니다.

이런 비교는 사람이 검토할 때 지나치기 쉬운 차이를 드러냅니다.

대부분의 도구는 비슷한 순서로 작동합니다.

기준 이미지 캡처 — 정해진 뷰포트와 설정에서 정상으로 확인된 화면을 찍습니다.
새 버전 캡처 — 기준 이미지와 같은 조건으로 현재 화면을 찍습니다.
이미지 정렬 — 두 이미지의 크기를 맞춥니다. 작은 위치 차이를 보정하는 도구도 있지만 정확히 같은 크기를 요구하는 도구도 있습니다.
픽셀 비교 — 같은 위치의 픽셀을 대조해 차이를 계산합니다. 픽셀 단위 비교, 사람의 시각 민감도를 반영하는 지각 기반 비교, 구조적 유사도(SSIM) 같은 알고리즘을 쓸 수 있습니다.
차이 이미지 생성 — 달라진 픽셀을 대비되는 색으로 표시해 한눈에 찾을 수 있게 합니다.

민감도 임계값은 보통 조절할 수 있습니다. 엄격하게 설정하면 서브픽셀 이동까지 찾으므로 픽셀 단위 정합성이 중요한 디자인 시스템에 유용합니다. 임계값을 느슨하게 두면 안티앨리어싱처럼 환경에 따라 달라지는 작은 렌더링 차이를 무시할 수 있습니다.

비교 이미지와 함께 URL, 뷰포트, 브라우저, 색상 모드, 캡처 날짜 같은 캡처 조건도 기록하세요. 이 정보가 없으면 나중에 차이의 원인을 해석하거나 같은 문제를 재현하기 어렵습니다.

뷰포트 크기가 다른 이미지를 비교합니다. 기준 이미지는 너비 1440px, 새 이미지는 1280px라면 너비 차이 때문에 생긴 정상적인 레이아웃 변화가 모두 표시됩니다. 캡처 크기를 같게 맞추세요.
JPEG로 비교합니다. JPEG는 손실 압축을 사용해 같은 페이지를 찍어도 미세하게 다른 압축 흔적이 생길 수 있습니다. 신뢰할 수 있는 비교에는 PNG를 사용하세요.
동적 콘텐츠를 그대로 둡니다. 시간, 광고, 애니메이션, 사용자별 데이터는 캡처마다 바뀌어 잘못된 차이를 만듭니다. 변동이 예상되는 영역은 비교에서 제외하거나 마스킹하세요.
임계값을 지나치게 느슨하게 둡니다. 실제 회귀까지 잡음으로 처리할 수 있습니다. 처음에는 엄격하게 설정하고 변동이 불가피한 영역에만 예외를 두세요.