brunch

You can make anything
by writing

C.S.Lewis

by 김아영 Oct 08. 2020

토스에서 1,000원이 입금되었습니다(2) UX/UI편

그동안 토스를 사용해 보며 느낀 점이 있다면 유저 인터페이스가 무서울 정도로 간결하다는 점이었다. 모든 금융 앱에서 제공하는 계좌 추가 기능만 놓고 보아도 그렇다. 등록할 계좌의 은행을 선택하는 초기 화면에서부터 등록을 마친 화면까지 각 단계 별 시인성이 몹시 뛰어나고 중복된 질문이 거의 없다. 너무나도 간단한 과정에 의구심마저 싹 틀 정도였다. 쉬운 금융을 추구하는 사업의 방향성과 그에 맞는 UI를 구현함으로써 편리함이라는 중요한 가치를 제공하고 있지만, 사용자 입장에서는 도리어 앱의 신뢰성, 크레더빌리티가 다소 떨어지는 것이 아닌가하는 불안감을 느낄 수도 있다. 편리성이 곧 낮은 보안을 뜻하지는 않지만, 액티브X의 민족은 간소화된 과정에 충분히 두려움을 느낄 수도 있다는 것이 아이러니하다. (실제로 부정 결제 사고도 있었고.)

..오늘도 서론이 너무 길었다. 우선, 그동안 토스를 사용해보며 느꼈던 불편점과 이점을 UX/UI 관점에서 짧게나마 정리해 보았다.

1. 회원가입은 간단하게

토스의 회원가입 과정은 미니멀리즘의 끝을 보여준다. 금융 앱임에도 불구하고 한 페이지에서 요구하는 정보 값이 극히 적다. 흰 바탕에 토스 로고가 띄워진 스플래시 화면이 지나가면 가장 먼저 토스의 안전성과 보안성을 강조하는 회원가입 화면이 발생된다. 레이아웃 자체가 극도로 심플하고 사용된 컬러 수도 적다. Tmi로, 토스 앱의 첫인상은 '와, 엄청 심플하네.. 애플 같아.'였다. 고작 이 정도로 밖에 표현하지 못하는 스스로가 민망하지만(표현력의 한계) 정말로 그랬다. 흡사 아이폰을 처음 구매하고 켰을 때 뜨는 'Hello!' 창을 마주했을 때의 느낌이었다.

시작하기 버튼을 눌러 다음 창으로 넘어가면 이름을 묻는다. 이름을 치고 확인을 누르면 주민번호를 묻는다. 그다음은 휴대폰 번호를.. 별반 다를 게 없어보이는 회원가입 절차이지만 과정에는 분명한 차이점이 있다. 그러니까, 한 페이지당 질문이 하나인 셈이다. 이름, 주민등록번호, 통신사와 휴대폰 번호를 한 번에 묻는 것이 아니라 마치 게임 캐릭터 설정하듯 페이지당 하나의 요구사항만 만족시키는 것이다. 실제로 사용자가 입력해야 하는 정보의 양은 같지만 이러한 방식이 체감상 훨씬 짧게 느껴진다.

휴대폰 번호까지 입력하고 나면 ARS 인증 창으로 이어진다. 전화를 받고 위의 코드를 누르면 회원가입 완료. 아, 그전에 토스에서 사용할 비밀번호를 설정하기는 해야 했다. 토스는 절대 한 번 이상 같은 질문을 반복하지 않는데(중복되는 확인 절차가 없다.) 비밀번호는 예외인 듯 싶다. 혹시 사용자가 설정하고자 하는 바와 다르게 입력하지는 않았는지 확인 절차를 거쳐야 하므로.

토스에서 사용할 비밀번호 설정까지 마치고 나면 신용정보와 카드 정보 확인창이 발생된다. 토스는 앱 페이지의 CTA 버튼에 Primary Color를 적용함으로써 사용자들의 액션을 유도하고 전환율을 높였다. (그리고 이 모든 회원가입 과정을 끝내는 데는 단 3분도 채 소요되지 않았다.)

2. 메인 페이지

회원 가입을 마친 사용자가 가장 먼저 도달하게 되는 화면이다. 사용자는 이 화면에서 본인의 계좌 잔고와 카드 대금, 투자 상품, 대출 상품을 한눈에 확인해 볼 수 있다. 앞선 글에서 언급했듯, 토스는 메인 페이지의 최상단에 '송금' 기능과 '신용 점수' 기능을 자리시켜 놓았다. 일반적인 은행 앱이 계좌와 잔액이 최우선적으로 표시하는 것과는 상반되는 부분이다. 토스는 '빠른 송금'을 통해 많은 수의 사용자를 전환시켰고, 아직까지도 이는 토스의 간판 기능으로 통하고 있다. (송금 수수료 월 10회 무료 조건이 생기고 이탈 수도 늘었겠지만) 토스는 강력한 사용 경험을 제공할 수 있는, 어찌 보면 필살기나 다름없는 송금 버튼을 신용 점수와 함께 최상단에 배치시켰다.

Interesting Point : 화면 최상단에 신용 점수와 간판 기능인 송금 버튼이 함께 자리하고 있다는 점. 사실 재테크는 신용 등급에서부터 시작한다고 해도 과언은 아니다. 신용 등급이 낮은 경우, 신용카드 발급이 거부되거나 대출 시에도 상당히 높은 금리가 적용된다. 한마디로 신용 점수를 관리하는 것은 자산관리의 출발점이나 다름이 없다는 것. 신용 점수를 조회하고 어떤 혜택들을 받을 수 있는지 확인하게 함으로써 사용자가 토스를 단순 송금 앱이 아닌 올인원 자산관리 앱으로 인지하게끔 공을 들였다.

3. 송금 페이지

토스의 송금 페이지는 기존의 은행 앱이 보여주던 이체 페이지와 사뭇 다른 느낌을 준다. 첫 번째로 금액부터 입력해야 한다는 점이 독특하다. 송금을 하는 과정에서 최소한의 요구 조건은 뭘까? 보내는 금액과 그 돈을 받을 사람이다. 기존의 은행 앱들은 받는 사람(돈을 송금받을 사람)을 먼저 선택하게끔 했다. 하지만 토스는 금액을 먼저 입력하게끔 강제했고, UI 또한 여백을 충분히 둔 다이얼 키패드를 채택해 시인성을 높였다.

Q. 토스는 왜 송금 금액을 입력하는 창을 먼저 제공하게 됐을까?

토스 송금만 이런 방식인가 문득 궁금해져 카카오 뱅크를 설치하고 비교해 보았다. 그랬더니 카카오 뱅크는 대부분의 은행 앱과 유사한 방식으로, 먼저 송금받을 사람을 선택하는 창을 띄워줬다. 토스는 왜 금액을 먼저 입력하도록 강제했을까? 히스토리는 알 수 없지만, 직관성과 일관성을 유지하기 위해 이러한 선택을 한 것이 아닌지 조심스레 추측해 보았다. 송금이란 결국 '돈'을 '누군가'에게 보내는 행위이고, 부차적인 것들을 걷어내고 나면 돈과 받을 사람만 남게 된다. 토스는 송금할 금액을 먼저 입력하게 함으로써 사용자가 자신이 돈을 보내기 위한 여정의 첫 발을 뗐다는 것을(당신은 돈을 보낼 생각이죠?) 분명하게 인지시켰다.

뿐만이 아니라, 하단에 받기/보내기 버튼을 제공함으로써 콘텍스트를 일치시켰다고 생각된다. 송금 창에서는 송금만 가능한 것이 아니라 부가적인 기능으로 받기(더치페이)도 가능하다. 왜 뜬금없이 송금 창에 받기 기능이 탑재되어 있느냐고 묻는다면, 글쎄. 누군가와 더치페이를 하는 상황을 떠올려보자. 결국에는 내가 상대방에게 돈을 보내 주거나, 상대방이 나에게 송금하게 된다. 이러한 맥락에서 보면 받기 기능이 송금 창에 포함되어 있어도 위화감이 없다.

Interesting Point :
송금할 금액을 먼저 입력하게 함으로써 사용자가 송금 단계임을 명확하게 인지하게 했다.
금액 입력창 하단에 더치페이, 보내기 기능을 동시 제공함으로써 사용자가 추후 단계에서 겪을 수 있는 문제를 일찍이 해결했다.

4. 신용등급 조회

위 이미지는 토스의 신용등급 조회 페이지다. 앞선 글에서 언급했듯, 토스는 현재 다양한 금융 상품을 중개하며 수익을 내고 있다. 금융 상품의 종류는 보험부터 대출, 카드까지 분야도 넓고 다양하다. 토스는 왜 신용등급 조회를 최상단에 제공할까? 나는 이전 글에서 신용 점수를 관리하는 것은 자산관리의 출발점이나 다름이 없다고 보았고, 신용 점수를 조회하고 어떤 혜택들을 받을 수 있는지 상세하게 알려줌으로써 토스를 단순 송금 앱이 아닌 올인원 자산관리 앱(대표님은 실제로 인터뷰에서 그렇게 칭하고 있었다.)으로 사용자가 인지하게끔 시도한 것으로 보인다고 쓴 적이 있다.

토스는 속도계를 닮은 GUI를 중앙에 배치함으로써 사용자의 신용등급을 시각화하고, 상위 몇 퍼센트에 속하는지 점수화하여 정보를 제공했다. 뿐만 아니라 바로 아래에는 신용점수 올리기, 맞춤 신용관리 팁 등 신용등급을 올릴 수 있는 꿀팁들을 전수해 주고 있다. (뭔가 신용 점수가 평균보다 낮으면 큰일 날 것 같고 그렇다.) 사실 신용등급이 신용평점으로 대치된 지는 좀 지난 일이다. 요즘에는 신용등급이 아닌 평점으로 관리되고 있는 추세인데, 토스는 아직까지 앱 내에서 신용등급이라는 표현을 쓰고 있었다. 자산관리에 무지한 사용자 입장(나 같은)에서는 아무래도 점수만 봐서는 이게 평균보다 높은 건지, 낮은 건지 도통 감이 안 오기 마련인데 같은 이유로 철 지난 신용등급이라는 표현을 유지하고 있는 게 아닌가 싶다.

Interesting Point :
신용등급 조회는 단순히 고객의 자산관리를 넘어서 회사의 수익과도 연관이 있다. 사용자는 신용 조회를 통해 자연스레 대출 금리와 금융 상품 가입 시 혜택에 관한 정보를 습득하게 된다. 누군가는 필요에 의해서 접근하겠지만, 필요를 느끼고 있지 않던 사람도 호기심에 대출 금리 조회를 '한 번 해볼 수도' 있는 것. 사용자의 흥미를 끌어 리텐션도 유지하고 고객으로 전환시키는 좋은 예시로 보인다.

5, 내 소비와 추천

들어가기에 앞서 다소 아쉬운 점은 Question mark로 구분했다. Bad point로 구분하기보다는 물음표가 더 적절할 듯싶었다. 우선 내 소비와 추천의 기능은 토스 앱에서 가장 아쉽게 느껴졌던 탭이었다. 토스가 극강의 간결함을 추구하고 있다는 건 이전의 사용자 경험들로 이해하였으나, 높은 직관성이 낮은 사용성으로 귀결되어서는 안 된다고 생각했다. 요즘의 가계부 앱들이 너무 똑똑해져서인지 토스의 해당 탭 영역은 다른 가계부 어플리케이션과 비교했을 때 다소 부족해 보이는 부분이 있었다. 먼저 위의 이미지를 보자. 왼쪽 페이지와 같이 사용자는 내 소비 내역을 막대그래프로 확인할 수 있는데, 주요 지출원(파란색으로 표시된 부분) 외에는 시인성이 크게 떨어진다. (내 기억으론 이전엔 원형 인포그래픽이었던 것 같은데 그사이 업데이트 된 부분 같다.) 개인적으로는 몹시 아쉬웠던 부분.

Question mark :
제 아무리 주 지출 카테고리를 확인하는 기능이라 해도 부가적인 지출원에 대한 정보 값이 부족하고 시각적으로도 크게 도움이 되지 않아 아쉬운 기능이다. 토스는 내비게이션 바부터 버튼까지 최대한 Primary color(blue)를 활용해 통일성을 주려 노력했다. 이는 정보의 전달성을 높이고 높은 가시성을 부여하지만 위의 경우와 같이 제약되어 사용될 시 오히려 시인성을 해칠 때도 있다고 생각된다.

마지막으로 추천 탭에서 다소 아쉽게 느껴졌던 점은 내 소비패턴에 딱 맞는 카드 추천 기능을 최하단에 배치해 놓았다는 점. 처음에는 이것을 보고 '사용자가 추천 탭에 진입했다면 사실 나에게 가장 맞는 카드 추천을 받고 싶어 할 가능성이 더 높지 않을까?'라는 궁금증이 (솔직하게,, 나만 그래요?) 일었다. 요즘에는 워낙에 개인화 큐레이션 같은 추천 서비스들이 잘 되어 있기도 하고 말이지. 그런데 이 사례를 보고 있자니 어쩐지 몇 주 전에 작성했던 애플뮤직의 큐레이션 사례가 떠올랐다. 애플뮤직의 경우도 퍼스널 큐레이션으로 정평이 나 있는 서비스지만 Hot tracks 인기 차트 역시 Browse 탭에서 동시 제공하여 추천의 범위를 넓혔다. (남들이 다 좋아하는 음악이라면 당신도 좋아할 확률이 높아!) 같은 시각에서 보면 남들이 많이 사용하고 발급한 카드라면 당신에게 역시 도움이 될 확률이 높다.

Question mark :
토스 역시 같은 생각이었을지는 나도 알 수가 없다. 사실 음악을 듣고자 하는 욕구와 돈을 모으고자 하는 욕구는 결이 다르고, 전자보다는 후자가 훨씬 더 예민할 수 있다는 점도 고려되어야 하기 때문에.. 어떤 우선순위로 배치됐는지는 알 수 없지만, 그럼에도 불구하고 고객의 입장에서 신용카드 추천 Top 10보다는 내 소비 패턴에 딱 맞는 카드를 먼저 보여주는 것이 더 큰 감동 포인트가 되지 않을까 하는 막연한 추측을 해보았다.

Conclusion.

1, 2편에 걸쳐 토스의 프로덕트 리뷰가 끝났다. 짧은 리뷰를 통해 토스가 고객 집착 정신을 제품에 어떻게 녹여내고 있는지 조금이나마 이해할 수 있는 시간을 가질 수 있었다. 현재 어떤 해결책을 통해 고객 가치와 사업 가치를 동시에 달성하고 있는지, 그런 가치들을 실제로 만들어내고 있는 사람들의 일하는 방식은 무엇인지, 서비스는 사용자의 관점에서 어떻게 구현되었는지 생각해볼 수 있는 기회가 되었다. 쓰다 보니 이젠 토스 서비스에 정이 들어버려서 괜히 주변 지인이 "토스 앱은 너무 편해서 무섭다. 돈 털리면 어떡하냐." 같은 말을 하면 괜히 내가 다 서운해질 것 같은 기분. 과몰입 그만하자..

* 원문에 사용된 이미지의 출처는 본인입니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari