이미지 차이 히트맵
두 이미지를 디코딩한 뒤 어느 픽셀이 달라졌는지 측정합니다. 기준 이미지 A에 맞춰 B를 정수 X/Y 픽셀만큼 이동하고, 투명도 비교 방식과 채널 허용 오차를 정하세요. 실제 비교한 픽셀 수·변경 비율·영역별 차이와 함께 히트맵 및 A 위에 겹친 결과를 제공합니다.
주요 기능
- 이미지 A의 좌표를 기준으로 B를 정수 X/Y 픽셀만큼 수동 정렬합니다.
- 크기가 같은 이미지만 허용하거나 두 이미지의 공통 겹침 영역만 명시적으로 비교합니다.
- 흰색·검은색 배경에 합성한 RGB 또는 디코딩된 RGBA 4개 채널을 비교합니다.
- 전체 겹침 영역과 선택 영역, 4 × 4 구역의 차이 및 비교에서 빠진 픽셀 수를 표시합니다.
- 히트맵·겹침 이미지 PNG와 설정·측정값 JSON을 저장합니다.
- 묶음 처리 중 취소할 수 있으며 입력이나 설정이 바뀌면 이전 결과와 다운로드를 지웁니다.
사용 방법
- 기준 이미지 A와 비교 이미지 B를 선택하거나 생성된 PNG 예제를 불러오세요.
- 허용 오차, 투명도, 크기 처리 방식을 정하고 필요하면 X/Y 이동값을 조정하세요.
- A 좌표로 선택 영역을 입력한 뒤 픽셀 비교를 누르세요.
- 실제 비교·제외 픽셀 수와 히트맵·겹침 이미지·영역 표를 확인한 뒤 저장하세요.
활용 예시
- 레이아웃을 수정한 UI 스크린샷에서 바뀐 작은 영역을 찾습니다.
- 내보내기 전후 일러스트의 디코딩 픽셀 차이를 확인합니다.
- 투명 자산을 지정한 배경 위에서 비교하거나 알파 채널까지 함께 비교합니다.
- 전체 겹침 영역을 유지하면서 관심 있는 사각형의 차이를 따로 측정합니다.
자주 묻는 질문
변경된 픽셀은 어떻게 계산하나요?
정렬된 두 픽셀의 채널별 절대 차이 중 최댓값이 허용 오차보다 클 때만 변경으로 셉니다. 변경 비율은 변경 픽셀 수를 실제 비교 픽셀 수로 나눈 값입니다. 평균 오차는 허용 오차 아래의 차이까지 포함한 모든 비교 채널의 평균입니다.
이미지 크기가 다르면 어떻게 되나요?
기본 설정은 크기 불일치를 오류로 표시합니다. 공통 겹침 영역 모드에서는 정렬 후 양쪽 이미지에 모두 존재하는 픽셀만 비교합니다. 나머지는 A·B 각각의 제외 픽셀 수로 표시하고 지도에서는 투명하게 둡니다. 자동 확대·축소나 빈 공간 채우기는 하지 않습니다.
자동으로 이미지를 정렬하나요?
아닙니다. X/Y는 A를 기준으로 B를 정수 픽셀만큼 움직입니다. 양수 X는 오른쪽, 양수 Y는 아래쪽입니다. 선택 영역 좌표는 A 기준이며 겹침이 없으면 이동값을 바꿔야 합니다. 자동 정합·회전·원근 보정은 제공하지 않습니다.
투명한 픽셀은 어떻게 비교하나요?
흰색·검은색 모드는 디코딩된 RGB를 해당 배경에 합성한 뒤 비교합니다. RGBA 모드는 알파를 포함한 4개 채널을 비교합니다. 완전히 투명한 원본 색은 브라우저 디코딩 과정에서 달라질 수 있어 숨겨진 파일 바이트 자체를 비교하는 방식은 아닙니다.
색상과 저장 파일은 무엇을 뜻하나요?
히트맵에서 허용 오차 이하는 검정입니다. 변경 픽셀은 최대 채널 차이가 0에서 255로 커질수록 파랑·초록·빨강 계열로 표시합니다. 비교하지 않은 부분은 투명합니다. 겹침 이미지는 변경 부분의 히트맵 색을 A에 섞습니다. PNG 크기는 A와 같고 JSON에는 설정과 영역별 측정값이 들어갑니다.
큰 이미지나 개인 사진도 사용할 수 있나요?
파일은 페이지 메모리에서 처리합니다. 파일당 8 MiB, 전체 200만 픽셀, 한 변 4,096픽셀까지이며 PNG·JPEG·정지 WebP를 지원합니다. 취소는 처리 묶음 사이에 적용됩니다. 진행 중인 브라우저 디코딩·PNG 인코딩이 내부적으로 끝나더라도 취소된 결과는 표시하지 않습니다.
개인정보 안내
선택한 이미지와 설정은 이 페이지 메모리에서 처리하며 분석 서버로 보내거나 브라우저 저장소에 보관하지 않습니다. 직접 저장을 선택한 결과만 파일로 내려받습니다. 입력 변경·지우기·화면 종료 시 임시 결과와 다운로드 URL을 정리합니다.
댓글과 질문