비포·애프터 슬라이더: 인테리어 홈페이지에 넣는 이유, 병원 홈페이지에서 조심할 점

비포·애프터 슬라이더는 사진 두 장을 한 틀에 겹쳐 두고 손잡이를 끌어 전과 후를 비교하게 하는 기능이라, 휴대폰에서도 화면을 오르내리지 않고 바뀐 정도를 보여줍니다. 인테리어·리노베이션처럼 '같은 공간이 어떻게 달라졌는지'가 곧 결과인 업종에 잘 맞고, 병원은 의료광고 규정 때문에 공개 페이지에 쓰기 전에 확인이 먼저입니다. 기술 LAB 데모와 콘셉트 시안 세 개로 넣을 자리를 정리했습니다.

이 글의 PLANE INTERIOR, 오래된집, 모담탈모클리닉은 심플웹이 만든 콘셉트 시안입니다. 실제 업체나 납품 사례가 아니며, 상호·주소·후기·숫자는 모두 가상이고, 같은 이름의 실제 업체와도 관계가 없습니다. 세 시안에는 비포·애프터 슬라이더가 들어 있지 않습니다. "여기에 넣으면 좋겠다"고 적은 부분은 저희 제안입니다.

인테리어 업체 홈페이지에서 가장 공들이는 사진은 완공 사진입니다. 그런데 완공 사진만 보면 원래 어떤 공간이었는지, 무엇을 얼마나 바꿨는지 알기 어렵습니다. 바뀐 정도를 보여주려면 고치기 전 사진이 함께 있어야 합니다.

두 사진을 나란히 놓는 방법이 가장 쉽습니다. 다만 휴대폰에서는 두 장이 위아래로 쌓여서, 비교하려면 화면을 오르내려야 합니다. 비포·애프터 슬라이더는 두 사진을 한 틀 안에 겹쳐 두고, 가운데 손잡이를 끌어 경계를 옮기며 보게 합니다. 같은 자리에서 무엇이 달라졌는지가 한 화면 안에서 보입니다.

비포·애프터 슬라이더 직접 끌어보기 →

1. 손잡이 하나로 전과 후를 오갑니다

기술 LAB의 10번 데모입니다. 틀 왼쪽 위에 'BEFORE', 오른쪽 위에 'AFTER' 표시가 있고, 가운데 흰 선 위의 동그란 손잡이를 좌우로 끌면 경계가 따라 움직입니다.

• 끌어서 비교: 손잡이를 오른쪽으로 끌면 '전' 사진이 넓어지고, 왼쪽으로 끌면 '후' 사진이 넓어집니다.
• 키보드와 화면 낭독기: 데모 설명을 그대로 옮기면 "키보드 방향키로도 움직이고 화면 낭독기도 현재 비율을 읽습니다." 마우스를 쓰기 어려운 분도 비교할 수 있습니다.
• 브라우저: 화면 오른쪽 카드에 브라우저 지원이 '모든 최신 브라우저'로 적혀 있습니다. 특정 브라우저에서만 보이는 기능이 아닙니다.

데모 사진에 대해 미리 밝혀 둡니다. 데모는 거실 사진 한 장의 왼쪽만 흑백으로 바꿔 '전' 상태를 흉내 냈습니다. 그래서 양쪽 가구 배치가 똑같습니다. 실제 홈페이지에서는 공사 전과 공사 후에 따로 찍은 사진 두 장을 넣습니다.

휴대폰에서는 틀이 세로로 긴 모양으로 바뀝니다. 폭이 좁은 화면에서도 두 사진이 쌓이지 않고 한 틀 안에 남습니다.

2. 어떤 업종에 쓰나

LAB 데모 카드의 '이런 곳에 씁니다'에는 세 가지가 적혀 있습니다.

• 리뉴얼·시공 전후
• 인테리어·리모델링
• 사진 보정·뷰티 시술 전후

공통점은 같은 대상이 어떻게 달라졌는지가 곧 일의 결과라는 점입니다. 인테리어·리모델링, 도배나 욕실 같은 집수리, 매장 외관 교체가 대표적입니다. 반대로 '전' 사진이 없거나 처음부터 새로 만드는 일이라면, 슬라이더보다 완공 사진을 크게 보여주는 편이 낫습니다.

아래에서는 업종이 다른 콘셉트 시안 세 개를 놓고, 슬라이더를 넣는다면 어느 자리가 맞을지 정리했습니다.

3. 인테리어 회사 시안: 프로젝트 상세 화면에 넣습니다

상업 공간 인테리어 회사를 가정한 콘셉트 시안 'PLANE INTERIOR'입니다.

메인 화면의 'Fig. 01 프로젝트'에는 카드 세 장이 있습니다. '성수 복합 카페 공간 기획(로스터리+베이커리 280㎡)', '을지로 와인바(좌석 38석 바 중심 구성)', '부산 편집숍(계산대 이동으로 동선 정리)'입니다.

세 번째 카드의 '계산대 이동으로 동선 정리'처럼 바꾼 내용이 한 줄로 설명되는 프로젝트가 슬라이더와 잘 맞습니다. 계산대가 원래 어디 있었는지 보여주면 그 한 줄이 사진으로 확인됩니다. 목록 카드는 지금처럼 완공 사진 한 장으로 두고, 슬라이더는 카드를 눌렀을 때 나오는 상세 화면에 넣기를 권합니다. 목록에서 손잡이까지 보이면 카드가 복잡해집니다.

프로젝트 상세 화면은 제목 아래에 프로젝트·분야·범위·연도를 한 줄로 정리하고, 그 아래 사진 두 장을 나란히 놓았습니다. 실제 업체라면 이 두 장 자리가 슬라이더 자리입니다. 시공 전 사진과 완공 사진을 겹쳐 넣고, 아래에 무엇을 바꿨는지 한두 문장을 붙입니다.

휴대폰에서는 정보 네 줄이 세로로 풀리고 사진 두 장이 위아래로 쌓입니다. 시공 전후 사진을 이 방식으로 넣으면 비교하려고 화면을 오르내려야 합니다. 슬라이더를 쓰면 한 틀 안에서 끝납니다.

하나 더 있습니다. 상세 화면 끝에는 지금 '← 첫 화면' 링크만 있습니다. 전후 사진을 본 직후가 문의하기 좋은 때이니, 슬라이더 바로 아래에 '비슷한 공사 견적 문의' 버튼을 두는 것도 함께 권합니다.

4. 공간을 고친 숙소 시안: '고친 과정'에 넣습니다

슬라이더는 인테리어 회사만 쓰는 기능이 아닙니다. 오래된 건물을 고쳐 문을 연 카페나 숙소도 '어떻게 고쳤는지'가 이야깃거리입니다. 리노베이션 한옥 스테이를 가정한 콘셉트 시안 '오래된집'이 그런 경우입니다.

첫 화면 문구는 "1938년에 지은 집을 3년 동안 고쳤습니다. 대들보는 그대로 두었습니다."입니다. 소개 섹션에도 '1938년 · 처음 지은 해', '3년 · 고친 기간'이 숫자로 나오고, 사이트 메뉴에는 '고친 과정'이라는 항목이 있습니다.

슬라이더를 넣는다면 이 '고친 과정'이 맞는 자리입니다. 같은 방을 고치기 전과 후로 겹쳐 두면, 손잡이를 움직여도 대들보는 제자리에 있고 나머지가 달라진 모습이 보입니다. "대들보는 그대로 두었습니다"라는 문장을 사진으로 확인시켜 주는 셈입니다.

5. 피부과·병원 시안: 공개 페이지에는 조심해서

이번에는 피부과 전문의가 탈모를 진료한다는 설정의 콘셉트 시안 '모담탈모클리닉'입니다.

첫 화면 제목부터 "정수리 사진, 석 달 단위로 비교"입니다. 보조 문구는 "정수리와 앞머리를 같은 조명, 같은 각도로 찍어 석 달마다 비교합니다."

그런데 이 시안의 메인 화면 어디에도 환자의 전후 사진은 없습니다. 비교 사진은 세 군데에 말로만 나옵니다.

• 맨 위 작은 줄, '로그인' 옆의 '비교 사진 조회'
• 치료 섹션의 '비교 촬영: 같은 조명·각도로 석 달마다 촬영합니다.'
• 소식의 '비교 사진 온라인 조회'

사진을 보여주는 대신 어떻게 찍는지를 설명했습니다. 의료 쪽에는 이렇게 조심스럽게 구성할 이유가 있습니다.

치료 전후 사진은 의료광고 규정과 맞닿아 있는 민감한 부분입니다. 의료법 제56조 제2항 제2호는 환자의 치료경험담처럼 치료 효과를 오인하게 할 우려가 있는 광고를 금지하고, 의료광고 심의에서도 전후 사진은 까다롭게 봅니다. 병원 홈페이지의 공개 페이지에 시술 전후 사진을 올릴 수 있는지, 올린다면 어떤 조건이 붙는지는 이 글에서 판단하지 않습니다. 실제로 넣기 전에 의료광고 심의 기준과 최신 규정을 먼저 확인해야 합니다. LAB 카드의 '뷰티 시술 전후'를 병원 홈페이지에 그대로 가져가기 전에 한 번 멈춰야 하는 이유입니다.

실제 홈페이지에 넣을 때 확인할 것

• 같은 자리, 같은 각도로 찍기: 전후 사진의 위치·높이·화각이 다르면 손잡이를 움직일 때 벽과 창틀이 어긋나 보입니다. 시공 전 사진은 공사를 시작하기 전에 찍어 두어야 합니다. 모담탈모클리닉 시안이 '같은 조명, 같은 각도'를 앞세운 것도 같은 이유입니다.
• 고객 동의: 고객의 집이나 매장 내부 사진입니다. 홈페이지에 올리기 전에 게시 동의를 받아 둡니다.
• '전' 사진이 없는 프로젝트: 억지로 맞추지 않습니다. PLANE INTERIOR 시안처럼 완공 사진을 나란히 보여주면 됩니다.
• 사진 용량: 한 틀에 사진 두 장을 불러옵니다. 휴대폰에서 느려지지 않게 용량을 줄여 넣습니다.
• 사례를 누가 올리나: 시공 사례는 계속 늘어납니다. 견적 계산기의 '관리자 페이지' 항목을 함께 만들면 업체가 사례 사진을 직접 올리고 고칠 수 있습니다. 관리자 페이지 없이 만들면 사례를 늘릴 때마다 홈페이지를 고쳐야 하니, 사례가 얼마나 자주 늘어나는지를 보고 정하면 됩니다.
• 슬라이더를 넣는 범위: 기술 LAB의 데모는 심플웹이 직접 만든 기능입니다. 실제 홈페이지의 어느 화면에 몇 개를 넣을지는 상담에서 정합니다.
• 병원·의원: 위 5장의 의료광고 확인이 먼저입니다.

---

비포·애프터 슬라이더 직접 끌어보기 → PLANE INTERIOR 시안 · 오래된집 시안 · 모담탈모클리닉 시안 · 기술 LAB 데모 23개 보기 · 우리 업체 예상 견적 보기