상단 내비게이션 vs 사이드 내비게이션, 어느 것이 더 나을까?

7분

2021.09.10.

19.2K

오늘은 둘 중에 어떤 것이 더 효과적인지 비교해보겠습니다.

본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반 번역문입니다. UX 디자인에 대해 다루는 UX Collective 블로그에서 발행한 글입니다. 작가인 타라스 바쿠세비치(Taras Bakusevych)는 UX 디자이너입니다. 본문은 앱의 한 구성 요소인 내비게이션에 대해 비교 분석하는 내용으로 상단 내비게이션과 사이드 내비게이션의 각각의 장단점에 대해 생각해볼 수 있겠습니다.

내비게이션이 왼쪽에 있으면 눈으로 훑어보기 쉽다

시선의 흐름에 관한 연구에 따르면, 사람들은 알파벳 F자의 형태로 웹 페이지를 훑어본다고 합니다. 그래서 내비게이션 메뉴의 위치는 위쪽과 왼쪽에 두는 것이 좋은 것으로 보입니다. 왼쪽에 내비게이션을 두면 세로 방향으로 시선을 옮기기 쉽고 (대표 메뉴를) 파악하는 속도도 빠릅니다. 그래서 시각적으로 많이 수정할 필요도 없고, 여러 개의 메뉴 링크들을 동시에 보여줄 수도 있습니다. (한편, 글을 오른쪽에서 왼쪽으로 쓰는 문화권에서는 내비게이션 메뉴를 오른쪽에 두는 것이 좋습니다.)

내비게이션을 위쪽에 두면 공간이 절약된다

일반적인 노트북 화면의 구성이나 내비게이션 메뉴들이 차지하는 비율을 살펴보면, 왼쪽 내비게이션이 위쪽 내비게이션보다 3배나 더 많은 공간을 차지한다는 것을 알 수 있습니다. 여기에 더해서 화면 위쪽의 일부는 검색 기능이나 알림, 페이지 정보 등을 위해서 따로 할당해 두어야 합니다. 그러므로 내비게이션을 왼쪽에 두면, 기본적인 화면 구성만으로도 페이지 전체의 25%까지 차지할 수 있습니다. 공간을 아끼기 위해서 사이드 메뉴를 숨길 수도 있지만, 이것이 언제나 좋은 선택은 아닙니다. 왜냐하면, 메뉴 항목의 이름이 길 때는 그 메뉴를 숨기는 게 좋지 않기 때문입니다. 그렇다고 아이콘으로만 내비게이션 메뉴를 구성한다면, 사람들이 그 아이콘들의 의미를 일일이 기억해야 한다는 불편함이 있습니다.

사이드 내비게이션은 화면 크기를 조절하기 쉽습니다

사용하는 기기나 폰트 크기에 따라서 다르기는 하지만, 일반적으로 사이드 내비게이션을 사용하면 그렇지 않은 경우보다 어보브 더 폴드(above the fold)[1] 화면에서 메뉴의 수를 최소한 두 배 이상 더 많이 보여줄 수 있습니다.웹 페이지에 대표 메뉴들이 많이 있지만, 그것들을 소수의 카테고리로 묶기 어려운 경우에는, 사이드 내비게이션을 활용하는 것이 훨씬 더 효과적입니다. 이것을 달리 말하자면, 서비스의 규모가 커지더라도 메뉴를 추가하기가 더욱 편리하다는 것입니다.

사이드 내비게이션은 맞춤화된 설정을 지원한다

사이드 내비게이션은 확장성이 좋아서, 사용자들이 직접 내비게이션 메뉴를 구성할 수 있게 만들 수도 있습니다. 이러한 가변 메뉴는 상당히 흔하게 볼 수 있는데, 예를 들자면 슬랙(Slack)의 대화 채널이나 아웃룩(Outlook)의 폴더와 같은 일반적인 것에서부터 구글 드라이브(Google Drive)나 컨플루언스(Confluence)와 같은 계층 구조를 가진 것들도 있습니다.

데스크톱 환경과의 일관성 유지

만약에 여러분이 만든 모바일 앱이 네이티브(native, 각 플랫폼의 환경에 맞는 언어로 제작된 것) 버전이라면, 그 환경을 웹 애플리케이션과 동일하게 만드는 것이 좋습니다. 맥 OS와 윈도우 응용 프로그램에서는 기본적인 내비게이션 방식으로 사이드바(sidebar)가 널리 사용되고 있습니다. 화면의 위쪽은 주로 명령, 속성, 상태 등 기본적인 메뉴들로 채워져 있는 경우가 많기 때문입니다.

마우스를 가져가면 활성화되는 하위 메뉴는 상단 내비게이션 방식에서 훨씬 효과적이다

내비게이션을 왼쪽에 두고 하위 메뉴를 슬라이드 숨김 방식으로 처리한다면, 마우스를 대각선 방향으로 움직일 때 다른 메뉴가 선택되는 문제가 발생할 수 있습니다. 그리고 하위 메뉴의 개수와는 관계없이, 사이드 내비게이션을 사용한다면 수직 방향으로 다른 화면이 나타나서 가리지 않도록 처리해야 합니다.

상단 내비게이션 바와 메가 메뉴

메가 메뉴(mega menu)라는 것은 위쪽에 있는 내비게이션 바에 마우스를 가져가면 사이트 내의 거의 모든 메뉴가 한꺼번에 펼쳐지는 것을 말하는데, 이런 기능은 요즘에 이커머스(e-commerce)를 비롯한 대형 웹사이트에서 많이 볼 수 있습니다. 메가 메뉴는 사용자에게 아주 많은 선택권을 주면서도 사이트의 하위 구조를 한눈에 보여줄 수 있어서 매우 효율적인 디자인이라고 할 수 있습니다. 그리고 이렇게 레이아웃을 구성하면 공간적으로도 여유가 생겨서, 제품을 더 많이 보여주거나 광고를 위해서 사용할 수도 있습니다.

사이드 내비게이션으로 전환을 시도했지만 실패한 사례들

내비게이션 디자인을 새로 한다는 것은 언제나 어려운 과제입니다. 사용자들이 기존의 내비게이션 방식에 익숙해져 있기 때문입니다. 특히 매일 사용하는 애플리케이션이라면 더욱 그렇습니다. 이런 내비게이션에 약간의 변화만 주더라도 사용자들에게 혼란을 줄 수 있습니다. 메뉴 구성을 새로 파악해야 하는 문제와는 별개로, 이렇게 섣불리 디자인을 변경했다가 사용자들로부터 거센 항의를 받는 경우도 많습니다. 지라 클라우드(Jira Cloud)가 내비게이션을 사이드 메뉴로 전환했던 것이 대표적인 사례입니다. 그래서 지라 측에서는 사용자들로부터 의견을 청취했는데, 피드백을 전달한 (350명의) 사용자들 중 95% 이상이 사이드 메뉴보다는 다시 “오래된” 상단 내비게이션으로 바꾸는 것을 선호했습니다.

반응형 디자인에서는 상단 내비게이션과 사이드 내비게이션이 모두 나름의 장단점을 갖고 있다

메뉴 링크가 많지 않은 상태에서 상단 내비게이션을 사용한다면, 태블릿 기기에서 세로 화면에서도 모든 메뉴들을 한꺼번에 표시할 수 있다는 장점이 있습니다. 사이드 내비게이션을 사용한다면 태블릿 기기의 세로 화면에서는 햄버거 메뉴(hamburger menu)[2]로 숨겨야 하겠지만, 그래도 화면의 크기에 관계없이 언제나 일관된 디자인을 보여줄 수 있다는 장점이 있습니다.

최적의 내비게이션 방식은 상황에 따라서 다릅니다

상단 내비게이션

공간을 적게 사용하고, 페이지 내에서 가장 눈에 띄는 위치를 차지하게 됩니다. 내비게이션 메뉴가 그리 많지 않을 때 사용하면 효과가 좋습니다. 사이트의 계층 구조가 복잡하지 않다면, 서비스의 규모에 관계없이 여러 다양한 웹사이트, 이커머스, 웹 애플리케이션의 메인 메뉴로 사용할 수 있습니다.

사이드 내비게이션

내비게이션 링크가 많은 서비스에 사용하기 좋으며, 확장성과 설정 변경이 쉽습니다. 사용자들이 직접 탐색 메뉴를 설정하거나 트리(tree)[3]및 폴더 구조를 지원해야 하는 복잡한 애플리케이션, 웹사이트, 관리용 앱, 데스크톱 응용프로그램, 파일/콘텐츠 관리 시스템 등의 메인 메뉴로는 사이드 내비게이션 방식을 고려하는 것이 좋습니다.

<참고자료>

웹 디자인에 대한 3계층 메뉴 내비게이션 구조의 비교

[1] 스크롤을 하지 않은 상태에서 기본으로 표시되는 화면

[2] 햄버거의 옆면처럼 생긴 모양(三)의 버튼을 누르면 메뉴가 나타나는 것

[3] 나무(tree)의 아래쪽 줄기에서부터 가지가 퍼져나가며 갈라지듯이, 사용자의 선택에 따라서 여러 가지의 경우로 갈라지는 구조

> 이 글은 'Top vs side navigation: Which one is better for your product?'을 각색하여 작성되었습니다.

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

관련한 연구 결과들은 어떤가요?