추천이 안 눌릴 때 바꿔야 할 건 표현이 아니라 층이다

추천 배너의 클릭률이 낮으면 디자이너가 가장 먼저 손대는 건 표현입니다. 색을 키우고, 일러스트를 넣고, 문구를 말 걸듯 바꾸죠. 눈에 띄지 않아서 안 눌리는 거라면 더 눈에 띄게 만들면 된다는 계산이에요. 토스뱅크 자산관리 리포트의 개선기는 이 계산이 왜 자주 틀리는지를 숫자로 보여줍니다. 표현을 바꾼 안은 클릭률(CTR)을 1.1배 올리는 데 그쳤고, 구조를 바꾼 안은 CTR과 전환율(CVR)을 모두 3배로 올렸어요.

2%짜리 배너가 안 눌린 진짜 이유

자산관리 리포트는 사용자의 자산 상태를 분석해 맞는 상품이나 서비스를 추천하는 기능입니다. 토스뱅크 홈의 입출금 영역 아래 배너로 붙어 있었는데 클릭률이 2%였어요. 내 상황을 보고 해주는 추천인데도 그냥 지나친 겁니다.

토스뱅크 Visual Designer 김현지 님은 처음엔 표현을 바꿨습니다. 말을 건네듯 제안하는 말풍선, 자산 상태를 먼저 보여주고 상품을 차례로 제안하는 구성. 그런데 화면은 여전히 복잡했어요. 저마다의 목적으로 찾아온 화면 위에 읽을거리 하나를 더 얹는 구조는 그대로였으니까요.

디자이너가 찾은 원인은 역할의 충돌이었습니다. 계좌는 사용자의 정보고, 리포트는 토스뱅크가 새로 건네는 제안입니다. 역할이 다른 둘이 한자리에서 시선을 나누다 보니, 계좌 정보를 훑는 흐름에 리포트도 함께 쓸려 지나갔어요. 그렇다고 리포트만 강조하면 계좌를 확인하러 온 사람이 정작 필요한 정보를 못 보게 됩니다. 표현을 아무리 다듬어도 같은 층에 있는 한 둘은 계속 경쟁해요. 저는 이 진단이 이 글의 핵심이라고 봅니다. 클릭률 문제처럼 보였던 게 사실은 정보 구조의 문제였던 거죠.

툴팁에서 가져온 '다른 층'

해법은 웹의 툴팁에서 왔습니다. 툴팁은 기존 화면을 가리지 않고 그 위에 필요한 정보를 덧붙여 보여주죠. 이 구조를 모바일로 가져와, 계좌 정보가 있는 기본 화면은 그대로 두고 자산 상태에 대한 제안은 그 위에 떠 있는 플로팅 카드로 분리했습니다. 같은 화면 안에서 정보와 제안이 서로 다른 층에 놓인 거예요.

층을 나누면 경쟁이 사라집니다. 계좌를 보러 온 사람은 기본 층에서 원래 하던 일을 하고, 제안은 위층에서 자기 자리를 차지해요. 시선이 같은 목록 안에서 분배되는 게 아니라, 처음부터 두 개의 독립된 대상으로 인식되는 셈입니다.

떠 있는 카드가 광고로 보이지 않으려면

물론 화면에 없던 영역을 새로 띄우는 건 위험합니다. 원하지 않았는데 갑자기 나타나면 정보가 아니라 방해물이고, 내용을 읽기도 전에 닫기 버튼부터 찾게 되죠. 디자이너는 이 위험을 세 가지 결정으로 다뤘습니다.

첫째는 첫인상입니다. 화면 위에 뜬 카드는 팝업 광고와 생김새가 비슷하니, 토스 안의 배너들을 놓고 광고와 기능이 어떻게 다르게 보이는지 비교했어요. 광고는 큼직한 그래픽과 눈에 띄는 컬러로 시선을 끌었고, 기능은 텍스트와 버튼 중심의 위계로 내용을 전하고 있었습니다.

그래서 리포트에서는 그래픽과 컬러를 덜어내 내용에 시선이 먼저 닿게 했고, 대신 코너 스무딩과 반투명한 재질감, 버튼의 미세한 그래디언트로 완성도를 채웠습니다. 저는 이 결정이 가장 영리하다고 봐요. 사람들은 광고의 시각 문법을 학습해서 무시합니다. 더 화려하게 만들수록 오히려 그 무시의 대상이 되기 쉽죠. 눈에 띄려고 장식을 뺀 셈입니다.

둘째는 스크롤하면 카드가 작아지게 한 것입니다. 사용자가 화면을 둘러보기 시작하면 자리를 내주고, 작아진 카드는 궁금할 때 다시 여는 진입점으로 남아요. 셋째는 움직임입니다. 홈에 들어오면 카드는 닫힌 상태에서 펼쳐지는데, 빠르게 툭 튀어나오면 부담스럽고, 느리면 화면이 굼떠 보이고, 반동이 크면 자산 정보를 보여주기엔 산만했습니다. 최종적으로 빠르게 시작해 부드럽게 감속하고 끝에 살짝 반동을 주는 이징을 골랐고, translate와 scale 모션의 시작점을 일부러 어긋나게 해 곡선을 그리며 열리게 했어요.

3배라는 숫자를 어디까지 믿을까

A/B 테스트에서 표현을 바꾼 인터랙티브 안은 CTR이 1.1배, 구조를 바꾼 플로팅 안은 CTR과 CVR이 모두 3배였습니다. 기존 안까지 세 안을 나란히 붙인 테스트라 표현과 구조의 차이가 비교적 깨끗하게 갈렸어요. 2%였던 클릭률로 치면 6% 수준이 된 셈이에요. 팀이 특히 전환율을 눈여겨본 것도 좋았습니다. 클릭만 늘었다면 그저 눈에 잘 띄어서 눌린 것일 수 있지만, 클릭 이후 행동까지 함께 늘었다는 건 추천 경험 자체가 달라졌다는 뜻이니까요.

다만 저라면 두 가지를 더 보고 싶습니다. 하나는 지속성이에요. 새로 나타난 카드는 처음 몇 주 동안 신기해서 눌리기 쉽습니다. 3배가 몇 달 뒤에도 유지되는지가 진짜 성적표입니다. 다른 하나는 방해의 비용입니다. 카드를 바로 닫는 비율, 계좌 정보를 확인하기까지 걸리는 시간, 홈 화면 이탈률 같은 숫자가 같이 공개됐다면, 이 해법이 정말 '방해하지 않고' 눈에 띄었는지 판단하기 훨씬 쉬웠을 거예요.

그리고 이 해법을 따라 하려는 팀이 꼭 정해야 할 게 있습니다. 위층은 공짜가 아니라 공유 자원이라는 점이에요. 리포트 카드가 3배를 냈다는 소식을 들은 다른 팀들이 저마다 홈 위에 카드를 띄우기 시작하면, 다른 층이라는 이점은 금방 사라지고 홈은 팝업이 겹겹이 쌓인 화면이 됩니다. 저는 플로팅 층을 쓰기로 했다면 '동시에 떠 있는 카드는 하나', '누구에게 어떤 카드를 띄울지는 한 곳에서 결정' 같은 규칙을 해법과 함께 만들어야 한다고 봐요. 다른 층에 두는 힘은 그 층이 비어 있을 때만 나오니까요.