Webflow에 비포 애프터 슬라이더를 추가하는 방법

비포 애프터 슬라이더는 작업 결과를 보여주는 가장 빠른 방법 중 하나입니다. 사용자가 할 일은 구분선을 드래그하여 디자인 변경, 리모델링 또는 리터칭의 효과를 확인하는 것뿐입니다. 나란히 놓인 사진을 뚫어져라 보거나 틀린 그림 찾기를 할 필요 없이, 결과가 눈앞에 바로 나타납니다.

에이전시를 운영하든 프리랜서, 디자이너, 사진작가, 아티스트, 계약업체이든, 작업물을 자랑하고 싶은 누구에게나 비포 애프터 슬라이더는 훌륭한 방법입니다. 안타깝게도 웹플로우(Webflow)는 디자이너들에게 인기가 많은 가장 진보된 웹사이트 빌더 중 하나임에도 불구하고 기본적으로 비포 애프터 슬라이더 기능을 제공하지 않습니다. 이 슬라이더를 추가하려면 커뮤니티에서 ‘클론 가능한(cloneable)’ 요소를 설치하거나, 무료로 호스팅되는 위젯을 임베드하거나, 웹플로우의 기본 인터랙션(IX2) 엔진을 사용해 처음부터 직접 만드는 세 가지 방법이 있습니다.

아래에서 각각의 방법을 자세히 살펴보겠습니다.

방법 1: 웹플로우 복제 가능(cloneable) 요소 사용하기

가장 먼저 떠오르는 생각은 아마도 Made in Webflow 쇼케이스나 Flowbase와 같은 사이트에서 ‘복제 가능한 요소(cloneables)’를 검색하는 것일 것입니다. 이 방법이 효과적일 수는 있지만 번거로움이 없는 것은 아닙니다.

가장 큰 단점은 다른 사람이 만든 방식에 얽매이게 된다는 점입니다. 해당 요소의 기존 아키텍처와 명명 규칙을 엄격하게 따라야 합니다. 여기에는 사용자 지정 속성, CSS 규칙 및 절대 위치 지정(absolute positioning)에 의존하는 것이 포함될 수 있습니다. 이 중 하나라도 잘못되면 제대로 작동하지 않습니다. 디자인의 마지막 단계에 이를 추가할 경우, 다른 요소 중 일부를 재검토해야 할 수도 있습니다.

하지만 이 방법을 사용하기로 결정했다면, 복제 가능 요소를 추가하는 방법은 다음과 같습니다:

1. 활발하게 유지 관리되고 사용 가능한 라이선스가 있는 비포 애프터 슬라이더 복제 가능 요소를 찾습니다. 이를 자신의 프로젝트에 복제합니다.

2. 자신의 이미지로 교체합니다. 중첩된 div를 재배열하거나, 이름 등을 변경하거나, 깔끔하게 정리하려고 하지 마세요. 슬라이더가 제대로 작동하지 않을 수 있습니다.
3. 사이트를 게시하고 테스트합니다. 데스크톱과 모바일 기기 모두에서 제대로 작동하는지 확인하세요. 실수로 무언가를 변경한 경우, 다른 환경에서 JavaScript가 실행되지 않을 수 있습니다.

대체로 이 방법은 효과가 있지만, 단순한 시각적 구성 요소에 비해 과정이 매우 번거롭고 원하는 만큼의 제어 권한을 얻기 어렵습니다. 이를 제어하는 스크립트를 다시 작성하지 않는 한, 디자인을 변경할 때마다 원래의 구조를 그대로 유지해야 합니다.

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

중첩된 div 블록을 다루거나 사용자 지정 속성을 구성하는 일을 피하고 싶거나, 문제가 생겼을 때 다른 사람이 작성한 JavaScript를 디버깅하고 싶지 않다면 가장 쉬운 방법은 Jform 비포 애프터 슬라이더 위젯과 같이 호스팅되는 임베드를 사용하는 것입니다. 설정이 매우 간단하며 복제 가능 요소와 관련된 많은 문제를 해결해 줍니다.

Jform을 사용하여 웹플로우에 비포 애프터 슬라이더를 추가하는 방법은 다음과 같습니다:

1. Jform 비포 애프터 슬라이더 위젯 페이지로 이동하여 Jform 계정에 로그인합니다. 계정이 없다면 설정 과정에서 가입할 수 있습니다. 가입은 무료입니다.

2. 위젯의 제목을 지정하고 비교할 이미지 쌍을 추가합니다. 이미지를 직접 업로드하거나 URL에서 추가할 수 있습니다. 원한다면 각 이미지 쌍에 캡션을 추가하고 라벨을 변경할 수도 있습니다. 다음으로, 사용자가 핸들을 드래그하여 전후를 확인하게 할지, 아니면 마우스 오버(hover) 시 작동하게 할지 설정합니다. 완료되면 계속(Continue)을 클릭합니다. 

3. 이제 슬라이더의 스타일을 지정할 차례입니다. 색상, 브랜딩, 글꼴 및 모양을 설정할 수 있습니다. 마음에 들게 설정되었다면 다시 계속(Continue)을 클릭합니다.

4. 마지막으로 레이아웃을 구성합니다. 가로 또는 세로 슬라이더 중 어느 것을 사용할지, 구분선의 초기 위치, 너비, 그리고 모바일, 데스크톱 또는 둘 다에서 표시할지 선택합니다. 그런 다음 웹사이트에서 무료로 사용해 보기(Try it on your website for free)를 클릭합니다.

5. 코드 복사(Copy Code)를 클릭하여 임베드 코드를 클립보드에 복사한 다음, 웹플로우 사이트로 돌아갑니다.

6. 추가(Add) 메뉴를 열고 코드 임베드(Code Embed)를 선택합니다. 임베드 코드를 붙여넣고 사이트에 블록을 배치합니다. 게시(Publish)를 클릭하면 사이트에 활성화됩니다. 매우 간단합니다.

보시다시피 무료 노코드 방식은 복제 가능 요소를 사용하는 방법보다 훨씬 간단합니다. 스타일 지정이 더 쉽고, 사용자 지정 속성, 엄격한 클래스 이름 또는 JavaScript에 대해 걱정할 필요가 없으며, 그냥 작동합니다. 변경하고 싶은 사항이 있다면 Jform으로 돌아가서 비포 애프터 슬라이더 설정을 편집하면 됩니다.

방법 3: 웹플로우 인터랙션(Webflow Interactions)을 사용하여 수동으로 만들기

완벽한 제어 권한을 원하고 다른 사람이 작성한 JavaScript나 외부 위젯을 사용하고 싶지 않은 웹플로우 순수주의자라면, 웹플로우의 기본 인터랙션 엔진인 IX2를 사용하여 슬라이더를 구축할 수 있습니다. 웹플로우에서 사용자 지정 코드 슬라이더를 만드는 것은 단연코 가장 발전되고 복잡한 방법이지만, 외관과 동작을 정확하게 제어할 수 있게 해줍니다.

IX2를 사용하여 자신만의 웹플로우 비교 슬라이더를 만들려면 상대적으로 배치된 컨테이너에 두 개의 이미지를 쌓아야 하며, 각 이미지는 자체 div 블록에 있어야 합니다. 상단 이미지의 경우 div 블록이 마스크 역할을 합니다.

다음으로, 웹플로우 비포 애프터 인터랙션의 경우 마우스 이동(Mouse Move) 인터랙션을 만들어야 합니다. 트리거(Trigger)를 마우스 X(Mouse X)로 설정하고 대상을 마스크 div로 설정합니다. 애니메이션 속성을 너비(Width)로 설정하고 0에서 100% 사이의 범위를 갖도록 합니다. 이렇게 하면 마우스의 X축 이동이 두 이미지 사이의 겹침을 제어합니다.

물론 두 이미지 사이에 구분선이 필요하다면, 이를 직접 만들어야 합니다. 그리고 이 구분선이 마우스 움직임과 완벽하게 동기화되도록 하려면 고급 웹플로우 애니메이션 기술이 필요합니다.

웹플로우의 기본 도구를 사용할 수도 있지만, 모든 것을 제대로 작동하게 하려면 많은 조정 작업과 웹플로우 사용 방법에 대한 깊은 이해가 필요합니다. 또한 모바일 기기에서도 작동하게 하려면 다른 애니메이션을 설정해야 합니다. 제어 권한을 얻는 대신 편의성을 포기하게 되는 셈입니다.

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

웹플로우 비포 애프터 슬라이더를 추가하는 가장 빠르고, 쉽고, 편리한 방법은 Jform 비포 애프터 슬라이더 위젯을 사용하는 것입니다. 웹플로우 이미지 비교 복제 가능 요소를 사용할 때의 단점이 전혀 없으며, IX2를 사용하여 직접 만드는 것보다 훨씬 간단합니다. 견고한 서버리스 옵션을 사용하면 많은 개발 시간을 절약하고 항상 안정적인 반응형 디자인을 보장할 수 있습니다.

게다가 Jform에는 여러분의 사이트를 한 단계 업그레이드할 수 있는 다양한 다른 무료 웹사이트 위젯도 있습니다. Google 리뷰, 접근성 제어, 간단한 맨 위로 이동 버튼, 또는 수십 가지의 다른 유용한 기능을 추가하고 싶으시다면 디렉토리를 둘러보세요. 또한 Jotform-웹플로우 연동을 사용하여 Jform의 강력한 데이터 수집 도구를 사이트에 직접 연결할 수도 있습니다.