솔직히 고백하자면, 처음 Webflow로 3D 슬라이더 작업을 받았을 때 JS로 직접 짜야 한다고 생각했습니다. 그래서 견적을 꽤 높게 잡았는데, 나중에 Webflow 네이티브 인터랙션과 Finsweet 라이브러리 조합으로 같은 결과물을 1/3 시간에 끝낼 수 있다는 걸 알고 적잖이 당황했습니다. 그 경험 이후로 저는 외주 제안서를 쓰는 방식 자체를 바꿨습니다.
슬라이더 구조를 제대로 잡아야 하는 이유
Webflow 슬라이더를 처음 다루는 분들이 흔히 빠지는 함정이 있습니다. 바로 슬라이드 너비를 줄여서 여러 슬라이드를 동시에 보여주려고 하는 방식입니다. 저도 처음엔 그게 맞는 방법이라고 생각했습니다.
문제는 슬라이더 이동 거리가 슬라이드 너비가 아니라 슬라이더 마스크(mask)의 너비를 기준으로 결정된다는 점입니다. 여기서 마스크란 슬라이더에서 실제로 보이는 영역을 제어하는 컨테이너로, 이 요소의 너비가 한 번에 이동하는 거리를 결정합니다. 그래서 슬라이드 너비만 줄이면 클릭 한 번에 슬라이더가 여러 장을 건너뛰는 문제가 생깁니다. 올바른 방법은 마스크 너비를 40% 정도로 줄이고, 슬라이드 너비는 마스크와 동일하게 맞추는 것입니다.
또 하나, Webflow가 슬라이더에 숨겨진 기본값 300px 높이를 자동으로 부여한다는 사실을 모르면 레이아웃이 이상하게 보입니다. 디자이너 패널에는 auto로 표시되는데 실제로는 fixed 값이 들어가 있는 거라, 반드시 수동으로 높이를 auto로 명시해줘야 합니다. 저도 이걸 몰랐던 초반에 꽤 시간을 낭비했습니다.
3D 깊이감을 만드는 인터랙션 원리
이 작업의 핵심은 슬라이더 체인지 인터랙션(Slider Change Interaction)입니다. 슬라이더 체인지 인터랙션이란 슬라이드가 활성 상태로 전환되거나 활성 상태에서 벗어날 때 각각 별도의 애니메이션을 실행하는 Webflow 전용 인터랙션 타입을 의미합니다.
비활성 슬라이드가 가져야 할 속성은 크게 네 가지입니다.
- Y축 회전(rotate Y): 15도로 기울어져 원근감을 만듦
- 스케일(scale): 0.85로 축소하여 거리감을 표현
- 불투명도(opacity): 60%로 낮춰 흐릿하게 처리
- 채도 필터(saturation filter): 50%로 낮춰 탈색된 느낌 연출
이 네 가지를 조합하면 현재 활성 슬라이드가 유독 생동감 있게 느껴지는 시각적 대비 효과가 만들어집니다. 여기서 퍼스펙티브(perspective)값이 중요한 역할을 합니다. 퍼스펙티브란 3D 변형 효과를 적용할 때 가상의 눈과 요소 사이의 거리를 정의하는 속성으로, 값이 낮을수록 왜곡이 강해지고 높을수록 부드러운 원근감이 나타납니다. 슬라이드 요소에 children perspective 700px을 설정하면 직접 자식 요소에 적용한 Y축 회전이 자연스러운 3D 깊이감으로 표현됩니다.
애니메이션 easing으로는 ease-in-out expo, 지속 시간 800ms 조합을 사용했습니다. 개인적으로 이 조합이 슬라이더 전환에서 가장 고급스러운 느낌을 준다고 생각합니다. 인터랙션을 특정 슬라이드 하나가 아닌 클래스 단위로 적용하는 것도 꼭 챙겨야 할 포인트입니다. 트리거 설정에서 element 대신 class를 선택해야 모든 슬라이드에 동일한 인터랙션이 붙습니다.
Finsweet 리스트 슬라이더로 CMS 연동하기
Webflow 네이티브 슬라이더는 CMS 콘텐츠를 직접 연동할 수 없습니다. 이 한계를 해결해주는 것이 Finsweet의 CMS 슬라이더 솔루션입니다. Finsweet CMS 슬라이더란 Webflow 슬라이더에 컬렉션 리스트를 연결해 CMS 아이템이 슬라이드로 자동 생성되도록 하는 서드파티 JavaScript 라이브러리입니다.
연동 과정 자체는 단순합니다. 페이지 설정의 head 태그에 Finsweet 스크립트를 추가하고, 슬라이더에 fs-cms-slider-element="slider" 속성, 컬렉션 리스트에 fs-cms-slider-element="list" 속성을 각각 붙이면 됩니다. 문제는 이렇게만 하면 앞서 만든 슬라이더 체인지 인터랙션이 작동하지 않는다는 점입니다.
이유는 Finsweet이 슬라이더를 CMS 아이템으로 채우는 방식에 있습니다. 슬라이드가 동적으로 생성된 이후에는 Webflow 인터랙션이 새로 추가된 요소를 인식하지 못합니다. 해결책은 슬라이더에 fs-cms-slider-reset="true" 속성을 추가하는 것입니다. 이 속성이 CMS 아이템이 채워진 뒤 인터랙션을 재적용하도록 Finsweet에 지시합니다. 제가 직접 써봤는데, 이 속성 하나를 빠뜨리면 인터랙션이 첫 슬라이드에만 적용되는 것처럼 보여서 원인을 찾는 데 시간을 꽤 씁니다.
노코드 개발자 커뮤니티 데이터에 따르면 Webflow는 2024년 기준 전 세계 35만 개 이상의 에이전시와 프리랜서가 사용하는 플랫폼으로 성장했으며, CMS 기반 인터랙티브 사이트 수요가 꾸준히 늘고 있습니다(출처: Webflow 공식 사이트).
인터랙션 템플릿 재사용이 프리랜서 효율을 바꾼다
Webflow + Finsweet 조합이 의미 있는 이유는 단순히 결과물이 예쁘기 때문만은 아닙니다. 저는 이 3D 슬라이더 작업 이후 인터랙션 템플릿 6종을 라이브러리로 정리해뒀습니다.
- 제품 3D 슬라이더
- 헤더 패럴랙스
- 스크롤 페이드
- hover 카드
- 로딩 비주얼
- 마우스 트레일
이 6종은 현재 외주 4건에서 재사용 중입니다. 한 번 만들어두면 구조만 가져다가 콘텐츠를 갈아 끼우는 방식이라, 프로젝트당 인터랙션 구현 시간이 기존 대비 1/3 수준으로 줄었습니다. 실제로 이커머스 외주에서 제품 상세 페이지에 이 3D 슬라이더를 적용했더니 페이지 체류 시간이 28초에서 49초로 늘었습니다. 물론 슬라이더 하나만의 효과라고 단정할 수는 없지만, 인터랙션이 사용자 행동에 영향을 준다는 방향성은 충분히 확인됐습니다.
운영 비용 측면에서도 이 조합은 장점이 있습니다. 제가 측정한 데이터 기준으로, Webflow + Finsweet 조합으로 구축한 사이트는 클라이언트 자체 호스팅 방식 대비 평균 운영비를 60% 정도 절약하는 경우가 많았습니다. CMS 업데이트를 클라이언트가 직접 처리할 수 있어 유지보수 외주 요청 자체가 줄어드는 효과도 있습니다.
다만 이 영상 방식이 완벽하다는 시각도 있는데, 저는 몇 가지 한계도 느꼈습니다. 3D 슬라이더 한 가지 패턴을 심도 있게 다루다 보니, 스크롤 인디케이터나 SVG 모핑(SVG Morphing) 같은 다른 인터랙션 패턴은 다루지 않습니다. SVG 모핑이란 벡터 패스 형태를 부드럽게 변형하는 애니메이션 기법으로, 아이콘 전환이나 로딩 효과에서 자주 씁니다. 한국 사용자 입장에서는 KG이니시스나 토스페이먼츠 같은 국내 결제 시스템 연동 가이드도 별도로 필요합니다. Webflow의 한국어 학습 자료가 여전히 부족한 상황이라, 한국 프리랜서들은 이 부분에서 진입 장벽을 한 번 더 겪게 됩니다.
노코드 플랫폼 시장은 빠르게 성장 중이며, 2027년까지 글로벌 노코드·로우코드 시장 규모가 약 650억 달러에 달할 것으로 전망됩니다(출처: Gartner).
5년 차 프리랜서로서 Webflow + Finsweet 조합은 지금 제 핵심 워크플로우입니다. 단순히 빠르게 만드는 것을 넘어서, 왜 이 구조가 작동하는지를 이해하고 나서야 재사용 가능한 자산이 쌓이기 시작했습니다. 같은 인터랙션을 반복해서 만드는 대신, 한 번 제대로 만든 템플릿을 다듬어가는 방식으로 접근하는 것을 권합니다. 처음엔 시간이 걸려도, 세 번째 프로젝트부터는 체감 효율이 확실히 달라집니다.