본문으로 이동
Develop Tools
← 사용 가이드로 돌아가기

두 이미지를 픽셀 단위로 비교하는 방법

UI 변경, 이미지 편집, 스크린샷 회귀 검사에서는 육안으로 찾기 어려운 1픽셀 어긋남이나 색상 변화를 차이 보기로 확인할 수 있습니다.

두 이미지의 조건을 맞춘 뒤 좌우로 배치하고 겹침과 차이를 확인하는 과정
두 이미지의 조건을 맞춘 뒤 좌우로 배치하고 겹침과 차이를 확인하는 과정

비교 방법의 구분

표시 방법찾기 쉬운 차이
좌우 나란히큰 레이아웃 변경, 누락, 추가
슬라이더경계 위치, 크기, 트리밍의 차이
반투명 오버레이몇 픽셀의 오정렬, 스케일링
차이 강조색, 윤곽, 픽셀 단위의 변화

비교 절차

  1. 기준 이미지를 왼쪽으로, 비교 이미지를 오른쪽으로 가져옵니다.
  2. 치수가 다른 경우 의도한 차이점 또는 저장 조건의 차이점을 확인합니다.
  3. 슬라이더와 반투명 오버레이로 위치 차이를 확인한 뒤 차이 강조 보기로 전환합니다.
  4. 허용되지 않는 차이의 위치와 원인을 확인하고 필요한 경우 결과 이미지를 저장합니다.

차이가 나기 쉬운 요인

같은 화면에서도 OS, 브라우저, 글꼴, 확대율, GPU, 촬영 시간에 따라 문자의 윤곽과 그림자가 바뀔 수 있습니다. 웹페이지 비교에서는 화면 크기와 확대율을 고정합니다.

JPEG는 저장할 때마다 압축 노이즈가 달라질 수 있으므로 정밀한 픽셀 비교에는 PNG와 같은 무손실 형식이 적합합니다.

차이 비율이 0%가 아니라는 이유만으로 실패로 판단하지 마세요. 차이가 나타난 위치와 모양이 허용 범위인지 확인해야 합니다.

브라우저에서 사용해 보기

입력 내용은 브라우저 안에서만 처리됩니다. 원본 데이터를 보관하고 결과를 확인한 뒤 저장하거나 공유하세요.

이미지 차이 비교 도구 열기