금융을 쉽고 간편하게 '토스'
UX/UI 분석
토스가 출시되기 전, 우리는 온라인뱅킹을 위해서는 매우 복잡한 절차를 거쳐야 했습니다. 토스 출시 초기에는 우려의 목소리도 많았지만 서비스가 안정화된 지금, 우리는 토스가 없는 복잡한 금융은 상상조차 할 수 없는 시대에 살게 되었습니다.
브랜드컬러
먼저 토스의 브랜드컬러를 살펴보겠습니다. 토스는 신뢰를 상징하는 컬러인 '블루'를 메인컬러로, 블루톤의 그레이컬러를 서브컬러를 사용하는 모습을 볼 수 있었습니다. 두 컬러 모두 명암비 4.5:1을 충족하며 웹상에서 가독성 있게 사용하기 좋은 컬러입니다.
간단하지만 우리가 뭘 원하는지 아는 '홈'
'캐러셀', 사용자는 싫지만 기업은 어쩔 수 없이 각종 수익과 홍보의 이유로 메인배너의 넣어야 하는 항목 중 하나입니다. 하지만 토스는 최대한 사용자의 입장을 고려해 상단 캐러셀을 지우고 사용자가 원하는 정보만 볼 수 있게 할뿐더러 재치 있는 UX라이팅으로 호기심을 불러일으키며 전환율을 높이려고 하는 다양한 모습을 보이고 있습니다.
홈 화면을 하단으로 천천히 스크롤해 보면 생각보다 내용이 그렇게 많지 않습니다. 금융앱을 사용하는 사용자들이 가장 보고 싶어 하고 필요로 하는 정보는 어떤 정보일까요? 당연히 내 잔액, 사용한 금액, 앞으로 내야 할 금액일 것입니다. 토스는 해당 내용들을 사용자가 가장 처음으로 마주할 수 있는 정보로 디자인해 놓고 가장 상단에는 부담 없는 캐러셀 홍보로 안정감 있는 홈 UI를 구현하고 있었습니다.
광고인 듯 아닌 듯.
토스에서 사용자가 가장 많이 사용하는 기능 중 하나인 ‘내 잔액 보기' 페이지입니다. 여기서 조금 특별하게 분석해 볼 만한 포인트가 두 개가 있었는데 첫 번째로 계좌번호 복사기능과 광고입니다.
우리는 평소 지인들과 계좌번호를 공유해 돈을 송금받고는 합니다. 이 과정에서 내가 자주 사용하는 금융어플이 토스라면 이 복사기능은 복잡한 계좌번호를 외울 필요도 없고 따로 메모해 둘 필요도 없어 유용한 기능으로 보입니다.
두 번째로 광고가 조금 흥미로웠는데, 광고를 굉장히 약하게 띄워놓은 것이 조금 신기했습니다. 보통 광고 배너를 걸어 놓으면 시선이 너무 강렬해서 중요한 정보들의 강조가 부족해지는 경우가 있는데 토스에서는 광고가 사용하는 입장에서 최대한 방해되지 않게 디자인한 것이 흥미로웠습니다.
이제는 지겨운 마케팅 수신 동의
토스의 약관동의 페이지는 다른 서비스들과는 달랐습니다. 확실히 유저가 최대한 사용하기 ‘편한' 방법으로 디자인하는 기업임을 느낄 수 있는 페이지였습니다. 대부분의 서비스는 약관동의에서 ‘전체동의' 기능을 통해 선택약관까지 모두 체크하게 해서 마케팅 수신 동의를 유도하는 경우가 많은데, 토스는 상단에 필수 약관만 모두 체크할 수 있는 버튼을 만들어 놓아 별도의 선택 약관을 다시 체크해서 마케팅 수신을 차단하는 번거로움을 없애주는 UX를 보여주었습니다. 또한 공간을 최대한 활용하여 버튼에 세로 높이 60 정도를 주어 버튼 영역도 크게 만들어주어 터치가 굉장히 쉬웠습니다.
나에게 딱 맞는 카드추천
토스에 나의 계좌를 등록해 놓으면 토스가 자동으로 나의 소비패턴을 분석해 줍니다. 해당 소비패턴을 기반으로 내가 어떠한 카드를 발급받으면 더 좋은 혜택을 받을 수 있는지까지 알려줍니다. 예를 들면 저는 주로 쇼핑에 소비를 많이 한 것을 볼 수 있고 이 데이터를 기반으로 토스에서는 ‘전승현님 소비에 딱 맞는 카드' 탭을 클릭하면 쇼핑에 유리한 카드들을 자세한 혜택들과 함께 추천해 줍니다.
