사용자를 방해하지 않고 클릭률 3배 올린 비밀의 화면 구조

사용자의 핵심 업무를 방해하지 않으면서도 필요한 제안을 자연스럽게 눈에 띄게 만드는 것은 모든 제품 개발자들의 오랜 숙제입니다. 토스뱅크 화면에서 자산관리 리포트 기능은 원래 입출금 영역 하단에 배너 형태로 자리 잡고 있었지만 클릭률은 겨우 2퍼센트에 머물렀습니다. 내 상황에 딱 맞는 유용한 추천인데 왜 사람들은 눌러보지 않을까 하는 의문에서 이 프로젝트가 시작되었습니다. 정보가 넘쳐나는 복잡한 환경 속에서 주변 요소와 구분되지 않아 그냥 지나친다는 가설을 세웠습니다. 그래서 리포트가 눈에 잘 띄면서도 개인화된 제안이라는 점이 한눈에 전달되도록 만드는 목표를 잡았습니다. 지금부터 어떻게 표현 방식을 넘어 근본적인 구조를 바꾸어 클릭률을 세 배까지 끌어올렸는지 자세히 살펴보겠습니다. 이 글을 통해 여러분도 사용자 경험을 해치지 않고 주목도를 높이는 지혜를 얻어 가실 수 있을 것입니다.

=

사용자를 방해하지 않고 클릭률 3배 올린 비밀의 화면 구조

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

토스뱅크 초기 화면의 입출금 영역 아래에 위치한 자산관리 리포트는 고객의 자산 상태를 꼼꼼히 분석해 맞춤형 상품을 제안하는 아주 유용한 기능이었습니다. 하지만 기획자들의 기대와는 달리 실제 클릭률은 고작 2퍼센트 수준에 머무는 답답한 상황이 이어졌습니다. 분명히 고객 개개인의 구체적인 재정 상황을 바탕으로 건네는 맞춤형 추천임에도 불구하고 왜 아무도 눌러보지 않는지 의문이 들었습니다. 여러 가지 가능성을 열어두고 원인을 분석한 끝에 홈 화면에 너무 많은 정보가 혼재되어 있다는 사실을 깨달았습니다. 계좌 정보와 입출금 내역 등 수많은 정보 사이에서 리포트 배너가 주변 정보와 충분히 구분되지 못하고 묻혀버렸던 것입니다. 결국 고객들은 화면을 스크롤하며 무심코 지나치기 일쑤였고 존재 자체를 알아채지 못하는 경우가 대부분이었습니다. 이러한 문제를 해결하기 위해 단순히 튀는 색상을 쓰기보다 내 상황에 맞는 맞춤형 제안이라는 점이 확실히 돋보이도록 만들기로 결심했습니다. 처음에는 시각적인 주목도를 높이기 위해 단순히 문구와 표현 방식을 바꾸는 시도부터 가볍게 시작해 보았습니다. 다정한 말투로 직접 말을 건네는 듯한 말풍선 형태를 도입하여 친근감을 더하려고 노력했습니다. 또한 사용자의 현재 자산 상태를 먼저 짧게 보여준 뒤 그에 딱 맞는 상품을 자연스럽게 제안하는 순서도 구상해 보았습니다. 이렇게 직접 말을 걸어주는 방식으로 표현을 바꾸면 추천이 훨씬 더 마음에 와닿을 것이라고 순진하게 믿었습니다. 하지만 이러한 노력에도 불구하고 화면 전체의 복잡함은 전혀 나아지지 않고 그대로 유지되는 한계를 보였습니다. 저마다의 뚜렷한 목적으로 찾아온 복잡한 화면 사이에 단순한 읽을거리를 하나 더 얹는 구조 자체는 바뀌지 않았기 때문입니다. 문제는 계좌 정보와 새로운 추천이 정확히 같은 자리에서 제한된 시선을 서로 나누어 가지며 경쟁하고 있다는 점이었습니다.

2. 계좌와 제안이 부딪히는 구조적 한계

계좌 정보는 고객이 자발적으로 확인하려는 필수 정보인 반면 리포트는 운영진이 새롭게 건네는 일방적인 제안이라는 본질적인 차이가 존재합니다. 역할이 완전히 다른 두 가지 정보가 한곳에 섞여 있다 보니 리포트는 계좌 정보를 빠르게 훑어보는 과정에서 자연스럽게 함께 지나쳐지기 쉬웠습니다. 그렇다고 해서 리포트 영역만 무작정 크기를 키우거나 화려하게 강조할 수도 없는 진퇴양난의 상황이었습니다. 당장 자신의 계좌 잔액을 확인하려는 사람의 눈에 리포트가 지나치게 먼저 띄면 정작 필요한 본래의 정보가 가려질 위험이 컸습니다. 결국 고객이 하려던 중요한 일을 결코 방해하지 않으면서도 리포트를 자연스럽게 발견하게 만드는 지혜로운 방법을 찾아야 했습니다. 계좌 정보와 리포트가 한자리에서 소모적인 경쟁을 하게 만드는 방식에서 완전히 벗어날 필요가 있었습니다. 두 정보를 아예 완전히 다른 공간과 차원에서 보여준다면 이 복잡한 문제를 말끔히 해결할 수 있을 것이라는 영감을 얻었습니다. 기존의 좁은 화면 안에서 억지로 자리를 다투게 하는 대신 완전히 새로운 시각적 위치를 고민하기 시작했습니다. 오랜 고민 끝에 웹사이트에서 마우스 커서를 올렸을 때 자연스럽게 나타나는 작은 툴팁 형태의 구조를 떠올리게 되었습니다. 툴팁은 기존의 밑바탕 화면을 전혀 가리지 않으면서도 필요한 추가 정보를 그 위에 가볍게 얹어 보여주는 훌륭한 장점이 있습니다. 이 기발한 구조를 모바일 화면 환경에 그대로 가져와서 적용해 보면 어떨까 하는 아이디어가 번뜩였습니다. 계좌 정보가 담긴 기본 화면은 원래 모습 그대로 차분하게 유지하고 자산 상태에 대한 제안은 그 위에 살짝 떠 있는 카드로 분리했습니다. 이렇게 하면 같은 화면 안에서도 계좌 정보와 맞춤형 추천이 서로 완전히 다른 층에 놓이게 되므로 시선이 충돌하지 않습니다.

3. 방해물 같지 않은 첫인상 만들기

화면 위에 둥둥 떠 있는 형태의 카드는 자칫 잘못하면 사용자의 흐름을 끊는 성가신 팝업 광고와 매우 비슷해 보일 수 있는 위험이 있었습니다. 내용을 제대로 읽어보기도 전에 광고로 오인받아 눈살을 찌푸리게 만들거나 내용을 확인하기도 전에 닫기 버튼을 찾게 될까 봐 걱정스러웠습니다. 그래서 플로팅 형태의 카드가 고객에게 거부감 없이 자연스럽게 받아들여지기 위한 구체적인 기준들을 하나씩 꼼꼼하게 세워 나갔습니다. 먼저 광고와 일반 기능이 고객의 눈에 어떻게 다르게 비치는지 비교하기 위해 앱 내부의 다양한 배너들을 세밀하게 뜯어보았습니다. 대개의 광고는 커다란 그래픽과 지나치게 눈에 띄는 원색을 사용하여 억지로 시선을 끌어당기는 방식을 취하고 있었습니다. 반면에 유용한 기능들은 차분한 텍스트와 직관적인 버튼을 중심으로 정보의 위계를 갖추어 내용을 차분하게 전달하고 있었습니다. 리포트가 광고가 아닌 진정한 기능으로 느껴지게 하려면 화려한 그래픽보다 내용과 정보가 먼저 눈에 닿아야 한다는 결론을 내렸습니다. 불필요한 그래픽과 자극적인 컬러를 과감하게 덜어내고 오직 내용 자체에 시선이 먼저 머물 수 있도록 담백하게 판을 짰습니다. 대신 작은 디테일들을 섬세하게 채워 넣어 제품으로서의 완성도와 깊이감을 차곡차곡 쌓아 올렸습니다. 카드 모서리에는 부드러운 코너 스무딩 처리를 적용하고 은은한 반투명 재질감을 더해 밑바탕 화면과 자연스럽게 어우러지게 만들었습니다. 버튼 위에는 아주 미세한 그래디언트를 얹어 시각적인 밀도를 높이고 고급스러운 느낌을 자아내도록 세심하게 조율했습니다. 이러한 작은 디자인 요소들이 모여 고객에게 낯선 방해물이 아니라 정교하고 유용한 기능으로 인식되는 기반이 되었습니다. 아무리 좋은 제안이라도 첫인상이 광고처럼 느껴지면 마음의 문을 닫아버리기 때문에 시각적 무게감을 낮추는 작업이 무엇보다 중요했습니다.

4. 행동에 따라 유연하게 변하는 크기

리포트 카드를 우연히 발견하고 읽은 뒤에도 계속해서 화면을 차지하며 시선을 요구한다면 고객은 상당한 피로감과 부담감을 느낄 수밖에 없습니다. 고객은 지금 당장 추천 내용을 읽고 싶을 수도 있지만 때로는 자신의 계좌나 다른 필요한 정보를 먼저 확인하고 싶어 합니다. 그래서 고객이 화면에서 스크롤 동작을 시작하기 무섭게 리포트 카드가 자연스럽고 부드럽게 작아지도록 세심하게 설계했습니다. 사용자가 본격적으로 화면을 둘러보기 시작하면 카드가 스스로 자리를 양보하여 다른 콘텐츠를 훨씬 편안하게 볼 수 있게 배려한 것입니다. 화면 구석으로 작아진 카드는 고객이 문득 궁금증이 생겼을 때 언제든 다시 가볍게 열어볼 수 있는 진입점으로 훌륭하게 남습니다. 리포트가 얼마나 눈에 띄어야 하는지를 고정된 상태로 두지 않고 고객의 실시간 행동 흐름에 따라 유연하게 변하도록 만들었습니다. 이러한 유연한 변화는 고객이 정보를 일방적으로 강요받는다는 느낌에서 벗어나 주도적으로 화면을 탐색하고 있다는 인상을 심어줍니다. 처음 홈 화면에 진입하는 순간에는 리포트가 닫힌 상태에서 시작해 자연스럽고 우아하게 펼쳐지도록 연출했습니다. 밑바탕 화면이 먼저 눈에 편안하게 들어온 뒤에 카드가 부드럽게 열려야 지금 내 자산 상태를 보고 따뜻하게 건네는 제안처럼 느껴집니다. 언제든 원할 때 다시 닫을 수 있다는 안도감을 심어주기 위해 카드가 열리고 닫히는 움직임의 결을 수없이 수정했습니다. 너무 빠르게 툭 튀어나오는 움직임은 당황스러운 부담감을 주었고 너무 느린 움직임은 시스템이 버벅거리는 듯한 답답함을 주었습니다. 결국 너무 가볍지도 무겁지도 않은 최적의 움직임 속도를 찾아내어 고객이 자연스럽고 편안한 경험을 누리도록 완성했습니다.

5. 움직임의 디테일로 완성한 자연스러움

카드가 열리고 닫히는 움직임 속도를 결정하는 과정은 사용자 경험의 품격을 결정하는 매우 까다롭고 중요한 관문이었습니다. 너무 빠르게 튀어나오는 움직임은 마치 경고창처럼 툭 치고 나오는 느낌을 주어 고객에게 심리적인 부담감을 안겨주었습니다. 반대로 지나치게 느리고 약한 반동이 있는 움직임은 부드럽긴 하지만 마치 화면 시스템이 느리게 반응하는 것처럼 오해를 샀습니다. 그렇다고 반동이 지나치게 큰 움직임을 주면 경쾌하긴 하겠지만 중요한 자산 정보를 진지하게 보여주기에는 다소 산만한 느낌이 강했습니다. 수많은 테스트 끝에 마침내 가장 이상적인 움직임의 공식을 찾아내어 적용할 수 있었습니다. 그것은 바로 빠르게 시작했다가 부드럽게 감속하면서 마지막 끝부분에 아주 살짝 미세한 반동을 더해주는 방식이었습니다. 이 세심한 움직임은 부드러운 마무리를 통해 고객의 심리적 부담을 크게 덜어주면서도 작은 반동을 통해 화면에 생기를 불어넣었습니다. 여기에 그치지 않고 위치 이동과 크기 변화를 뜻하는 두 가지 모션의 시작 시점을 미묘하게 어긋나게 설정하는 기법을 썼습니다. 만약 두 가지 모션이 동시에 시작된다면 단순히 투박하게 크기가 변하며 이동하는 것처럼 보이지만 시작점을 살짝 다르게 주면 아름다운 곡선을 그립니다. 마치 살아있는 유기체처럼 부드럽게 곡선을 그리며 움직이는 미세한 디테일 덕분에 플로팅 카드는 더욱 완성도 높은 모습을 갖추게 되었습니다. 기술적인 구현을 넘어 감성적인 만족감까지 챙긴 이러한 움직임의 디테일은 결국 고객의 마음을 열게 만드는 결정적인 열쇠가 되었습니다.

6. 표현이 아닌 구조가 만든 놀라운 성과

기존의 평면적인 화면 안과 표현 방식을 바꾼 중간 안 그리고 구조를 완전히 개편한 플로팅 안을 가지고 실제 고객 대상 실험을 진행했습니다. 단순히 문구와 표현 방식만 바꾼 중간 안은 클릭률이 고작 1.1배 오르는 데 그쳐 미미한 변화만을 보여주었습니다. 하지만 정보의 위계와 공간 구조 자체를 혁신적으로 바꾼 플로팅 안은 클릭률과 전환율이 동시에 무려 3배나 뛰어오르는 기적 같은 성과를 기록했습니다. 특히 단순한 관심의 표현인 클릭뿐만 아니라 실제 행동으로 이어지는 비율인 전환율이 함께 폭등했다는 점이 가장 고무적이었습니다. 만약 눈에 띄기만 하고 불편했다면 클릭만 조금 늘고 이탈했겠지만 구조적 혁신은 진정으로 필요한 고객의 마음을 사로잡았던 것입니다. 방해하지 않으면서도 자연스럽고 확실하게 눈에 띌 수 있는 유일한 길은 겉모습의 화려함이 아닌 근본적인 구조의 재설계에 있었습니다. 앞으로도 우리는 눈앞의 화려한 그래픽이나 자극적인 표현에만 의존하는 실수를 범하지 않고 고객의 행동 흐름을 깊이 존중할 것입니다. 고객이 자신의 업무를 편안하게 수행하는 것을 방해하지 않으면서도 적재적소에 필요한 가치를 전하는 지혜로운 구조를 끊임없이 고민하겠습니다. 이번 자산관리 리포트 개편 경험은 디자인이 단순히 보기 좋은 껍데기를 만드는 일이 아님을 다시 한번 가슴 깊이 깨닫게 해 주었습니다. 복잡한 문제를 명쾌하게 풀어내는 힘은 언제나 고객의 실제 행동 맥락을 깊이 이해하고 판을 새롭게 짜는 데서 나옵니다. 앞으로 마주할 수많은 제품 과제 속에서도 방해하지 않고 자연스럽게 스며드는 눈에 띔의 미학을 잊지 않고 실천해 나갈 것입니다. 독자 여러분께서도 눈앞의 화려함보다 근본적인 구조를 바꾸는 지혜를 통해 일상과 업무 속에서 멋진 성장의 전기를 마련해 보시길 응원합니다.

자주 묻는 질문

🔗 함께 읽으면 좋은 글: 업스테이지, 타임리 인수로 AI 에이전트 시장 선점… 생성형 AI 플랫폼 통합 전략 밝혀