이미지 비교
ABDiff는 사람이 직접 보는 검토와 분석적 diff를 함께 사용하는 이미지 리뷰를 위해 설계되었습니다. 목표는 단순히 두 파일이 다르다는 것을 보여 주는 것이 아니라, 그 차이가 실제로 중요한지 판단하는 것입니다.
이미지 비교 시작
- 두 장의 이미지를 드롭하면 이미지 비교가 열립니다.
- 이미 두 장을 비교 중일 때 새 이미지를 드롭하면, ABDiff는 가장 최근에 드롭한 이미지를 유지합니다.
권장 워크플로
- 먼저 정렬합니다. 두 이미지가 의미 있는 공통 비교 그리드를 공유하는지 확인합니다.
- 사람의 눈으로 먼저 확인합니다. 분석 모드로 넘어가기 전에 Split, Side-by-side, Crossfade를 사용합니다.
- 두 가지 배율로 검토합니다. 먼저 전체 맥락을 보기 위해 맞춤 보기를 사용하고, 그다음 Actual Size (1:1) 로 전환해 픽셀 수준에서 확인합니다.
- 변경 위치를 찾습니다. Change Boxes 로 의심스러운 영역을 빠르게 찾습니다.
- 차이를 분류합니다. 답하고 싶은 질문에 맞춰 분석 모드를 선택합니다.
- 루페로 세부 사항을 확인합니다. 차이가 실제 회귀인지, 예상된 렌더링 차이인지, 아니면 무해한 잡음인지 판별합니다.
- 적절한 보기를 내보냅니다. 필요한 근거를 확보했다면 현재 비교 보기를 내보냅니다。
비교 전에 정렬하기
Alignment 는 대응하는 픽셀을 의미 있게 비교할 수 있도록 두 이미지를 공통 비교 캔버스에 어떻게 배치할지 결정합니다. Alignment는 이미지를 이동하거나 크기 조정할 수 있지만, 줌이나 맞춤 모드 자체는 바꾸지 않습니다.
Side-by-side 와 Change Boxes 는 표시를 위해 원본 이미지를 나란히 배치합니다. 그 외 모드에서는 두 이미지를 하나의 공통 캔버스에 겹치고, 다음 네 가지 Alignment 모드 중 하나를 사용합니다.
- Top-Left: 두 이미지를 크기 조정이나 이동 없이 왼쪽 위에 고정합니다. 크기와 위치가 이미 일치할 때 사용합니다.
- Find Smaller Image in Larger…: 더 큰 이미지 안에서 작은 이미지를 찾아 그 위치에 맞춥니다. 한 이미지가 다른 이미지의 일부이거나 크롭인 경우에 사용합니다.
- Scale Right to Left: 오른쪽 이미지를 균일하게 스케일해 왼쪽 이미지의 기준 크기에 맞춥니다.
- Scale Left to Right: 왼쪽 이미지를 균일하게 스케일해 오른쪽 이미지의 기준 크기에 맞춥니다.
Alignment가 활성화되면 헤더에 Scaled to Left, Scaled to Right, Aligned (Containment) 같은 배지가 표시됩니다.
사람의 눈으로 먼저 확인하기
좋은 검토는 먼저 시각 모드에서 시작해, 그 변화가 더 깊은 분석이 필요한지 판단하는 것부터 시작해야 합니다.
| 모드 | 가장 적합한 용도 |
|---|---|
| Split | 움직이는 분할선을 따라 레이아웃, 간격, 국소적 변화를 비교 |
| Side-by-side | 두 이미지를 동시에 보면서 공통 줌으로 검사 |
| Crossfade | 블렌딩을 통해 미세한 시각적 차이를 발견 |
| Change Boxes | 오른쪽 이미지에서 변경된 영역을 빠르게 찾기 |
- Split 은 이미지를 훑어보며 국소 영역을 직접 비교할 때 가장 좋은 기본 선택입니다.
- Side-by-side 는 두 원본 이미지를 동시에 보고 싶을 때 더 적합합니다.
- Crossfade 는 움직임이나 깜빡임처럼 봤을 때 차이가 더 잘 드러나는 경우 유용합니다.
- Change Boxes 는 “이 이미지에서 무엇이 가장 크게 바뀌었는가?”라는 질문에 답하는 데 도움이 됩니다.
질문에 맞는 분석 모드 사용
분석 모드는 이미 어떤 영역이나 어떤 종류의 변화를 조사할지 알고 있을 때 가장 강력합니다.
| 모드 | 이런 경우 사용 |
|---|---|
| Absolute Difference | 정확한 픽셀 차이가 필요할 때 |
| Proportional Difference | 절대값보다 상대적인 변화가 중요할 때 |
| Blurred Difference | 픽셀 잡음을 줄이고 더 큰 시각적 변화를 강조하고 싶을 때 |
| Edge Difference | 색상보다 윤곽, 간격, 구조가 더 중요할 때 |
| SSIM | 구조적 또는 지각적 유사성을 보고 싶을 때 |
| Delta E | 지각 가능한 색 정확도를 판단하고 싶을 때 |
- Absolute Difference 는 안티앨리어싱 잡음까지 포함해 바뀐 모든 픽셀을 보여 줍니다.
- Proportional Difference 는 매우 밝거나 어두운 영역의 작은 차이를 더 잘 보이게 할 수 있습니다.
- Blurred Difference 는 정확한 픽셀 잡음보다 더 큰 시각적 드리프트가 중요할 때 유용합니다.
- Edge Difference 는 레이아웃, 간격, 형태 변화에 적합한 경우가 많습니다.
- SSIM 은 픽셀 일치가 아니라 구조적 유사성을 평가합니다.
- Delta E 는 색 정확성이 핵심 질문일 때 적합한 모드입니다.
전체 보기와 1:1 로 검토하기
전체 맥락을 볼 때는 맞춤 모드를 사용하고, 최종 판단은 1:1 에서 내리십시오.
- Actual Size (1:1): 고정된 1:1 픽셀. 작은 변화가 허용 가능한지 판단하기 전에 사용합니다.
- Fill Window (Split, Cross-fade, Difference): 현재 보이는 창에 한 번 맞춥니다. 100% 이상 확대될 수 있습니다.
- Fill Pane (Side-by-side, Change Boxes): 두 패널을 공유로 한 번 맞춥니다. 100% 이상 확대될 수 있습니다.
- Show Whole Image: 전체 이미지를 한 번에 보이도록 맞추지만 100%를 넘기지 않습니다.
- Fit to Window (Auto): 창 크기가 바뀌면 다시
계산되는 지속적인 자동 맞춤 모드입니다.
- Split, Cross-fade, Difference 에서는 연속적인 Fill Window 처럼 동작합니다.
- Side-by-side, Change Boxes 에서는 두 이미지가 모두 들어가면 자동으로 1:1을 사용하고, 그렇지 않으면 전체 보기 맞춤으로 돌아갑니다.
Show Whole Image 는 100%를 넘기지 않고 전체를 한 번 보고 싶을 때 사용합니다. Fit to Window (Auto) 는 창 크기를 바꾸는 동안에도 ABDiff가 계속 맞춰 주길 원할 때 사용합니다.
줌은 마우스 휠이나 보기 ▸ 확대/축소 명령으로 조정할 수 있습니다.
이미지는 드래그하거나 미니맵을 사용해 다시 위치를 잡을 수 있습니다. 미니맵은 현재 줌에서 이미지가 보이는 영역보다 클 때만 나타납니다. 2초 동안 움직임이 없으면 자동으로 숨겨지지만, 그 위를 가리키거나 내부에서 드래그하는 동안에는 계속 보입니다.
루페로 의심 영역 확인하기
루페는 커서 주변을 확대해 보여 주며, 반대쪽 이미지로 빠르게 전환할 수 있게 해 줍니다.
단축키:
- L: 루페 켜기/끄기
- A: 왼쪽 이미지 표시
- D: 오른쪽 이미지 표시
- S: 배율 전환: 1× → 2× → 4× → 8× → 1×
빠른 판단 가이드
- 무엇이 바뀌었는지 아직 모른다면 먼저 Split 이나 Side-by-side 를 사용합니다.
- 변경된 영역을 빠르게 찾고 싶다면 Change Boxes 를 사용합니다.
- 질문이 레이아웃, 간격, 형태에 관한 것이라면 Edge Difference 를 사용합니다.
- 정확한 픽셀 변화가 중요하다면 Absolute Difference 를 사용합니다.
- 정확한 픽셀 잡음이 방해된다면 Blurred Difference 를 사용합니다.
- 지각되는 구조적 유사성이 중요하다면 SSIM 을 사용합니다.
- 보이는 색상 차이가 중요하다면 Delta E 를 사용합니다.
- 최종 판단은 맞춤 보기만이 아니라 Actual Size (1:1) 에서 내려야 합니다.
내보내기 및 리비전 검토
- 현재의 이미지 비교를 그대로 저장하거나 공유하고 싶다면 지금 보고 있는 비교 보기를 내보냅니다.
- 시간에 따른 변화를 검토하려면 Git 기록을 사용해 어느 한쪽 패널에 이전 이미지 리비전을 불러옵니다.