이미지 비교 — 두 사진 차이점 찾기, 다른 부분 표시

이미지 차이 비교란?

비슷해 보이는 두 이미지에서 어디가 달라졌는지 픽셀 단위로 찾아 주는 도구예요. 눈으로 번갈아 보면 놓치기 쉬운 작은 글자 변경, 1px 어긋남, 색 차이까지 빨간색으로 표시해요. 웹사이트를 고친 뒤 화면이 의도대로 바뀌었는지 확인할 때, 디자이너가 보낸 수정본에서 바뀐 곳을 찾을 때, 인쇄 교정지를 원본과 대조할 때 쓸 수 있어요. 차이 표시 외에도 두 이미지를 겹쳐 보거나 슬라이더로 좌우를 나눠 비교할 수 있어요.

사용법

1. 이미지 A에 기준 이미지, 이미지 B에 바뀐 이미지를 넣어요. 캡처한 화면은 Ctrl+V로 붙여 넣을 수 있고, A가 들어간 뒤 붙여 넣으면 B로 들어가요.
2. 두 이미지가 들어가면 바로 비교 결과가 나와요. 다른 픽셀 수와 비율, 차이가 있는 영역의 위치가 표시돼요.
3. 민감도를 움직여 작은 색 차이를 얼마나 무시할지 정해요.
4. 보기에서 차이 표시, 겹쳐 보기(B 불투명도 조절), 슬라이더(왼쪽 A, 오른쪽 B)를 골라요.
5. 차이 이미지 PNG 저장으로 결과를 내려받아요.

비교 기준

• 픽셀 비교: 두 이미지의 같은 위치 픽셀 색을 사람 눈의 밝기 감각에 가까운 YIQ 색 공간 거리로 비교해요. 임계값 0은 아주 작은 차이도 잡고 1에 가까울수록 관대해요. 기본값은 0.1이에요.
• 안티에일리어싱: 주변 픽셀 대비 경계의 부드러운 픽셀로 판단되면 노란색으로 표시하고 개수에서 빼요(옵션으로 포함 가능).
• 차이 이미지: 같은 부분은 원본을 흐린 회색(10%)으로, 다른 픽셀은 빨간색으로 그려요.
• 크기: 800만 화소가 넘으면 두 이미지를 같은 비율로 줄여 비교하고, 차이 영역 좌표는 A의 원래 픽셀 기준으로 바꿔 보여 줘요.
• 비교 엔진은 pixelmatch(ISC 라이선스)를 써요.

예시

A	B	결과
수정 전 스크린샷 1280×800	버튼 글자만 바뀐 스크린샷	버튼 주변만 빨간색, 차이 영역 좌표 표시
사진 PNG	같은 파일을 한 번 더	“차이가 없어요” 표시
배너 1200×600	오른쪽을 잘라 낸 배너 1000×600	원래 크기 비교 시 잘린 200px 폭 전체가 차이

글의 차이는 텍스트 비교에서, 이미지 일부를 잘라 자세히 보려면 사진 자르기를 써 보세요.