랜덤하고 잘잘한 인사이트 - 내비게이션/구조편

위젯, 메뉴, 플로팅 버튼

앱 서비스를 기획함에 있어 가장 중요한 게 뭐냐고 물어보면, 내비게이션이라고 답할 것 같다. 서비스 내 플로우를 매끄럽게 이어주고 사용자에게 서비스의 구조를 확실하게 학습시킬 수 있는 핵심 요소기 때문이다. 오늘은 효과적인 내비게이션을 위해 구조나 컴포넌트가 어떻게 활용되는지에 관한 인사이트를 랜덤하게 자잘하게 모아왔다.

내비게이션이 뭔가요?

내비게이션은 화면에서 화면으로 이동하는 모든 연결고리를 가리키는데, 같은 위계의 화면 간 이동인 Lateral navigation, 다른 화면으로 진입하는 Forward navigation(하위 위계의 화면이나 플로우로 이어지는 화면, 아예 다른 서비스의 화면 등으로의 이동이 여기 해당된다), 되돌아가는 Reverse Navigation으로 크게 나눌 수 있다. *Material Design System 기준

QR 체크인이 유행시킨 숏컷 내비게이션

지금껏 QR 체크인만큼 모든 사람들에게 모바일로 같은 액션을 강제로 수행시킨 경우는 없었다. 어떤 장소든 입장할 때 필수기 때문에, 입구 근처에서부터 우리는 최대한 신속하게 QR 체크인 화면을 들이밀 준비를 한다. 이 때 네이버나 카카오앱에 매번 들어가 QR을 찾는 대신 위젯이나 단축어를 사용한다면 확실히 더 빠를 것이다. 팀원들이랑 밥 먹으러 가면 누구는 폰을 흔들고 누구는 탭하고 누구는 화면에서 위젯을 뒤지고 얼마나 정신없고 치열한지 모른다. 어쨌든, QR체크인으로 인해 특정 화면으로 신속히 진입시키는 숏컷 내비게이션의 활용도가 높아진 것을 체감할 수 있다. 애플 유저로서 애플이 적절한 타이밍에 드디어 위젯 기능을 추가해서 다행일 따름이다.

아이폰으로 QR 체크인 할 때 잠금화면에서 우측으로 드래그하면 짜잔 나온다

미친 존재감 FAB(Floating Action Button)

FAB, 플로팅 버튼, 도 대표적인 숏컷 내비게이션 중 하나다. 한 화면에서 고정된 위치에 계속 떠있는 버튼이다. 보통 서비스의 핵심이거나 특색이 되는 기능일 경우, 수시로 접근이 용이해야 하는 기능의 경우에 플로팅 버튼을 고려한다. 잘 활용하지 못하면 기능을 욱여넣은 것처럼 보일 수 있어 일순위로 고려하는 컴포넌트는 아니다. 내비게이션으로 플로팅 버튼을 활용하는 앱들이 한참 많이 보였던 것 같은데 막상 요즘 다시 찾아보려니 어려웠다. 사용 중인 서비스 중에 '듀오링고'가 최근 내보인 라이브 보이스챗 기능을 플로팅으로 제공하고 있음을 발견했다. '라이브' 버튼을 누르면 클럽하우스처럼 보이스챗이 한창 진행 중인 방으로 바로 진입한다. 챗 목록이 뜰 거라는 예상과 다르게 바로 챗 화면이 나와서 당황했던 기억이 난다. 뮤트였기에 망정이지 "... 올라! 아디오스!"하고 나올 뻔했다. 플로팅 버튼을 제공할 때는 사용자에게 어떤 화면으로 진입시킬지, 어떤 기능인지 충분히 인지시키고 당황시키지 않는 것이 중요하다.

우측 하단의 FAB를 누르면 스페인어 능통자와 입문자의 대화를 엿들을 수 있다

중요한 건 놓칠 수 없도록 Thumb Zone에: 현대카드, 토스

현대카드와 토스의 구조가 재미있어 가져왔다. 두 앱 모두 홈 화면 레이어 위에 시트 모양의 레이어, 이렇게 두 레이어로 구성돼어있다. 금융앱은 으레 복잡스러운데 많고 많은 서비스 중에 이것만은 꼭 봐달라는 어필처럼 보인다.

(왼) 현대카드 (우) 토스

고정된 위치에 치트키처럼 자리 잡고 있는 속성은 Floating button과 유사하고, 두 레이어가 함께 작동하는 모습은 Backdrop의 응용으로 보인다.

Material Design의 Backdrop Anatomy

상위 레이어의 활용도에서는 차이가 있다. 현대카드는 당월 명세서(당월 결제 예정 금액 + 즉시/분할/부분 납부 버튼)를 토스는 소비(내역 진입 버튼)를 보여준다. 토스에서 상위 레이어에 현대카드만큼의 정보량과 기능을 제공하지 않는 이유는 하단의 바텀 내비게이션(탭 바)과 충돌시키지 않고 복잡하지 않은 수준의 화면을 유지하기 위함으로 보인다.

현대카드: 상위 레이어를 드래그하는 인터랙션

토스: 홈 화면을 스크롤하면 레이어가 머지되는 인터랙션

인터랙션 또한 다르게 적용됐다. 현대카드는 위로 드래그했을 때 확장하는 형태다. 화면 간 연결이 자연스럽고 앱의 구조를 시각적으로 인지하도록 돕는다. 토스는 스크롤하면 홈 화면의 피드 속에 자리 잡으며 두 레이어가 합쳐진다. 무한 스크롤로 변동성 있는 콘텐츠를 띄우는 현대카드와 달리, 토스는 뉴스, 계좌, 소비 등 홈 화면에 고정돼있어 취할 수 있는 모션이다.

애플은 내비게이션도 애플이다

애플 앱을 쓰다가 요즘 들어 발견한 점이 있다. 애플 앱은 탭 바에 '홈'이라는 이름의 메뉴를 두지 않는다는 것이다. 여기서 '탭 바'는 앱 하단의 내비게이션 바를 가리킨다. 대표적인 Lateral navigation(애플은 Flat navigation이라 칭한다)에 해당하는 구조로, 동일 위계의 화면 간 이동 루트를 제공한다.

탭 바를 메인 내비게이션으로 사용 중인 애플의 주요 앱을 살펴보면 다음과 같다.

건강앱: 요약, 검색

피트니스앱: 요약, 공유하기

사진앱: 보관함, For You, 앨범, 검색

음악앱: 보관함, 지금 듣기, 둘러보기, 라디오, 검색

앱스토어: 투데이, 게임, 앱, 아케이드, 검색

애플은 홈 대신 '요약', '투데이' 등의 특징적인 메뉴를 제공해 애플만의 섬세하고 좋은 서비스를 구성해냈다. 사실 탭 바에 홈을 제공하는 서비스는 흔하다. 이게 무조건 지양할 일이라는 것은 아니다. 다만, 탭 바에 홈이 있다면 그건 이미 Lateral Navigation이 아니다. '홈'은 모든 메뉴를 포괄하기 때문에 탭 바에 있는 기능을 홈에서도 중첩해 제공하고 있을 확률이 크다. 어느 서비스든 홈이 있다면 메뉴를 활용하기 이전에 홈을 한 번 훑어야만 할 것 같은 이유도 그래서다.

애플은 홈 화면에 모든 기능을 뭉치는 대신에 각자 다른 속성의 화면을 대등하게 배치했는데, 이는 사용자의 목적을 달성시키는 데 도움이 된다. 예로 설명하자면, 애플의 음악앱의 메뉴는 보관함, 지금 듣기, 둘러보기, 라디오, 검색으로 구성된다. 이 구성의 메뉴는 내가 음악을 어떤 방식으로 들을지 간결하게 묻는다: 내가 저장해둔 음악을 들을지, 추천받아 들을지, 트렌드를 살펴볼지, 라디오를 들을지, 혹은 특정 곡을 검색해서 들을지 말이다. 모든 메뉴를 한 번씩 탭해보며 서비스를 파악하기 전에, 사용자의 목적에 따라 메뉴를 보고 즉각적으로 루트를 정할 수 있다면 그건 좋은 내비게이션이라 생각한다. 모든 주요 메뉴를 음악을 즐기는 방법으로 제한해 음악 앱의 본질인 '음악을 듣는 앱'이라는 성격을 강화하는 건 또 다른 플러스 요인이다.