토스에서 찾아본 10가지 UX 법칙
주니어 기획자들을 위한 실전서
사용자 경험에 ‘미친’ 조직은 뭐가 다를까
존 야블론스키의 저서 ≪UX/UI의 10가지 심리학 법칙≫에서 소개하는 UX 법칙을 토스 앱에서 찾아보았습니다.
들어가면서
작년 9월 5일, 토스가 두 번째 리브랜딩 캠페인을 시작했다. 첫 번째 리브랜딩을 2019년에 진행했으니 불과 3년 만이다. 그러고 보니, 필자도 토스를 쓴 지 어느덧 3년이 지났다. 처음 토스를 접했을 때의 감정이 아직 생생하다. 마치 장난감처럼 가볍고 통통 튀면서 독창적이다. 이런 게 금융앱이라니, ‘혁신’이란 이런 것을 두고 말하나 보다 생각했다. 토스를 한 번만 본 사람들은 “간단하게 만들었네, 단순한 사고방식을 가진 사람들이 만들었나 보다” 정도로 평가할 수 있다. 그러나, 대다수가 사용하기 편하다고 느끼는 서비스일수록 그 이면에는 여러 전문가들의 셀 수 없는 고민과 노력이 녹아있다.
토스는 단순히 ‘사용하기 쉬운 앱’이 아니다. 토스의 구조를 하나씩 뜯어보면 UX 심리학의 10가지 법칙을 모두 찾아볼 수 있다. 우리가 무의식적으로 사용하고 있는 기능부터 소소한 감동을 주는 애니메이션까지. 이 모든 과정에는 ‘원칙(principles)’에서 시작된 근거가 내재되어 있다. 존 야블론스키가 저술한 ≪UX/UI의 10가지 심리학 법칙≫에서 소개하는 10가지 UX 법칙에 따라 토스를 뜯어보았다.
제이콥의 법칙
사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다.
사용자들은 우리 서비스 말고 다른 서비스에서 더 오랜 시간을 보낸다. 그렇게 다른 서비스를 사용하면서 축적된 경험을 바탕으로 우리 서비스를 이해하려 한다. 이를 ‘멘탈 모델(Mental Model)’이라고 부른다.
멘탈 모델을 무시하고 전혀 새로운 방식으로 서비스를 만들거나, 리모델링하면 당사자는 기발하고 혁신적이라 생각할 수 있으나, 사용자는 사용법을 처음부터 다시 학습해야 하므로 불쾌할 수 있다.
토스의 메인 화면은 여타 다른 금융앱과 크게 다르지 않은 디자인을 보여준다. 우측 뱅크샐러드와 비교해보면, 전체 자산 화면의 UI가 크게 차이나지 않는다는 것을 확인할 수 있다. 이때까지 다양한 금융앱, 마이데이터 앱을 써온 사용자가 토스를 처음 사용하게 되더라도 이질감이 느껴지지 않는 이유가 이미 우리에게 익숙한 인터페이스와 사용성을 제공하기 때문이다.
* 멘탈 모델(Mental Model) : 시스템・사물이 실제로 어떠한 방식으로 작동할 것이라고 생각하는 인간의 사고 과정을 구조화한 것을 말한다.
피츠의 법칙
목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라진다.
터치할 수 있는 영역 간의 거리는 적당해야 한다. 여기서 ‘적당하다’라는 것은 사용자가 터치할 수 있는 객체 간 거리가 너무 가까워서 입력 오류가 발생하면 안 되고, 너무 멀어서 대상을 즉각적으로 터치하기 어려워도 안 된다. Apple의 Human Interface Guidelines에서는 각 객체 간 거리는 8DP 이상 떨어지는 것이 적정하다고 말한다.
다음으로 각 객체의 크기와 흐름을 고려해야 한다. 객체는 너무 커서 사용자의 행동을 방해해서는 안되며, 너무 작아서 터치하기 어려워도 안된다. 객체는 손가락 지문의 면 평균 면적(10~14mm)을 고려하여 적절하게 터치할 수 있는 크기여야 한다.
모바일 특성상 사용자의 시선이 중심부에 집중되므로 여러 객체 간 리스트를 나열할 때에는 Horizontal 보다는 Vertical 형태로 나열하는 것이 좋다. (한 화면에 많이 보여줘야 하는 경우를 제외하곤)
힉의 법칙
선택지가 너무 많으면 인지 부하가 증가한다.
선택지의 개수가 늘어날수록 사용자의 인지 부하(congnitive load)도 증가한다. 인간의 뇌는 화면의 정보를 인식하고 처리하는데 한계가 있기 때문에 너무 많은 정보를 펼쳐서 보여주면 선택 시간이 늘어나고, 스트레스를 받는다.
토스는 정보의 과잉, 과밀을 줄이고 사용자가 빠르게 목적을 달성할 수 있도록 돕는다. 대표적인 예시가 다단 형태로 구분을 두어 하나의 단면에는 하나의 목적을 가진 성격을 가진 객체끼리 그룹핑(예: 쇼핑할인 BEST와 3개의 카드 추천 인터페이스)하여 보여주는 형태로 제공하는 점이다.
밀러의 법칙
보통 사람은 작업 기억에 7(+-2)개의 항목 밖에 저장하지 못한다.
밀러의 법칙은 1956년 인지심리학자 조지 밀러가 ‘마법의 숫자 7, 더하거나 빼기 2 : 정보 처리 용량에 관한 몇 가지 한계’라는 제목으로 발표한 논문에서 제창했다.
사람의 기억 범위에 영향을 미치는 건 글자의 수가 아니라 정보 덩어리(chunk)로 사람들은 정보를 덩어리화해서 기억한다. 즉, 글자 수 7자를 외우는 것과 단어 7개를 외우는데 드는 노력은 비슷하다는 것이다.
우리가 일상생활에서 덩어리화(chunking)를 가장 자주, 또 쉽게 접하는 순간은 휴대폰 번호를 외울 때이다. 01012345678, 010-1234-5678 둘 중 우리는 후자를 봤을 때 더 외우기 쉬운 형태라는 것을 알고 있다.
앱 서비스에서는 레이블에 종속된 객체들을 ‘덩어리화’라고 볼 수 있다. 레이블에 너무 많은 객체를 두면 우리는 어떤 레이블에 어떤 객체가 있었는지 금세 잊어버린다. 토스는 하나의 레이블에 적당한 객체 수와 확실한 경계선을 두어 덩어리화한 케이스라고 볼 수 있다.
포스텔의 법칙
유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가한다.
사용자의 입력은 무조건 수용하되, 사용자에게 요청하는 정보의 양은 보수적으로 책정한다. 한 번에 너무 많은 입력 작업을 요청할수록 인지 에너지를 많이 소모하게 되고, 그만큼 피로도가 쌓인다.
토스는 서비스 초기부터 1 thing / 1 page 철학을 서비스 곳곳에 잘 녹여내 왔다. 놀랍도록 쉽고 간편한 회원가입 프로세스에도 ‘포스텔의 법칙’이 숨어있다.
피크엔드의 법칙
사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다.
존 야블론스키가 저술한《UX/UI의 10가지 심리학 법칙》에 “인간은 자신 인생의 경험을 포괄적인 타임라인이 아니라, 일련의 스냅샷처럼 기억한다”라는 문장이 있다. 앱 사용자 경험도 마찬가지다. 우리가 앱을 사용하면서 중요한 순간, 특히 ‘실패했던 경험’은 더 오래 기억하려는 경향이 있다.
토스는 실패 순간도 최대한 부드럽게 표현하려는 세심한 노력을 곳곳에서 찾을 수 있다. 귀여운 애니메이션을 보여준다던가, 토스 특유의 친근한 비격식체 문구를 보여줌으로써 작은 실패로 느껴지도록 불편함을 최소화했다.
여담인데, fail result screen을 전체적으로 한 번 점검하면 좋을 것 같다. 동일한 조건과 환경에서 실패했는데 객체마다 다른 실패 화면을 보여주는 경우가 왕왕 있었다. (QA를 해버림)
테슬러의 법칙
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 은행 선택 드롭다운 아래에 추천 은행명 버튼을 표시해준다. 이를 클릭하면 드롭다운으로 일일이 찾지 않아도 즉시 해당 은행을 선택할 수 있다.
즉시성, 단순화가 생명인 간편송금 기능에서 사용자가 은행 선택 드롭다운을 펼쳐 수 십 개나 되는 은행 리스트 중 내가 원하는 은행을 찾는다는 것은 매우 수고스러울 것이다.
이렇게 필연적인 복잡성이 발생할 때, 사용자를 어드바이스해 불편함의 간극을 줄이는 게 서비스 제공자의 역할이다.
심미적 사용성 효과
사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식한다.
토스의 인터페이스 디자인이 아름답다는 것에는 대부분 동의할 것이다. ‘심미적 사용성 효과’는 디자인이 아름다우면 사용성도 그만큼 뛰어날 것이다고 기대하는 심리적 효과를 말한다.
기존 금융앱들은 복잡하고 어렵다는 이미지가 강했지만, 토스는 훨씬 쉬운 사용성은 물론 금융앱 답지 않게 캐주얼하고 둥글둥글한 디자인 덕에 ‘금융앱’이 가지고 있던 딱딱한 이미지와 더욱 상반되게 느껴졌다.
심리학에 ‘자동 인지 처리’라는 개념이 있다. 이는 사람들이 외형만 보고 속을 판단하는 것을 말한다. 사람들이 웹사이트를 처음 보고 해당 웹사이트가 어떤지 평가하는 데 걸리는 시간은 50m/s 이내(20분의 1초)라고 한다. 즉, 심미적으로 뛰어난 웹사이트는 초기 수용 형성에 적잖은 영향을 미친다는 것을 시사한다.
폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중 가장 색다른 것만 기억한다.
폰 레스토프 효과는 비슷한 여러 객체가 있는 경우, 특정 기능을 강조하거나 유도하기 위해 진한 컬러, 보색 컬러를 사용하는 시각적 강조 효과를 말한다.
처음 서비스에 유입된 사용자에게 길을 알려주거나, 새로운 기능을 소개할 때, 혹은 알림이나 배지를 사용할 때 자주 마주할 수 있다.
단, 시각적 강조를 너무 무분별하게 남발하는 경우, 사용자의 집중력을 저하시켜 산만해지게 만들 수 있다.
도허티 임계
사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다.
사용자가 원하는 정보를 딜레이 없이 바로 보여주면 좋겠지만, 외부 정보를 불러온다면 어쩔 수 없는 딜레이가 발생한다.
보통 이런 딜레이를 스켈레톤 UI, 로딩 애니메이션(progress animation) 등 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소해준다.
토스의 경우, 딜레이가 거의 없는 편이지만, 계좌 정보 불러오기나, 대출 심사 등 외부 정보를 호출하는 구간에서는 귀엽고 톡톡 튀는 애니메이션을 제공한다.
같이 보면 좋아요
책 ‘UX/UI의 10가지 심리학 법칙’ (존 야블론스키 저)
Mental Models: The Best Way to Make Intelligent Decisions
16 Important UX Design Principles for Newcomers
채드윅 님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
