GNB에는 엄청난 기술이 필요하진 않다.
단지 사용자에게 일관적인 경험을 제공하는 것이 중요할 뿐
앱에서 'GNB(Global Navigation Bar)'를 생각하면 어떤 메뉴가 있을 것이라 생각되는가?
보통의 앱이라면 '홈', '핵심기능', '마이페이지' 등이 포함될 것이라고 예상된다.
앱을 새로 만들다 보면, GNB에 여러 기능 중 어떤 기능을 보여줄 것인가에 대해 고민을 하게 되고...
일반적으로 '헤더'에는 보통 '검색', '알림' 등의 기능이 노출되고 상황에 따라 GNB와 적절히 섞이게 된다.
GNB를 구성할 때에는 사용자의 일반적인 경험을 고려하게 된다.
(좌) 이전의 W컨셉 (우) 현재의 W컨셉이전에 W컨셉을 처음으로 사용할 때, 습관처럼 '마이페이지'로 이동하기 위해 GNB 중 가장 오른쪽 버튼을 클릭했다.
!! 아니, 이곳은 오른쪽 버튼을 클릭하면 '마이페이지'가 아닌 '남성 쇼핑몰'로 이동을 하게 된다.
타 서비스들에서 익숙해진 탓일까? 이 사실을 알게 된 후에도 계속해서 실수로 '남성 쇼핑몰'로 억지로 끌려가게 되었다. 이 글을 작성하기 위해 다시 W컨셉을 사용했는데, 가장 우측 버튼에는 '최근 본 상품'으로 이동할 수 있도록 아이콘이 변경된 것을 볼 수 있다. '남성 쇼핑몰'로 이동하는 것보다는 덜 어색한 부분이긴 하지만, 사실 아직도 어색하긴 하다.
최근에는 앱을 기획하다가 '마이페이지'를 헤더에 두고 싶다는 클라이언트의 의견을 들었다. 그리고 GNB의 가장 오른쪽에는 다른 기능을 넣고 싶다고 했다. 기획 당시 유저들의 사용성이 불편할 것이라며 GNB에 넣자고 설득했지만 주요 기능을 모두 GNB에 넣고 싶은 마음이었던지라 나의 설득은 통하지 않았다. 직접 사용할 수 있는 테스트 앱이 나왔을 때 다시 설득을 시도했고, 클라이언트는 직접 사용해 보니 불편함을 느꼈는지 GNB에 '마이페이지'를 추가할 수 있었다.
GNB는 대부분의 앱에 포함되며, 앱의 주요 기능을 보여주고, 사용자의 접근성을 개선해 주는 역할을 한다.
그렇기에 GNB는 어느 정도 공통적인 특성을 가지고 있다.
많이들 알고 있겠지만, 그 특징들을 한 번에 정리하기 위해 나는
내가 사용하고 있는 앱 중 약 30여 개의 앱의 GNB를 관찰해 봤다.
1. GNB는 보통 5개의 메뉴로 구성되어 있다.
지하철 앱, 여행 가계부 등 한 가지의 핵심 기능이 있는 앱을 제외하고는 보통의 앱에는 GNB가 존재했다.
그리고 GNB가 있는 앱은 일반적으로 5개의 메뉴를 GNB에 포함하고 있다. 기능이 많지 않거나 햄버거 메뉴를 보유한다면 3-4개의 메뉴만을 갖고 있기도 하지만, 대체로 5개의 메뉴를 가지는 것을 확인할 수 있다. 또한 6개의 메뉴를 포함하는 GNB를 보기도 했는데, '에이블리'와 '브랜디'가 대표적이다. 5개의 메뉴에 익숙해진 나는 선택지가 너무 많아진 느낌이었고 복잡하다는 생각이 들었다.
그리고 메뉴의 위치를 살펴봤을 때, 마이페이지 또는 전체 메뉴가 우측에 위치하고 있는 것이 보편적이었다. 홈 역할을 하고 있는 메뉴는 통상적으로 왼쪽에 위치하나, 무신사의 경우 가운데에 위치하는 것을 볼 수 있다. 무산사 외에도 몇몇 앱의 홈은 가운데 위치하고 있어 크게 어색하지는 않았다. 아무래도 GNB는 앱 대다수가 갖고 있는 영역이라 익숙한지 여부에 따라 사용성이 좌지우지되는 듯싶다.
2. 더 필요하다면 플로팅 버튼, 또는 강조 방식을 사용한다.
플로팅 버튼은 주로 사용자들이 게시글을 업로드할 수 있는 앱에 많이 사용되는 것을 알 수 있다. '마이루틴', '당근마켓', '오늘의집', '트리플' 등과 같이 기록이 있다면 이를 강조를 해야 하는데, GNB가 아닌 플로팅 버튼으로 강조를 했다. 특히 '트리플'과 '당근마켓'은 앱 상단에 위치할 때는 플로팅 버튼이 어떤 역할을 하는지 정확히 알 수 있도록 텍스트가 보이고, 하단으로 스크롤할 때는 다른 영역을 가리지 않기 위해 플로팅 버튼의 크기를 줄인다. 기능의 강조와 사용자가 느낄 수 있는 불편함까지 고려한 것으로 보인다.
또한 하나의 기능이 여러 갈래로 나뉜다면 '데이트립'을 참고할 수 있다. 플러스 버튼을 클릭하면 모달이 팝업 되는데, '방명록', '데이로그', '큐레이션' 중 기록할 유형을 클릭할 수 있도록 유도한다. 이는 '오늘의집'과 유사하다. 'KB카드'와 같이 GNB 위에 버튼을 추가하는 것도 또 다른 방법이다.
그리고 어떠한 메뉴를 강조하고 싶다면 'T world', 'KB pay', '우리카드', '발로소득'처럼 GNB 위에 또 다른 메뉴를 보여주는 방식도 가능하다.
3. 일반적으로 GNB는 아이콘과 메뉴명이 함께 표기된다.
집 모양의 아이콘과 함께 '홈'이 사람 모양이 아이콘과 함께 '마이페이지'라는 메뉴명이 함께 표기되는 경우가 일반적이다. 간혹 가다 GNB에 텍스트가 포함되지 않고 아이콘만 있는 것을 볼 수 있는데, '데이트립', 'W컨셉', '카카오뱅크', '캐치테이블', '알라딘'이 그러했다. 대부분 아이콘을 클릭하면 어떤 기능인지 알게 되기 때문에 텍스트를 노출시키지 않았을 것이라는 생각이 된다. 이와 더불어 텍스트의 영역을 줄여 그만큼 상단 화면의 영역을 확보하려는 의도라고 파악했다.
4. 스크롤 시 GNB를 숨김처리할 수도 있다.
각 GNB 메뉴의 가장 상위 페이지에서는 GNB가 계속해서 노출되는 것이 일반적이다. 타 메뉴로의 이동에 용이해야 하기 때문이다. 하지만 GNB는 화면의 하단 영역을 계속 차지하고 있기에 스크롤이 많은 페이지의 경우 불편할 수 있다. 이러한 불편함을 없애기 위해 최상단에서는 GNB가 보이고, 아래로 스크롤 시 GNB를 숨겨버리는 방식을 사용하기도 한다. '올리브영'과 '무신사'가 대표적이다.
지금까지 총 4가지의 GNB 특징을 알아봤다. GNB는 서비스가 강조하고 싶은 본인들의 기능들이 여기에 있다고 말하며, 접근성을 높여 많이 사용할 수 있도록 만든 퀵메뉴이다. GNB를 만드는데 엄청난 기술이 필요하진 않지만 사용자에게 일관적인 경험을 제공하는 것이 중요하고, 그렇기에 서비스마다 유사한 형태를 보인다. 기본 중의 기본인 GNB에 대해 고려할 때 이 특성들을 반영해야 한다는 생각을 다시금 해본다.
마지막으로 GNB(Tab bar)를 디자인할 때 참고하면 좋을 디자이너님의 아티클을 추천하는 것으로 이번 글을 마무리해본다.
p.s 사실 오늘 작성한 내용은 너무나 당연하고 앱 서비스를 만드는 사람이라면 누구나 아는 사실이라 다 작성하고 보니 이것을 업로드해야 하나 고민을 했다. 하지만 잊고 있던 부분을 다시 일깨울 수도 있고, 이제 막 처음으로 앱을 만들고 GNB에 대해 여러 사례를 찾고 있다면 도움이 될 수 있도록 글을 살포시 올려본다.
