고정 배너의 한계와 시각 표현 수정의 실패
토스뱅크는 2026년 9월 22일 공식 기술 블로그인 '토스 테크'를 통해 홈 화면 내 '자산관리 리포트' 기능의 UI 개편 과정과 성과를 공개했습니다. 자산관리 리포트는 사용자의 금융 자산 현황을 분석해 적합한 상품과 서비스를 추천하는 기능입니다. 기존에는 홈 화면의 입출금 계좌 영역 하단에 고정된 직사각형 배너 형태로 노출되어 왔으나 클릭률(CTR)은 2% 수준에 머물렀습니다.
작성자인 김현지 비주얼 디자이너에 따르면, 초기에는 말풍선 형태의 문구 적용이나 자산 분석 상태를 먼저 보여준 뒤 상품을 순차 제안하는 등 시각적·문구적 표현 방식을 바꾸는 시도를 진행했습니다. 그러나 계좌 잔액 확인이라는 사용자의 주요 방문 목적과 새로운 제안을 건네는 추천 리포트가 동일한 화면 평면 위에 혼재되어 있어 시선 충돌과 인지 복잡도 문제를 해소하지 못했습니다.
툴팁 원리를 차용한 플로팅 카드 구조 도입
토스뱅크 디자인팀은 기존 화면 정보를 덮거나 가리지 않고 추가 정보를 보여주는 웹 환경의 툴팁(Tooltip) 메커니즘에서 착안해, 계좌 정보와 추천 제안을 서로 다른 층위(Layer)로 분리하는 '플로팅 카드(Floating Card)' 구조를 설계했습니다. 계좌 정보가 있는 본래 화면 평면 위에 자산 추천 카드를 독립적으로 띄우는 방식입니다.
새로운 영역이 갑작스럽게 노출될 때 발생할 수 있는 팝업 광고 오인을 막기 위해 디자인 규칙도 엄격히 재정립했습니다. 큼직한 비주얼 그래픽과 고채도 원색을 덜어내고, 텍스트와 버튼 위주의 명확한 위계로 앱 기능 본연의 인상을 형성했습니다. 여기에 코너 스무딩(Corner Smoothing)과 반투명 재질감, 미세한 그래디언트 버튼을 적용해 화면 전반의 완성도를 보완했습니다.
사용자 행동 연동과 섬세한 모션 제어
플로팅 카드가 사용자의 본래 작업 동선을 방해하지 않도록 인터랙션 단계도 세밀하게 조정되었습니다. 화면 스크롤이 시작되면 플로팅 카드가 자동으로 작아지며 자리를 비켜주도록 구현해 계좌 확인을 방해받지 않게 했으며, 축소된 카드는 원할 때 언제든 다시 열어볼 수 있는 진입점으로 남겨 두었습니다.
화면 진입 시의 동작도 초기 닫힌 상태에서 시작해 자연스럽게 펼쳐지도록 구성했습니다. 지나치게 빠른 팝업이나 산만한 반동을 배제하고, 빠른 가속 후 부드러운 감속과 미세한 반동을 주는 이징 곡선을 채택했습니다. 특히 위치 이동(translate)과 크기 변화(scale) 모션의 시작점에 시차를 두어 단순 확장이 아닌 곡선 궤적의 유기적인 애니메이션을 연출했습니다.
A/B 테스트 지표와 구조적 개편의 효과
토스뱅크가 공개한 A/B 테스트 결과에 따르면, 기존 배너를 바탕으로 시각 표현만 수정한 인터랙티브 안은 대조군 대비 클릭률(CTR) 상승 폭이 1.1배에 불과했습니다. 반면 플로팅 카드 구조를 적용한 실험군은 CTR과 전환율(CVR)이 모두 3배 올랐습니다. 시각적 그래픽이나 카피 문구를 다듬는 것보다 정보의 구조적 위계를 근본적으로 분리한 결정이 실제 전환에 유의미한 차이를 만들었음을 시사합니다.
토스뱅크 측은 단순 어뷰징이나 오클릭이었다면 CTR만 치솟고 CVR은 정체되었을 것이나, 전환율까지 3배 동반 상승한 점을 근거로 기능 인지부터 추천 수용에 이르는 전 과정의 맥락이 개선된 것이라 해석했습니다. 본래 사용자가 수행하려던 작업을 방해하지 않으면서도 독립된 층위에서 적시에 개인화 제안을 노출한 구조적 접근이 주효했던 것으로 평가됩니다.
실무 적용 시 유의점과 검증 과제
이번 개편 사례는 모바일 환경에서 정보 충돌을 겪는 디자이너들에게 구조적 분리의 유용성을 제시하지만, 실무 도입 시 감안해야 할 불확실성도 명확합니다. 토스 테크 아티클은 사내 정책상 구체적인 모수(N수), 테스트 기간, 통계적 유의도(p-value) 등의 절대 수치를 비공개하고 상대적 배수 지표만 제시했습니다. 따라서 표본의 편향 가능성이나 통계적 신뢰성을 외부에서 온전히 검증하기는 어렵습니다.
또한 전환율(CVR)의 기준이 추천 상품 상세페이지 단순 진입인지, 실제 상품 가입 완료인지 명시되지 않았다는 점도 고려해야 합니다. 신규 인터랙션 도입 초기에 나타나는 '신기 효과(Novelty Effect)'가 사라진 뒤에도 배너 피로도나 반복 닫기 동작에 따른 부정적 경험 없이 이 성과가 장기적으로 유지되는지에 대해서는 추가적인 데이터 추적이 요구됩니다.
출처
토스테크의 원출처와 본문에 표시한 참고자료를 바탕으로 한국어로 재구성했습니다. ‘ARCH.B 분석’은 자료를 읽고 덧붙인 편집 해석입니다.
방해하지 않고, 눈에 띌 수 있을까 (새 창)
