전후 비교 슬라이더 - Before & After 도구

📤 이미지 업로드

시공 전/후 이미지를 업로드하세요. JPG, PNG, WebP 지원 (브라우저에서만 처리, 서버 업로드 없음)

BEFORE (시공 전)

클릭 또는 드래그

JPG, PNG, WebP

AFTER (시공 후)

클릭 또는 드래그

JPG, PNG, WebP

🔄 전후 비교 슬라이더

슬라이더를 좌우로 드래그하여 비교하세요

BEFORE AFTER

📸 GIF 애니메이션 생성

슬라이더 움직임을 GIF로 만들어 블로그나 SNS에 공유하세요

가로 크기

속도

품질

🔗 외부 사이트 삽입 코드

웹사이트나 블로그에 비교 슬라이더를 삽입하세요. 이미지를 호스팅한 URL을 입력하면 삽입 코드가 생성됩니다.

Before 이미지 URL

After 이미지 URL

* 이미지를 imgur.com 등에 업로드한 후 URL을 붙여넣으세요.

<div id="mungori-ba"
  data-before="BEFORE_IMAGE_URL"
  data-after="AFTER_IMAGE_URL"
  data-width="100%"
  data-height="400"></div>
<script src="https://www.mungori.com/moon/before-after-embed.js"></script>

<iframe src="https://www.mungori.com/moon/before-after-widget.php?before=BEFORE_URL&after=AFTER_URL"
  width="100%" height="450"
  frameborder="0"></iframe>

📋 사용 안내

1

시공 전/후 이미지 업로드

BEFORE, AFTER 영역에 각각 이미지를 드래그하거나 클릭하여 업로드하세요.

2

슬라이더로 비교

가운데 핸들을 좌우로 드래그하면 시공 전후를 직접 비교할 수 있습니다.

3

GIF 생성

슬라이더가 자동으로 움직이는 GIF 애니메이션을 만들어 블로그나 SNS에 공유하세요.

4

삽입 코드 복사

웹사이트에 인터랙티브 슬라이더를 삽입하려면 JS 위젯 또는 iframe 코드를 복사하세요.

블로그에서 사용하기

GIF를 다운로드한 후 네이버 블로그, 티스토리 등에 이미지로 업로드하면 자동 재생되는 전후 비교 이미지를 게시할 수 있습니다.

웹사이트에 삽입하기

JS 위젯 코드를 복사해서 HTML 페이지의 원하는 위치에 붙여넣으세요. 방문자가 직접 슬라이더를 조작할 수 있습니다.

SNS 공유하기

생성된 GIF 파일을 인스타그램, 네이버 블로그, 카카오스토리 등에 첨부하면 시선을 사로잡는 비포/애프터 콘텐츠를 만들 수 있습니다.

이미지 호스팅 팁

삽입 코드를 사용하려면 이미지가 웹에서 접근 가능한 URL이어야 합니다. imgur.com, imgbb.com 등 무료 이미지 호스팅 서비스에 이미지를 업로드한 후 직접 링크(Direct Link)를 사용하세요.

🏠 시공 사례 갤러리

클릭하면 샘플 이미지가 슬라이더에 로드됩니다

주방 리모델링

욕실 타일 교체

거실 도배