[GNB 뜯어보기 - 01]
️인트로️기획을 할 때 GNB에 대한 고민도 많이 하게 되어서, 내가 평소에 경험한 앱들의 GNB를 모아서 분석하면 도움이 될거라는 생각이 들었다. 오늘은 그중에서도 금융앱을 중심으로 살펴봤고, 도메인별로 GNB를 뜯어볼 예정이다.
️각 앱의 특징 및 장단점️1) 우리WON뱅킹
•
메뉴 5개 (홈/계좌/상품/생활혜택/전체)
•
클릭 시 색상 변경 및 모션이 발생하는 형태이며,
햄버거 버튼이 포함되어있다.
•
평소에는 눈여겨보지 않아서 몰랐는데, 모션이 꽤나 귀엽다.
2) 카카오뱅크
•
4개 (내 계좌, 메뉴, 알림, 더보기)
•
명칭 없이 아이콘만 배치되어 있지만 어떤 내용일지는 유추가 가능하다.
•
클릭 시 색상 변경 및 모션이 발생하는 형태이다.
•
가장 GNB에 신경을 쓰지 않은(?) 느낌이다. 대신 화면에 집중한 느낌이랄까?
3) 토스
•
5개 (홈, 혜택, 토스페이, 주식, 전체)
•
클릭 시 색상 변경 및 모션이 발생하는 형태이다.
4) 우리카드
•
중요한 액션을 배치 (결제예상금액)
카드앱을 주로 사용하는 이유는 결제금액을 보기 위함이라 일반적인 GNB 대신 결제예상 금액을 배치한듯 싶다.•
상단에 GNB 역할 배치 (홈/금융/카드/자산)
상단의 GNB는 고정되어 있지 않아서 사용하기가 좀 불편했다.•
클릭 시 GNB가 사라지며 해당하는 페이지로 이동하기 때문에 뒤로가기 버튼을 클릭하여 이동 필요하다.
5) KB스타뱅킹
•
약 7개 (전체계좌, 금융상품, 자산관리, 혜택, 변동메뉴+ KB Pay, 국민지갑)
•
GNB 위에 추가 메뉴가 존재한다.
GNB의 영역이 넓다보니 상하 스와이프 시 잠시 사라졌다가 나타난다.•
메뉴가 다양하다보니, GNB 중 1개를 자동 슬라이드 기능을 사용했다.
뱅킹앱 중에서은 유일하게 전체 메뉴가 GNB에 없는데, 그렇기에 자동 슬라이드 기능을 넣은듯 싶다. 처음 본 GNB의 기능이라 신기했지만 원하는 메뉴가 나올때까지 기다리는 사람이 있을까 싶다.•
GNB 클릭 시 GNB가 사라지며 해당하는 페이지로 이동하기에 뒤로가기 버튼을 클릭하여 이동 필요하다.
6) 핀크
•
5개 (홈, 자산, 대출, 금융상품, 전체)
•
클릭 시 색상 변경 및 모션이 발생하는 형태이다.
•
보안정책 상 전체 화면 캡쳐가 불가능한 앱..!
️느낀 점️평소에 사용할 땐 이러한 디테일까지는 몰랐는데, 꼼꼼히 살펴보니 보이기 시작한다. 금융앱은 메뉴가 정말 많아서, 전체 메뉴가 GNB에 거의 필수로 노출이 되는데 KB스타뱅킹 같은 경우에는 GNB 자동 슬라이드로 해결을 한 점이 눈에 띄었다. 그리고 GNB 클릭 후 GNB가 사라지면 다른 메뉴로 이동하는데 추가 뎁스가 생긴다는 불편함이 생긴다. 이 부분을 주의해서 사용자 경험을 고려해야겠다는 생각이 든다.