[iOS / HIG] Context Menus

Context Menus

In iOS 13 and later, you can use context menus to give people access to additional functionality related to onscreen items without cluttering the interface.

iOS 13 이상에서는 상황에 맞는 메뉴를 사용하여 인터페이스를 어수선하게 만들지 않고 화면 항목과 관련된 추가 기능에 액세스할 수 있습니다.

 

상황에 맞는 메뉴 위에 사진의 미리보기를 보여주는 스크린샷입니다. 사진에는 남자와 여자가 나와 있으며 상황에 맞는 메뉴에는 복사, 공유, 즐겨찾기, 모든 사진에 표시 및 제거 명령이 나열됩니다.

 

Context menus are similar to Peek and Pop, but with two key differences:

• Context menus are available on all devices running iOS 13 and later; Peek and Pop is available only on devices that support 3D Touch.
• Context menus immediately display contextually relevant commands; Peek and Pop requires a swipe up to view commands.

컨텍스트 메뉴는 Peek 및 Pop과 유사하지만 두 가지 주요 차이점이 있습니다.

• 상황에 맞는 메뉴는 iOS 13 이상을 실행하는 모든 기기에서 사용할 수 있으며 Peek 및 Pop은 3D Touch를 지원하는 기기에서만 사용할 수 있습니다.
• 상황별 메뉴는 상황별 관련 명령을 즉시 표시합니다. Peek 및 Pop 명령을 보려면 위쪽으로 손가락을 밀어야 합니다.
  

 

To reveal a context menu, people can use the system-defined touch and hold gesture or 3D Touch (3D Touch can make context menus appear more quickly). When open, a context menu displays a preview of the item and lists the commands that act on it. People can choose a command or drag the item to another area, window, or app.

상황에 맞는 메뉴를 표시하려면 시스템 정의 터치 앤 홀드 제스처 또는 3D 터치(3D Touch를 사용하면 상황에 맞는 메뉴가 더 빨리 나타납니다.)를 사용할 수 있습니다. 열리면 상황에 맞는 메뉴가 항목의 미리 보기를 표시하고 항목에 적용되는 명령을 나열합니다. 사용자는 명령을 선택하거나 항목을 다른 영역, 창 또는 앱으로 끌 수 있습니다.

 

Adopt context menus consistently. If you provide context menus for items in some places but not in others, people won’t know where they can use the feature and may think there’s a problem with your app.

상황에 맞는 메뉴를 일관성 있게 채택합니다. 일부 장소에서만 항목에 대한 상황별 메뉴를 제공하면 다른 사용자가 해당 기능을 사용할 수 있는 위치를 알 수 없고 앱에 문제가 있다고 생각할 수 있습니다.

 

Include only the most commonly used commands that apply to the item. For example, in the context menu for a Mail message, it makes sense to include commands for replying and moving the message, but it doesn’t make sense to include formatting or mailbox commands. Listing too many commands can overwhelm people.

항목에 적용되는 가장 일반적으로 사용되는 명령만 포함합니다. 예를 들어, 메일 메시지의 상황별 메뉴에서 메시지를 회신하고 이동하기 위한 명령을 포함하는 것은 좋지만 형식 지정 또는 우편함 명령을 포함하는 것은 의미가 없습니다. 너무 많은 명령을 나열하면 사람들을 압도할 수 있습니다.

 

Include a glyph with each command in a context menu. A glyph reinforces the meaning of a command, helping people instantly understand its function. When you use SF Symbols, you can choose an existing symbol that represents your command or edit a related symbol to create a custom glyph. If your context menu includes a submenu, you don't need a glyph for it because it automatically displays a system-provided chevron symbol that indicates the presence of additional commands.

상황에 맞는 메뉴의 각 명령에 글리프를 포함합니다. 글리프는 명령의 의미를 강화하여 사람들이 그 기능을 즉시 이해하도록 돕습니다. SF 기호를 사용할 때 명령을 나타내는 기존 기호를 선택하거나 관련 기호를 편집하여 사용자 정의 글리프를 생성할 수 있습니다. 상황에 맞는 메뉴에 하위 메뉴가 포함되어 있으면 추가 명령이 있음을 나타내는 시스템에서 제공하는 쉐브론 기호를 자동으로 표시하므로 글리프가 필요하지 않습니다.

 

Use submenus to manage complexity. A submenu is a context menu item that reveals a secondary menu of logically related commands. Give submenus intuitive titles that describe their contents so people can predict the submenu's commands without revealing them. Concise, action-oriented titles also let people skip over submenus they don’t need in their current context.

하위 메뉴를 사용하여 복잡성을 관리합니다. 하위 메뉴는 논리적으로 관련된 명령의 보조 메뉴를 표시하는 상황에 맞는 메뉴 항목입니다. 하위 메뉴의 내용을 설명하는 직관적인 제목을 지정하여 사람들이 하위 메뉴의 명령을 노출하지 않고 예측할 수 있도록 합니다. 또한 간결하고 액션 지향적인 제목을 통해 현재 상황에서 필요하지 않은 하위 메뉴를 건너뛸 수 있습니다.

 

Keep submenus to one level. Although submenus can shorten a context menu and clarify the commands that people can perform, more than one level of submenu complicates the experience and can be difficult for people to navigate.

하위 메뉴를 한 레벨로 유지합니다. 하위 메뉴는 상황에 맞는 메뉴를 단축하고 사용자가 수행할 수 있는 명령을 명확히 할 수 있지만, 하위 메뉴를 하나 이상 사용하면 환경이 복잡해지고 탐색하기 어려울 수 있습니다.

 

Place the most frequently used items at the top of the menu. When people open a context menu, their focus is on the top area of that menu. Placing the most common items at the top of the menu helps people find the item they’re looking for.

가장 자주 사용하는 항목을 메뉴 맨 위에 배치합니다. 사람들이 상황별 메뉴를 열 때, 그들의 초점은 해당 메뉴의 맨 위 영역에 있습니다. 가장 일반적인 항목을 메뉴 맨 위에 배치하면 찾는 항목을 쉽게 찾을 수 있습니다.

 

Use separators to group related menu items. Creating visual groupings can help people scan a menu more quickly. For example, you might use a separator to group actions related to editing the item and another to group actions related to sharing the item. Typically, you don’t want more than three groups in a context menu.

구분 기호를 사용하여 관련 메뉴 항목을 그룹화합니다. 시각적 그룹화를 만들면 사람들이 메뉴를 더 빨리 스캔하는 데 도움이 됩니다. 예를 들어, 구분 기호를 사용하여 항목 편집과 관련된 작업을 그룹화하고 다른 하나는 항목 공유와 관련된 작업을 그룹화할 수 있습니다. 일반적으로 상황에 맞는 메뉴에는 세 개 이상의 그룹을 허용하지 않습니다.

 

Avoid providing a context menu and an edit menu for the same item. It can be confusing to people and hard for the system to detect intent when both features are enabled for the same item. For additional guidance, see Edit Menus.

동일한 항목에 대해 상황에 맞는 메뉴와 편집 메뉴를 제공하지 않도록 합니다. 두 기능이 동일한 항목에 대해 활성화된 경우 사용자에게 혼란을 줄 수 있으며 시스템이 의도를 감지하기 어려울 수 있습니다. 자세한 내용은 메뉴 편집을 참조하십시오.

 

Avoid providing an action button that opens the item preview. People can tap to open the item they’re previewing, so there’s typically no need to provide an explicit Open button.

항목 미리 보기를 여는 수행 버튼를 제공하지 않도록 합니다. 미리 보고 있는 항목을 누르면 열 수 있으므로 일반적으로 열기 단추를 명시적으로 제공할 필요가 없습니다.

 

For developer guidance, see UIContextMenuInteraction.

개발자 지침은 UIContextMenuInteraction을 참조하십시오.

 

 

 

※ 참고 출처

애플 개발자 문서

Context Menus - Controls - iOS - Human Interface Guidelines - Apple Developer