Wix에 비포 애프터(전후 비교) 슬라이더 추가하는 방법

잠재 구매자가 제품의 장점을 즉시 확인할 수 있도록 돕는 것은 엄청난 이점이며, 특히 온라인으로 판매할 때 더욱 그렇습니다. 이 경우에는 영업 사원이 없기 때문에 브랜딩, 메시지, 그리고 시각적 요소가 중요한 역할을 해야 합니다. 이것이 바로 비포 애프터 슬라이더의 힘입니다.

윅스(Wix)에는 방대한 디자인 요소 라이브러리가 있지만, 기본 에디터에는 맞춤 설정이 가능한 비포 애프터 슬라이더가 포함되어 있지 않습니다. 하지만 그렇다고 방법이 없는 것은 아닙니다. 윅스 앱 마켓(Wix App Market)에서 타사 앱을 설치하거나, 무료 외부 위젯을 삽입하거나, Velo by Wix를 사용해 처음부터 직접 만들 수 있습니다. 각각의 방법이 어떻게 작동하는지, 그리고 왜 많은 사람들이 무료 위젯을 가장 선호하는지 알아보겠습니다.

옵션 1: 윅스 앱 마켓 확장 프로그램 설치하기

가장 직관적인 방법은 윅스 앱 마켓을 이용하는 것입니다. “비포 애프터 슬라이더”를 검색하고 클릭 한 번이면 페이지에 작동하는 이미지 비교 슬라이더가 추가됩니다. 삽입 코드나 개발자 모드가 필요 없습니다.

문제는 설치 후에 나타납니다. 대부분의 앱은 프리미엄(freemium) 모델로 운영되며, 무료 버전에서는 제한적인 기능만 타협해서 사용해야 합니다. 4.7점의 좋은 리뷰를 받은 옵션 중 하나인 PURPLE 비포 애프터 슬라이더는 무료 요금제 사용 시 워터마크가 표시됩니다. 이를 제거하고 맞춤형 화살표 스타일과 레이아웃 모양을 해제하려면 월 2.50달러의 비용이 듭니다. 처음에는 큰 금액이 아니지만, 사이트의 다른 앱 구독료와 합쳐지면 부담이 될 수 있습니다.

더 큰 리스크는 유지보수입니다. 이들은 소규모 타사 개발자이므로, 업데이트 지원이 중단되면 전후 비교 슬라이더도 오작동할 수 있습니다. 포트폴리오나 제품 페이지에 오류가 발생한 요소가 방치되는 것은 절대 원치 않으실 것입니다.

그래도 타사 앱을 사용해 보고 싶다면 설치 방법은 다음과 같습니다.

1. 윅스 에디터에서 사이트를 열고 왼쪽 사이드바에서 앱(Apps)을 클릭한 다음 앱 마켓(App Market)을 클릭합니다. “before and after slider”를 검색합니다.

2. 원하는 앱을 클릭한 다음 **사이트에 추가(Add to Site)**를 클릭합니다. **동의 및 추가(Allow and Add)**를 눌러 확인합니다.
3. 슬라이더가 페이지에 추가됩니다. 슬라이더를 클릭하고 **설정(Settings)**을 연 다음, 비포 애프터 이미지를 추가하고 핸들과 라벨을 조정한 후 **게시(Publish)**를 클릭합니다.

윅스는 전체 설치 과정을 사이트에 앱을 추가하는 도움말 센터 가이드에 자세히 설명하고 있습니다.

옵션 2: 무료 노코드 슬라이더 위젯 사용하기 (권장)

월 구독료 없이 슬라이더를 완벽하게 제어하고 싶다면, 앱 마켓을 건너뛰고 대신 무료 외부 위젯을 삽입해 보세요. 드래그하여 이미지를 표시하는 동일한 효과와 유료 앱보다 더 많은 맞춤 설정 기능을 이용할 수 있으며 갱신 비용도 없습니다.

Jform 비포 애프터 슬라이더 위젯은 바로 이를 위해 제작되었습니다. 시각적 에디터에서 설정하고 짧은 삽입 코드를 복사하여 윅스에 붙여넣기만 하면 됩니다. Jform 웹사이트 위젯은 사용 제한이나 요금제 요구 사항 없이 무료로 사용할 수 있으므로, 슬라이더가 게시된 후에도 업그레이드 안내 메시지가 나타나지 않습니다.

또한 앱 마켓의 옵션보다 더 많은 기능을 제공합니다. 수평 또는 수직으로 이미지를 표시할 수 있는데, 이는 방 전체를 보여주거나 사람의 전후 비교 모습을 보여줄 때 매우 유용합니다. 구분선의 시작 위치를 설정하여 방문자가 원하는 프레임에서 이미지를 보게 할 수도 있습니다. 또한 내장된 내비게이션으로 최대 3쌍의 비교 이미지를 추가할 수 있어, 단일 정적 비교가 아닌 하나의 요소를 소규모의 사례 연구 갤러리로 전환할 수 있습니다. 3명의 환자 결과를 보여주는 치과의사나 단계별 리모델링을 보여주는 인테리어 디자이너에게는, 이것이 하나의 삽입 위젯으로 세 가지 효과를 내는 차이를 만들어냅니다.

윅스 사이트에 Jform 위젯을 추가하려면 다음 단계를 따르세요.

1. Jform 비포 애프터 슬라이더 위젯을 열고 파일을 업로드하거나 이미지 URL을 붙여넣어 이미지 쌍을 추가합니다. 비포 애프터 라벨과 각 비교에 대한 캡션도 추가합니다.

2. 표시 방향, 구분선 시작 위치, 인터랙션 스타일(드래그, 클릭 또는 마우스 오버)을 설정합니다. 사이트에 맞게 너비, 이미지 비율, 모서리 둥기, 구분선 크기 및 색상을 조정합니다. 방문자가 세부 사항을 확인해야 하는 경우 전체 화면 모드를 활성화합니다.

3. 삽입 코드를 복사합니다.

4. 윅스 에디터에서 + 추가(Add)를 클릭하고 코드 삽입(Embed Code)을 선택합니다. 코드 스니펫을 붙여넣고 요소의 크기를 조정한 후 게시(Publish)를 클릭합니다.

윅스의 사이트 또는 위젯 삽입 가이드에는 삽입 코드가 HTTPS를 사용해야 한다는 요구 사항을 포함하여 해당 요소의 제한 사항이 설명되어 있습니다.

옵션 3: Velo by Wix를 사용하여 맞춤형 슬라이더 만들기

타사 앱이나 외부 삽입 코드에 의존하고 싶지 않다면, Velo by Wix를 사용하여 슬라이더를 직접 코딩할 수 있습니다. 에디터에서 두 개의 이미지를 겹쳐 놓고, 선이나 상자 요소를 드래그 핸들로 추가한 다음, 개발자 모드를 켜고 방문자가 드래그할 때 상단 이미지가 표시되는 영역을 조절하는 JavaScript를 작성하는 방식입니다.

하지만 여기에는 한 가지 문제가 있습니다. Velo의 페이지 코드는 포인터가 요소를 가로지를 때의 움직임을 추적할 수 없습니다. 표준 윅스 요소에서 사용할 수 있는 이벤트 핸들러는 클릭, 포커스, 요소 진입 및 이탈, 뷰포트 표시 여부만 지원합니다. 마우스 이동 핸들러나 터치 이벤트 지원이 없습니다. 하지만 드래그 슬라이더에는 이 두 가지 기능이 모두 필요합니다.

가장 이상적인 방법은 HTML iFrame 요소 내에 일반적인 DOM JavaScript를 작성하고, 데이터를 전달하는 데에만 Velo를 사용하는 것입니다. 즉, 코드, 반응형 동작 및 발생할 수 있는 모든 버그를 직접 관리해야 한다는 점만 제외하면 옵션 2와 동일한 삽입 메커니즘을 사용하게 됩니다.

이 방법을 시도해 보고 싶다면 다음 단계를 따르세요.

1. 윅스 에디터의 상단 바에서 개발자 모드(Dev Mode)를 클릭하여 개발자 모드를 켭니다. Wix Studio의 경우, 왼쪽 사이드바에서 코딩 시작(Start Coding)을 클릭합니다.

2. 슬라이더를 배치할 위치에 이미지 크기에 맞춘 HTML 삽입 요소를 추가합니다.

3. 해당 요소 안에 비교 슬라이더 마크업, 스타일링 및 포인터 이벤트 핸들링 코드를 작성하고, 모든 브레이크포인트(breakpoint)에서 마우스 드래그 및 터치 스와이프가 제대로 작동하는지 테스트합니다.

스마트한 노코드 위젯으로 윅스 사이트 향상시키기

Jform 비포 애프터 슬라이더 위젯은 월간 소프트웨어 비용을 추가하거나 Velo에서 터치 이벤트를 디버깅할 필요 없이 변화된 모습을 가장 빠르게 보여줄 수 있는 방법입니다. 한 번 설정하고, 코드를 붙여넣기만 하면 끝입니다.

또한 Jform이 제공하는 150개 이상의 무료 웹사이트 위젯 중 하나이기도 합니다. 포트폴리오나 서비스 사이트와 잘 어울리는 몇 가지 다른 위젯은 다음과 같습니다.

• Google 리뷰: 작업 결과물 옆에 고객의 평점을 배치하여, 증명된 성과와 칭찬을 한 페이지에서 함께 보여주세요.
• FAQ: 방문자가 문의 이메일을 보내기 위해 사이트를 떠나기 전에 “시간이 얼마나 걸리나요?”나 “비용은 얼마인가요?”와 같은 질문에 답변해 주세요.
• 팝업(Popup): 갤러리를 끝까지 살펴봤지만 아직 예약할 준비가 되지 않은 방문자의 이메일을 확보하세요.
• 맨 위로 가기(Back to Top): 포트폴리오 페이지가 너무 길어져서 위로 다시 스크롤하는 것이 번거로울 때 추가하면 아주 유용한 위젯입니다.

각 위젯은 슬라이더에 사용했던 것과 동일한 HTML 삽입 요소를 통해 설치되므로, 두 번째나 세 번째 위젯을 추가하는 데 몇 분밖에 걸리지 않습니다.

아직 사이트를 구축 중이시라면, 당사의 윅스 웹사이트 만들기 가이드에서 플랫폼 전반에 대해 자세히 다루고 있으며, Jotform-윅스 연동 페이지에서는 연락처 및 예약 양식을 추가하는 방법을 설명합니다. 전체 위젯 디렉터리를 살펴보고 사이트에 필요한 기능이 무엇인지 확인해 보세요.