디자이너 3명의 관점으로 본 '토스'의 사용자 경험
처음 사용해 본, 몇 번 사용해 본, 꽤 사용해 본 디자이너 3인의 대화
2월 23일! 포스트 IT의 전신인 UXUI포트폴리오 스터디에서 첫 번째 앱 분석을 시작했어요. 첫 주자는 바로 2015년 출범한 유니콘 핀테크 기업 '토스'입니다. 글쓴이인 Sue도 오늘은 카드를 얼마나 썼는지 확인할 때, 간편 송금을 할 때 하루 한 번은 꼭 열어보는 유용한 앱입니다. 한국의 핀테크 대표주자이자 얼마 전 흑자를 보기도 한 '토스'를 Sue, Bella, Mary와 함께 사용자 관점에서 분석해보았습니다.
토스 기업 소개이 글의 목차
토스의 첫인상
1. 회원가입
2. 홈/송금하기
3. 내 소비
4. 개설
결론 한마디!
토스의 첫인상
Mary: 먼저 토스가 하는 일에 대해 말해보자면 '금융이 쉬워진다.'(간편 송금 및 결제), '내 모든 돈을 토스에서 간편하게'(계좌관리, 투자 및 보험). 인 것 같아. 나는 이번에 토스를 처음 깔아봤는데, 이 모토가 무슨 말인지 이해가 바로 될 만큼 간편한 어플이더라. 그리고 디자이너로서 가장 눈에 들어왔던 부분은 아무래도 깔끔하고 가시성 좋은 UI였어. 이 어플을 보면서 특히 디자인의 중요성을 다시금 느꼈지 ㅎㅎ
Sue: 나는 대학교 2학년 때인가 간편 송금 기능만 있었을 때부터 사용하고 있었는데, 사회인이 되고 재테크할 일이 생기면서 더 자주 열어보게 되는 것 같아. 한 어플을 5년 이상 사용하는 일이 손에 꼽을 정도인데, 토스가 그중 하나였어. 그만큼 간편한 사용성과 유용성이 특징인 어플인 것 같아. 나날이 발전하는 속도가 무섭기도 하고. 얼마 전엔 흑자를 보기도 했더라!
Bella: 토스가 불과 6년 만에 발전함과 동시에 로고도 바뀌었는데, 설명을 보니까 '공 던지듯 쉽고 간편한 금융 경험을 제공하겠다는 의지를 담아 날아가는 공의 역동성과 날렵함을 표현'했다고 하는데 솔직히 설명 듣기 전까지는 이해하지 못했어. 하지만 메인 컬러가 청량한 파란색으로 바뀌어서 훨씬 세련되고 신뢰감이 높아진 것 같아. 그리고 런처 아이콘에도 토스라는 글자가 빠지고 공 모양의 로고만 배치되었는데, 토스팀이 추구하는 클리어함이 더 강조되는 느낌이야.
토스 로고 변경 전후
토스 런처 아이콘1. 회원가입
사진 출처: 토스 공식 홈페이지Bella: 보통 처음 앱을 실행할 때 로그인 화면이나 로그인 없이 둘러보기 기능으로 넘어가는 것이 보통인데, 이름, 주민등록번호 등 최소한의 정보 요구로 회원가입을 유도했더라고. 문자를 입력하면 확인 버튼이 키패드 위에 올라가서 키패드를 내리지 않고 바로 확인 버튼을 누를 수 있어서 편했어. 이름 – 주민등록번호 – 통신사 – 휴대폰 번호를 입력하는 창이 한 번에 나온 후 입력을 받는 형식이 아니고 하나씩 입력하면 스택처럼 쌓이는 방식이 역시 사용성이 좋더라.
Sue: (https://blog.toss.im/2018/06/14/toss/tips/toss-service-manual-1/) 이 링크에 들어가 보면 토스가 어떤 방식으로 회원가입 폼을 만들었는지 구체적으로 나와있어! 요즘 회원가입 방식을 이렇게 하는 추세인 건 확실한 것 같아. 한 번에 이름부터 주민번호, 주소, 전화번호를 한꺼번에 쓰라는 입력 폼을 보면 쓰기도 전에 힘이 빠지거든. '세탁 특공대'라는 앱도 비슷한데, 한 번에 한 가지를 입력하는 방식에다가 '대화형'입력 방식을 넣어놨더라고. 친구가 내 신상을 터는? 느낌이었지만 대화를 주고받으면서 정보를 입력하는 방식이 편하고 좋았어.
2. 홈/송금하기
토스와 우리은행 메인 페이지 비교 (2020년 2월 기준)Bella: (2020년 2월 기준) 카드형 디자인 방식을 사용했더라고. 리스트형보다 여러 기능을 한 번에 보여줄 때 그룹 지어 인식할 수 있게 하는 것 같아. 하단 탭에 가장 중요하고 자주 쓰이는 3개의 기능을 차례대로 나열한 후에 나머지 기능을 햄버거 아이콘을 이용해서 한 번에 넣었는데, 요즘 많이 쓰이는 방식인 것 같아. 가장 많이 쓰이는 송금하기 버튼을 가장 상단에 배치했고 그 아래로 계좌 – 카드 – 투자 – 대출 – 신용등급으로 나열되어있는데, 사용 빈도수를 기준으로 나열한 것 같아.
2020년 5월 기준 UISue: 2020년 5월 기준으로 다시 한번 앱을 열어봤더니 불과 몇 개월 만에 정말 많은 요소가 바뀌어있었어. 일단 Bella가 말했던 카드형 컴포넌트들이 없어지면서 구분선으로 기능을 분리해놓았고, 송금 버튼이 프로필 바로 옆에 눈에 띄는 버튼으로 큼지막하게 배치되었어. 나는 2월부터 계속 사용하면서 UI가 바뀐 줄도 모르고 계속 사용해왔는데 그만큼 설명이 필요 없도록 자연스럽게 바뀐 것 같아. 또한 은행 관련 아이콘도 전부 정비된 것 같은데, 훨씬 가시성이 높아졌어.
또 긴급재난지원금 같은 시의성 있는 기능들을 위에 배치해놔서 더 실용적인 것 같아. 토스 블로그에서 긴급재난지원금 관련된 스토리도 읽었는데, 한계를 뛰어넘으면서 어떻게든 실행하는 모습을 보니 나까지 유노윤호급 열정이 샘솟더라.. 토스는 이런 일련의 과정들을 드러냄으로써 더 브랜딩이 탄탄해지는 느낌이야.
송금하기/더치페이 화면Bella: 더치페이 기능이 있다는 것을 처음 알게 되었는데, ‘나눌 돈을 계산하지 않아도 계좌번호를 몰라도 가능’하다는 장점을 내세우고 있더라고. 아무래도 카카오의 더치페이 기능은 토스에 비해 단톡 방에서 바로 보낼 수 있을뿐더러 토스의 터치페이 기능이 특별한 점이 없다 보니 이용자 수가 많진 않을 것 같아. 대신 금액을 입력한 뒤 계좌나 전화번호를 선택하고 touch ID만 하면 송금이 간편하게 끝나더라고! 너무 빨리 끝나버려서 허무하기까지 할 정도로 쉬웠어. 신기한 점은 송금뿐만 아니라 본인 계좌에서 토스 머니로 돈을 가져오는 것 또한 가능하다는 점이었어.
3. 내 소비
내 소비-내역 세부사항Bella: 내 소비 기능은 ‘뱅크 샐러드’와 매우 비슷하더라고. 특이점이라고 한다면 거래 내역 앞부분에 브랜드 로고나 아이콘이 있어서 한눈에 내 소비를 직관적으로 알 수 있다는 것이었어. ‘도전 아껴 쓰기’라는 기능이 있는데, 이 기능에서 술 값 줄이기, 교통비 줄이기 등 세부적으로 절약할 수 있도록 해주더라고. 효과가 있는지는 좀 더 써봐야 알 듯하지만ㅎㅎ. 토스에서 카드사와 손잡고 다양한 혜택을 제공하는데 사용자 입장에서는 가장 이득인 부분이 아닐까 싶어.
좀 아쉬웠던 점은 내 계좌에서 나의 다른 계좌로 송금을 할 때, 내 통장에서 예적금이 인출될 때 '지출'로 되어있어서 실제 지출 내역과 토스에서 보이는 지출 내역과 달라서 불편했어. 내 통장에서 다른 통장으로 이동만 한 건데 '지출'로 바뀌다니.. 한 달에 몇 백만 원 옮겼다가는 배보다 배꼽이 더 큰 것처럼 보일 것 같아. 마지막으로 나는 지금 잠깐 프리랜서로 생활하고 있는데, 지출 분석이 아니라 수익 분석도 알고 싶어. 나중에 프리랜서들을 위한 수익 분석 서비스도 나온다면 너무 좋을 듯 해.
Mary: 소비분석 부분에서 비고정 지출 항목을 보면서 자기반성을 많이 하게 됐어. 이번 달 내가 얼마나 충동구매를 많이 했는지 돌아보고, 다음 달 계획 세우는데 도움이 되더라고. 역시나 깔끔한 인포그래픽 덕인지, 내가 돈을 어디에 얼마나 썼는지 한눈에 드러나서 경각심이 들었어. 돈의 사용보다 사용자 관점에서 절약할 수 있게끔 도와주는 어플이라는 게 확 와 닿는 부분이야. 그리고 이모지와 게임에서 많이 본 듯한 '편의점 지배자' 같은 호칭은 은근 승부욕을 자극한달까.
4. 개설
Mary: 상품 중개를 통한 수익모델 구조 완성이 훌륭하다고 생각해. 아쉬웠던 점은 카드 혜택 부분에서 '지금 인기 있는 카드' 카테고리가 맨 처음 보이는데, 사실 다른 사람들에게 인기 있는 카드는 별로 궁금하지 않거든.. 내 소비를 분석해서 그것을 토대로 가장 많은 혜택을 받을 수 있는 카드가 제일 궁금해. 실제로 카드를 고를 때 나에게 가장 큰 혜택을 주는 카드인지 이리저리 분석하느라 시간을 다 보내기도 하니까 말이야.
Sue: 나는 얼마 전에 암보험을 들려고 토스의 착한 암 보험을 실행해봤어. 설계사 없이 대화 형식으로 정보를 주고받다 보니 정말 간편했는데, 이전 목록을 보고 싶어서 뒤로 가기를 누르면 다시 처음부터 정보를 입력해야 해서 조금 불편했어. 각 질문별 대화 내용이 저장되긴 하지만 어쨌거나 처음부터 다시 대화를 시작해야 하니까. 그리고 암보험을 제공하는 기업은 하나밖에 없어서, 처음 암보험을 들어보는 나로서는 이게 올바르게 하는 건지.. 보장 내용은 괜찮은 건지 한참 서치 해보고 나서 겨우겨우 마무리할 수 있었어. 그래도 이렇게 간편한 형식으로 암보험을 들 수 있다니! 나 같은 사회초년생들에겐 단비 같은 존재가 아닐 수 없어.
결론
Bella: 금융 관련 앱은 입력해야 할 것도 많고 인증해야 할 것도 많아서 복잡하게 느껴지기 쉬운데, 토스는 이것을 보안하기 위해서 아주 최소한의 정보만 화면에 담았다는 것이 잘 느껴졌어. 컬러나 글자 크기 등 디자인 시스템이 잘 지켜져서 매우 정리되어 보였어.
Mary: 토스는 디자인의 중요성을 가장 잘 보여주는 어플이 아닌가 싶어. '도전, 아껴 쓰기' 부분이나 '거래 횟수 top 5'를 아이콘과 인포그래픽 디자인 없이 글줄로만 보여줬더라면 사용자에게 미칠 영향이 훨씬 감소하지 않았을까? 내가 쓴 돈을 세밀하게 분석하되 간결하게 이미지로 보여줌으로써 번거로운 가계 관리를 심리적으로 간편하게 느낄 수 있었어.
Sue: 토스는 토스만의 조직 문화뿐만 아니라 TDS와 같이 (https://blog.toss.im/2019/08/02/tossteam/people/toss-design-team-qna/) 디자인 시스템도 매우 잘 정립되어있었어. 그래서 그런지 변화에 발 빠르게 대응하고, 직관적이면서 깔끔한 UI를 제공하더라고. 뭔가 UXUI계의 표준처럼 어떤 앱을 구상하든 한 번쯤은 참고하게 되는 어플 같아.
이 글은 2020년 2월 3명이 참여한 UXUI 스터디에서 나눈 글과 PT를 대화 형식으로 풀어낸 글입니다.
