이미지 비교 슬라이더

이미지 비교 슬라이더란 무엇인가요?

두 이미지를 비교하는 방법

1. 1
   비교할 이전 이미지 업로드

   JPG, PNG, WebP, GIF, BMP 또는 AVIF 파일을 이전 슬롯에 드롭하거나 클릭하여 장치에서 선택하세요. 이미지는 패널에 렌더링되고 작업 공간이 아래에 나타납니다.

2. 2
   비교할 이후 이미지 업로드

   두 번째 이미지를 이후 슬롯에 드롭하세요. 최상의 결과를 위해 두 이미지는 동일한 크기를 가져야 합니다 — 비교 컨테이너는 첫 번째로 로드한 이미지의 종횡비에 고정됩니다.

3. 3
   비교 모드 선택

   슬라이더는 두 이미지를 겹쳐 놓고 드래그 가능한 구분선을 제공합니다. 나란히 모드는 두 개의 열에 배치합니다. 페이드 오버레이는 불투명도 슬라이더로 두 이미지 사이를 부드럽게 전환합니다 — 정렬 드리프트를 발견하는 데 유용합니다.

4. 4
   구분선 또는 슬라이더 드래그

   슬라이더 모드에서는 비교 영역의 아무 곳이나 드래그하여 구분선을 이동하세요. 이미지가 좌우가 아닌 상하로 비교되는 경우 구분선을 수직으로 전환하세요. 페이드 모드에서는 이후 불투명도 슬라이더를 드래그하세요.

5. 5
   교환, 초기화 또는 새 파일 로드

   교환을 사용하여 A와 B를 재업로드 없이 뒤집을 수 있습니다. 초기화는 두 이미지를 지우고 작업 공간을 기본값으로 되돌립니다. 슬롯에 새 파일을 드롭하여 언제든지 새 파일을 로드할 수 있습니다 — 먼저 초기화할 필요는 없습니다.

슬라이더 클립 작동 방식

1. 두 이미지는 종횡비가 고정된 컨테이너 안에서 object-fit: contain으로 렌더링됩니다.
2. 이후 이미지는 절대 위치의 오버레이에 위치합니다.
3. CSS clip-path: inset(0 [100 - position]% 0 0)는 오버레이의 왼쪽 면만 드러냅니다.
4. 수직 모드는 inset 축을 교환합니다: clip-path: inset(0 0 [100 - position]% 0).
5. 포인터 이벤트는 컨테이너의 경계 사각형 내에서 커서의 오프셋으로 위치를 업데이트합니다.
6. 페이드 모드는 clip-path를 건너뛰고 이후 이미지의 불투명도를 0에서 1로 애니메이션합니다.

참조: MDN — clip-path

일반적인 전후 비교

비교 슬라이더를 사용할 때

• 사진 리터칭 리뷰 — 클라이언트에게 단일 드래그로 정확히 무엇이 변경되었는지 보여줍니다.
• 디자인 리뷰 — 두 개의 브라우저 탭 없이 히어로 섹션의 이전 레이아웃과 새 레이아웃을 비교합니다.
• 3D 렌더링 반복 — 두 조명 설정 사이를 페이드하여 미세한 글로벌 일루미네이션 변화를 확인합니다.
• 컬러 그레이딩 — 프레임을 가로질러 구분자를 쓸어보며 LUT 또는 그레이딩 패스를 평가합니다.
• 버그 리포트 — 깨진 스크린샷과 예상 스크린샷을 쌍으로 만들어서 분류자가 스크롤할 필요가 없도록 합니다.
• 부동산 전후 — 스테이징 vs. 비스테이징 또는 리노베이션 전후 샷.
• 데이터 시각화 — 서로 다른 시점에서 찍은 동일한 지도 또는 차트의 두 스냅샷을 비교합니다.

관련 도구

자주 묻는 질문