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

안녕하세요. 토스뱅크 Visual Designer 김현지입니다. 오늘은 자산관리 리포트 기능의 클릭률을 3배로 올리기까지의 과정, 그리고 그 안에서 얻은 러닝을 이야기해 보려고 해요.유용한 추천인데 왜 누르지 않을까기존 입출금 영역 하단에 배치된 자산관리 리포트자산관리 리포트는 사용자의 자산 상태를 분석해 알맞은 상품이나 서비스를 추천하는 기능이에요. 토스뱅크 홈의 입출금 영역 아래에 배너로 노출하고 있었는데, 클릭률이 2%에 그쳤어요.내 상황을 보고 해주는 추천인데, 왜 눌러보지 않을까요? 여러 가설을 세워본 끝에, 토스뱅크 홈에는 정보가 많다 보니 주변 정보와 충분히 구분되지 않아 그냥 지나칠 수 있겠다고 생각했어요.그래서 리포트가 눈에 잘 띄면서도, 내 상황에 맞는 개인화된 추천이라는 점이 한눈에 느껴지도록 디자인하는 것을 목표로 잡았어요.표현을 바꿔도 화면은 여전히 복잡한 이유먼저 표현 방식을 바꿔봤어요. 말을 건네듯 제안하는 말풍선 형태, 사용자의 자산 상태를 먼저 보여준 뒤, 그에 맞는 상품을 차례로 제안하는 방식도 만들어봤죠. 직접 말해주는 것처럼 표현하면 추천이 더 와닿을 것 같았어요.그렸던 시안들그런데 화면은 여전히 복잡했어요. 저마다의 목적으로 찾아온 화면 사이에 읽을거리를 하나 더 얹는 구조는 달라지지 않았거든요. 문제는 계좌 정보와 추천이 같은 자리에서 시선을 나누고 있다는 것이었어요. 계좌는 사용자의 정보이고, 리포트는 저희가 새롭게 건네는 제안이에요. 역할이 다른 둘이 한데 섞여 있다 보니, 리포트도 계좌 정보를 훑어보는 과정에서 함께 지나치기 쉬웠어요.그렇다고 리포트만 무작정 강조할 수도 없었어요. 계좌를 확인하려는 사람에게 리포트가 먼저 보이면, 정작 필요한 정보가 잘 보이지 않을 수 있었어요.리포트를 발견하게 하면서도, 하려던 일을 방해하지 않는 방법을 찾아야 했어요. 그래서 리포트의 위치 자체를 다시 생각했어요. 계좌 정보와 한자리에서 경쟁하게 하는 대신, 아예 다른 자리에서 보여주면 어떨까 하고요.툴팁에서 찾은 새로운 영역떠올린 건 웹사이트에서 마우스를 올렸을 때 나타나는 툴팁이에요. 툴팁은 기존 화면을 가리지 않으면서, 필요한 정보를 그 위에 덧붙여 보여주잖아요.이 구조를 모바일에도 가져왔어요. 계좌 정보가 있는 기본 화면은 그대로 두고, 자산 상태에 대한 제안은 그 위에 떠 있는 플로팅 카드로 분리했어요. 같은 화면 안에서도 계좌 정보와 추천이 서로 다른 층에 놓이도록 한 ...