햄버거 메뉴는 이제 끝물 아닌가요?

9분

2021.01.08.

4.6K

"햄버거 메뉴, 필요해!"

1. 초기부터 스마트폰을 사용해온 사람들이라면 이미 잘 알고 있는 기능 2. 중요도를 떠나 한 공간에서 다양한 항목을 밀어넣기 좋은 공간

햄버거 메뉴, 이젠 정말 안녕...

1. 하단 탭 구성은 특정 탭을 선택하면 바로 필요한 내용을 확인할 수 있지만 햄버거 메뉴는 아이콘 탭, 다양하게 배치된 메뉴들 중 또 하나를 선택해야 하는 방식 2. 너무 많은 기능들이 모여 있기에 중요도를 따지기가 어려움

WHY : 사이드 메뉴, 왜 중요할까요?

(에디터, 재그마스터) 햄버거 메뉴(drawer menu)는 앱 상단에 하나의 '네비게이션'으로 사용되며 여러 기능을 하나로 펼쳐볼 수 있어 초기부터 많이 사용되었던 방식입니다. 오늘은 사이드 메뉴, 햄버거 메뉴 등 여러 이름으로 불리는 존재를 어떻게 활용하면 좋을지 사례를 통해 정리하려고 합니다. 써야 된다, 이제 더 필요 없다! 로 나누기 보다, 여전히 쓰는 곳이 있다면 이유가 무엇이고, 쓰지 않는다면 어떻게 해결했는지에 초점을 맞춰서 말이죠. (에디터, 동동) 최근에는 사이드 메뉴가 대부분 사라지거나, 하단 탭 메뉴로 대체되고 있어요. 실제로 예전 쇼핑, 커머스 앱 대부분이 사이드 메뉴를 잘 활용했는데, 대부분 하단 탭 메뉴로 변경되어 햄버거 형태의 사이드 메뉴는 찾아보기 어려운 상황이죠. 그럼에도 불구하고 사용자에게 요약된 정보, 기능을 알리거나, 빠르게 진입할 수 있는 방법을 제시할 수 있는 영역으로의 중요성은 남아있습니다.

사례 : 햄버거 메뉴 구성을 위해 살펴볼 4가지 사례

1. 햄버거 메뉴의 역할을 안내해주는 방법 이마트, 미래식당, 오아시스 2. 서비스 특성 잘 녹여내는 방법 다음 웹툰, 카카오페이지, 카카오맵, 구글 지도, 네이버 지도 3. 하단 탭 없이 햄버거 메뉴 강조하는 방법 썰리, 트리플, 네이버, 다음 4. 사이드 메뉴 내 기능 확인을 위한 최소한의 구분 제공하는 방법 삼성페이, 누구(NUGU)

1. 햄버거 메뉴가 어떤 역할을 하는지 미리 안내

이마트, 미래식당, 오아시스

첫 번째 이미지는 이마트 앱으로, 햄버거 메뉴 하단에 '카테고리'라는 이름이 함께 표기되어 있습니다. 가운데 이미지 '미래식당' 역시 '메뉴'라는 텍스트를 함께 보여주고 있는데요. 기능이 무엇인지는 알지만, 모든 서비스 내 동일하게 적용되진 않기에 우리 서비스에서의 햄버거 메뉴는 정확히 어떤 역할을 하는지 알려주기 위한 용도로 활용됩니다. 마지막 이미지 '오아시스'는 별도 텍스트 없이 아이콘만 자리잡고 있어 탭을 해봐야 어떤 메뉴들과 기능들이 담겨 있는지 확인 할 수 있습니다. (에디터, 재그마스터의 덧붙임) 이마트와 오아시스를 보면 하단 탭에도 아이콘과 텍스트가 함께 표기 되어 있어요. 아니, 이미 잘 알고 있는 아이콘들인데 뭐하러 설명에 해당하는 텍스트가 들어갈까? 라는 생각을 할 수 있는 내용이기도.. 저 역시 배경화면 서비스를 담당하며 아이콘만 넣을까, 텍스트를 함께 제공할까, 아니면 탭 했을 때(현재 보고 있는)만 텍스트를 인지 목적으로 보여줄까 등 팀원들과 꽤 많은 이야기를 나눈 기억이 납니다. 하나씩 따져 보면 이유가 많겠지만, 무엇보다 '인지'라는 키워드를 집중해서 봐야 할 것 같아요. 아이콘만 보고 어떤 내용일 것이다, 라고 생각한 뒤 만난 내용이 어긋날 경우 서비스가 잘못(?)한 것이 없음에도 실망감을 갖게 될 수 있기 때문입니다. 사전에 더 명확하게 각 탭에 대한 인지 후 접근하는 것이 앞선 오류를 줄일 수 있는 방법이기도 하고요.

2. 서비스 특성 잘 녹여내기

다음 웹툰, 카카오 페이지

다음 웹툰의 햄버거 메뉴는 이미 페이스북 그룹을 통해 상세히 정리한 바 있는데요. 서비스 특성을 정말 잘 살린 사례 중 하나입니다. 웹툰과 같은 서비스에서 중요한 것은 내가 '보고 있는' 콘텐츠를 쉽게 다시 볼 수 있도록 하는 '연결'에 있습니다. 넷플릭스가 새로 볼 콘텐츠 탐색과 보고 있는 콘텐츠 확인을 더 쉽게 하고자 노력하는 것처럼 말이죠. 게다가 웹툰은 회차가 꽤 많기에 어느 작품을 어느 회차까지 봤는지가 중요합니다. 다음 웹툰은 햄버거 메뉴를 활용, 사용자가 찜했거나 보고 있는 웹툰을 바로 이어서 볼 수 있도록 하고 있습니다. 카카오 페이지의 햄버거 메뉴를 보면 다음 웹툰이 얼마나 더 직관적인지 확인 할 수 있는데요. 카카오 페이지는 햄버거 메뉴 선택 -> 보관함 2단계를 거쳐야 현재 보고 있는 작품들을 확인 할 수 있기 때문입니다. 햄버거 메뉴를 사용하냐, 사용하지 않느냐의 차이가 아니라 서비스 성격에 맞게 어떻게 활용할 수 있느냐! 를 잘 보여주는 두 사례라고 생각합니다 (에디터, 재그마스터의 덧붙임) 다음 웹툰은 햄버거 메뉴 버튼을 탭하면 아이콘이 X로 전환됩니다. 반면 카카오 페이지는 햄버거 메뉴에 포함 되지 않은 영역을 탭해야 이전 화면으로 돌아갈 수 있습니다. 또 다음 웹툰은 찜한, 최근 본 웹툰 외 메뉴를 표기하는 방식에 'MY'라는 단어를 모두 포함시켰습니다. MY 선물, 캐시, 웹툰처럼 말이죠. 햄버거 메뉴를 쉽게 닫을 수 있을 뿐만 아니라 '사용자 개개인'와 연관된 주요 기능들이 포함되어 있다는 것을 쉽게 알 수 있게 구성한 것입니다. 공지사항, 고객센터 등 모든 세부 메뉴들을 한 번에 햄버거 메뉴에 구성한 카카오 페이지와 다른 모습이기도!

카카오맵, 구글 지도, 네이버 지도

지도 서비스들은 사이드 메뉴를 공통적으로 활용하고 있습니다. 햄버거 메뉴를 선택하면 상단에 사용자 프로필기본 정보를 확인 할 수 있다는 점도 동일했습니다. 개개인의 프로필 보다 장소에 대한 정보 관리가 더 중요한 지도 앱에서 왜 이런 방식을 택했는지는 의문! 각 서비스 별로 사이드 메뉴 구성을 간략하게 살펴보면 카카오맵 : 사용자를 위한 기능을 순차적으로 배치(ex. 마이페이지 내에는 내가 평가한 위치 정보 등이 있어요) 구글 지도 : 사용자 검색 결과와 오프라인 지도에 중심을 둔 메뉴 순서 네이버 지도 : 길찾기 등 지도 고유의 기능성 메뉴에 초점을 맞춰 메뉴 순서 배치 네이버는 꾸준히 '사용자가 입력하거나 저장한' 지도를 강조해왔는데, 사이드 메뉴에서도 MY플레이스와 즐겨찾기가 큼직하게 반영된 모습이네요. 같은 사이드 메뉴도 서비스에서 무엇을 더 중요하게 생각하는가에 따라 메뉴 순서가 달라질 수 있다는 사실을 잘 보여주는 사례입니다.

3. 하단 탭 없이 햄버거 메뉴 강조하기

썰리, 트리플

트리플을 처음 알게 되었을 때, 가장 놀랐던 것 중 하나는 하단탭이 존재하지 않는다는 사실이었습니다. 그리고 비슷한 시기 알게된 중앙일보의 '썰리'도 같은 이유로 놀랄 수 밖에 없었죠. 하단 탭과 사이드 메뉴를 함께 활용하는 경우 햄버거 메뉴는 메인 메뉴들의 보조 역할을 하는 경우가 많습니다. (말이 그렇지 메인으로 넣기 애매한 기능들을 다 넣는 경우가 더 많지만요) 트리플은 이런 구조를 택하는 대신 메인 화면 내 사용자가 선택 할 수 있는 '여행' 관련 다양한 메뉴를 적절하게 활용하고 있습니다. 여행지를 시작으로 항공, 호텔, 투어/티켓 예약 순으로 말이죠. 이 영역을 조금 벗어나면 하단으로 트리플이 직접 제작하거나 외부 작가들이 참여하는 매거진 형태의 콘텐츠를 확인 할 수 있습니다. 즉 한 화면에서 여행과 관련된 직접적인 행동을 하게 만들거나, 자연스레 콘텐츠를 보고 여행지를 떠올릴 수 있는 구조를 만들어 낸 것이죠. 사이드 메뉴에는 온전히 사용자를 위한 기능과 정보만 배치되어 있습니다. 여행을 몇 번 갔는지, 리뷰는 몇 개 남겼는지, 쿠폰과 내가 예약한 내역은 무엇인지 등으로요. 물론 띠배너 영역이 있긴 하지만 내 정보를 보는데 크게 방해되지 않는 곳에 자리잡고 있습니다. 서비스의 특성을 잘 살리면서도 여행 관련 기능, 콘텐츠와 사용자 개개인과 관련된 기능들을 햄버거 메뉴 하나로 분리한 사례이기도 합니다.

네이버

포털 사이트는 앱 내 많은 메뉴와 정보를 담고 있습니다. 네이버의 경우, 햄버거 버튼을 기본적으로 가져가고 있는데요. 계정, 주요 메뉴 숏컷, 네이버 페이와 관련된 요약 정보, 추천 서비스를 보여주고 있습니다. 많은 내용을 보여주는 만큼 풀 화면으로 정보들을 제공하고 있는 모습입니다. 주목해야 할 점은 우측 상단 '서랍'이라는 기능입니다. 최근 네이버 알림 서비스가 개편되며 '서랍'이라는 메뉴가 생성되었고, 각종 서비스 관련 알림, 프로모션, 배송 알림 등을 모아서 보여주고 있습니다. '서랍' 기능이 좀 더 정착되면, 추후에는 사이드 메뉴의 위치에 서랍이 배치 될 수도 있지 않을까 싶네요. 다음은 검색어를 입력할 수 있는 GNB 하단 탭 우측 끝에 사이드 메뉴가 위치하고 있어요. 사이드 메뉴의 구성 자체는 네이버와 비슷하게 연계 서비스 숏컷과 계정에 따른 일, 카페 현황, 알림 리스트 등을 보여줍니다. 네이버에 비해 다음은 추천 서비스를 좀 더 담백하게 전달하고 있습니다. (에디터, 동동의 덧붙임) 네이버-다음의 사이드 메뉴가 배치된 위치의 차이점은 각 서비스의 홈화면 구성을 살펴보면 이해가 쉬워요! 네이버의 경우, 뉴스-날씨-연예 처럼 사용자에게 맞는 리스트를 사용자가 직접 설정할 수 있어 카테고리 끝에 원하는 영역을 추가 할 수 있는 버튼이 자리잡고 있습니다. 다음은 리스트는 고정하되 있으며 맨 앞 MY피드 라는 영역에서 사용자가 원하는 정보를 모아볼 수 있는 구조라 이와 같은 구성을 선택한 것으로 보입니다.

4. 사이드 메뉴 내 기능 확인을 위한 최소한의 구분 제공하기

삼성페이, 누구(NUGU)

반복되는 이야기지만, 햄버거 메뉴의 사용성 관점에서 가장 큰 단점은 너무 많은 기능이 배치 될 수 있다는 점입니다. 기획 단계에서 남는 기능들을 모아 놓는 공간!으로 판단할 경우 이런 단점은 더 부각될 수 밖에 없는데요. 사용자들이 햄버거 메뉴를 선택한 후 어떤 기능이 있는지 쉽게 구분할 수 없는 상황을 마주할 수 있기 때문입니다. 이런 단점을 조금이나마 줄인 사례가 왼쪽의 삼성페이와 오른쪽의 NUGU입니다. 각각 햄버거 메뉴를 선택하면 지갑, 금융, 생활 또는 Car Life, TV Life, 키즈 등(근데 왜 굳이 키즈는 영어로 안쓰고 영문을 한글로 표현했을까요? 아이들이 들어올 수 있어서?) 기능 간 명확한 구분이 되어 있는 모습을 확인 할 수 있습니다. 완벽한 답이야! 라고 할 순 없지만, 이런 구분이 있다면 사용자들도 진입 시 원하는 내용을 더 빠르게 확인 할 수 있지 않을까요?

결론 : 사이드 메뉴를 구성할 때 체크해보세요
1. 햄버거 메뉴가 어떤 역할을 하는지 미리 안내하기 2. 서비스 특성 잘 녹여내기 3. 하단 탭 없이 햄버거 메뉴를 강조하기 4. 기능 확인을 위한 최소한의 구분 제공하기

로그인하고 자유롭게 의견을 남겨주세요.