두 이미지를 좌우 슬라이더로 비교합니다. 사진 보정 전후, 디자인 시안 A/B 비교에 활용하세요.
이미지 비교 슬라이더 사용법
- Before 이미지(왼쪽)와 After 이미지(오른쪽)를 각각 업로드합니다.
- 가운데 슬라이더 핸들을 좌우로 드래그하면 비교가 가능합니다.
- 두 이미지는 동일한 비율·해상도일 때 가장 잘 보입니다.
주요 기능
- 좌우 인터랙티브 슬라이더로 즉시 비교
- Before/After 라벨 표시
- 모바일 터치 지원
- 완전 로컬 처리 — 이미지가 서버로 전송되지 않음
활용 예시
- 사진 보정 전후 비교 (Lightroom·Photoshop)
- 디자인 시안 A/B 테스트
- 인테리어 리모델링 전후
- 다이어트·화장 비교
- 웹사이트 리디자인 전후
모범 사례
두 이미지는 같은 각도·구도로 촬영하고 동일한 비율(16:9, 4:3 등)로 맞추면 비교 효과가 가장 좋습니다. 비율이 다르면 일부가 잘려 보일 수 있습니다.
자주 묻는 질문
이미지가 서버에 저장되나요?
아니요. 브라우저 메모리에서만 처리됩니다.
비교 결과를 이미지로 저장할 수 있나요?
현재는 인터랙티브 비교만 지원합니다. 정적 이미지가 필요하면 콜라주로 가로 2장 합치기를 사용하세요.
두 이미지 비율이 다르면?
cover 모드로 자동 크롭됩니다. 가능한 동일 비율로 맞춰 업로드하세요.
웹사이트에 이 효과를 넣으려면?
본 도구의 슬라이더 코드를 참고하거나 img-comparison-slider 같은 라이브러리를 사용하세요.