방해하지 않고, 눈에 띌 수 있을까
김현지 토스 · 토스 기술 블로그
AI 핵심 요약
토스뱅크 자산관리 리포트는 홈 배너 클릭률이 2%에 머물렀고, 주변 정보에 묻혀 개인화된 추천으로 인식되지 않는다는 가설에서 개선을 시작했어요. 말풍선이나 추천 순서 변경만으로는 복잡한 화면이 달라지지 않아, 계좌 정보와 리포트의 역할을 분리하는 플로팅 카드 구조를 만들었습니다. 카드에는 내용이 먼저 보이는 디자인을 적용하고, 스크롤 시 작아지게 했으며, 자연스러운 진입을 위해 이징과 translate·scale 모션의 시작 시점도 조정했어요. A/B 테스트에서 표현을 바꾼 안은 CTR이 1.1배 오른 반면 플로팅 안은 CTR과 CVR이 모두 3배 상승해, 문제에 따라 표현보다 구조를 바꾸는 것이 효과적일 수 있음을 확인했습니다.
- 클릭률이 낮을 때는 문구나 그래픽을 바꾸기 전에 정보들이 화면에서 어떤 역할과 위치를 차지하는지 살펴보세요.
- 기존 콘텐츠를 가리지 않는 플로팅 UI도 갑작스러운 노출로 방해가 될 수 있으므로, 내용 중심의 시각 위계로 광고와 구분해야 합니다.
- 사용자의 스크롤에 맞춰 카드를 축소하면 추천을 유지하면서도 다른 콘텐츠를 볼 공간을 내어줄 수 있습니다.
- 모션은 속도와 반동뿐 아니라 translate와 scale의 시작 시점을 조정해 움직임의 인상을 세밀하게 다듬을 수 있습니다.
소개
CVR을 3배 높이면서도 사용자 경험을 놓치지 않기 위해 고민한 과정을 들려드려요.
비슷한 학습 자료
문서 김경윤
토스뱅크가 AI로 보안과 효율도 챙기는 방법
문서 박성경
레거시 제품을 버리고 CS 효율 높이기
문서 박다롱
추천할 때는 제일 좋은 것 하나면 된다
문서 강효정