이미지 비교 슬라이더이란?
드래그 가능한 구분선으로 두 이미지를 겹쳐 픽셀 단위로 비교합니다. 전후 편집 비교와 A/B 디자인 검토에 유용하며, 수평 및 수직 분할을 지원합니다.
같은 장면을 찍은 사진 두 장을 불러오고 가운데 분리선을 드래그하면 어디가 어떻게 달라졌는지 한눈에 보입니다. 모든 화면비를 지원하며 수평·수직 분할을 전환할 수 있고, 원하는 슬라이더 위치에서 평면 PNG로 내보낼 수 있어 디자인 리뷰 시 한 장의 파일로 의견을 모으기 좋습니다.
사용 방법
- 1단계 — 두 이미지를 업로드합니다: 왼쪽에 「이전」 이미지, 오른쪽에 「이후」 이미지를 놓습니다.
- 2단계 — 슬라이더 핸들을 좌우로 드래그해 각 이미지를 드러냅니다. 수평 및 수직 분할 모드를 전환할 수 있습니다.
- 3단계 — 원하는 슬라이더 위치에서 비교 스크린샷을 다운로드해 팀과 공유합니다.
사용 시기
- 피부, 색감, 배경 정리 등 인물 리터칭 결과를 클라이언트에게 보여줄 때.
- UI 리디자인 결과를 동일 스크롤 위치에서 A/B로 비교할 때.
- 공사 진행 상황을 시작 전·완공 후 사진으로 기록할 때.
결과
사진작가가 인물 사진의 원본과 보정본을 업로드합니다. 슬라이더를 드래그하면 피부 보정, 색 보정, 배경 정리가 정확히 어디에 적용됐는지 확인할 수 있습니다.
자주 묻는 질문
- 두 이미지가 같은 크기여야 하나요?
- 꼭 같을 필요는 없습니다. 크기가 다르면 슬라이더·페이드·차이 보기가 깔끔하게 맞물리도록 이전 이미지를 이후 이미지 크기에 맞춰 조정하며, 이때 '크기 맞추기' 토글이 나타납니다. 엄밀하게 픽셀 단위로 비교하려면 크기 조정 시 한쪽이 다시 샘플링되므로 먼저 두 이미지를 동일한 가로·세로로 잘라 주세요.
- 비교 상태를 한 장의 이미지로 내려받을 수 있나요?
- 가능합니다. 가장 잘 보여줄 위치에 슬라이더를 두고 다운로드를 누르세요. 평면 PNG가 생성되며 한쪽에는 수정 전, 반대쪽에는 수정 후 사진이, 가운데에는 해당 위치의 분리선이 그려집니다.
- 세로(상하) 비교도 되나요?
- 됩니다. 분할 모드를 「수직」으로 바꾸면 분리선이 가로로 바뀌어 위아래로 움직입니다. 좌우 분할로는 좌우가 너무 좁아지는 넓은 풍경 사진에 유용합니다.
- 업로드한 이미지가 서버로 전송되나요?
- 전송되지 않습니다. 두 이미지 모두 사용자 기기에 머무르며 data URL 형식으로 메모리에 적재될 뿐입니다. 서버 업로드도 임시 저장도 없으며, 탭을 닫으면 파일은 즉시 사라집니다.
- 사진 리터칭 외에 어떤 용도로 쓰이나요?
- 위성 영상 비교(홍수 피해·산림 벌채 전후), 제품 마케팅의 비포·애프터, 피트니스 변화 기록, 의료 교육 자료의 영상의학 비교, 디자인 시안 버전 간 비교 등 다양합니다.