픽셀 차이 시각화 도구

픽셀 차이 시각화 도구란?

두 이미지를 비교하는 방법

1. 1
   두 이미지 업로드

   이미지 A (기준)와 이미지 B (비교할 버전)를 드롭하거나 선택하세요. 동일한 크기를 권장하며, 크기가 맞지 않으면 자동으로 이미지 A에 맞게 조정됩니다.

2. 2
   차이 모드 선택

   변경 사항 강조는 기본값입니다 — 변경된 모든 픽셀이 강조 색상으로 칠해집니다. 나란히 렌더링된 A, B 및 차이를 하나의 스트립에 표시합니다; 오버레이는 A 위에 B를 50% 불투명도로 쌓습니다.

3. 3
   임계값 조정

   임계값 슬라이더를 위로 드래그하여 경미한 압축 노이즈와 작은 JPEG 아티팩트를 무시합니다. 5%는 압축된 사진의 좋은 시작점입니다; 0%는 모든 픽셀 차이를 포착합니다.

4. 4
   변경 통계 읽기

   변경 비율은 임계값을 초과하는 픽셀의 비율을 알려줍니다 — 회귀 검토 또는 디자인 QA에 유용합니다.

5. 5
   차이 PNG 다운로드

   다운로드를 클릭하여 렌더링된 차이를 전체 해상도로 저장합니다. 코드 검토 첨부 파일 및 버그 보고서에 유용합니다.

차이가 계산되는 방법

각 픽셀 위치 p에 대해, 이미지 A와 B의 채널 (r, g, b)로:
 
  diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb|
 
픽셀은 다음과 같은 경우 다르게 처리됩니다:
 
  diff(p) > (임계값% × 765) / 100
 
여기서 765 = 3 × 255는 최대 채널 합 차이입니다. 이는
pixelmatch 및 resemble.js와 같은 이미지 차이 도구에서 사용되는 L1 거리 메트릭과 동일하며,
채널별 허용 오차가 아닌 단일 조정 가능한 임계값으로 표현됩니다.

참조: pixelmatch — 픽셀 수준 이미지 비교

예시

일반적인 사용 사례

• 비주얼 회귀 테스트 — UI 스크린샷이 이전 기준선과 일치하는지 확인합니다.
• 디자인 검토 — 디자이너가 두 개의 내보내기 사이에서 변경한 픽셀을 정확히 확인합니다.
• 사진 편집 QA — 비파괴 편집이 의도한 영역만 수정했는지 확인합니다.
• 두 개의 압축 프리셋을 비교하고 실제로 얼마나 많은 픽셀이 이동했는지 정량화합니다.
• 한눈에 동일해 보이는 두 스크린샷 간의 서브픽셀 정렬 불일치를 찾아냅니다.
• 기준선, 현재 및 차이를 나란히 보여주는 단일 이미지 버그 보고서 첨부 파일을 생성합니다.
• 자산 파이프라인 감사 — 자동 크기 조정이 노이즈를 도입하지 않았는지 확인합니다.

관련 도구

자주 묻는 질문