brunch

You can make anything
by writing

C.S.Lewis

by 두부언니 Sep 02. 2024

KPI를 높이는 하단 영역 UI

그들은 사용자에게 어떤 액션을 어필하고 싶었을까?

보편적으로 웹/앱의 하단 영역은 GNB나 CTA를 고정하는 용도로 활용되고 있다. 그중에서도 하단 영역을 재밌게 활용하고 있는 몇 가지 서비스를 살펴봤다. 하단영역을 어떻게 활용하고 있는지 살펴보면, 그들이 나아가고자 하는 방향이 무엇인지 엿볼 수 있다.



스크롤하면 바뀌는 floating 버튼

(좌) 비핸스 / (우) 브리딩

비핸스의 프로젝트 상세페이지와 브리딩의 반려견 리포트 화면이다. floating으로 떠있던 버튼들이 스크롤되어 특정 위치에 도달했을 때 스크린 내에 고정된다.

비핸스의 경우, 유저의 편의성을 위해 더 보기 버튼과 스크랩 버튼, 좋아요 버튼을 배치하였다. 브리딩의 경우에는 공유하기 버튼과 무료로 상담받는 버튼을 배치하였다. 탐색을 방해하지 않으면서도 두 개 이상의 행동을 유도하고자 하는 환경에서 사용자에게 해야 하는 행동을 명확히 어필하고 있었다.




한껏 욱여넣은 GNB와

fixed 되는 헤드라인

나무증권

주식매매 앱에도 재밌는 UI가 많다. 탐색할 수 있는 정보가 많고 즉각적인(이라 쓰고 충동적인 이라고 읽는, 응 너만) 행동을 유도할 일이 많아서일까. 최근에 업데이트된 나무앱은 우측 하단의 토글로 국내/해외 증시를 확인할 수 있게 되어있다. 업데이트가 잦은 편인 것 같은데 그때마다 변화된 UI를 찾는 재미가 쏠쏠하다.


다른 증권사 앱을 살펴보진 않았지만, 나무는 하단 영역에 다양한 메뉴들을 욱여넣었다. 할 수 있는 방법을 총 동원하여 욱여넣은 것 같다. 햄버거와 GNB, 그리고 퀵메뉴까지! 퀵메뉴를 누르면 또 다양한 메뉴가 와르르 나온다. 욕심도 많다. 보통은 메뉴바가 fixed인 경우가 많은데, 나무는 스크롤했을 때, menu bar는 숨겨지고 토글과 헤드라인만 남는 것도 인상적이었다.




퀵메뉴도 아니요. GNB도 아니요.

오늘의 주요 뉴스는?

나하고

인사관리 시스템을 제공하고 있는 나하고에서는 하단에 GNB를 제공하지 않는다. 대신에 뉴스보드를 제공하고 있다. 메인 기능(인사/서류처리 등)과 크게 연관되어 있어 보이진 않는데, 아무래도 직장인들이 사용하는 앱이니, 앱의 체류시간을 늘리기 위해서 배치한 것은 아닐까. 추측해 봤다.




탭을 변경하면 모양이 바뀌는 GNB 아이콘

아파트아이

아파트아이에서는 홈화면이 선택되었을 때와 홈화면 이외의 탭이 선택되었을 때, 아이콘이 다르게 표시된다. KPI와 직접적인 연관은 없어 보이지만, 시선을 잡아끄는 UI다. 선택된 탭에 따라 중앙의 아이콘 모양을 바꿔가며 지면을 효율적으로 활용했다. 애니메이션도 적절히 들어가 있어서 요기조기 누르는 재미가 있었다.




사람들의 뇌리에는 보편적으로 남아있는 인상이 있다. 상단에는 스크린의 이름, 하단에는 간편하게 접근할 수 있는 메뉴바. 커다란 규칙 안에서 나름의 변주를 그리고 있는 UI를 만날 때면 나도 저런 UI 그려보고 싶다는 뽐뿌가 막 샘솟는다.




매거진의 이전글 새롭게 업데이트된 기능 어떻게 알리고 있을까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari