토스에서 찾아본 10가지 UX 법칙
사용자 경험에 '미친' 조직은 뭐가 다를까
존 야블론스키의 저서 ≪UX/UI의 10가지 심리학 법칙≫에서 소개하는 UX 법칙을 토스 앱에서 찾아보았습니다.
들어가면서
지난 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
*서플, 서핏, 엔씨소프트 기술블로그에 해당 글이 소개되었습니다.
오늘도 '좋아요'를 눌러주신 수고에 감사드립니다 :)
2022. 09. 28 채드윅.
