비포 애프터
이미지 슬라이더
두 개의 이미지를 겹쳐놓고 슬라이더를 움직이며 시각적으로 비교해 보세요.
원하는 지점에서 즉시 한 장의 고화질 PNG로 저장하여 공유할 수 있습니다.
📷 비포 이미지 (Before)
✨ 애프터 이미지 (After)
도구 소개
비포 애프터 슬라이더 도구는 인터랙티브한 드래그 슬라이더를 통해 변화 전후의 두 이미지를 드라마틱하게 비교할 수 있게 해주는 웹 서비스입니다. 사진 보정, 피부과 시술, 건축 인테리어, 다이어트 결과 등 다양한 분야에서 시각적 효과를 극대화할 때 유용합니다.
비교 영상을 화면으로만 보는 것에 그치지 않고, 슬라이더를 가장 잘 보이는 위치에 둔 상태에서 'PNG 저장' 버튼을 누르면 화면 그대로 하나의 이미지로 병합되어 고화질 캡처본이 다운로드됩니다. 다운받은 이미지는 블로그 리뷰나 포트폴리오 첨부 자료로 완벽하게 활용할 수 있습니다.
사용 방법
이미지 등록하기
비포 영역과 애프터 영역을 클릭하여 각각 비교할 원본 이미지 2장을 선택하거나 드래그 앤 드롭합니다.
슬라이더 조작
이미지가 렌더링되면 화면 중앙의 슬라이더(경계선) 핸들을 마우스나 터치로 잡아 좌우(또는 상하)로 부드럽게 드래그하며 비교합니다.
이미지 병합 저장
가장 극적으로 대비되는 지점에 슬라이더를 멈추고 하단의 "PNG 저장" 버튼을 눌러 결과물을 하나의 이미지 파일로 다운로드합니다.
용어 사전
- 비포 & 애프터 (Before & After)
- 특정 시술, 시공, 편집 등의 작업 전(Before)과 후(After)의 상태를 두 장의 이미지를 이용해 직관적으로 비교하여 보여주는 방식입니다.
- 슬라이더 비교 (Slider Comparison)
- 화면 위에 겹쳐진 두 이미지 사이의 경계선(슬라이더)을 마우스나 터치로 좌우로 드래그하며, 한 프레임 내에서 변화를 쉽게 인지할 수 있도록 돕는 UI 기법입니다.
- 캔버스 API (Canvas API)
- 자바스크립트와 HTML5
<canvas>엘리먼트를 통해 브라우저 화면에 그래픽(이미지 등)을 실시간으로 렌더링하고 합성하는 기술입니다. - 포인터 이벤트 API (Pointer Events API)
- 마우스, 터치, 펜 등 다양한 입력 장치의 조작을 통일된 방식으로 처리하는 웹 API입니다. 스마트폰에서의 슬라이더 터치 드래그를 부드럽게 구현하는 데 사용됩니다.
- 클리핑 (Clipping)
- 이미지나 그래픽을 그릴 때, 지정된 특정 모양이나 영역(마스크) 안쪽에만 보이도록 잘라내는 그래픽 렌더링 기법입니다. 슬라이더 위치에 맞춰 애프터 이미지를 클리핑하여 겹칩니다.
- 종횡비 (Aspect Ratio)
- 이미지의 가로 너비와 세로 높이의 비율입니다. 비교를 극대화하려면 두 이미지의 종횡비와 촬영 구도가 일치하는 것이 가장 좋습니다.
- PNG (Portable Network Graphics)
- 압축 손실이 없어 고화질 원본 상태를 유지할 수 있는 이미지 포맷입니다. 완성된 슬라이더 비교 이미지를 고해상도로 다운로드할 때 사용됩니다.
- WebP
- 구글이 개발한 차세대 이미지 포맷으로, JPEG나 PNG보다 용량은 훨씬 작으면서도 우수한 화질을 제공합니다. (본 도구는 WebP 이미지 입력도 지원합니다.)
자주 묻는 질문 (FAQ)
- Q.두 이미지의 크기가 다르면 어떻게 되나요?
- 두 이미지는 슬라이더 비교를 위해 자동으로 동일한 기준 영역에 맞춰 리사이징됩니다(종횡비 유지). 출력(저장) 시에는 선택한 '출력 크기' 해상도에 맞게 PNG가 렌더링됩니다.
- Q.현재 슬라이더 위치 그대로 PNG 저장이 가능한가요?
- 네. 슬라이더 바를 원하는 위치에 둔 상태에서 "PNG 저장" 버튼을 누르면, 화면에 보이는 경계선 분할 상태 그대로 하나의 이미지로 병합되어 저장됩니다.
- Q.BEFORE / AFTER 라벨 글자를 숨길 수 있나요?
- 네. 화면 중앙의 "라벨 표시" 옵션의 체크를 해제하면 이미지 위의 글자가 즉시 사라집니다.
- Q.세로로 긴 이미지(모바일 화면 캡처 등)도 지원하나요?
- 네. 가로/세로 모든 비율의 이미지를 완벽히 지원하며, "슬라이더 방향"을 세로(Vertical)로 변경하여 위아래로 분할할 수도 있습니다.
- Q.내가 올린 이미지가 서버나 외부로 전송되나요?
- 아니요. 모든 이미지는 브라우저 내부의 Canvas API를 사용하여 로컬(사용자 PC/스마트폰)에서만 실시간으로 처리됩니다. 서버로 일절 전송되지 않으므로 사생활이 담긴 사진도 안심하고 사용할 수 있습니다.
- Q.어떤 이미지 형식을 지원하나요?
- JPEG, PNG, WebP, 정적 GIF 등 현재 사용 중인 브라우저가 읽을 수 있는 대부분의 이미지 형식을 입력으로 사용할 수 있습니다.
- Q.스마트폰에서도 슬라이더가 잘 작동하나요?
- 네. 터치 이벤트(Pointer Events)를 완벽하게 지원하므로 스마트폰이나 태블릿에서도 손가락으로 화면을 문질러 슬라이더를 부드럽게 조작할 수 있습니다.
- Q.여러 장의 사진을 한 번에 다중 비교할 수 있나요?
- 현재는 한 번에 한 쌍(비포/애프터)씩만 비교할 수 있습니다. 비교 후 PNG로 저장하고 초기화 버튼을 눌러 새 이미지를 불러오시면 됩니다.
주요 활용 사례
사진 및 그래픽 보정 작업
포토샵이나 라이트룸 보정 전후를 슬라이더로 비교하여 클라이언트에게 결과물의 차이를 명확히 브리핑할 때 유용합니다.
인테리어 및 시공/청소
리모델링, 입주 청소, 건축물 공사 전후의 극적인 차이를 한 장의 슬라이더 이미지로 만들어 포트폴리오나 블로그에 공유할 때.
다이어트 및 미용/성형
피트니스 다이어트 전후 체형 변화, 메이크업이나 시술 전후의 시각적 차이를 직관적으로 기록하고 어필할 때.
원예 및 DIY 작업
식물 성장 과정이나 직접 만든 가구의 도색/수리 전후 과정을 깔끔하게 병합하여 SNS(인스타그램, 블로그)에 업로드할 때.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.