<h4>"햄버거 메뉴, 필요해!"</h4>1. 초기부터 스마트폰을 사용해온 사람들이라면 이미 잘 알고 있는 기능 2. 중요도를 떠나 한 공간에서 다양한 항목을 밀어넣기 좋은 공간 <br/> <h4>햄버거 메뉴, 이젠 정말 안녕...</h4>1. 하단 탭 구성은 특정 탭을 선택하면 바로 필요한 내용을 확인할 수 있지만 햄버거 메뉴는 아이콘 탭, 다양하게 배치된 메뉴들 중 또 하나를 선택해야 하는 방식 2. 너무 많은 기능들이 모여 있기에 중요도를 따지기가 어려움 <br/><br/> <h3>WHY : 사이드 메뉴, 왜 중요할까요?</h3><strong>(에디터, 재그마스터)</strong> 햄버거 메뉴(drawer menu)는 앱 상단에 하나의 '네비게이션'으로 사용되며 여러 기능을 하나로 펼쳐볼 수 있어 초기부터 많이 사용되었던 방식입니다. 오늘은 사이드 메뉴, 햄버거 메뉴 등 여러 이름으로 불리는 존재를 어떻게 활용하면 좋을지 사례를 통해 정리하려고 합니다. <strong>써야 된다, 이제 더 필요 없다! 로 나누기 보다, 여전히 쓰는 곳이 있다면 이유가 무엇이고, 쓰지 않는다면 어떻게 해결했는지에 초점을 맞춰서</strong> 말이죠. <strong>(에디터, 동동)</strong> 최근에는 사이드 메뉴가 대부분 사라지거나, 하단 탭 메뉴로 대체되고 있어요. 실제로 예전 쇼핑, 커머스 앱 대부분이 사이드 메뉴를 잘 활용했는데, 대부분 하단 탭 메뉴로 변경되어 햄버거 형태의 사이드 메뉴는 찾아보기 어려운 상황이죠. <strong>그럼에도 불구하고 사용자에게 요약된 정보, 기능을 알리거나, 빠르게 진입할 수 있는 방법을 제시할 수 있는 영역으로의 중요성은 남아있습니다.</strong> <br/><br/> <h3>사례 : 햄버거 메뉴 구성을 위해 살펴볼 4가지 사례</h3><strong>1. 햄버거 메뉴의 역할을 안내해주는 방법</strong> 이마트, 미래식당, 오아시스 <strong>2. 서비스 특성 잘 녹여내는 방법</strong> 다음 웹툰, 카카오페이지, 카카오맵, 구글 지도, 네이버 지도 <strong>3. 하단 탭 없이 햄버거 메뉴 강조하는 방법</strong> 썰리, 트리플, 네이버, 다음 <strong>4. 사이드 메뉴 내 기능 확인을 위한 최소한의 구분 제공하는 방법</strong> 삼성페이, 누구(NUGU) <br/><br/> <h3>1. 햄버거 메뉴가 어떤 역할을 하는지 미리 안내</h3><img class="size-full wp-image-20085 aligncenter" src="https://www.wishket.com/media/newscenter/650/1.png" alt="" width="600" height="412" /><p style="text-align: center;">이마트, 미래식당, 오아시스</p> 첫 번째 이미지는 이마트 앱으로, 햄버거 메뉴 하단에 '카테고리'라는 이름이 함께 표기되어 있습니다. 가운데 이미지 '미래식당' 역시 '메뉴'라는 텍스트를 함께 보여주고 있는데요. 기능이 무엇인지는 알지만, 모든 서비스 내 동일하게 적용되진 않기에 <strong>우리 서비스에서의 햄버거 메뉴는 정확히 어떤 역할을 하는지 알려주기 위한 용도로 활용</strong>됩니다. 마지막 이미지 '오아시스'는 별도 텍스트 없이 아이콘만 자리잡고 있어 탭을 해봐야 어떤 메뉴들과 기능들이 담겨 있는지 확인 할 수 있습니다. <strong>(에디터, 재그마스터의 덧붙임)</strong> 이마트와 오아시스를 보면 하단 탭에도 아이콘과 텍스트가 함께 표기 되어 있어요. 아니, 이미 잘 알고 있는 아이콘들인데 뭐하러 설명에 해당하는 텍스트가 들어갈까? 라는 생각을 할 수 있는 내용이기도.. 저 역시 배경화면 서비스를 담당하며 아이콘만 넣을까, 텍스트를 함께 제공할까, 아니면 탭 했을 때(현재 보고 있는)만 텍스트를 인지 목적으로 보여줄까 등 팀원들과 꽤 많은 이야기를 나눈 기억이 납니다. 하나씩 따져 보면 이유가 많겠지만, 무엇보다 '인지'라는 키워드를 집중해서 봐야 할 것 같아요. <strong>아이콘만 보고 어떤 내용일 것이다, 라고 생각한 뒤 만난 내용이 어긋날 경우 서비스가 잘못(?)한 것이 없음에도 실망감을 갖게 될 수 있기 때문</strong>입니다. 사전에 더 명확하게 각 탭에 대한 인지 후 접근하는 것이 앞선 오류를 줄일 수 있는 방법이기도 하고요. <br/><br/> <h3>2. 서비스 특성 잘 녹여내기</h3><img class="size-full wp-image-20086 aligncenter" src="https://www.wishket.com/media/newscenter/650/2.png" alt="" width="580" height="600" /><p style="text-align: center;">다음 웹툰, 카카오 페이지</p> 다음 웹툰의 햄버거 메뉴는 이미 페이스북 그룹을 통해 상세히 정리한 바 있는데요. 서비스 특성을 정말 잘 살린 사례 중 하나입니다. 웹툰과 같은 서비스에서 중요한 것은 내가 '보고 있는' 콘텐츠를 쉽게 다시 볼 수 있도록 하는 '연결'에 있습니다. 넷플릭스가 새로 볼 콘텐츠 탐색과 보고 있는 콘텐츠 확인을 더 쉽게 하고자 노력하는 것처럼 말이죠. 게다가 웹툰은 회차가 꽤 많기에 어느 작품을 어느 회차까지 봤는지가 중요합니다. 다음 웹툰은 햄버거 메뉴를 활용, 사용자가 찜했거나 보고 있는 웹툰을 바로 이어서 볼 수 있도록 하고 있습니다. 카카오 페이지의 햄버거 메뉴를 보면 다음 웹툰이 얼마나 더 직관적인지 확인 할 수 있는데요. 카카오 페이지는 햄버거 메뉴 선택 -> 보관함 2단계를 거쳐야 현재 보고 있는 작품들을 확인 할 수 있기 때문입니다. 햄버거 메뉴를 사용하냐, 사용하지 않느냐의 차이가 아니라 서비스 성격에 맞게 어떻게 활용할 수 있느냐! 를 잘 보여주는 두 사례라고 생각합니다 <strong>(에디터, 재그마스터의 덧붙임)</strong> 다음 웹툰은 햄버거 메뉴 버튼을 탭하면 아이콘이 X로 전환됩니다. 반면 카카오 페이지는 햄버거 메뉴에 포함 되지 않은 영역을 탭해야 이전 화면으로 돌아갈 수 있습니다. 또 <strong>다음 웹툰은 찜한, 최근 본 웹툰 외 메뉴를 표기하는 방식에 'MY'라는 단어를 모두 포함시켰습니다.</strong> MY 선물, 캐시, 웹툰처럼 말이죠. 햄버거 메뉴를 쉽게 닫을 수 있을 뿐만 아니라 '사용자 개개인'와 연관된 주요 기능들이 포함되어 있다는 것을 쉽게 알 수 있게 구성한 것입니다. 공지사항, 고객센터 등 모든 세부 메뉴들을 한 번에 햄버거 메뉴에 구성한 카카오 페이지와 다른 모습이기도! <br/><br/> <img class="size-full wp-image-20087 aligncenter" src="https://www.wishket.com/media/newscenter/650/3.png" alt="" width="600" height="351" /><p style="text-align: center;">카카오맵, 구글 지도, 네이버 지도</p> 지도 서비스들은 사이드 메뉴를 공통적으로 활용하고 있습니다. 햄버거 메뉴를 선택하면 상단에 사용자 프로필기본 정보를 확인 할 수 있다는 점도 동일했습니다. 개개인의 프로필 보다 장소에 대한 정보 관리가 더 중요한 지도 앱에서 왜 이런 방식을 택했는지는 의문! 각 서비스 별로 사이드 메뉴 구성을 간략하게 살펴보면 카카오맵 : 사용자를 위한 기능을 순차적으로 배치(ex. 마이페이지 내에는 내가 평가한 위치 정보 등이 있어요) 구글 지도 : 사용자 검색 결과와 오프라인 지도에 중심을 둔 메뉴 순서 네이버 지도 : 길찾기 등 지도 고유의 기능성 메뉴에 초점을 맞춰 메뉴 순서 배치 네이버는 꾸준히 '사용자가 입력하거나 저장한' 지도를 강조해왔는데, 사이드 메뉴에서도 MY플레이스와 즐겨찾기가 큼직하게 반영된 모습이네요. 같은 사이드 메뉴도 서비스에서 무엇을 더 중요하게 생각하는가에 따라 메뉴 순서가 달라질 수 있다는 사실을 잘 보여주는 사례입니다. <br/><br/> <h3>3. 하단 탭 없이 햄버거 메뉴 강조하기</h3><img class="size-full wp-image-20088 aligncenter" src="https://www.wishket.com/media/newscenter/650/4.png" alt="" width="600" height="411" /><p style="text-align: center;">썰리, 트리플</p> 트리플을 처음 알게 되었을 때, 가장 놀랐던 것 중 하나는 <strong>하단탭이 존재하지 않는다는 사실</strong>이었습니다. 그리고 비슷한 시기 알게된 중앙일보의 '썰리'도 같은 이유로 놀랄 수 밖에 없었죠. 하단 탭과 사이드 메뉴를 함께 활용하는 경우 햄버거 메뉴는 메인 메뉴들의 보조 역할을 하는 경우가 많습니다. (말이 그렇지 메인으로 넣기 애매한 기능들을 다 넣는 경우가 더 많지만요) 트리플은 이런 구조를 택하는 대신 메인 화면 내 사용자가 선택 할 수 있는 '여행' 관련 다양한 메뉴를 적절하게 활용하고 있습니다. 여행지를 시작으로 항공, 호텔, 투어/티켓 예약 순으로 말이죠. 이 영역을 조금 벗어나면 하단으로 트리플이 직접 제작하거나 외부 작가들이 참여하는 매거진 형태의 콘텐츠를 확인 할 수 있습니다. 즉 한 화면에서 여행과 관련된 직접적인 행동을 하게 만들거나, 자연스레 콘텐츠를 보고 여행지를 떠올릴 수 있는 구조를 만들어 낸 것이죠. <strong>사이드 메뉴에는 온전히 사용자를 위한 기능과 정보만 배치되어 있습니다.</strong> 여행을 몇 번 갔는지, 리뷰는 몇 개 남겼는지, 쿠폰과 내가 예약한 내역은 무엇인지 등으로요. 물론 띠배너 영역이 있긴 하지만 내 정보를 보는데 크게 방해되지 않는 곳에 자리잡고 있습니다. 서비스의 특성을 잘 살리면서도 여행 관련 기능, 콘텐츠와 사용자 개개인과 관련된 기능들을 햄버거 메뉴 하나로 분리한 사례이기도 합니다. <br/><br/> <img class="size-full wp-image-20089 aligncenter" src="https://www.wishket.com/media/newscenter/650/5.png" alt="" width="600" height="353" /><p style="text-align: center;">네이버</p> 포털 사이트는 앱 내 많은 메뉴와 정보를 담고 있습니다. 네이버의 경우, 햄버거 버튼을 기본적으로 가져가고 있는데요. 계정, 주요 메뉴 숏컷, 네이버 페이와 관련된 요약 정보, 추천 서비스를 보여주고 있습니다. 많은 내용을 보여주는 만큼 풀 화면으로 정보들을 제공하고 있는 모습입니다. 주목해야 할 점은 우측 상단 '서랍'이라는 기능입니다. 최근 네이버 알림 서비스가 개편되며 '서랍'이라는 메뉴가 생성되었고, 각종 서비스 관련 알림, 프로모션, 배송 알림 등을 모아서 보여주고 있습니다. '서랍' 기능이 좀 더 정착되면, 추후에는 사이드 메뉴의 위치에 서랍이 배치 될 수도 있지 않을까 싶네요. 다음은 검색어를 입력할 수 있는 GNB 하단 탭 우측 끝에 사이드 메뉴가 위치하고 있어요. 사이드 메뉴의 구성 자체는 네이버와 비슷하게 연계 서비스 숏컷과 계정에 따른 일, 카페 현황, 알림 리스트 등을 보여줍니다. 네이버에 비해 다음은 추천 서비스를 좀 더 담백하게 전달하고 있습니다. <strong>(에디터, 동동의 덧붙임)</strong> 네이버-다음의 사이드 메뉴가 배치된 위치의 차이점은 각 서비스의 홈화면 구성을 살펴보면 이해가 쉬워요! 네이버의 경우, 뉴스-날씨-연예 처럼 사용자에게 맞는 리스트를 사용자가 직접 설정할 수 있어 카테고리 끝에 원하는 영역을 추가 할 수 있는 버튼이 자리잡고 있습니다. 다음은 리스트는 고정하되 있으며 맨 앞 MY피드 라는 영역에서 사용자가 원하는 정보를 모아볼 수 있는 구조라 이와 같은 구성을 선택한 것으로 보입니다. <br/><br/> <h3>4. 사이드 메뉴 내 기능 확인을 위한 최소한의 구분 제공하기</h3><img class="size-full wp-image-20090 aligncenter" src="https://www.wishket.com/media/newscenter/650/7.png" alt="" width="582" height="600" /><p style="text-align: center;">삼성페이, 누구(NUGU)</p> 반복되는 이야기지만, 햄버거 메뉴의 사용성 관점에서 가장 큰 단점은 너무 많은 기능이 배치 될 수 있다는 점입니다. 기획 단계에서 남는 기능들을 모아 놓는 공간!으로 판단할 경우 이런 단점은 더 부각될 수 밖에 없는데요. 사용자들이 햄버거 메뉴를 선택한 후 어떤 기능이 있는지 쉽게 구분할 수 없는 상황을 마주할 수 있기 때문입니다. 이런 단점을 조금이나마 줄인 사례가 왼쪽의 삼성페이와 오른쪽의 NUGU입니다. 각각 햄버거 메뉴를 선택하면 지갑, 금융, 생활 또는 Car Life, TV Life, 키즈 등(근데 왜 굳이 키즈는 영어로 안쓰고 영문을 한글로 표현했을까요? 아이들이 들어올 수 있어서?) <strong>기능 간 명확한 구분이 되어 있는 모습을 확인</strong> 할 수 있습니다. 완벽한 답이야! 라고 할 순 없지만, 이런 구분이 있다면 사용자들도 진입 시 원하는 내용을 더 빠르게 확인 할 수 있지 않을까요? <br/><br/> <strong>결론 : 사이드 메뉴를 구성할 때 체크해보세요</strong><br/> 1. 햄버거 메뉴가 어떤 역할을 하는지 미리 안내하기 2. 서비스 특성 잘 녹여내기 3. 하단 탭 없이 햄버거 메뉴를 강조하기 4. 기능 확인을 위한 최소한의 구분 제공하기
