Menu

메뉴는 사용자가 요소와 상호작용하거나 특정 동작을 수행할 때 나타나는 인터랙티브 옵션 목록이에요. 특정 컨트롤, 인터페이스 영역, 데이터 요소 또는 애플리케이션 뷰와 관련된 일련의 액션을 보여주는 공개(disclosure) 컴포넌트입니다.

출처: Menu

본문

개요 (Overview)

메뉴는 특정 컨트롤, 인터페이스 영역, 데이터 요소 또는 애플리케이션 뷰와 관련된 일련의 액션과 함께 나타나는 공개 컴포넌트예요. 일반적으로 이 컨텍스트는 메뉴를 호출하기 전 사용자의 현재 선택에 의해 결정됩니다. 메뉴는 메뉴 버튼 같은 컴포넌트에서 열거나 우클릭을 통해 열 수 있습니다.

이 지침은 메뉴 컴포넌트를 효과적으로 포맷하고, 구조화하고, 사용하는 방법을 이해하는 데 도움이 될 거예요.

언제 사용할까요 (When to use)

인터페이스 정리 (Declutter interface)

일반적으로 메뉴를 사용해 자주 사용하지 않거나 고급 옵션을 사용자가 구체적으로 필요할 때까지 숨기세요. 이렇게 하면 인터페이스를 깨끗하게 유지하고 필수 요소에 집중하게 합니다.

컨텍스트 메뉴 (Context menu)

컨텍스트 메뉴는 우클릭 인터랙션으로 트리거됩니다. 컨텍스트 메뉴는 페이지의 다른 모든 콘텐츠 위에 나타나며, 트리거된 선택된 콘텐츠나 요소와 관련된 메뉴 안의 정의된 옵션 목록이에요.

사용자화 가능한 액션 (Customizable actions)

메뉴는 이미 애플리케이션에 익숙한 고급 사용자를 위한 인터랙션을 빠르게 할 수 있어요. 이 사용자들은 더 효율적으로 작업하기 위해 종종 단축키와 컨텍스트 특정 액션을 활용합니다.

언제 사용하지 말아야 할까요 (When not to use)

폼 제출 (Form submission)

사용자가 고를 수 있는 정적 옵션 목록으로 폼을 제출하거나 필터링할 때는 메뉴 대신 드롭다운(dropdown)을 사용하세요.

복잡한 입력 (Complex inputs)

많거나 복잡한 입력을 집합적으로 사용할 때는 메뉴 대신 팝오버(popover)를 사용하세요.

포맷 (Formatting)

구조 (Anatomy)

  • 트리거(Trigger): 사용 가능한 액션 목록을 표시하도록 트리거되는 요소. 이러한 메뉴 트리거에는 메뉴 버튼, 콤보 버튼, 메뉴 버튼 안의 오버플로우 메뉴가 포함될 수 있어요. 메뉴는 페이지나 특정 요소(컬럼, 행)를 우클릭할 때도 열릴 수 있습니다.
  • 액션 항목(Action item): 특정 요소에 그 액션을 적용하기 위해 활성화할 수 있는 메뉴 항목. 이 항목에는 하위 메뉴 표시나 키보드 단축키가 함께할 수 있어요.
  • 구분선(Divider): 메뉴 안의 다른 섹션을 나타내는 규칙.
  • 하위 메뉴 표시(Submenu indicator): 하위 메뉴를 나타내는 캐럿 아이콘.
  • 키보드 단축키(Keyboard shortcut): 특정 액션 항목에는 키보드 단축키가 있을 수도 있어요.
  • 메뉴(Menu): 열린 상태를 표시하고 선택할 수 있는 액션 목록을 포함하는 컨테이너.
  • 선택된 항목(Selected item): 선택될 수 있는 항목. 선택은 단일 또는 다중 선택일 수 있어요.
  • 하위 메뉴(Submenu): 기본 레벨에서 파생된 중첩 레벨.

크기 (Sizing)

높이 (Height)

메뉴 항목은 extra small, small, medium, large의 네 가지 크기로 제공돼요. 크기 사양에 대한 자세한 내용은 스타일(style) 탭을 참고하세요. 메뉴 버튼 트리거를 사용할 때는 메뉴 항목(단수)의 높이가 사용 중인 버튼의 크기를 반영합니다.

참고: 현재 Carbon은 버튼(buttons)에 대해 extra-small 크기를 지원하지 않으며, 행이나 메뉴 항목에만 지원합니다. 따라서 이 메뉴 크기는 메뉴 버튼 트리거와 함께 사용할 수 없어요. 그러나 extra-small 메뉴 크기는 필요하면 다른 컨텍스트에서 구현하는 데 계속 사용할 수 있습니다.

크기 (Size) 높이 (px / rem)
Extra small 24 / 1.5
Small 32 / 2
Medium 40 / 2.5
Large 48 / 3

메뉴 버튼과 메뉴의 높이를 일치시키세요.

메뉴 버튼과 메뉴의 높이를 섞지 마세요.

너비 (Width)

기본적으로 메뉴 버튼(menu button)과 콤보 버튼(combo button)은 버튼 구조 스타일(button structure style)을 따르며, 메뉴는 좁게 보이는 것을 방지하기 위해 최소 160px의 너비를 유지합니다.

버튼 라벨과 메뉴 옵션 라벨이 모두 짧을 때의 메뉴 기본 너비

메뉴 항목 라벨이 길어지면 메뉴 버튼과 콤보 버튼은 같은 크기를 유지하고, 메뉴 컴포넌트는 최대 288px까지 확장할 수 있어요. 반대로 버튼 라벨이 길어지면 메뉴 컴포넌트는 더 좁게 보이지 않아야 하며 메뉴 버튼의 너비와 일치하도록 확장되어야 합니다.

플루이드 너비 기본 버튼을 선택하면 메뉴 버튼(또는 콤보 버튼)과 메뉴 모두 같은 너비를 가져야 해요.

최소 너비를 사용하세요.

다른 요소에 맞추기 위해 메뉴를 좁히지 마세요.

메뉴 버튼이나 콤보 버튼 라벨이 길어지면 너비를 일치시키세요.

메뉴가 메뉴 버튼이나 콤보 버튼보다 짧게 보이게 하지 마세요.

고스트 버튼은 버튼(button) 스타일만 따릅니다. 고스트 버튼의 너비를 메뉴 너비와 일치하도록 확대하면, 특히 메뉴 버튼이 닫힌 상태일 때 캐럿이 관련 버튼에서 분리된 것처럼 보일 수 있기 때문입니다.

모든 경우에 기본 고스트 버튼을 사용하세요.

어떤 경우에도 플루이드 고스트 버튼을 사용하지 마세요.

정렬 (Alignment)

기본 (Default)

기본적으로 콤보 버튼, 메뉴 버튼, 오버플로우 버튼은 열렸을 때 가용 공간과 레이아웃에 따라 메뉴의 위, 왼쪽 또는 오른쪽에 위치를 유지합니다.

버튼 라벨과 메뉴 항목 라벨이 모두 짧을 때의 메뉴 기본 너비

대안 (Alternatives)

또는 열린 메뉴는 가용 공간과 레이아웃에 따라 관련 메뉴 버튼 트리거의 아래, 왼쪽 또는 오른쪽에 배치할 수 있어요.

액션 항목 (Action items)

단일 또는 다중 선택 항목을 비선택 항목과 조합할 때 일관된 정렬을 보장하면 메뉴의 가독성이 개선됩니다.

선택되지 않은 항목과 선택된 항목으로 일관된 정렬을 만드세요.

선택되지 않은 항목과 선택된 항목으로 혼합된 정렬을 만들지 마세요.

오른쪽에서 왼쪽 (RTL)

RTL(오른쪽에서 왼쪽) 언어의 경우 캐럿과 키보드 단축키의 방향을 포함해 메뉴 전체가 가로로 반전됩니다.

콘텐츠 (Content)

주요 요소 (Main elements)

넘침 (Overflow)

메뉴 항목에는 짧고 정확한 라벨을 사용하는 것을 고려하세요. 그러나 긴 메뉴 항목을 잘라내기로 결정할 때는 브라우저 렌더링 title 툴팁이 호버 시 전체 텍스트를 공개합니다.

툴팁은 잘라낸 텍스트를 명확히 하는 데 도움이 됩니다.

순서와 그룹화 (Ordering and grouping)

발견성을 돕기 위해 메뉴 항목을 작업 순서와 정렬되는 의미 있는 순서로 배열하세요. 사용자가 가장 관련 있는 옵션에 집중하도록 가장 자주 사용하는 것을 위에 배치하세요.

메뉴 항목이 상당한 양일 때는 구분선으로 분리된 섹션으로 그룹화하는 것이 좋습니다.

메뉴 항목이 의미 있는 섹션으로 그룹화되는 방식을 보여주는 예시

메뉴 안의 항목 수 (Number of items within a menu)

메뉴의 방대한 옵션 목록은 사용자를 압도할 수 있어요. 컨텍스트 메뉴와 오버플로우 메뉴에서는 스크롤 없이 항목을 쉽게 훑어볼 수 있도록 12개를 넘지 않는 항목으로 목록 길이를 관리하세요. 메뉴 버튼(menu buttons)에서는 메뉴 목록을 5개 미만으로 더 작게 유지하세요.

가능한 한 적은 항목을 포함하는 것을 고려하세요.

선택지를 과도하게 채우지 마세요.

하위 메뉴 (Submenus)

하위 메뉴는 오른쪽에 캐럿 아이콘이 있는 메뉴 항목으로, 추가적인 관련 명령을 제공해요. 하위 메뉴가 컨텍스트 메뉴를 정리하고 옵션을 더 명확하게 만드는 데 도움이 될 수 있지만, 여러 레벨의 하위 메뉴를 도입하면 사용자 경험이 더 복잡해지고 탐색하기 어려워질 수 있어요. 하위 메뉴에 관해서는 여러 레벨의 중첩을 피하세요.

공유 라벨과 관련된 액션 (Actions associated with a shared label)

같은 그룹의 두 개 이상의 메뉴 항목에 용어가 나타나면, 사람들이 그 내용을 예측하고 쉽게 훑어보도록 하위 메뉴 라벨에서 반복되는 용어를 제거하는 것을 고려하세요.

반복되는 용어를 생략하세요.

하위 메뉴 트리거와 같은 용어를 반복하지 마세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

메뉴 항목에는 enabled, hover, focus, focus and hover, danger hover, danger hover and focus, disabled의 일곱 가지 상태가 있어요. 상태에 대해 더 알아보려면 스타일(style) 탭을 참고하세요.

상태 (State) 언제 사용하나요 (When to use)
Enabled 목록의 액션이 활성화되어 있지만 사용자가 직접 상호작용하지 않을 때. 보통 컴포넌트의 기본 또는 정상 상태라고 함.
Hover 사용자의 마우스 커서가 메뉴나 하위 메뉴의 메뉴 항목 위에 있을 때.
Focus 사용자가 메뉴 트리거에 탭하거나 클릭할 때. 이렇게 하면 메뉴 목록이 열림. 메뉴 목록의 첫 번째 항목이 기본으로 포커스 상태를 가짐.
Focus and hover 항목이 포커스 상태이지만 사용자의 마우스 커서가 항목 행 위에 있을 때.
Danger hover 액션이 사용자의 데이터에 파괴적인 영향을 줄 수 있을 때(예: delete, remove).
Danger hover and focus 사용자가 danger hover 상태를 가진 파괴적인 메뉴 항목에 탭할 때.
Disabled 어떤 액션이 특정 시점에 수행될 수 없지만, 나중에 그 사용자에 의해 수행 가능할 때. 권한 기반 액션은 사용자가 그 액션을 수행하는 것이 절대 불가능하다면 숨겨야 함.

인터랙션 (Interactions)

마우스 (Mouse)

메뉴 버튼 트리거를 클릭하거나 영역을 우클릭해 메뉴가 열리면 사용자는 다음을 할 수 있어요:

  • 항목을 클릭해 선택하거나 선택 해제
  • 캐럿 아이콘이 있는 항목 위를 호버해 그 항목의 추가 옵션·액션 공개
  • 메뉴 영역 밖을 클릭해 닫기

메뉴의 마우스 인터랙션

키보드 (Keyboard)

메뉴 트리거에서 Return 또는 Enter를 눌러 메뉴가 열리면 사용자는 다음을 할 수 있어요:

  • Up과 Down 화살표를 눌러 메뉴 옵션 사이를 탐색
  • 캐럿 아이콘이 있는 항목에서 Return, Enter 또는 Right 화살표를 눌러 추가 옵션 공개
  • 항목에서 Return 또는 Enter를 눌러 선택하거나 선택 해제
  • Escape를 눌러 닫기

반응형 동작 (Responsive behaviors)

메뉴가 열리면 첫 번째 옵션이 강조됩니다. 사용자는 옵션 목록을 이동하며 한 번에 하나의 항목을 활성화하거나 선택할 수 있어요. 사용자가 메뉴 항목을 활성화하거나 선택하면 메뉴가 닫힙니다.

메뉴 항목을 활성화하면 다음을 트리거할 수 있어요:

  • 대화 상자 열기
  • 값 설정(액션을 수행하거나 메뉴에서 선택/해제 옵션으로 사용될 수 있음)
  • 새 페이지 열기(보통 새 창이나 탭에서)
  • 새 사용자 작업 시작(여러 단계 포함 가능)
  • 무언가 저장하거나 닫기
  • 하위 메뉴 확장(활성화 없이도 발생할 수 있음)
  • 사용자 액션 실행 취소·재실행
  • 다양한 액션 수행(예: cut, paste, copy, format 같은 편집 액션; 업데이트 확인 같은 애플리케이션 액션)
  • 사이드바나 툴바 열기
  • 기존 페이지 접근
  • 현재 창 조정(예: minimize, split, arrange, swap)
  • 메뉴를 닫는 것 외의 액션 없음

수정자 (Modifiers)

구분선 (Dividers)

구분선은 관련 액션을 적절한 섹션으로 분류하고, 앱이나 서비스를 삭제하는 것처럼 사용자 데이터에 상당한 영향을 줄 수 있는 액션을 구분하는 역할을 해요.

키보드 단축키 (Keyboard shortcuts)

메뉴 항목은 하위 메뉴에 접근하기 위한 캐럿 표시나 액션에 연결된 키보드 단축키 같은 관련 값을 표시할 수 있어요.

단일 선택과 다중 선택 (Single-select and multi-select)

단일 선택 또는 다중 선택은 메뉴 항목 앞의 체크 표시(checkmark)로 같은 시각을 가집니다.

위험 상태 (Danger state)

delete 같은 상당한 변화를 일으킬 수 있는 액션에 danger hover 상태를 적용할 수 있어요.

메뉴 버튼 (Menu buttons)

메뉴를 다른 특정 메뉴 버튼 트리거와 함께 사용하는 방법을 이해하려면 메뉴 버튼(menu buttons)을 참고하세요.

드롭다운 (Dropdown)

메뉴 컴포넌트가 드롭다운 컴포넌트와 어떻게 다르게 사용될 수 있는지 이해하려면 드롭다운(dropdown)을 참고하세요.

팝오버 (Popover)

팝오버 컴포넌트는 메뉴와 시각적으로 비슷하지만 다른 용도로 사용됩니다. 자세한 내용은 팝오버(popover)를 참고하세요.

참고 자료 (References)

  • Anna Kaley, Contextual Menus: Delivering Relevant Tools for Tasks (Nielsen Norman Group, 2019)
  • Michael Villar, Building like it's 1984: A comprehensive guide to creating intuitive context menus (Height, 2022)

더 알아보기 (Learn more)

메뉴는 자주 사용하지 않는 옵션을 숨기고 컨텍스트에 맞는 액션을 제공하는 공개 컴포넌트예요. 메뉴 버튼·우클릭으로 트리거하고, 항목 수를 관리 가능하게 유지하며(오버플로우·컨텍스트 메뉴 12개 이하, 메뉴 버튼 5개 미만), 하위 메뉴 중첩을 피하세요. 파괴적 액션에는 구분선과 danger 상태를 활용하면 됩니다.