토스 UX·UI 분석하고 개선점 찾기

대학생 때 정산할 일이 많아서 사용했던 토스앱. 한동안은 이체 수수료 없는 카카오 뱅크와 간편한 카카오 페이의 등장으로 사용하지 않고 있었는데요. 그동안 많이 변한 토스 앱의 UX·UI를 들여다 보고 개선점을 찾아보려고 합니다! 

 

 

다음과 같은 순서로 구성되어 있습니다!
1. 토스는 어떤 서비스일까?
2. 토스의 화면구성은 어떻게 돼 있을까?
3. 개선점은 무엇이 있을까?
4. 토스 앱 분석을 마치며

 

 

1. 토스는 어떤 서비스일까?

토스는 현금, 주식, 대출 등 모든 금융 내역을 확인할 수 있는 금융 앱입니다. 초창기에 ‘간편한 송금’이라는 타이틀로 많은 사람들을 끌어 들였고, 현재는 주식, 대출 등으로 범위를 넓혀가며 금융 토탈 앱으로 자리하고 있죠. 주 사용자는 경제활동을 하는 20-30대이며, 만 14~19세 인구 중에서도 43% 정도가 토스를 사용하고 있습니다.

 

아래는 토스가 혁신적인 새로운 은행이라는 메세지를 담은 토스의 광고 영상입니다.

 

 

 

2. 토스의 화면구성은 어떻게 돼 있을까?

1) 홈

홈 화면에서는 자산, 소비, 투자 등 자신의 자산내역의 총 금액을 확인할 수 있고, ① ② 자세한 내역은 옆에 있는 화살표 버튼이나 ‘내역’ 버튼을 누르면 넘어가는 페이지에서 확인할 수 있습니다. 내역 페이지를 따로 분리하여 정보의 복잡성을 줄이고 있다고 할 수 있습니다. ③ 하단에서는 차 보험료 조회, 대출 한도 조회, 카드 혜택 받기 등의 서비스도 제공하고 있습니다.

 

2) 혜택

① 혜택에서는 보유하고 있는 포인트 금액과 받을 수 있는 혜택들을 리스트 모듈 형태로 나열하고 있습니다. ② 혜택의 상단에는 광고를 광고같지 않게 다른 혜택 리스트와 동일한 형태로 노출하여 사용자가 광고를 부담스럽지 않게 볼 수 있도록 시각적으로 고려했음을 알 수 있습니다. 그리고 광고를 3초 보면 포인트라는 보상도 주기 때문에 앱을 사용하는 동안 불쾌한 감정이 들지 않도록 배려하고 있다고 할 수 있습니다.

 

3) 주식

① 인기 있는 주식의 정보를 리스트 모듈 형태로 제공해 주고 있으며, 각 주식 리스트 모듈에는 회사 로고, 이름, 추가한 인원의 내용이 포함되어 있습니다. ‘추가’ 버튼을 통해 관심 주식 목록에 추가하면 해당 주식의 소식만 선택적으로 볼 수 있습니다. ‘주식’이라 하면 복잡한 숫자와 그래프들이 있는 페이지가 연상되는데, 토스의 주식 탭에서는 주식에 대한 정보 중 필요한 정보만 최소한으로 볼 수 있도록 고려했다고 할 수 있습니다.

② 주식 탭 하단에 토스증권에 관련한 주요 정보를 열거하고 있습니다. 투자 시 유의사항과 고객센터, 개인정보처리방침 등의 정보를 확인할 수 있습니다.

 

4) 송금 

토스 앱에서 송금은 가장 핵심적인 부분이라고 할 수 있죠. 송금하는 과정에서 페이지 수가 늘어나더라도 각 페이지에서 하나의 태스크 씩만 처리하는 것이 인상 깊습니다.

① 계좌번호로 돈을 보낼 것인지, 연락처로 돈을 보낼 것인지 선택할 수 있도록 Segment picker 형태의 컴포넌트를 사용하고 있습니다. Segment picker를 사용함으로써 정보의 위계질서를 효과적으로 정리하고 정보의 복잡성을 줄여 사용성을 높이고 있습니다.

② ③ 해당 통장 계좌에 있는 잔액과 출금 가능 금액 정보를 제공함으로써 사용자가 얼마를 송금할지 빠르게 인지할 수 있도록 도와주고 있습니다.

④ 토스는 사용자에게 복잡한 정보들을 한 페이지에 하나씩 띄워서 쉽게 처리하도록 도와주고 있습니다. 이 페이지에서는 이체 금액을 한 번 더 확인하는 동시에 받는 분에게 표시되는 텍스트 정보를 제공해 주고 있습니다. 해당 부분을 클릭하면 수정도 가능합니다.

⑤ 존 야블론스키의 UX의 10가지 심리학 법칙 중 ‘도허티 임계’에 의하면 사용자는 0.4초 이내에 나타나지 않으면 지루해 하거나 잘못되었다고 인지한다고 합니다. 이를 방지하여 프로그레스 바, 스켈레통 UI, 로딩 애니메이션 등 시각적으로 로딩되고 있다는 것을 알려주면 사용자들은 기다리는 것에 대해 관대해 지는데요. 토스에서 이체를 할 때 기술적인 처리를 위해 기다려야 하는데, 도형 형태의 그래픽에 빠른 속도의 애니메이션을 넣어 빠르게 처리되고 있다는 것을 친절하게 알려주고 있습니다.

 

5) 전체 

① 전체 페이지에서는 최근, 추천, 기간 한정 이벤트, 자산 등의 그룹으로 나누어서 많은 정보를 잘 정리하여 제공해 주고 있습니다. ② ‘주택 청약 공고’ 옆에 ‘새로 나온’이 눈에 띄는데요. 새로운 서비스라는 것을 New Badge 형태로 적극적으로 알려주고 있습니다. 보통 New Badge는 뱃지 내부에 ‘N’이나 ‘NEW’ 등 영어를 쓰는데 토스에서는 한글을 쓰고 있다는 것이 인상 깊습니다.

 

6) 이렇게 쉬운 송금, 안전한 거 맞나요?

너무 쉬우면 오히려 잘못된 것이 아닌지 의심하게 되지 않나요? 토스는 ‘쉬운 송금’ 서비스를 제공하면서 다른 은행 앱과 다르게 너무 쉬워서 이상하게 느낄 사용자들을 위해서 ‘이렇게 쉬운 송금이 안전한 이유’에 대해서 친절하게 설명해 주고 있습니다.

 

7) 나만의 눈사람 만들기

겨울을 맞이해서 이벤트로 진행하는 ‘나만의 눈사람 만들기’라는 한시적인 서비스도 있습니다. 귀여운 3D 형태의 눈사람에게 옷을 입히면, 초록우산 어린이 재단에 천원이라는 부담되지 않는 금액을 일시후원하도록 유도하고 있습니다. ① 또한 금전적인 후원을 거절할 수 있는 ‘마음만 보내기’ 버튼의 워딩이 사용자들이 부담을 느끼지 않도록 배려했다고 느껴지네요! ② 후에는 이미지를 저장하거나 이벤트를 공유할 수도 있습니다.

 

 

3. 개선점은 무엇이 있을까?

1) 매달 나가는 돈의 자동이체 예정일 전에 알려주면 좋겠어!

파킹통장에 돈을 다 넣어두고 필요할 때 이체해서 쓰는 편인데요. 구독료나 통신비 같이 매달 나가는 돈은 하루 이틀 전에 빠져나가는 통장에 입금을 해 둡니다. 그런데 가끔 까먹고 이체를 못 해서 자동이체를 실패하고 늦어지는 경우가 생겨서 불편하게 느껴졌습니다.

AS-IS
지금은 토스 홈 화면에서 소비 내역으로 들어가면 하단에 ‘매달 나가는 돈’이라는 이름으로 자동이체 내역과 예정 날짜, 완료 여부를 알려주고 있습니다. 하지만 들어가서 확인하지 않으면 알 수 없죠.

TO-BE

자동이체로 등록해 놓은 통장에 잔고가 없다면 자동이체 예정일 전에 홈 화면 상단에서 알려주는 방법으로 솔루션을 제안해 보았습니다!

 

 

 

4. 토스 앱 분석을 마치며

제가 대학생 때 토스를 처음 쓸 때는 ‘간편 송금’ 서비스밖에 없었던 것 같은데요. 지금은 자산 내역 확인도 가능하고 주식이나 대출도 확인할 수 있는 등 서비스를 확장한 것을 확인할 수 있었습니다. 금융 토탈 앱이라고 해도 과언이 아닐 것 같아요. 다른 은행 앱과 다르게 심플한 UX·UI를 제공하고 있다는 점, 광고나 후원 등을 유도하면서도 사용자들이 부담감을 느끼지 않도록 하는 점에서 진정한 배려가 느껴졌습니다. 토스의 일하는 방식이나 태도에 대해서도 관심 있게 보고 있는데 앞으로 토스가 어떻게 서비스를 유지하고 성장해 나갈지 기대가 됩니다! 🥳