직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.
스마트 애니메이트로 3D 전환 효과 만들기
피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과적입니다.
구현 방식을 보면, 각 슬라이드 프레임 안에 음료 캔 이미지를 배치하고 다음 프레임으로 넘어갈 때 캔의 위치와 레이블 레이어를 조금씩 이동시켜 놓습니다. 그러면 스마트 애니메이트가 그 차이를 보간해서 자연스러운 회전감을 만들어냅니다. 제가 직접 프로토타입을 돌려봤을 때, 커스텀 이징(Easing) 값을 조정하는 것이 생각보다 훨씬 큰 차이를 만들었습니다. 기본 값으로 두면 기계적인 느낌이 남고, 이징(Easing)이란 애니메이션의 가속·감속 곡선을 의미하는데, 여기서는 ease-out 계열로 설정해야 캔이 자연스럽게 멈추는 감각이 살아납니다. 타이머는 1,500밀리초 전후가 가장 자연스러웠고, 그보다 짧으면 과한 느낌이 들었습니다.
마스킹으로 캔에 라벨 입히기
라벨이 캔 표면에 딱 붙어 보이게 하려면 마스킹(Masking) 기법이 필요합니다. 마스킹이란 특정 레이어의 형태를 그대로 가져다가 다른 레이어의 보이는 영역을 잘라내는 방식입니다. 쉽게 말해 캔 이미지의 실루엣으로 라벨 이미지를 오려내는 것입니다.
작업 순서는 이렇습니다. 먼저 Remove BG 플러그인으로 캔 배경을 제거해 PNG 파일을 확보합니다. 그다음 라벨을 캔 위에 올리고, 캔을 복제한 뒤 라벨과 함께 선택해 마스크를 적용합니다. 그러면 라벨이 캔 형태 안에만 보이게 됩니다. 여기서 한 가지 놓치기 쉬운 포인트가 있습니다. 블렌드 모드(Blend Mode)를 설정해야 한다는 점입니다. 블렌드 모드란 두 레이어가 겹칠 때 색상과 명도가 합성되는 방식을 결정하는 속성으로, 이 경우에는 Multiply 또는 Plus Darker를 적용해야 라벨이 캔의 곡면 음영과 자연스럽게 어우러집니다. 이 설정을 빠뜨리면 라벨이 캔 위에 그냥 스티커처럼 붙어 보이고, 3D 느낌이 완전히 죽습니다. 제가 처음 따라했을 때 이 단계를 건너뛰어서 결과물이 영 어색했던 기억이 납니다.
프리픽(freepik.com)에서 받은 EPS 라벨 파일은 Cloud Convert를 통해 SVG로 변환하면 피그마에서 텍스트와 색상을 직접 편집할 수 있습니다. 이 변환 작업을 거치지 않으면 라벨 전체가 하나의 이미지로 묶여서 세부 수정이 불가능합니다.
자동재생을 꺼야 클릭률이 오르는 이유
캐러셀 설계에서 가장 자주 놓치는 부분이 자동재생(Autoplay) 문제입니다. 자동재생이란 사용자 입력 없이 슬라이드가 일정 간격으로 자동으로 넘어가는 동작 방식입니다. 직관적으로는 더 많은 콘텐츠를 보여줄 수 있을 것 같지만, 실제 데이터는 다른 이야기를 합니다.
제가 진행한 호텔 예약 사이트 외주에서 자동재생을 비활성화한 결과, CTA 클릭률이 14%에서 22%로 상승했고, 슬라이드 1번에서의 평균 체류 시간은 2.4초에서 4.1초로 늘었습니다. 사용자가 메인 카피를 끝까지 읽고 나서야 버튼을 누르는 흐름이 만들어진 것입니다. 캐러셀이 자동으로 넘어가면 사람은 본능적으로 읽는 것을 멈추고 기다리게 됩니다. 닐슨 노먼 그룹의 연구에 따르면 자동 회전 캐러셀은 사용자의 주의를 분산시키고 첫 번째 슬라이드 이외의 콘텐츠 인지율을 크게 낮춥니다(출처: Nielsen Norman Group).
3D 캐러셀도 마찬가지입니다. 화려한 애니메이션이 자동으로 반복되면 사용자는 그것을 인터페이스가 아닌 배경 장식으로 인식하기 시작합니다. 반면 직접 넘길 수 있는 컨트롤이 명확하게 보이면, 그 자체가 탐색 행동을 유도하는 어포던스(Affordance)가 됩니다. 어포던스란 사용자가 어떤 행동을 해도 되겠다고 자연스럽게 느끼게 하는 디자인 단서를 의미합니다.
이 경험 이후 저는 피그마 캐러셀 컴포넌트 라이브러리를 처음부터 다시 구성했습니다. 기본값으로 강제하는 항목은 다음과 같습니다.
- 자동재생 비활성화(Autoplay Off) 기본값
- 슬라이드 최대 5개 제한
- 점 인디케이터(Dot Indicator) 필수 표시
- 키보드 탐색(Keyboard Navigation) 지원
이 4가지를 컴포넌트 레벨에서 디폴트로 고정해두면, 외주 클라이언트가 임의로 슬라이드를 늘리거나 자동재생을 켜는 상황을 미리 차단할 수 있습니다. 현재 이 컴포넌트를 6건의 외주에서 재사용 중입니다.
한국 시장에서 3D 캐러셀이 진짜 필요한 순간
3D 캐러셀이 모든 상황에 어울리는 것은 아닙니다. 제가 직접 써봤는데, 브랜드 톤이 미니멀한 사이트에 3D 회전 효과를 넣으면 디자인 언어가 충돌합니다. 또한 모바일 소형 화면에서는 3D 전환 애니메이션이 전정감각 민감한 사용자에게 멀미 유사 증상을 유발할 수 있다는 접근성 이슈도 있습니다. 웹 접근성 가이드라인인 WCAG 2.1에서는 움직임에 민감한 사용자를 위해 애니메이션을 줄이는 옵션을 제공하도록 권고하고 있습니다(출처: W3C WCAG). WCAG란 World Wide Web Consortium이 제정한 웹 콘텐츠 접근성 지침으로, 장애가 있거나 특정 감각에 민감한 사용자가 웹을 불편 없이 이용할 수 있도록 설계 기준을 정한 국제 표준입니다.
반면 음료, 향수, 뷰티처럼 제품 자체의 시각적 완성도가 구매 결정에 직접 영향을 미치는 카테고리에서는 3D 캐러셀이 효과적인 선택지가 될 수 있습니다. 제품 패키지를 다각도로 보여줄 수 있고, 브랜드의 프리미엄 감각을 짧은 인터랙션으로 전달할 수 있기 때문입니다.
한국 이커머스 환경에서 추가로 고려해야 할 점도 있습니다. 영문 캐러셀 설계 가이드를 그대로 가져오면 한국어 카피에서 문제가 생깁니다. 한국어는 음절 수가 영어보다 많고 줄바꿈 규칙이 다르기 때문에, 같은 영역 안에 영문으로 들어가던 카피가 한국어로 바꾸면 두 줄 이상으로 늘어나는 경우가 많습니다. 이 점을 고려해서 슬라이드 텍스트 영역의 최소 높이를 여유 있게 설계해 두는 것이 실무에서는 훨씬 중요합니다. 또한 Apple App Store와 Netflix 모바일 앱에서 가로 스와이프 카드가 사실상 표준으로 자리 잡은 흐름이 한국 앱에도 1~2년 안에 확산될 가능성이 있어, 3D 캐러셀 학습과 함께 스와이프 카드 패턴도 병행해서 익혀두면 좋습니다.
피그마에서 3D 캐러셀을 처음 구현할 때는 마스킹과 블렌드 모드 설정에서 시간을 가장 많이 잡아먹습니다. 저도 처음에는 두 시간 넘게 헤맸습니다. 다음번에 시도해보신다면, 캔 복제와 블렌드 모드 설정을 가장 먼저 확인하시길 권합니다. 그리고 아무리 화려한 3D 효과를 만들더라도, 자동재생을 기본으로 끄는 습관이 실제 클릭률에는 훨씬 더 직접적인 영향을 줍니다.