핀테크 앱 UX 분석: ①자산 연결

핀테크란 금융과 기술을 합한 서비스로, 복잡했던 금융을 사용하기 편리하게 제공하는 것을 말한다. 이전에는 금융 기관이 가진 데이터를 서로 공유하지 않아 금융사마다 흩어진 정보를 한곳에 모아보기 어려웠다. 하지만 ‘마이데이터 법’이 실행으로 개인 데이터를 제3자에게 보낼 수 있게 되면서 불편한 점을 개선할 수 있게 됐다.

덕분에 각종 금융 서비스들이 흩어진 금융 정보를 모아 자산관리를 도와줄 수 있게 되었고, 사용자의 재무 현황 · 소비습관을 분석해 금융상품을 추천할 수 있게 되었다. 이번 글에서는 대표적인 금융 서비스인 ‘토스', ‘카카오뱅크’, ‘뱅크샐러드'의 자산 연결 과정과 자산관리의 UX를 비교 및 분석해 보았다.

‘토스 & 카뱅 & 뱅샐’의 같은 기능, 다른 UX

자산 연결 화면

토스는 ①자산 연결이 가능한 카테고리를 탭을 통해 확인할 수 있으며 ②카테고리 내 리스트를 전체 선택할 수 있다. 전체 카테고리의 리스트를 한 번에 선택할 수 있는 기능은 제공되지 않는다. ③이미 연결된 계좌가 무엇인지 보여주며 ④연결할 수 없는 경우 미리 알려주고 있다. 해당 정보를 자산 연결 결과 화면에서 알려주는 것이 아니라 시작 화면에서 미리 알려주기 때문에, 수고를 들여 실패를 경험하는 부정적인 경험을 막을 수 있다.

카카오뱅크는 ①연결 가능한 계좌를 먼저 보여주고 있는데, 다시 탐색할 필요가 없어 자산 연결 시간을 줄일 수 있다. ②리스트에서 계좌번호와 잔액을 보여줘 사용자가 자주 사용하는 계좌 리스트를 빨리 찾을 수 있다. 다만 그룹핑(구성 요소들이 독립적으로 존재하기보다 함께 존재하려고 하는 성향)이 잘 되어있지 않아 원하는 리스트를 빨리 선택하기 불편하다. 입출금, 예적금, 투자 계좌로 나눠 제공한다면 더욱 좋을 것 같다.

뱅크샐러드는 ①온보딩 화면으로 모든 금융 기관의 정보를 모아볼 수 있다는 자산 연결의 장점을 알려준다. ②전체 선택이 디폴트 값으로 제공되며 바텀시트를 통해 선택 변경을 진행할 수 있다. ③아이콘을 통해 이미 연결된 자산을 알려준다. 스마트폰을 많이 사용하지 않는 사람의 경우 해당 아이콘의 의미를 잘 이해할 수 있을지 의문이다. 토스와 마찬가지로 은행, 증권 등 여러 카테고리가 제공되지만 스크롤을 통해서만 확인이 가능하다.

동의하기 화면

토스는 ①동의하기 화면에서 활성화된 CTA 버튼을 제공하고 있다. ②CTA 버튼을 누르면, 최하단에 위치한 필수 선택 체크박스로 이동된다. 이러한 UX를 사용한 이유는 비활성화된 CTA 버튼을 제공했을 때 비활성화에 대한 해답을 찾는 탐색 시간을 줄이기 위한 것으로 분석된다. ③필수 체크박스를 선택하지 않았을 경우, 체크박스 선택에 대한 이유를 알려줘 사용자의 의문을 해소시켜준다.

카카오뱅크는 약관 동의 단계를 최소화시키기 위해 여러 개의 약관을 한 번에 동의하고 있다. 이렇듯 특정 정책으로 화면의 단계가 많아지거나 복잡해지는 경우 UX를 재설계해 사용자의 수고로움을 덜어주는 것이 중요하다.

뱅크샐러드는 사용자가 동의 리스트 정보를 더 잘 이해할 수 있게 유도한다. 질문으로 제공하며 ‘예’, ‘아니요’ 버튼을 제공하고 있다. 선택을 완료한 리스트는 간결한 상태로 변경되어 사용자가 다음 선택에 집중할 수 있다.

연동된 자산을 보여주는 홈 화면

토스는 ①연동된 자산 정보가 홈 화면에서 자동으로 제공되며 ②자산 탭에서 자세한 정보를 확인할 수 있다. ③총자산과 하단에 계좌가 있고 그 하단에 입출금 계좌, 저축계좌가 있다. 정보 간의 계층 정리가 잘 되어있어 정보를 인지하기 편리하다.

토스의 홈 화면 편집 화면이다. ①’여기에 끌어 놓으면~’ 텍스트로 드래그 앤 드롭 기능을 쉽게 설명하고 있다. ②주식 계좌를 저축 카테고리로 옮길 수 있어 자산관리를 자유자재로 할 수 있는 점이 인상적이다. ③리스트를 홈 화면에서 숨길 수 있으며 직관적인 ‘숨김’ 버튼명을 사용하고 있다. ④사용자에게 필요할 수 있는 기능을 상황에 맞춰 제공하기 위해 계좌 숨김을 누를 경우 계좌 삭제 기능을 함께 제안하고 있다.

카카오뱅크는 연결된 자산 정보들이 홈 화면에서 자동으로 연동되지 않는다. ①3개의 금융사 연결만 가능하며, 선택을 할 때 누르는 순서대로 리스트의 순서가 정해진다. 때문에 드래그 앤 드롭보다 순서 변경이 다소 복잡하다. ②’내 계좌’ 화면에서 ‘다른 금융’ 탭에 들어가야지 모든 정보가 확인 가능하다. 카카오뱅크와 다른 금융사의 정보를 나눠 제공하기 때문에 전체 자산을 확인하기 어려운 아쉬운 점이 있다.

뱅크샐러드는 연동된 정보를 홈 화면에서 자세히 제공하고 있다. 증권계좌 연결을 통해 투자 수익금을 확인할 수 있고 보험료까지 제공된다. 자산관리를 꼼꼼히 하기에 유용하다.

뱅크샐러드의 홈 편집 화면이다. 버튼 선택을 통해 여러 개의 계좌를 한 번에 숨길 수 있다. ①선택을 해지했을 시 ‘목록에 해당 자산을 숨김' 토스트 메시지로 액션에 대한 결과를 잘 보여주고 있다. ②카테고리 자체의 순서를 드래그 앤 드롭으로 변경할 수 있어 홈 편집에 대한 자유도가 높은 편이다.

소비 내역 화면

토스는 ①월별, 주별, 일별 평균 소비금액과 예상 소비 금액을 알려준다. 사용한 금액만 보여주는 것이 아닌, 해당 데이터를 이용해 앞으로 사용할 예상 금액을 제공하는 점이 데이터를 잘 활용한 것 같다. ②월 소비 추이를 선 그래픽으로 제공해 훨씬 빠르게 추이 파악이 가능하며 전월과 비교하기도 쉽다. ③하루마다의 지출과 수입 금액을 파악할 수 있고, 소비금액이 높을 경우 빨간색 텍스트로 제공된다.

카카오뱅크는 자동으로 설정되는 해시태그와 지출 내역을 검색할 수 있다. 포커싱 된 검색 화면에서 해시태그만을 미리 제공하고 있어 해시태그만 검색 가능한 것으로 잘못 이해할 수 있을 것으로 보인다.

뱅크샐러드는 원형 도표로 월 지출을 제공하며 카카오뱅크와 마찬가지로 내역을 검색할 수 있다. 검색 화면에서 내역명과 사용자가 기입한 메모 내용과 같은 검색 가능한 키워드를 설명해 해당 기능에 대한 이해가 더 잘 된다.

인사이트 정리

지금까지 토스, 카카오뱅크, 뱅크샐러드 앱의 자산 연결 과정과 그에 따른 결과를 살펴보았다. 화면별로 발견한 인사이트를 정리하자면 아래와 같다.

1) 자산 연결 화면

• 현황 파악을 위해 이미 연결된 자산 내역을 알려준다.
• 제공되는 카테고리(은행, 증권 등)를 쉽게 파악할 수 있게 제공한다.

2) 동의하기 화면

• 체크박스를 눌러야만 하는 이유를 구체적으로 알려줘 사용자의 의문을 해소시킨다.

3) 연동된 자산을 보여주는 홈 화면

• 계층에 따라 정보를 그룹화하여 사용자가 정보를 쉽게 인지할 수 있도록 한다.

4) 소비내역

• 많은 정보들 중 유의미한 정보를 강조해 제공한다.
• 소비 내역 데이터를 바탕으로 소비 예정 금액을 알려주는 등 데이터를 활용해 추가적인 정보를 전달한다.

다음 편에선 토스, 카카오뱅크, 뱅크샐러드의 대출 UX를 비교해 보겠다.

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.