토스뱅크, 자산관리 리포트 '플로팅 카드' 도입으로 CTR·CVR 3배 상승

토스뱅크는 기존 입출금 영역 하단에 배치된 자산관리 리포트의 낮은 클릭률(2%) 문제를 해결하기 위해 디자인 구조를 전면 개편했다. 초기에는 말풍선이나 개인화된 메시지 등 표현 방식을 다양하게 시도했으나, 계좌 정보와 추천 내용이 한 화면에 섞여 있어 사용자의 시선이 분산되는 근본적인 문제를 해결하지 못했다.

구조적 접근: 플로팅 카드 도입

설계팀은 계좌 정보와 리포트의 역할을 명확히 분리하기 위해 플로팅 카드(Floating Card) 방식을 도입했다. 이는 웹사이트 툴팁처럼 기존 화면을 가리지 않으면서 그 위에 정보를 덧붙이는 구조로, 사용자가 계좌를 확인하는 본래 작업을 방해하지 않으면서도 추천 기능을 눈에 띄게 했다.

플로팅 카드가 광고처럼 인식되지 않고 자연스럽게 받아들여지도록 다음 세 가지 원칙을 적용했다:

• 내용 우선 디자인: 그래픽과 컬러를 최소화하고 텍스트와 버튼을 중심으로 정보 위계를 구성해 기능으로서의 신뢰감을 높였다.
• 동적 크기 조절: 스크롤 시 카드가 작아져 다른 콘텐츠에 공간을 내어주고, 필요할 때 다시 열 수 있는 진입점으로 남도록 했다.
• 자연스러운 모션: 빠르게 시작해 부드럽게 감속하고 끝에 살짝 반동을 더한 이징을 적용해, 화면이 먼저 보인 후 제안이 펼쳐지는 느낌을 구현했다.

성과 및 시사점

A/B 테스트 결과, 표현만 바꾼 인터랙티브 안은 CTR이 1.1배 오르는 데 그친 반면, 구조를 바꾼 플로팅 안은 CTR과 CVR(전환율) 모두 3배 상승했다. 특히 클릭 이후의 행동까지 함께 늘어난 것은 사용자가 리포트를 단순히 발견한 것을 넘어 실제 추천으로 이어지는 경험이 개선되었음을 의미한다.

이번 사례는 디자인 문제가 해결되지 않을 때 표현 방식이 아닌 구조 자체를 재검토해야 함을 보여준다. 사용자의 시선을 끄는 데서 그치지 않고, 이후의 경험까지 고려한 구조적 접근이 핵심이었다.