전체 도구 문고리닷컴 바로 만들기
Before & After Studio

시공 전후,
한 장의 사진으로
드라마틱하게 보여주세요.

업로드 두 장이면 끝. 좌우로 드래그하는 비교 슬라이더, SNS·블로그에 바로 올릴 수 있는 GIF 애니메이션, 내 홈페이지에 삽입할 위젯까지 — 회원가입 없이 무료로.

2장 필요한 사진 수
~10초 평균 GIF 생성
100% 브라우저 처리 · 서버 미저장
시공 후 거실
시공 전 거실
BEFORE AFTER
실시간
드래그 비교
GIF · 위젯
즉시 추출
업로드 없이 처리사진은 내 브라우저에서만 사용됩니다
완전 무료회원가입·결제·워터마크 없음
GIF · 위젯 · iframeSNS/블로그/홈페이지 어디든
모바일 지원휴대폰에서도 드래그·터치 OK
Workflow

두 장만 올리면 끝.

JPG · PNG · WebP를 지원합니다. 사진은 서버로 전송되지 않고 브라우저 메모리에서만 처리됩니다.

1BEFORE 업로드
2AFTER 업로드
3비교 · 추출
시공 전 BEFORE

사진을 클릭하거나 드래그

JPG · PNG · WebP · 최대 20MB

가로 비율은 AFTER와 동일하게 미선택
시공 후 AFTER

사진을 클릭하거나 드래그

JPG · PNG · WebP · 최대 20MB

가급적 같은 위치·각도로 미선택
좋은 결과를 만드는 팁: 같은 위치·각도·조명에서 찍은 두 장이면 슬라이더의 효과가 극대화됩니다. 휴대폰 격자선과 수평계를 켜고 촬영하면 비뚤어지지 않아요.
Quick start

사진이 없어도 일단 체험해보세요.

샘플 인테리어를 클릭하면 슬라이더에 자동으로 로드됩니다. 마음에 들면 내 사진으로 교체해 진짜 만들어보세요.

Kitchen
주방 리모델링
우드톤 구식 주방 → 화이트+다크 모던 주방
샘플 불러오기
Bathroom
욕실 타일 교체
베이지 줄눈 타일 → 블루그레이 모던 타일
샘플 불러오기
Living Room
거실 도배 + 가구
베이지 무지 벽지 → 세이지 + 테라코타 포인트
샘플 불러오기
Bedroom
침실 침구 교체
베이지 클래식 → 세이지 미니멀 + 테라코타 포인트
샘플 불러오기
Flooring
바닥재 교체
밝은 메이플 강마루 → 다크 오크 원목마루
샘플 불러오기
Paint
벽면 페인트 컬러 변경
크림 베이지 → 딥 세이지 그린
샘플 불러오기
Use cases

이런 사람들이 즐겨 씁니다.

각 카드를 클릭하면 해당 작업에 필요한 자재량·비용 계산기로 이동합니다. 비교 슬라이더와 함께 쓰면 결과가 더 또렷해져요.

Photography

좋은 비포·애프터 사진의 4가지 규칙

아래만 지켜도 슬라이더 효과가 두 배입니다.

1. 같은 위치, 같은 각도

발 위치·휴대폰 높이·렌즈 방향을 똑같이. 가능하면 삼각대를 쓰거나 작업 전에 휴대폰 위치를 표시해 두세요.

2. 자연광 시간대 고정

시공 전후를 같은 낮 시간대에 찍으세요. 그림자 방향이 달라지면 슬라이더에서 어색해 보입니다.

3. 격자선 켜고 수평 잡기

아이폰·갤럭시 모두 카메라 설정에서 격자선을 켤 수 있습니다. 비뚤어진 두 장은 슬라이더에서 어지러워 보입니다.

4. 가구·소품 정리

바뀐 부분에 집중되도록 두 장 모두 정리된 상태로. 바닥재 비교라면 가구를 잠깐 옮겨두는 게 좋습니다.

Inspiration

2026 인테리어 컬러 트렌드

결정이 안 설 때는 트렌드 컬러를 후보 색으로 두고 슬라이더에 올려보세요. 색상별 시뮬레이터로 바로 이어집니다.

Related tools

함께 쓰면 좋은 계산기

비교 슬라이더로 결정했다면, 다음은 자재량과 비용을 잡을 차례.

FAQ

자주 묻는 질문

업로드한 사진이 서버에 저장되나요?
아닙니다. 사진은 브라우저 메모리에서만 처리됩니다. 페이지를 새로고침하면 사라지고, 서버나 데이터베이스에 저장되거나 전송되지 않습니다. GIF·임베드 코드 모두 클라이언트에서 만들어집니다.
두 사진의 비율이 달라도 되나요?
가능합니다. 슬라이더는 AFTER 이미지의 비율에 맞춰 크롭됩니다. 자연스러운 결과를 원한다면 같은 비율(예: 둘 다 4:3 또는 16:9)로 자르거나, 같은 위치에서 같은 줌·각도로 촬영하세요.
GIF 파일이 너무 크면 어떻게 줄이나요?
생성기에서 가로 480px·속도 빠르게·품질 일반으로 낮추면 1MB 안쪽으로 떨어지는 경우가 많습니다. 카카오톡·인스타 DM 첨부는 8~25MB 제한이 있으니 가로 800px 이하를 권장합니다.
웹사이트에 슬라이더를 삽입하려면?
"웹사이트 삽입 코드" 섹션에서 이미지가 호스팅된 직접 URL을 입력하면 JS 위젯과 iframe 두 가지 코드가 생성됩니다. imgur.com·imgbb.com 같은 무료 이미지 호스팅을 사용하거나, 워드프레스라면 미디어 라이브러리에 업로드한 후 그 URL을 붙여넣으세요.
네이버 블로그·티스토리에 어떻게 올리나요?
생성된 GIF를 다운로드한 후 글쓰기에서 일반 이미지처럼 첨부하면 자동으로 재생됩니다. 임베드 코드는 두 플랫폼 모두 외부 스크립트를 막아 작동하지 않으니, GIF로 첨부하는 방식을 추천드립니다.
모바일에서도 슬라이더가 작동하나요?
네, 핸들을 터치한 채로 좌우로 드래그하면 됩니다. iOS·안드로이드 모두 지원합니다. 다만 GIF 생성은 사진이 클수록 시간이 걸리니 휴대폰에서는 가로 640px 이하를 권장합니다.
워터마크가 들어가나요? 상업적으로 써도 되나요?
생성된 GIF·위젯·iframe 어디에도 워터마크가 들어가지 않습니다. 인테리어 업체·블로거·SNS 운영자 모두 상업적으로 자유롭게 사용 가능합니다.

한 장의 BEFORE/AFTER가
천 마디 설명을 대신합니다.

당신의 시공·리모델링·셀프 인테리어를 가장 명확하게 보여줄 도구.
지금 바로 사진 두 장만 올려보세요.

유용했나요?