토스는 어떻게
금융을 쉽게 만들었을까?
금융이 쉬워지는 심리학 UX 법칙
토스는 어떻게 금융을 쉽게 만들었을까?
토스의 슬로건 "금융이 쉬워진다" / 출처 = 토스 페이스북토스는 학교에서도 알려주지 않는 어렵고 복잡한 금융을 가장 쉽게 풀어낸 서비스가 아닐까 싶다. 사실 나는 최근까지도 토스를 단순히 송금, 자산관리 정도의 기능으로만 생각해왔다. 그런데 UX 디자이너로 일하면서도 PM 부트캠프를 들으면서도, 토스는 토스앵무새 마냥 다양한 예시와 서비스 화두로 등장했다. 결국 남들이 다하는 거 나는 안 해야지-라는 괜한 오기를 버리고 어플을 설치하게 되었다.
그렇게 처음 접하게 된 토스는 정말.. 획기적인 UX와 쫀쫀한 설계가 느껴지는 멋진 서비스였다.
남의 떡이 좋아 보였던 이유
나는 왜 토스가 잘 만들어졌다고 생각했을까? UX 디자이너로서 가지고 있던 과제 중 하나는 좋아 보이는 서비스를 찾고, 그것을 나의 콘셉트에 맞게 응용하는 것이었다. 이를 위해서 레퍼런스 서비스의 UX 설계와 UI 디자인 콘셉트를 명확히 구별해서 분석할 필요가 있었는데, 워딩과 플로우를 제외하고는 그 구분점을 명확히 찾기 어려웠다. 게다가 디자인 결정에 있어서 나의 경험적 직관은 남들에게는 '주관'일뿐, 설득력을 가진 어떠한 객관적 지표가 되어주지 못했다.
'좋아 보이는 것에는 어떤 이유가 있을까?'
'관련 데이터가 없는 경우, 이해관계자들에게 디자인 결정의 근거를 어떻게 제시할 것인가?'
'다양한 심리학 개념들 중에서 UX에 직접적으로 연결시킬 수 있는 것들은 무엇일까?'
'서로 다른 경험과 데이터를 쌓아온 디자이너들 간에 의견을 맞출 수 있는 가이드라인이 있을까?'
모든 고민에는 선례가 있기 마련이다. 미국 디트로이트를 기반으로 활동하는 디자이너, 존 야블론스키 역시 오랜 시간 디자인 작업을 하면서 이런 문제들에 부딪혔다고 한다. 그래서 그는 이 고민들을 풀기 위해 행동심리학과 인지심리학에서 UIUX와 밀접하게 연관된 법칙들과 효과들을 찾아내고, 이들을 일종의 UX심리학 법칙 사전인 Laws of UX(https://lawsofux.com/)로 만들어냈다. 한국어 번역으로 출간된 책도 있지만, 존 아저씨가 사전을 계속 업데이트하고 있기 때문에(현재 ver 2.0) 현재는 홈페이지에서 더 많은 법칙을 확인할 수 있다.
그렇다면 나는 왜 토스 앱이 멋지다고 생각했을까? 과연 토스에는 어떤 심리학 요소들이 들어가 있을까?
이번 블로깅에서는 존 야블론스키의 UX 심리학 법칙이 토스 서비스에 적용된 사례를 찾아보려고 한다.
#익숙한 게 좋아
제이콥의 법칙
사람들은 새로운 것을 배우기보다는 이미 알고 있는 익숙한 방식을 더 선호한다.
제이콥의 법칙에 의하면 사용자가 새로운 조작 방법을 익히는 대신에 프로덕트를 통해 본래의 목적을 쉽게 달성할 수 있기 때문에 우수한 사용자 경험을 만들 수 있다. 이는 디지털 세계에서도 마찬가지로 적용된다. 이 때문에 존 아저씨는 웹/앱 프로덕트를 디자인할 때, 통상적인 모델을 활용할 것을 권장한다.
1. 자신의 제품이 속한 산업군의 제품과 비슷한 인터페이스 제공하기
출처 = https://wwit.design/ 국내 대표적 핀테크 기업인 토스와 뱅크샐러드는 상당히 유사한 홈 화면 인터페이스를 가지고 있다. 홈 화면에서부터 가지고 있는 자산의 총액과 신용점수, 개별 계좌, 카드, 보험 등의 정보를 보여주며, 송금 버튼을 보여주고 있다. 기존에 뱅크샐러드를 자주 썼던 나에게 토스의 첫 화면은 상당히 익숙하게 느껴졌고, 토스의 친절한 UX와 뱅크샐러드를 이용해 본 경험으로 어렵지 않게 대부분의 자산 연동을 쉽게 할 수 있었다.
토스 증권의 차트는 캔들 차트와 라인 그래프 두 가지 버전을 제공한다. 주식을 처음 접하는 신규 투자자들이 늘어나는 것을 고려하여 읽기 쉬운 라인 그래프를 제공하면서도, 전문 투자자들과 기존 주식인들에게 익숙한 캔들 차트를 제공하는 것을 빼놓지 않는다. 이 배려는 신규 투자자들을 위한 UX 개선과 통상적인 익숙함과 니즈를 버리지 않은 케이스로 볼 수 있다.
2. 현실 세계의 디자인과 비슷하게 만들기
둥근 모서리의 카드형 디자인을 사용하는 핀테크 어플 UI핀테크 앱의 디자인을 살펴보면 주로 모서리가 둥그스름한 카드 형태의 UI를 사용하고 있다.
이는 기존의 '플라스틱 카드'의 모양에서 따온 형태인데, 실제로 핀테크 초기에 실물 카드를 화면 속에 그대로 재현한 카드형 인터페이스를 통해 핀테크의 장벽을 낮추었다고 한다. 둥근 모서리를 가진 카드형 디자인은 오늘날까지 국내외 구분 없이 대부분의 핀테크 프로덕트에 하나의 관습처럼 사용되고 있다. (카카오뱅크는 카드(UI)도 거의 실물 카드 비율과 비슷해 보인다!)
#엄지손가락의 마법
피츠의 법칙
1. 터치 대상은 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 한다.
2. 터치 대상 사이에는 충분한 간격이 필요하다.
3. 터치 타깃은 쉽게 터치할 수 있는 인터페이스 영역에 배치해야 한다.
원래 피츠의 법칙은 미국 심리학자 폴 피츠가 터치 대상까지 움직이는 거리와 너비를 함수를 통해 예측한 수학 모델이다. 이를 UX에 적용시켜본다면, 손가락이 화면에서 움직일 수 있는 거리와 화면을 터치할 때 손가락이 화면에 닿는 면적으로 적용해 볼 수 있다.
1. 토스의 Thumbs Zone
* "Thumbs Zone": 한 손으로 핸드폰을 잡고 있을 때 엄지손가락만으로 한 번에 닿을 수 있는 보편적인 영역을 말한다. 이 위치는 사용자가 큰 노력 없이 손쉽게 터치를 할 수 있기 때문에 화면계의 스위트 스폿이다.
혜택 화면(좌)
Forget about it(제일 손이 안 가는 영역)은 메인타이틀(혜택)이 통으로 차지하고 있다.
Hard(손 닿기 어려운 영역)에는 내 포인트 현황이 자리 잡고 있다. 이곳은 손은 잘 닿지 않지만 화면에서 눈길이 가장 먼저 향하는 영역으로, 해당 페이지가 나의 포인트와 관련된 기능을 하는 페이지임을 직관적으로 알 수 있다.
Thumbs Zone에 위치한 "3000원 받기" 버튼은 버튼 중에서 가장 넓은 영역을 차지하고 있으며, 포인트 컬러를 사용하여 강조하고 있다. 혜택 화면에서 가장 강조하고 있는 메인 버튼이라고 할 수 있다.
토스의 팝업창(우)
팝업창을 화면 중앙이 아닌 약간 하단에 위치시킴으로써 닫기와 알림 받기 두 버튼 모두를 Thumbs Zone에 위치하도록 했다.
2. 버튼 크기와 간격
애플과 구글 매터리얼 디자인 가이드라인 또는 닐슨 노먼 그룹에는 권장 규격 즉 UI 규격이 존재한다. 권장 수치는 최소점이라고 한다. 이것보다 더 크게 만들어야 사용하기 쉽다고 한다. MIT 터치 랩 연구 결과에 따르면, 성인의 손가락 지문 면 평균 면적은 10~14mm이고 손끝 면적이 8-10mm이라고 한다
토스와 카카오뱅크의 탭과 리스트 버튼의 영역을 임의로 잡아보았다. 정확한 터치 영역을 측정할 수는 없지만, 두 서비스 모두 머터리얼 가이드에서 요구하는 면적의 터치 영역을 지키고 있다.
비교해보니 카카오뱅크에 비해 토스의 터치 영역과 버튼 사이 간격이 조금 더 여유로웠다.
토스에 비해 카카오뱅크는 컬러를 많이 쓰지 않고 볼드체와 아이콘을 적절히 활용하여 강약을 조절하고 있는 것을 확인할 수 있었다.
#우유부단
힉의 법칙
사용자에게 선택의 폭, 혹은 알아야 할 정보를 너무 많이 주지 않는 게 좋다.
선택의 폭이 넓어질수록 사용자는 결정을 내리기 위해서 선택지를 파악하는 인지 부하가 증가한다. (물론 로그함수 형태로 증가하므로 이미 많은 상태에서 한두 개쯤은 크게 상관없다.)
2019 토스 디자인 콘퍼런스에 따르면, 토스의 카드 맞춤 추천 서비스는 전략적으로 노출해주는 정보의 양을 조절했다. 사용자의 인지부하를 줄이기 위해, 개개인에 맞는 핵심적인 혜택을 위주로 노출하고 카드 맞춤 추천 서비스의 전면에는 10개의 카드만을 노출했다.
이 방식을 통해 토스는 최종적으로 발급량 60% , 매출 26% 증가의 성과를 냈다고 한다. WoW!!
#가나다라 마바사
밀러의 법칙
사람들의 정보 범위는 보통 7개 이내로 제한된다.
그러나 '7'의 맹신은 피할 것!
구별 없는 정보보다 이해하고 기억할 수 있도록 콘텐츠를 작은 청크로 구성한다.
이 수치는 사전 지식과 상황에 따라 개인마다 다를 수 있다.
토스는 폰트 크기와 무게, 간격 등 다양한 방법을 통해 정보를 시각적으로 덩어리 짓는다.
( + 홈 화면 - 실선 / 내소비 - 카드 / 전체 메뉴 - 간격 조정 )
리스트 당 하나의 정보만을 제공하며 한 화면에서 너무 많은 정보를 주지 않도록 각 리스트 사이에 적당한 간격을 유지하고 있다.
토스 내 세 화면의 시각적 덩어리만 비교해보자면, 내소 비 > 홈 > 전체 순으로 정보 묶음이 확실하게 구분 지어진다.
#찰떡같은 유연성
포스텔의 법칙
유저는 채워야 할 정보가 많아질수록 인지 부하가 증가하여 피로를 쉽게 느낀다.
따라서 사용자에게 요청하는 정보의 양은 보수적으로 정하되, 유저의 액션을 너그럽게 수용할 수 있어야 한다. 또한 액션에 대해 사용자에게 명확한 피드백을 제공해야 한다.
토스는 사용자에게 정보를 요구할 때 무조건 한 번에 하나의 정보만 입력하도록 한다. 이 방식은 사용자가 당장의 테스크에만 집중할 수 있도록 만들어주며, 기입 전에 빈칸을 채워야 한다는 부담감을 줄여준다.
그렇지만 이미 입력한 정보를 다음 단계에서 여전히 확인할 수 있고 수정할 수도 있다. 하나의 정보만 입력하는 것의 단점을 개선하면서, 토스의 UX는 사용자가 잘못 입력한 경우에도 쉽게 변경할 수 있도록 탄력적인 디자인을 보여준다.
마지막으로 유저가 모든 정보를 기입하고 완료를 한 경우, 완료 페이지로 이동하는 것뿐만 아니라 원하는 목적을 이루었다는 문구(토스트)를 띄워준다. 이 토스트 알림은 사용자의 행동에 대한 명확한 피드백을 제공하는 동시에 사용자와의 인터렉션을 높여준다.
#강약 조절
폰 레스토프 효과
유사한 물체 속에서는 나머지와 다른 물체가 눈에 띄고 잘 기억된다.
이 효과는 UI 디자인에 있어서 색상, 형태, 크기, 위치, 움직임, 배지 등으로 연결된다.
토스 또한 다양한 방법으로 사용자의 시선을 사로잡는다.
[큰 글씨 + 진한 색] 계좌 총액
[포인트 색상] 소비 그래프의 가장 많은 소비, 계좌 만들기 버튼, 붉은 알림 배지
[마이크로 인터렉션] 증권 계좌 만들기 버튼, 공지사항 이벤트 베너 아이콘
시각적 강조 덕분에 사용자는 가장 먼저 집중해서 보아야 할 정보를 쉽게 파악할 수 있다. 다만, 존 아저씨는 이와 관련해서 두 가지 주의사항을 말한다. 첫째, 색을 이용한 강조만 사용하는 것을 주의하라. (색맹을 고려해라) 둘째, 광고나 사용성을 해칠 정도의 프로덕트 구매 유도로 이어지는 것을 주의해야 한다.
#빨리빨리
도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다.
그러나 불러올 정보가 많은 경우 등 기술적 문제로 빠른 피드백이 어려운 경우가 있다. 이때 진행률을 표시해주는 등의 시각적 효과가 있다면 사용자의 인내심이 늘어날뿐더러, 그 가치를 높이고 신뢰감을 심어줄 수 있다.
토스를 사용하게 되면 여러 기관에서 정보를 불러오는 경우가 많다. 이 과정은 어떻게 보면 다소 지루하고 따분한 시간이다. 자연스럽게 0.4초가 넘는 시간이 소요되는데, 토스는 다양한 인터렉션을 활용하여 사용자들의 인내심을 늘리고 있다.
이를 위해 스켈레톤 UI(사이트의 틀을 먼저 로드해줌)와 로딩 애니메이션은 물론, 색다른 볼거리를 종종 제공하기도 한다.(보험금 찾기에서 특별한 로딩 애니메이션을 발견할 수 있었다!.!) 화려한 애니메이션이 내 정신을 잠시 뻿는 사이에 토스는 다음 단계를 준비했고, 실제로는 조금 시간이 걸렸지만 심리적으로는 빠르게 로딩이 되었다고 인식했다.
#보기 좋은 떡이 먹기도 좋다
심미적 사용성 효과
미적으로 유쾌한 디자인은 사람들의 두뇌에 긍정적인 반응을 불러일으키고 제품이 실제보다 더 잘 작동한다고 믿게 만든다. 게다가 사소한 사용성 문제에 더 관대하며, 사용성 문제를 숨길 수도 있다.
토스 앱을 가만히 들여다보면 구석구석 자잘한 애니메이션들이 숨어있다.
자료 화면으로는 내가 찾은 애니메이션들 중에서 가장 크고 가장 귀여운 애니메이션을 첨부해보았다.
찾은 것: 내 소비의 로딩바, 증권의 새 계좌 아이콘, 치킨값 모으기, 돈 같이 모으기, 백신 보험
이스터 에그 같은 이 애니메이션들 덕분에 토스 이미지와 경험의 변화뿐만이 아니라, 사용자가 제품이랑 인터렉션 하고 있다는 기분을 자연스럽게 심어준다.
마치며,
- 한국어 출판에는 10가지 법칙만 소개가 되어있는데, 존 아저씨의 사이트를 들어가보면 버전 2로 업데이트 되어있다. 10가지 법칙을 알고 있는 사람이라면 새로운 버전을 한번 확인해보는 것도 좋을 듯 하다.
- 이제 '사용자 경험이 중요하며, 이를 개선해야 한다.'는 것은 누구나 안다. 그러나 디자인 결정을 정당화할 정량적, 정성적 데이터가 마련되지 않은 경우에도 우리는 이해관계자들에게 의사결정의 근거를 제시할 수 있어야 한다. 예를 들어, 반응 속도가 빠를수록 사용성이 좋다는 건 누구나 알 수 있다. 하지만 "얼마나 빨라야 하는가? 기다림은 어느 정도까지 허용되는가?"라는 질문에는 근거가 필요하다.
- 여러 사용자 경험 패턴을 단순히 경험으로 습득하고 적용하는 것보다는 근거와 가이드를 제시해주는 심리학 법칙까지 이해하고 활용한다면 훨씬 더 설득력 있게 인간 중심의 인터페이스를 설계할 수 있다. 그리고 이 법칙을 단순히 알고 넘어가는 것보다, 스스로 체화시키는 경험을 하는 것이 제일 중요하다고 생각한다. 나 또한 토스의 인터페이스에 직접 적용하고 찾아봄으로써 (그들이 이 법칙을 의식하며 디자인을 하지 않았을지라도) 심리학과 밀접하게 연관된 디자인을 더 깊게 이해하고 체화할 수 있었다.
참고자료
존 야블론스키의 Laws of UX : https://lawsofux.com/
한글 버전
