두 이미지 차이 비교

두 그림에서 달라진 곳 찾기

디자인 시안을 고친 뒤 어디가 바뀌었는지, 웹 화면이 업데이트 전후로 어떻게 달라졌는지, 받은 계약서 스캔본이 원본과 같은지 눈으로 찾기는 어려워요. 두 그림을 넣고 비교하기를 누르면 화소 하나하나를 비교해 달라진 곳을 표시 색으로 칠하고, 바뀐 곳을 모두 감싸는 점선 상자를 그려요.

보기 방식과 숫자

• 차이 표시 — A를 흐리게 깔고 다른 화소만 진하게 칠해요. 밀어 보기는 막대 왼쪽은 A, 오른쪽은 B를 보여 주고, 깜빡이기는 0.7초마다 A와 B를 번갈아 보여 줘서 미세한 위치 변화를 찾기 좋아요. 차이만은 차이 크기를 4배로 강조한 흑백 그림이에요.
• 허용 오차 — 빨강·초록·파랑 중 가장 크게 다른 값이 ‘오차 × 2.55’(0~255 기준)보다 클 때만 다르다고 봐요. JPG로 다시 저장된 그림은 눈에 안 보이는 잡티가 많아서 3~10%로 올리면 대부분 사라져요. 다만 색이 진한 경계에는 JPG의 색 번짐이 남을 수 있어서, 이때는 ‘차이 표시’에서 빨간 점이 몰린 곳을 보면 실제 바뀐 곳을 찾기 쉬워요.
• PSNR — 두 그림의 평균 제곱 오차로 계산한 화질 지표(dB)예요. 같으면 무한대, 대략 40dB 이상이면 눈으로 구분하기 어려워요. SSIM은 밝기·대비·구조가 얼마나 닮았는지를 0~1로 나타내요(1이면 같음). 여기서는 밝기 채널을 8×8 화소 블록으로 나눠 계산한 평균이에요.

어떻게 동작하나요

두 파일을 ImageMagick 7(magick-wasm)로 열어 회전 정보를 바로잡고, CMYK·색 프로필은 sRGB로, 투명한 곳은 흰색으로 맞춘 뒤 같은 크기의 그림 두 장으로 만들어요. 크기가 다르면 B를 A 크기로 늘리거나 줄여 맞추고, ‘겹치기’를 고르면 늘리지 않고 큰 쪽 크기에 맞춰 흰색으로 채워요. 차이 계산과 화면 그리기는 브라우저 스크립트가 하고, 파일은 서버로 보내지 않아요. HEIC·TIFF·PSD·AVIF·JXL·BMP도 넣을 수 있어요.

한계

한쪽 그림이 몇 화소만 밀려 있어도 전체가 다르다고 나와요(위치 맞춤은 하지 않아요). 이럴 때는 ‘깜빡이기’로 보면 어느 쪽으로 밀렸는지 알 수 있어요. 아주 큰 그림(긴 변 4,000화소 초과)은 4,000화소로 줄여 비교해요. 글자 내용 비교는 글자 비교를 쓰세요.

참고한 자료

• Wang 외, Image Quality Assessment: From Error Visibility to Structural Similarity (IEEE TIP, 2004) — SSIM 정의
• ImageMagick — compare 도구와 오차 지표
• magick-wasm 0.0.45 (Apache-2.0)