Read Original
#Design

방해하지 않고, 눈에 띌 수 있을까

방해하지 않고, 눈에 띌 수 있을까
01

Summary

토스뱅크 클릭률 3배 폭발! 배너를 '치우고' 플로팅 카드로 바꾼 비결

디자인 스타일만 바꾸는 대신 정보의 구조와 인터랙션을 재정의하여 사용자 전환율을 극대화한 디자인 혁신 여정

본 아티클은 토스뱅크 자산관리 리포트의 저조한 클릭률을 극복하기 위해 비주얼 개선을 넘어 UI 구조를 혁신한 사례를 다룹니다. 기존 계좌 정보와 추천 영역을 시각적으로 분리하고 사용자 행위에 유연하게 반응하는 플로팅 카드를 구현하였습니다. 단순한 심미적 수정을 넘어 구조와 인터랙션의 전환이 실제 비즈니스 지표 성장에 거대한 영향을 미칠 수 있음을 증명합니다.

  • 01구조를 바꾼 플로팅 카드 안을 통해 CTR 및 CVR 3배 동시 달성 성공
  • 02계좌 정보와 제안 영역의 시선 충돌을 막기 위해 툴팁 구조를 적용한 상위 레이어 플로팅 카드 설계
  • 03사용자 스크롤 시 카드가 축소되는 유동적인 형태로 설계하여 본래의 정보 탐색을 방해하지 않음
  • 04팝업 광고처럼 보이지 않도록 컬러와 그래픽을 배제하고 코너 스무딩, 반투명 효과 등 완성도 높은 디테일 구현
  • 05Translate와 Scale 모션의 시작점에 미세한 시차를 두어 곡선형 궤적을 그리는 생동감 있는 인터랙션 적용

RECOMMENDATION

화면 내에 정보가 밀집하여 핵심 피처의 노출도가 낮거나, 배너 디자인의 단순 변경만으로는 더 이상 전환율이 오르지 않아 한계를 느끼고 있는 프로덕트 디자이너 및 프론트엔드 개발자에게 적극 추천합니다.

The Problem

토스뱅크의 자산관리 리포트 기능은 유용한 개인화 추천 서비스임에도 불구하고, 기존 계좌 정보 영역 하단 배너에 노출될 때 정보 혼재로 인해 클릭률(CTR)이 2% 수준에 머물렀습니다. 계좌를 확인하려는 본래 목적을 방해하지 않으면서도 맞춤형 제안임을 인지시키는 레이아웃 분리가 필요했습니다.

The Solution

정보의 시선 경쟁을 해소하기 위해 툴팁 구조에서 착안하여 계좌 영역 위에 별도 레이어로 떠 있는 플로팅 카드를 도입했습니다. 광고처럼 인지되지 않도록 시각 요소를 비워내고 디테일을 강화했으며, 스크롤 행동에 따라 카드를 축소하고 모션 타이밍에 시차를 주는 섬세한 마이크로 인터랙션을 설계했습니다.

The Result

A/B 테스트 결과, 기존 스타일 변경 시안은 CTR이 1.1배 상승에 그친 반면, 플로팅 카드 기반의 구조 개선 시안은 클릭률(CTR)과 전환율(CVR) 모두 기존 대비 3배 상승하는 정량적 성과를 거두었습니다.

Trade-off

플로팅 카드는 자칫 팝업 광고처럼 유저에게 피로감을 줄 위험이 있어 디자이너가 미세한 모션의 이징 값과 디테일을 하나하나 다듬는 수고가 필수적이었으며, 강렬한 그래픽 요소를 포기하고 은은한 비주얼 톤을 유지해야 하는 제약이 따랐습니다.

03

Key Concepts

Concept · 01

플로팅 카드 (Floating Card)

기존 레이아웃의 구성을 훼손하지 않으면서 화면 위에 독립적인 레이어로 정보를 띄워 사용자 주목도를 높이는 UI 컴포넌트입니다.

  • 기존 화면 하단의 리포트 영역을 계좌 정보와 다른 층에 떠 있는 플로팅 카드로 격상시켜 상호 간섭 최소화
Concept · 02

스크롤 미니마이징 (Scroll Minimizing)

사용자의 스크롤 입력이 발생하면 플로팅 카드가 작은 상태로 축소되면서 본문 영역을 확보하고 가독 방해를 최소화하는 동적 UI 제어 기법입니다.

  • 사용자가 탐색을 시작할 때 카드를 소형화하여 방해 요소를 줄이고 다시 열어볼 수 있는 진입점으로 유지함
Concept · 03

모션 시차 이징 (Off-sync Easing)

위치 이동과 크기 변화 등 다수의 인터랙션 요소들이 각기 다른 타이밍과 감속 패턴을 가져가며 부드럽고 생동감 있는 곡선 궤적을 연출하는 디자인 제어 방식입니다.

  • Translate와 Scale 모션의 시작 시점을 다르게 주어 곡선을 그리듯 움직이는 디테일로 자연스러운 제안 느낌 부여