이미지 비교

두 이미지를 불러와 드래그 슬라이더 또는 나란히 보기로 비교하세요. 전/후 편집에 적합합니다. 업로드 없음.

이미지 비교 슬라이더 작동 방식

이미지 비교 슬라이더를 사용하면 두 이미지를 나란히 불러와 세로 구분선을 드래그해 한 이미지는 더 많이, 다른 이미지는 더 적게 보이게 할 수 있습니다. 이 비포&애프터 레이아웃은 두 버전의 이미지 차이를 직접적이고 쉽게 보여주는 방법입니다. 두 이미지 모두 File API를 사용해 로컬 디스크에서 로드되어 브라우저가 화면에 렌더링하며, 서버로 업로드되는 것은 없습니다.

슬라이더는 CSS clip-path 방식을 사용하므로 두 이미지 사이의 전환이 항상 픽셀 정렬되며 경계에서 혼합이나 보간이 없습니다. 두 이미지를 고정된 왼쪽과 오른쪽 패널에 표시하는 분할 화면 보기로도 전환할 수 있습니다. 사진 편집, 압축 결과, 디자인 반복 또는 차이를 명확하게 봐야 하는 두 이미지를 비교하는 데 유용합니다.

작성자: Bastien Sulyan

이미지 비교 슬라이더 단계별 사용 방법

첫 번째 이미지(비포 버전)를 왼쪽 업로드 영역에 끌어다 놓습니다.
두 번째 이미지(애프터 버전)를 오른쪽 업로드 영역에 끌어다 놓습니다.
구분선을 좌우로 드래그해 한 번에 한 이미지를 더 많이 보여줍니다.
정적 비교를 선호한다면 분할 보기로 전환해 두 이미지를 고정 패널에서 봅니다.
전체 화면 버튼을 사용해 상세 검사를 위해 비교를 최대화합니다.

자주 사용되는 사례

사진작가가 RAW 내보내기 원본과 보정된 버전을 비교해 편집이 이미지를 얼마나 변경했는지 평가할 때.
개발자가 압축 이미지의 비포&애프터 쌍을 확인해 특정 압축 수준에서의 품질 손실이 허용 가능한지 평가할 때.
UX 디자이너가 이해 관계자 검토를 위해 왼쪽에 기존 인터페이스 스크린샷을, 오른쪽에 새 인터페이스 스크린샷을 놓아 UI 재디자인을 발표할 때.
콘텐츠 편집자가 썸네일과 전체 크기 버전 사이에서 이미지 조작(색상 그레이딩, 자르기)이 일관성 있는지 확인할 때.

자주 묻는 질문

두 이미지의 크기가 같아야 하나요?

슬라이더가 정확하게 이미지를 겹쳐 놓으므로 두 이미지의 치수가 같을 때 가장 잘 작동합니다. 이미지 크기가 다르면 도구는 공통 표시 크기로 조정합니다. 가로세로 비율이 다르면 가장자리에서 약간의 정렬 불일치가 나타날 수 있습니다.

비교 작업을 위해 이미지가 어딘가로 전송되나요?

아니요. 두 이미지 모두 File API를 통해 파일 시스템에서 로드되어 브라우저의 Canvas 요소에 그려집니다. 비교는 클라이언트 측 렌더링 작업입니다. 어떤 이미지도 기기를 벗어나지 않습니다.

로컬 파일 대신 두 개의 URL에서 이미지를 비교할 수 있나요?

현재 도구는 로컬 파일만 허용합니다. 원격 URL에서 이미지를 불러오면 브라우저가 이미지를 가져와야 하는데, 많은 이미지 호스트가 허용하지 않는 CORS 제한의 영향을 받습니다.

비교가 처리할 수 있는 최대 이미지 크기가 있나요?

제한은 브라우저의 Canvas 메모리에 달려 있습니다. 각 이미지가 약 2천만 화소까지는 대부분의 데스크톱 기기에서 문제 없이 처리됩니다. 매우 큰 이미지는 저사양 하드웨어에서 렌더링을 느리게 하거나 메모리 오류를 일으킬 수 있습니다.

특정 슬라이더 위치의 스크린샷을 저장할 수 있나요?

운영 체제의 스크린샷 도구(또는 DevTools의 브라우저 스크린샷 기능)가 특정 슬라이더 위치를 캡처하는 간편한 방법입니다. 비교 보기 자체에는 병합 이미지를 내보내는 내장 버튼이 없습니다.