이미지 차이 비교기
두 이미지를 픽셀 단위로 비교해 무엇이 달라졌는지 즉시 확인하세요. 차이를 강조 표시한 이미지와 백분율 요약을 제공하며, 모든 처리는 브라우저에서 로컬로 이루어집니다.
🔒 브라우저에서 로컬로 처리됩니다
Loading…
사용 방법
- 원본 이미지를 "변경 전 이미지" 영역으로 드래그 앤 드롭하거나 클릭하여 선택하세요.
- 비교할 이미지를 "변경 후 이미지" 영역으로 드래그 앤 드롭하거나 클릭하여 선택하세요.
- "이미지 비교"를 클릭하면 두 이미지가 브라우저 내에서 픽셀 단위로 비교됩니다.
- 강조 표시된 차이 이미지와 다른 픽셀의 비율을 확인한 뒤, 필요하면 차이 이미지를 다운로드하세요.
기능
- 오픈소스 pixelmatch 라이브러리를 이용한 픽셀 단위 비교
- 어두워진 배경 위에 모든 차이 픽셀을 강조 표시해 변경 사항을 쉽게 확인
- 다른 픽셀의 정확한 개수와 비율을 표시
- 크기가 일치하지 않는 이미지는 명확한 오류로 안내하여 잘못된 비교를 방지
- 100% 클라이언트 측 처리 — 이미지가 서버에 업로드되지 않음
자주 묻는 질문
이 도구는 어떤 용도에 적합한가요?
시각적 회귀 테스트(빌드 간 UI가 의도치 않게 바뀌지 않았는지 확인), 디자인이나 스크린샷의 두 버전 비교, 사진의 미세한 편집 발견, 이미지 재압축 후 눈에 띄는 화질 저하가 없는지 확인하는 데 유용합니다.
왜 두 이미지의 크기가 같아야 하나요?
비교는 픽셀 단위로 이루어지며, 첫 번째 이미지의 각 픽셀을 두 번째 이미지의 같은 위치 픽셀과 대응시킵니다. 크기가 다르면 의미 있는 1:1 대응이 성립하지 않으므로, 잘못된 데이터를 비교하는 대신 명확한 오류 메시지를 표시합니다.
차이 이미지는 어떻게 생성되나요?
오픈소스 픽셀 비교 라이브러리인 pixelmatch를 사용합니다. 일치하는 영역은 어둡게 처리되고, 안티앨리어싱을 고려한 임계값을 넘어 다른 픽셀은 눈에 띄는 색으로 강조 표시됩니다.
제 이미지가 어딘가에 업로드되나요?
아니요. 두 이미지의 로드와 비교는 모두 브라우저 내 Canvas API를 이용해 처리됩니다. 어떤 서버로도 전송되지 않습니다.
육안으로는 완전히 같아 보이는 두 이미지에서도 왜 차이 픽셀이 나타날 수 있나요?
압축 방식, 색상 프로필, 재인코딩 과정의 미세한 차이로 인해 눈에는 동일해 보여도 개별 픽셀 값이 조금씩 달라질 수 있습니다. 차이 픽셀 비율이 매우 낮다면 실제 시각적 변화라기보다 이러한 노이즈일 가능성이 큽니다.