이 도구에 대해
Image Diff는 두 이미지를 픽셀 단위로 비교하여 정확히 어디가 다른지 브라우저 안에서만 표시합니다. "이전" 스크린샷이나 디자인 목업을 이미지 A로, "이후" 버전—새 스크린샷, 같은 디자인을 구현한 버전, 또는 다시 내보낸 사본—을 이미지 B로 놓으세요. 두 이미지 크기가 다르면 둘 다 더 큰 쪽에 맞춘 캔버스에 배치되며, 한쪽 이미지만 덮는 영역은 차이로 계산됩니다. 크기 변화 자체도 포착하고 싶은 부분이기 때문입니다. 결과는 차이 이미지로 나타납니다. 변경된 모든 픽셀이 선명한 마젠타로 칠해진 이미지 A가 다시 렌더링되며, 다른 픽셀의 수와 비율도 실시간으로 함께 표시됩니다.
이것은 진정으로 개발자를 위한 워크플로입니다. CSS나 컴포넌트 변경 전후에 찍은 두 스크린샷을 비교해 시각적 회귀를 잡아내거나, 구현된 UI를 원본 디자인 목업과 픽셀 단위로 대조하거나, 이미 한 번 내보낸 이미지에 두 번째 JPEG/WebP 압축이 더하는 미묘한 블록 현상과 밴딩을 찾아낼 수 있습니다. 민감도 임계값은 픽셀을 "다르다"고 판정하기까지 색상 변화가 얼마나 커야 하는지를 조절합니다—값을 낮추면(0에 가까울수록) 1~2비트의 압축 노이즈를 포함해 거의 모든 변화를 표시하고, 값을 높이면 명확히 눈에 보이는 차이만 표시합니다. 이는 동일한 원본 이미지의 두 내보내기 결과를 비교할 때 보통 원하는 동작입니다. 아무것도 업로드되지 않습니다. 두 이미지 모두 Canvas API를 통해 사용자 기기에서 직접 디코딩되고 비교되며, 다운로드하는 차이 이미지도 같은 방식으로 생성됩니다.
자주 묻는 질문
두 이미지의 크기가 다르면 어떻게 되나요?
두 이미지 모두 둘 중 더 큰 크기에 맞춘 공통 캔버스에 배치되며, 다른 하나가 더 작아서 한쪽 이미지만 덮는 영역은 차이로 계산됩니다 — 이는 한 이미지를 다른 이미지에 맞게 조용히 늘리는 것(이는 비교를 왜곡하고 애초에 크기가 다르다는 사실을 숨기게 됨) 대신, 크기 불일치를 비교의 일부로 올바르게 드러냅니다.
어떤 민감도 임계값을 사용해야 하나요?
낮은 임계값은 미세하고 미묘한 차이까지 포착합니다(압축 아티팩트나 매우 사소한 렌더링 변화를 감지하는 데 유용). 반면 더 높은 임계값은 명백히 다른 픽셀만 표시합니다(움직인 요소나 다른 콘텐츠 같은 중요한 시각적 변화를 찾는 데 유용하며, 그 외에는 동일한 두 이미지 사이의 사소한 안티앨리어싱/압축 노이즈는 무시함). 범위의 중간 정도에서 시작해 노이즈가 너무 많이 보이면(높이고) 실제 차이를 놓치면(낮추는) 식으로 조정하세요.