뭐? 토스가 은행 UI를 따라한다고?

기획 도전기

by 기여자 2023. 1. 25. 22:28

얼마 전 토스에서 “전체” 탭의 UI가 변경된 것을 확인할 수 있었다

초기 토스는 맨 처음 기능 나열에 불과하던 상태였으나 업데이트로 타이틀별로 묶어둔 스크롤 뷰가 되었다.

여러 핀테크 한다는 업계가 이와 같은 UI로 전체 기능 목록을 관리했다.

이에 대한 자료는 없지만 토스가 스크롤뷰를 채택한 이유로 “신규 기능이 추가될 때 순서를 자유롭게 바꿀 수 있고 유저가 클릭하는 Depth를 줄일 수 있다” 로 생각하고 있었다.

그런데 갑자기 토스의 전체 목록 ui가 은행의 전체 목록과 같아졌다.

왜 이런 UI를 채택하게 된 걸까

하나의 앱에 기능이 너무 많아졌다
- 원 앱 전략으로 하나의 어플에 각종 금융 서비스에 주민센터 기능까지 다 들어가고 이 기능들이 수시로 업데이트되고 삭제된다.
- 기존 스크롤 뷰로 유저가 불편함을 느낄 만큼 너무 기능이 많다
(추측) 검색 사용 빈도가 높지 않다
- 사용자가 기능을 찾을 때 검색보다 직접 스크롤을 내려 탐색한다
- 검색은 이미 아는 기능을 찾는 것이지 모르는 기능을 찾을 수 없다

그럼에도 토스가 차별점을 두려는 것

토스의 UI를 보면서 알 수 있는 점

토스에서 일하는 분들은 인포메이션 아키텍처 이론을 지키기 위해 많은 노력을 한 것을 볼 수 있었다.

각 내비게이션으로 현재 유저가 어느 위치에서 정보를 탐색 중인지 표시한다.
자주 접속하는 사람을 위해 아이콘을 추가하여 텍스트를 읽기 전에 빠르게 선택할 수 있도록 했다.
최근 방문한 기능을 표시하여 탐색 시간을 더욱 절감하도록 했다.
“내 신용점수”와 같이 모호함을 제거하면서 읽기 쉽고 이해하기 쉽도록 글을 작성했다.
- 야메군 85기 기획마인드 강의를 들을 때 "내 주문내역"→"주문내역"으로 바꿔야 하며 내 주문내역이 아닌 내역이 있나? 와 같은 모호함을 없애라고 했다
- 그런데 토스는 보험 둘러보기와 내 보험이 따로 존재한다. 만약 보험과 보험 둘러보기로 이름을 정하면 모호함이 생길 수 있어 주체를 일부러 표시한 것을 확인할 수 있었다.

다른 금융앱은 어떨까

왼쪽부터 1. 신한금융투자, 2. 뱅크샐러드, 3. 카카오뱅크, 4. 우체국, 5. 농협, 6. PASS

두 가지로 나누어 비교해 봤다.

전통적인 Depth를 타고 내려가는 UI

1번 신한은 작은 화면에 너무 많은 내비게이션(상단, 옆, 하단)과 집중을 분산시키는 배너가 있다. 특히 하단 내비게이션은 측면 및 상단과 아무 상관이 없다.
4번 우체국 또한 측면 내비게이션이 그 옆 스크롤뷰와 전혀 관련이 없다
5번 농협은 비교적 정보구조 이론을 준수한다 전역 내비게이션과 지역(측면) 내비게이션이 각 Depth의 상태를 잘 표시하고 있다. 다만 커다란 검색창과 아래 내용과 관련 없는 내비게이션으로 좁은 스마트폰 화면에서 부피를 차지하고 있어 화면에서 보여줘야 할 부분의 크기가 줄어든다

각 기능별로 그룹을 보여주되 스크롤로만 보여주는 UI

2번 뱅샐은 초기화면에서 하단 내비게이션이 아닌 상단에 독립된 화면에서 전체 메뉴에 진입한다
- 하단 내비게이션에 기능이 많은데 각 기능이 뱅샐 유저가 집중해야 하는 기능이지 전체기능은 유저가 자주 접속할 요소가 아니라는 것이 뱅샐의 의도로 보인다
3번 카카오뱅크는 타 은행대비 한 화면에 기능이 통합된 경우가 있어 스크롤뷰로 가능한 만큼 기능 수가 많지 않다.
6번 pass는 아직 기능이 많지 않은 데다가 2열로 배치하여 상당히 짧은 스크롤뷰로 정보를 표시한다

번외

하나은행은 내부 업데이트가 실패하여 확인할 수 없었다.

앞으로도 확인 안 할 것 같다...

참고자료

북극곰책(인포메이션 아키텍처(개정판))

토스 블로그

과거 토스 전체 화면 사진출처

과거 수강한 기획 마인드 강의