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

안녕하세요. 토스뱅크 Visual Designer 김현지입니다. 오늘은 자산관리 리포트 기능의 클릭률을 3배로 올리기까지의 과정, 그리고 그 안에서 얻은 러닝을 이야기해 보려고 해요.

유용한 추천인데 왜 누르지 않을까

자산관리 리포트는 사용자의 자산 상태를 분석해 알맞은 상품이나 서비스를 추천하는 기능이에요. 토스뱅크 홈의 입출금 영역 아래에 배너로 노출하고 있었는데, 클릭률이 2%에 그쳤어요.

내 상황을 보고 해주는 추천인데, 왜 눌러보지 않을까요? 여러 가설을 세워본 끝에, 토스뱅크 홈에는 정보가 많다 보니 주변 정보와 충분히 구분되지 않아 그냥 지나칠 수 있겠다고 생각했어요.

그래서 리포트가 눈에 잘 띄면서도, 내 상황에 맞는 개인화된 추천이라는 점이 한눈에 느껴지도록 디자인하는 것을 목표로 잡았어요.

표현을 바꿔도 화면은 여전히 복잡한 이유

먼저 표현 방식을 바꿔봤어요. 말을 건네듯 제안하는 말풍선 형태, 사용자의 자산 상태를 먼저 보여준 뒤, 그에 맞는 상품을 차례로 제안하는 방식도 만들어봤죠. 직접 말해주는 것처럼 표현하면 추천이 더 와닿을 것 같았어요.

그런데 화면은 여전히 복잡했어요. 저마다의 목적으로 찾아온 화면 사이에 읽을거리를 하나 더 얹는 구조는 달라지지 않았거든요.

문제는 계좌 정보와 추천이 같은 자리에서 시선을 나누고 있다는 것이었어요. 계좌는 사용자의 정보이고, 리포트는 저희가 새롭게 건네는 제안이에요. 역할이 다른 둘이 한데 섞여 있다 보니, 리포트도 계좌 정보를 훑어보는 과정에서 함께 지나치기 쉬웠어요.

그렇다고 리포트만 무작정 강조할 수도 없었어요. 계좌를 확인하려는 사람에게 리포트가 먼저 보이면, 정작 필요한 정보가 잘 보이지 않을 수 있었어요.

리포트를 발견하게 하면서도, 하려던 일을 방해하지 않는 방법을 찾아야 했어요. 그래서 리포트의 위치 자체를 다시 생각했어요. 계좌 정보와 한자리에서 경쟁하게 하는 대신, 아예 다른 자리에서 보여주면 어떨까 하고요.

툴팁에서 찾은 새로운 영역

떠올린 건 웹사이트에서 마우스를 올렸을 때 나타나는 툴팁이에요. 툴팁은 기존 화면을 가리지 않으면서, 필요한 정보를 그 위에 덧붙여 보여주잖아요.

이 구조를 모바일에도 가져왔어요. 계좌 정보가 있는 기본 화면은 그대로 두고, 자산 상태에 대한 제안은 그 위에 떠 있는 플로팅 카드로 분리했어요. 같은 화면 안에서도 계좌 정보와 추천이 서로 다른 층에 놓이도록 한 거예요.

하지만 화면에 없던 영역을 새로 띄우는 건 또 다른 문제를 만들 수 있었어요. 사용자가 원하지 않았는데 갑자기 나타나면, 정보가 아니라 방해물처럼 느껴질 수 있으니까요. 광고처럼 보이거나, 내용을 읽기도 전에 닫기 버튼부터 찾게 될 수도 있고요.

그래서 플로팅 카드가 사용자에게 자연스럽게 받아들여지려면 어떻게 해야 할지 하나씩 정해갔어요.

1 ) 내용이 먼저 보이는 첫인상 만들기

화면 위에 떠 있는 카드는 팝업 광고와 형태가 비슷했어요. 내용을 읽기도 전에 광고처럼 보일 수 있겠다는 걱정이 들었어요.

그래서 광고와 기능이 사용자에게 어떻게 다르게 보이는지 토스 안의 배너를 비교해 봤어요. 광고는 큼직한 그래픽과 눈에 띄는 컬러로 시선을 끌고 있었고, 기능은 텍스트와 버튼을 중심으로 정보의 위계로 내용을 전하고 있었어요.

리포트도 기능처럼 느껴지게 하려면 비주얼적 요소보다 내용이 먼저 보여야 한다고 생각했어요. 그래서 그래픽과 컬러를 덜어내고, 내용에 시선이 먼저 닿도록 했어요.

대신 디테일로 채웠어요. 모서리에는 코너 스무딩을 넣고, 반투명한 재질감을 더해 화면에 자연스럽게 어우러지도록 했어요. 버튼에는 미세한 그래디언트를 더해 밀도를 높였고요. 작은 디테일을 하나씩 쌓아 기능으로서의 완성도를 높여갔어요.

2 ) 스크롤 하면 작아지게

리포트를 발견한 뒤에도 계속 시선을 요구하면 부담스러울 수 있었어요. 사용자는 추천을 읽고 싶을 수도 있지만, 당장은 다른 정보를 먼저 보고 싶을 때도 있으니까요.

그래서 스크롤을 시작하면 리포트가 작아지도록 했어요. 사용자가 화면을 둘러보기 시작하면 자리를 내어주고, 다른 콘텐츠를 편하게 볼 수 있게 한 거죠. 작아진 카드는 궁금할 때 다시 열어볼 수 있는 진입점으로 남아요.

리포트가 얼마나 눈에 띌지를 한 가지 상태로 고정하지 않고, 사용자의 행동에 따라 달라지게 했어요.

3 ) 말을 건네듯 펼쳐지게

홈에 들어오면 리포트는 닫힌 상태에서 시작해 펼쳐져요. 화면이 먼저 보인 뒤 카드가 열리면, 지금 내 자산 상태를 보고 건네는 제안처럼 느껴질 것이라고 생각했어요. 열리고 닫히는 과정을 자연스럽게 보여주면서, 언제든 다시 닫을 수 있다는 것도 전하고 싶었고요.

그 느낌을 만들기 위해 움직임의 결도 여러 번 바꿔봤어요.

• 빠르게 나타나는 움직임: 카드가 툭 튀어나오는 느낌이라 부담스러웠어요.
• 느리고, 약한 반동이 있는 움직임: 부드럽지만 화면이 느리게 반응하는 것처럼 보였어요.
• 반동이 큰 움직임: 경쾌하지만 자산 정보를 보여주기에는 다소 산만했어요.

최종적으로는 빠르게 시작해 부드럽게 감속하고, 끝에 살짝 반동을 더한 이징을 골랐어요. 부드럽게 마무리해 부담을 덜고, 작은 반동으로 생기를 더했어요.

여기에 translate와 scale 모션의 시작점을 어긋나게 뒀어요. 두 모션이 동시에 시작되면 단순히 크기가 변하며 이동하는 것처럼 보이지만, 시작 시점을 조금 다르게 주면 곡선을 그리듯 움직이는 디테일을 만들 수 있어요.

문제를 푼 건 표현이 아닌 구조

기존 안, 인터랙티브 안, 플로팅 안으로 A/B 테스트를 진행했어요.

표현을 바꾼 인터랙티브 안은 CTR이 1.1배 오르는 데 그친 반면, 구조를 바꾼 플로팅 안은 CTR과 CVR이 모두 3배 올랐어요.

특히 눈여겨본 건 CVR이었어요. 클릭만 늘었다면 리포트가 눈에 잘 띄어서 눌린 것일 수 있어요. 하지만 클릭 이후의 행동까지 함께 늘었다는 건, 리포트를 발견하는 것뿐 아니라 실제 추천까지 이어지는 경험도 달라졌다는 뜻이니까요.

처음 세웠던 목표는 ‘나를 위한 제안’이라는 느낌을 주는 것이었어요. 결과적으로 단순히 표현을 바꾸는 것보다, 계좌 정보와 리포트의 역할을 분리한 구조가 이 목표에 더 가까운 결과를 만들었어요.

적용해보기

저는 이번 작업에서 처음엔 형태와 색, 표현을 바꾸는 데 집중했어요. 그런데 아무리 다듬어도 문제가 풀리지 않았죠. 익숙한 디자인 문법 안에서만 답을 찾고 있었던 거예요.

표현을 바꾸는 것만으로 해결되지 않는다면, 문제가 생기는 구조 자체를 다시 볼 필요가 있어요. 비슷한 고민을 하고 있다면, 이런 질문부터 던져보세요.

• 표현을 바꾸는 것만으로 정말 문제가 해결될까?
• 구조를 바꿔야 하는 문제는 아닐까?
• 사용자의 시선을 끄는 데서 그치지 않고, 이후의 경험까지 챙겼을까?