UI·UX 디자인 공부/제로베이스 스쿨 - 레퍼런스 분석

레퍼런스 분석 5주차 [뱅크샐러드]

CY__ 2024. 10. 5. 11:34

 

 0. About 뱅크샐러드 

뱅크샐러드는 금융 상품 비교와 자산 관리뿐 아니라 건강 검사까지 제공하는 종합 서비스다.

계좌, 카드, 대출 등의 자산 관리 및 가계부를 비롯해 무료 건강 검사 서비스와

신용카드·대출 금리·주택담보대출·자동차 보험 등 다양한 금융 상품을 비교할 수 있는 정보를 제공중이다.

이 앱을 선택한 이유는 지금 그룹 프로젝트로 [토스] 유저 리서치를 진행중인데, 주요 경쟁사 중 [뱅크샐러드]가 포함되어 있다.

토스의 주요 경쟁사 중 이 [뱅크샐러드]를 몇 년째 이 앱으로만 가계부를 관리하고 있어서

더 자세히 파악할 수 있을 것 같다고 생각되어서 레퍼런스 분석을 진행하게 되었다. 
 


 

 1. 화면 구성 분석 

 

- 화면 구성 분석은 푸터의 탭별로 이루어졌다.

 

 1) 홈 (메인화면) 

  • 메인화면 페이지이자 푸터의 [홈] 페이지

① Header 헤더

좌상단 아이콘 터치 한 번으로 금액 숨김을 on/off할 수 있다.

 

우상단 - 알림

 

자산 연결, 혜택 알림, 예산, 지출 등 다양한 알림 메시지가 나타난다.

기본적으로 연한 초록색으로 표시되며 알림 메시지를 터치해서 읽으면 연한 초록색 배경은 사라진다. 

설정 페이지에서 원하는 알림만 받을 수 있도록 설정할 수 있다.

소비 생활, 금융 생활, 건강 생활, 자산 생활, 샐러드게임, 이벤트 소식 알림 순서로 총 6개의 카테고리로 이루어져 있으며

알림 설정은 토글로 디자인 되어있다.

 

우상단 - 전체 메뉴

 

전체 메뉴를 터치하면 뱅크샐러드에서 제공중인 모든 서비스를 둘러볼 수 있다.

금융 서비스를 제공하는 앱이다 보니 다소 어려울 수 있는 용어들도 존재하고 메뉴가 굉장히 많이 있는 것을 볼 수 있다.

원하는 메뉴를 바로 찾을 수 있도록 상단에 검색창을 두었고

그 밑으로 사용자들이 대체적으로 가장 많이 찾는 메뉴를 배치했다.

최근 이용 탭도 있어서 최근에 어떤 걸 검색해서 이용했는지 바로 확인할 수 있도록 했다. 

 

② 광고 배너

다양한 금융 상품과 이벤트 광고 배너다.

 

③ 빠른이동

용돈벌기, 보험진단, 대출찾기, 카드이벤트 등 빠른이동 아이콘이다.

 

④ 입출금 계좌

자산 중 계좌 현황을 볼 수 있다. [송금]버튼으로 빠르게 송금화면으로 이동할 수 있다.

'○○○님의 종잣돈'에서 계좌의 총 금액을 볼 수 있다. (위 화면은 숨김처리를 해서 보이지 않는다.)

계좌 터치 시, 푸터의 [자산] 페이지에서 계좌 내역을 확인할 수 있다.

 

⑤ 순자산

입출금 계좌를 비롯해 카드이용대금, 페이머니, 포인트, 현금 등 모든 자산을 종합하여 현황을 볼 수 있다.

순자산 터치 시 푸터의 [자산] 페이지로 이동한다

 

⑥ 이번 달 지출

오늘의 지출, 금융 일정(교통비, 통신비, 월세 등 고정비), 카드 지출 등

이번 달의 지출을 빠르게 파악할 수 있다.

터치 시 푸터의 [가계부] 페이지로 이동한다.

 

⑦ 인기 금융 상품

카드, 대출, 보험, 예적금 등 인기 금융 상품을 확인할 수 있다.

맞춤 상품을 추천해주기도 한다.

 

⑧ 순서 편집 / 연결 관리

홈 화면의 모듈들의 순서를 편집할 수 있는 버튼, 자산 연결 관리를 할 수 있는 버튼이다.

 

⑨ Footer 푸터

[홈] [자산] [가계부] [건강] [금융쇼핑] 5개의 탭으로 이루어져 있다.

 

 

 2) 자산 - 조회 

  • 푸터의 [자산] 페이지 - '조회'

 

[자산]의 '조회'탭은 크게 분석, 계좌·현금, 카드, 신용, 포인트, 기타 금융 상품 6개의 모듈로 이루어져 있다.

각 모듈 사이에 적절히 간격을 두어서 분리감을 잘 나타낸 것이 특징이다. 

 

 

 

① 간편송금

① 간편송금

 

 

간편송금 아이콘을 누르면 송금할 수 있는 페이지로 이동한다.

기본적으로 내 계좌로 송금할 수 있고, 그 밑으로 계좌번호를 직접 입력할 수 있는 버튼이 있어서

남에게 보낼 때 버튼을 누르고 은행을 고른 뒤 계좌번호를 입력하고 금액을 입력하면 된다.

송금할 때 별도의 송금 페이지로 이동하지 않고 모달이 나타나서

페이지 이동 없이 간편송금이라는 이름 그대로 정말 간편하게 송금을 할 수 있도록 했다.

우상단의 ··· 아이콘을 터치하면 뱅크샐러드 인증서를 확인할 수 있다.

인증서는 큰 카드의 형태로 디자인되어있으며 뱅크샐러드의 Primary 컬러인 녹색으로 되어있다.

(여담이지만, 녹색은 신뢰감을 나타내는 컬러라고 한다.)

인증서 화면에서 주로 이용할만한 항목을 빨간색으로 표시해서 사용자가 한눈에 인지할 수 있도록 한 것 또한 특징이다.

 

 

② 분석

② 분석

 

자산에 대한 구체적인 분석 페이지로 이동한다.

 

분석 페이지로 들어가면 기본적으로 자산의 [추이]와 [구성]을 확인할 수 있다.

추이를 보면 자산과 부채를 보여주는 막대 그래프와 순자산을 보여주는 꺾은선 그래프가 함께 나타나고

구성을 누르면 순자산의 구성 비율을 각 자산마다 지정된 색상으로 가로 막대 bar의 형태로 보여준다.

우상단의 설정 버튼을 누르면 자산 분석에 대한 설정을 할 수 있는 모달이 아래서부터 나타난다.

현재 나는 순자산 숨김으로 설정해서 자산 현황이 보이지 않는데,

"꾹 누르기"부분을 누르면 순자산이 보이게 된다.

 

 

편집을 누르면 순자산에 반영할 자산을 선택할 수 있는 페이지로 이동한다.

순자산에 반영할 자산은 1개 이상이어야 한다.

보드 추가를 누르면 자산 현황에 보일 보드를 추가할 수 있다.

내 자산 관리부터 신용, 보험, 투자 등 다양한 자산을 볼 수 있다.

보드 편집을 누르면 보드간 순서를 변경할 수 있다.

사용자가 원하는 정보만을 택하고 그 순서까지 변경할 수 있다는 점에서 사용성과 UX를 굉장히 신경썼다는 것을 알 수 있었다.

 

 

③ 계좌·현금

③ 계좌·현금

 

현재 나의 계좌와 현금이 얼마있는지 볼 수 있는 모듈이다.

 

먼저 계좌를 터치하면 그 계좌에서 일어난 모든 거래내역들을 볼 수 있다.

[전체] [입금] [출금] 중 원하는 내역을 탭하여 볼 수 있다.

계좌번호를 터치하면 복사가 되면서 Toast 알림이 뜬다.

송금을 누르면 위에서 보았던 간편송금 화면으로 이동한다.

관리를 누르면 계좌를 관리할 수 있는 페이지로 이동한다.

계좌 이름을 바꿀 수 있고 계좌의 종류를 설정할 수 있으며 그 계좌에 대한 메모를 작성할 수 있다.

그 외의 정보는 바꿀 수 없다.(당연하다.. 은행 계좌니까)

연결 관리를 누르면 계좌의 연결을 해제하거나 추가 또는 삭제할 수 있고 연결정보를 확인할 수 있다.

 

 

현금을 터치하면 현금을 관리할 수 있는 페이지로 이동한다.

여기서도 [전체] [입금] [출금] 3개의 탭으로 원하는 내역을 볼 수 있다.

현금 현황에서도, 관리 페이지에서도 보유한 현금을 입력할 수 있다.

나는 뱅크샐러드를 오래동안 써온 사용자지만 이 기능은 한 번 써봤나..

요즘은 현금을 들고다니는 일이 거의 없으니까..

그럼에도 현금을 많이 사용하는 사람들도 분명 있을 것이기 때문에 기능자체는 필요하다고 생각됐다.

 

④ 카드

④ 카드

 

현재 보유하고 있는 카드와 각 카드의 내역을 확인할 수 있다.

 

 

크게 [내 카드]와 [카드 추천] 탭으로 구성되어 있다.

먼저 내 카드 탭을 보면, 이번 달의 카드 내역과 각 카드별 이용 대금을 대략적으로 볼 수 있다.

카드 하나를 선택하면, 상세 내역을 볼 수 있으며 받은 혜택과 함께 카드 추천을 받을 수 있다.

'다른 카드로 바꾸면 연 ○○○원의 혜택을 더 받을 수 있어요'를 터치하면

나의 결제 내역에 기반해서 더 좋은 카드를 보여준다.

 

 

다시 돌아와서, 상단의 ··· 버튼을 누르면 카드를 설정할 수 있는 모달이 나타난다.

카드 목록 편집을 누르면 [자산] 페이지 하단에 있는 ⑨ [편집하기]와 동일한 화면이 나타나기 때문에 지금은 설명을 생략한다.

연결 관리하기를 누르면 카드 연결을 추가할 수 있는 페이지로 이동한다.

카드의 목록을 아이콘과 함께 큰 바둑판 형식으로 나타냈다.

[내 카드]에 이어 [카드 추천] 탭을 누르면 나의 소비습관에 기반하여 놓친 혜택과 카드를 추천해주는 화면이 나타난다.

여기서 맞춤형 서비스를 제공받는 기분을 들게 해서 더욱 서비스에 충성할 수 있도록 한 것 같다고 느꼈다.

 

 

⑤ 신용

⑤ 신용

 

신용 점수와 리포트, 조회·변동내역을 볼 수 있다.

화면 캡쳐때문에 확인할 수 없지만, 선물함 일러스트는 애니메이션으로 되어있다.

 

 

⑥ 페이머니

⑥ 페이머니

 

뱅샐머니, 네이버페이 머니, 카카오페이 머니 등 다양한 서비스의 페이머니를 확인할 수 있다.

상세 내역 화면은 카드 내역 화면과 디자인이 동일하기 때문에 생략하겠다.

 

 

⑦ 포인트

⑦ 포인트

 

 

각 카드와 페이 포인트 현황을 보여준다.

 

 

⑧ 기타 금융 상품

 

대출, 자동차, 보험, 투자, 부동산, 기타 실물자산 등의 금융 상품과 부가적인 자산을 볼 수 있다.

 

 

⑨ 편집하기/추가하기

⑨ 편집하기/추가하기

 

 

편집하기를 누르면 자산의 순서를 옮기거나 숨길 수 있다.

전체적인 틀의 순서 뿐만 아니라 계좌의 순서, 카드의 순서, 페이머니의 순서 등 세부내용의 순서도 바꿀 수 있다.

자산 숨기기와 보이기는 토글로 디자인 되어있다.

② 분석에서 보드를 추가하고 제거할 수 있었던 것과는 달리, 전체 자산에 관해서는 삭제를 할수는 없다.

디자인 자체는 각 모듈마다 짙게 그림자 효과가 들어가있는 등, 보드와 비슷하다.

 

 

추가하기를 누르면 자산을 추가할 수 있는 화면으로 이동한다. (카드 목록 편집을 눌렀을 때와 동일한 화면)

은행, 저축은행, 페이머니, 카드, 증권, 할부금융, 건강 등 자산과 관련된 모든 항목을 추가할 수 있다.

 

 

상단 보라색 '모든 자산을 한 번에 연결해 보세요' 부분을 터치하면

은행 아이콘들이 횡렬 애니메이션으로 나타난다.

 

 

 2) 자산 - 목표 

    • 푸터의 [자산] 페이지 - '목표'

 

[자산]의 '목표' 탭은 이번 달의 수입·저축·지출, 예적금 갈아타기, 비상금의 구간으로 나눌 수 있을 것 같다.

'조회'보단 구성이 단순하다.

 

 

① 설정

 

상단의 설정 아이콘을 터치하면 자산 목표 설정 모달이 나타난다.

기본적으로 최종 자산의 목표, 월 저축 목표, 월 지출 예산, 월 시작일을 설정할 수 있다.

특히 월 시작일을 설정할 수 있는 부분이 인상깊었다.

월급을 받는 날짜를 상정하여 한 달 가계의 흐름의 시작일을 설정할 수 있게 했다는 부분에서

사용자 개인 맞춤형 서비스를 제공중이라고 느꼈다.

 

 

② 분석

 

분석 화면으로 들어오면 자산 목표에 대한 분석을 그래프를 통해 보여준다.

특히 아래의 월별 자산 현황은 주식 차트를 보는 듯하다.

이전 달보다 자산을 모은 달은 빨간색, 못 모은 날은 파란색으로 흐름을 표시해서

색상만으로 자산의 흐름을 파악할 수 있도록 했다.

자산 목표 분석 화면에서도 목표 및 예산을 설정할 수 있는데

이 화면에서의 주 기능이 아니기 때문에 모달로 간단하게 띄운 듯하다.

(예산 설정은 [가계부] 페이지에서 상세하게 설정할 수 있다.)

 

 

③ 이번 달 수입·저출·지출

 

각 모듈을 터치하면 나타나는 화면들이다.

수입, 저축, 지출내역을 그래프로 추이를 보여주며 관련 조언을 해주고 있다.

조언을 새로고침해서 더 다양한 조언을 볼 수 있고 

일간, 주간, 월간 참고 지표들도 다양하게 제공하고 있다.

가장 주목하고 싶은 부분은 '무지출 챌린지'인데, 지출이 0원인 날에는 돼지저금통 아이콘을 띄워주며

'지출관리 능력이 +1 레벨업 되었어요!'라는 메시지를 보여준다.

매일매일 돼지저금통 아이콘이 늘어나는 것을 보면서 더 절약을 할 수 있게 되고

그에 따라 성취감도 느껴지면서 최종적으로는 서비스에 대한 충성도도 높아질 수 있다.

 

 

 

 2) 가계부 

  • 푸터의 [가계부] 페이지

 

가계부의 '내역'탭이다.

뱅크샐러드에 연동해놓은 계좌, 카드, 페이머니 등의 입금, 출금 등의 모든 거래내역을 확인할 수 있다.

내역을 터치해서 거래 내역을 자세히 보면 분류, 카테고리, 거래처, 결제수단, 날짜, 메모·태그, 예산에서 제외할지 여부 등을

모두 수정할 수 있다.

이렇게 사용자가 원하는대로 모두 커스터마이징할 수 있지만, 특히 카테고리 부분이 가장 주목할만 하다.

 

 

수입, 지출, 이체 등 거래내역의 카테고리를 사용자가 원하는대로 자유롭게 설정할 수 있다.

기본적인 카테고리를 제외하고 추가하거나, 이름을 바꾸거나, 삭제를 할 수 있다.

예를 들어, 10월에 여행을 간다고 할 때 일반 여행 카테고리에 내역을 추가할 수도 있지만

'10월 여행'이라는 카테고리를 새로 만들어서 가계부 관리를 더욱 체계적으로 할 수 있는 것이다.

이때, 아이콘도 뱅크샐러드에서 제공하는 다양한 아이콘 내에서 자유롭게 선택할 수 있다.

 

 

가계부의 '달력'탭이다.

어느 날에 어떤 거래를 했는지, 한 주에 얼마를 썼는지, 한 달에 얼마를 썼는지를 모두 볼 수 있고

특정 날짜를 터치하면 그 날에 이루어졌던 내역들을 확인할 수 있다.

 

 

 

가계부의 '예산', '고정비'탭이다.

예산 설정을 할 때, 한 달의 전체 예산을 설정할 수 있음과 동시에 각 카테고리 마다의 예산 또한 설정할 수 있다.

예를 들어, 식비 20만원, 생활비 30만원 ··· 이런 식으로 세부적인 내용 모두 설정 가능하며

직접 만든 카테고리 또한 설정할 수 있다.

고정비 탭에서는 통신비, 교통비 등 매달 일정하게 지출되는 내역들을 관리할 수 있다.

 

푸터의 [건강], [금융쇼핑] 화면은 별도로 분석을 진행하진 않겠다.

(글을 작성하다 보니 생각보다 화면이 굉장히 많고, 내용도 너무 많아져서 생략..)

 

글을 두서없이 작성해서 조금 가독성이 안 좋을 수 있지만 요약하자면 다음과 같다.

1. 플랫 아이콘과 애니메이션 효과 디자인 되어있다.
2. 콘텐츠가 많지 않을 경우 모달 위주로 보여주고 있다.
3. 사용자가 원하는 대로 커스터마이징할 수 있는 범위가 굉장히 넓다.

 

 


 2. 사용자 분석 

 

출처: https://www.trendmonitor.co.kr/tmweb/trend/allTrend/detail.do?bIdx=924&code=0602&trendType=CKOREA

 

위의 자료는 가계부를 주로 사용하는 사용층과 사용 이유를 조사한 자료다.

뱅크샐러드와 직접적인 연관이 있는 것은 아니지만, 이러한 자료를 바탕으로 사용자를 파악할 수는 있을 것 같다.

위의 자료에 따르면 30대의 여성의 비율이 가장 높았고, 뱅크샐러드 또한 크게 다르지 않을 것이라 생각된다.

 


 3. 개선 사항 

굉장히 많은 기능을 보여주면서도 깔끔한 화면 디자인과, 유저 개인 맞춤형 서비스를 최적하게 제공중인 뱅크샐러드지만

오히려 너무 상세한 정보를 제공해서 불편을 일으킬 수 있다.

예를 들어 네이버 페이에 10,000원을 충전해서 4,800원 결제했을 때

계좌에서 10,000원이 출금된 내역, 네이버 페이로 10,000원이 입금된 내역, 네이버 페이에서 4,800원 출금된 내역

총 3개의 내역이 생성된다.

나의 경우엔 네이버 페이나 카카오 페이로 결제를 굉장히 자주해서 매번 입·출금 내역과 결제 내역이 뜨면

가장 핵심이 되는 내역은 '결제 내역'이기 때문에 입·출금 내역을 일일이 삭제를 하고 결제 내역만을 남겨놓는다.

 

이러한 번거로움을 없애기 위해, '페이 포인트 충전 결제 시 입·출금 내역을 기록하지 않음'과 같은 기능이 있으면 좋을 것 같다고 생각했다.

가계부 설정 - 입출금 내역 분류에 '페이머니 분류'를 추가한다.

입·출금 내역 분류를 토글로 조정하여 활성화 했을 땐 모든 내역이 보이도록,

비활성화 했을 땐 결제 내역만 보이도록 하면

모든 내역을 보고 싶은 사용자와 결제 내역만 보고 싶은 사용자 모두를 만족시킬 수 있지 않을까 생각한다.

728x90