이미지 비교 가이드
목적에 맞는 보기로 이미지 비교하기
온라인 이미지 비교는 확인하려는 판단에 맞는 보기를 선택할 때 가장 잘 읽힙니다.
이 가이드는 두 이미지 슬롯, 브라우저 로컬 미리보기, 네 가지 실무 비교 모드를 다룹니다.
실제 예시
로컬 데모 이미지로 네 가지 비교 모드 보기
각 미리보기는 실제 전후 이미지 쌍을 사용해 해당 모드가 어떤 검토에 적합한지 보여줍니다.
Image A
Image B
1단계
Image A와 Image B로 시작하기
원본 또는 이전 이미지를 Image A에, 수정된 또는 이후 이미지를 Image B에 불러옵니다.
같은 장면, 디자인, 제품 사진, 스크린샷을 나타내는 파일을 사용하면 비교 결과를 더 쉽게 해석할 수 있습니다.
- Image A: 원본, 이전, 기준 또는 참조 이미지.
- Image B: 수정, 이후, 내보낸, 편집된 또는 새 이미지.
- 지원 형식: PNG, JPG, JPEG, WebP.
전후 비교
이미지 비교 슬라이더
이미지 비교 슬라이더는 이미지 비교와 비교 사진의 전후 변화를 확인할 때 적합합니다.
같은 이미지 영역에서 보이는 변화를 드러내고 싶을 때 사용합니다.
전체 이미지
나란히 이미지 비교
나란히 이미지 비교는 두 파일을 함께 보여 주어 사진 비교와 레이아웃 차이를 확인하기 쉽습니다.
자르기, 간격, 구성을 보기 위해 두 이미지를 동시에 봐야 할 때 사용합니다.
정렬
오버레이 이미지 비교
오버레이 이미지 비교는 정렬, 색상, 자르기, 간격 변화를 살펴볼 때 유용합니다.
단순 전후 비교보다 위치, 크기, 정렬이 더 중요할 때 사용합니다.
픽셀 확인
차이 강조
브라우저-로컬 임계값 테스트 후 변경된 픽셀을 빨간색으로 표시합니다.
diff 실행 후 변경 영역과 로컬 픽셀 지표가 필요할 때 사용합니다.
형식
지원되는 이미지 형식
현재 도구는 PNG, JPG, JPEG, WebP 파일을 지원합니다. 가장 좋은 결과를 위해 같은 작업 흐름에서 나온 두 이미지를 비교하세요.
지원되지 않는 형식은 비교 전에 변환하세요.
불러온 이미지
이미지가 불러와졌는지 확인하는 방법
이미지가 업로드 영역에 표시되면 보통 정상적으로 불러온 것입니다. 이미지 파일이 매우 크면 불러오는 시간이 길어지고 비교가 느려질 수 있습니다.
사용 사례
온라인 이미지 비교의 일반적인 용도
편집, 내보내기, 스크린샷을 승인하기 전에 시각적 변경 사항을 명확히 확인할 수 있습니다.
모드 표
간단한 모드 표
| 모드 | 적합한 용도 | 사용 시점 |
|---|---|---|
| 이미지 비교 슬라이더 | 이미지 비교 슬라이더는 이미지 비교와 비교 사진의 전후 변화를 확인할 때 적합합니다. | 변경된 픽셀이 컨텍스트에서 어디에 있는지 검사하려면 분할선을 드래그하세요. |
| 나란히 이미지 비교 | 나란히 이미지 비교는 두 파일을 함께 보여 주어 사진 비교와 레이아웃 차이를 확인하기 쉽습니다. | 계산된 차이 측정항목을 읽기 전에 두 이미지를 한 번에 비교하세요. |
| 오버레이 이미지 비교 | 오버레이 이미지 비교는 정렬, 색상, 자르기, 간격 변화를 살펴볼 때 유용합니다. | 한 이미지를 다른 이미지 위에 겹쳐 정렬, 색상, 조명 변화를 확인합니다. |
| 차이 강조 | 차이 강조는 로컬 차이를 실행한 뒤에만 브라우저에서 픽셀 차이를 계산합니다. | 브라우저-로컬 임계값 테스트 후 변경된 픽셀을 빨간색으로 표시합니다. |
비교 준비