Source: Salesforce Lighting Design System

메뉴란?

디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다.

GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다.

'선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항목들을 메뉴로 볼 수 있게 하는 여지가 있습니다. 어디까지를 메뉴로 한정하여 지칭하느냐와 그리고 메뉴를 어떻게 세분화하여 정의했느냐에 있어서 디자인 시스템별로 차이가 있습니다.

메뉴는 선택 가능한 항목의 나열이며 리스트를 기본형으로 함

메테리얼 디자인의 경우 메뉴는 레이어팝업과 리스트 형태의 메뉴만을 메뉴라고 부릅니다. 애플의 MacOS 휴먼디자인가이드라인에 따르면 'Contextual Menus', 'Dock Menus', 'Menu Bar Menus'로 구분하여 위치와 맥락에 따라 다른 종류의 메뉴들을 구성해 놓았습니다.

이처럼 기업마다 다르지만 기본적으로 GUI에서 '메뉴'라고 하면 '선택할 수 있는 항목들의 나열'이며, 가장 기본적인 나열 형태로 '리스트' 형태로 보여지는 것이 일반적인 관습으로 보여집니다. 다만 메뉴라는 말 자체의 추상성 때문에 메뉴라는 말 자체를 다른 용어로 대체한 경우도 있는데, 쇼피파이의 폴라리스 디자인 시스템의 경우 Menu라는 말을 사용하지 않고 Action이라고 대체한 것을 확인할 수 있습니다.

메뉴라는 단어가 갖는 추상성에도 불구하고, '리스트 형태의 선택할 수 있는 항목들의 나열'을 메뉴의 가장 기본적인 정의라고 보는 것이 보편적인 해석인 것으로 보입니다. 이러한 리스트 형태의 속성을 기본으로 하되, 위치와 환경에 따라 오버플로우 메뉴, 드롭다운 메뉴, 컨텍스추얼 메뉴, 내비게이션 메뉴, 헤더 내비게이션 메뉴 등 다양한 파생된 의미와 형태로 상세화/변형되어 정의가 가능할 것 같습니다.

참고: GNB는 한국에서 제일 많이 쓰는 용어

추가적으로 리서치 과정에서 GNB라는 용어가 한국에서 주로 통용되는 용어이며, 해외에서는 잘 쓰이지 않는 것도 알게 되었습니다. 모든 화면에 표시되는 네비게이션 메뉴 자체가 현재에는 굉장히 적어진 탓도 있지 않을까 싶습니다. GNB라는 용어보다는 Top Navigation Bar, Header Navigation Menu 등 위치나 환경적인 속성을 명시하는 쪽의 사용이 더 많았습니다.