HIG 번역) Controls - Pull-Down Menus

Pull-Down Menus

In iOS 14 and later, a button can display a pull-down menu that lists items or actions from which people can choose. You can use a pull-down menu — or simply menu — to offer items that are directly related to the button's action or to provide a list of actions that are useful in the current context.

iOS 14 이상부터, 버튼은 사용자가 선택할 수 있는 아이템이나 동작들을 나열하는 pull-down menu를 보여줄 수 있습니다. 간단하게 menu라고도 불리는 pull-down menu를 사용하여 버튼의 동작과 직접적으로 관련된 항목들을 제공하거나 현재 콘텍스트에 유용한 동작들의 목록을 제공할 수 있습니다.

Menus offer several advantages over action sheets, context menus, and popovers. For example:

Menus는 action sheets, context menus 및 popovers와 비교해 몇 가지 이점을 제공하는데, 다음과 같습니다.

• A menu opens very near the button that reveals it, so people can instantly understand the relationship between the menu's items and the action they're performing.
• menu는 버튼과 매우 가까운 위치에서 열립니다. 그래서 사용자가 즉시 menu의 항목들과 그들이 수행하는 동작들 간의 관계를 이해할 수 있습니다.
• In addition to listing actions, a menu can offer selections people can use to affect the primary action.
• 동작들을 나열하는 것뿐만 아니라, 기본 동작에 영향을 미치는 데 사용할 수 있는 selections를 제공할 수 있습니다.
• Menus animate quickly into view and don't dim the screen when they appear, giving both the transition and the overall experience a lightweight feel.
• Menus는 빠르게 view 안으로 동작하고, 화면에 나타날 때 화면을 어둡게 하지 않아 전환 및 전체적인 경험을 모두 가볍게 느낄 수 있도록 도와줍니다.

For developer guidance, see UIMenu.

개발자 가이드는 다음 문서를 참조하세요.

Don't put every action in a menu. Menus let you offer a range of items without cluttering your interface, but putting every action in a menu means that people have to tap at least twice to do anything. Continue to put the most important actions in your main interface and use menus to offer supplementary items. For example, composing a new message is the most common action people take in Messages, so the Compose button is prominently featured in the main interface. To give people a convenient set of editing options, Messages attaches a menu to the Edit button instead of displaying the options in the main interface.

모든 action을 menu에 넣지 마세요. Menus는 인터페이스를 어지럽히지 않고 다양한 아이템들을 제공하지만,  menu 속에 모든 동작을 넣는 것은 사용자가 무엇을 하기 위해서 최소 두 번의 tap이 필요하다는 것을 의미합니다. 주요 인터페이스에 가장 중요한 동작들만 넣고, 부가적인 아이템들을 제공하는 것은 menus를 사용하세요. 예를 들어, 메일 앱에서 새로운 메시지를 구성하는 것은 가장 일반적인 동작이므로, Compose 버튼이 주로 메인 인터페이스에서 눈에 띄게 됩니다. 사용자에게 편집 옵션 모음의 편리함을 제공하기 위해서, Messages는 메인 인터페이스의 옵션에서 보여주는 것보다 Edit 버튼의 menu에 붙습니다.

Use a menu to present options that are directly related to an action. A menu lets you give people a way to clarify an action's target or customize its behavior without adding buttons to the main interface. For example:

동작과 직접적으로 관련된 옵션들을 나타내기 위해서 menu를 사용하세요. menu는 메인 인터페이스에 버튼을 추가하지 않고, 동작의 타깃을 명확히 하거나 그 행동들을 커스터마이징 하는 방법을 제공합니다. 그 예는 다음과 같습니다.

• When people tap an Add button in your app, you could present a menu that lets them specify the item they want to add.
• 사용자가 Add 버튼을 탭 할 때, 사용자가 추가하기 원하는 아이템을 명시하여 menu를 나타낼 수 있습니다.
• If your app supports sorting, you could use a menu to let people select an attribute on which to sort.
• 앱이 정렬을 지원하는 경우, 메뉴를 사용하여 사용자가 정렬할 속성을 선택할 수 있도록 할 수 있습니다.
• In an app that enables navigation among multiple locations, a menu can let people navigate to a specific location instead of retracing each step.
• 여러 위치에서 내비게이션을 활성화할 수 있는 앱에서, menu는 사용자가 각 단계를 다시 따라가는 것 대신에 특정 위치로 탐색할 수 있도록 해줍니다.

Use a menu to provide secondary app actions. If your app includes essential actions that don't belong in the main interface, you can group these actions in a menu. For example, Files uses a menu to provide actions — like adding a folder or scanning a document — in addition to options for viewing and sorting the content.

부가적인 앱 동작들을 제공하기 위해서 menu를 사용하세요. 앱이 메인 인터페이스에 속하지 않는 필수적인 동작들을 가지고 있다면, 이러한 동작들을 menu에 그룹화할 수 있습니다. 예를 들어, File 앱은 내용을 보고 정렬하는 옵션 외에도, menu를 사용하여 폴더 추가 또는 문서 검색과 같은 동작들을 제공합니다.

Consider adding a More button to display a menu. A More button integrates well with most interfaces, and people generally understand that it provides access to additional functionality. You can create a More button by placing the ellipsis symbol within a circular button (see SF Symbols to learn more about symbols). Alternatively, you can let people reveal a menu by performing a specific gesture on an existing button. For example, in iOS 14 and later, Safari responds to a touch and hold gesture on the tabs button by displaying a menu of tab-related actions like New Tab and Close All Tabs.

menu를 보여주기 위해서 More 버튼의 추가를 고려하세요. More 버튼은 대부분의 인터페이스와 잘 어울리며, 일반적으로 사용자들이 추가적인 기능에 대한 접근을 제공받는다고 이해하고 있습니다. More 버튼은 둥근 버튼 안에 생략 기호를 위치시킴으로써 만들 수 있습니다(더 많은 기호는 다음 문서를 참조하세요). 대안으로, 이미 존재하는 버튼에 구체적인 행동으로 수행함으로써 사용자가 menu를 볼 수 있도록 할 수 있습니다. 예를 들어, iOS 14 이상의 버전에서, Safari 앱은 '새로운 탭'과 '모든 탭 닫기'와 같은 탭과 관련된 menu를 보여줌으로써 탭 버튼의 touch와 hold 제스처에 반응합니다.

Use separators to visually group related menu items. Creating visual groupings can help people scan a menu more quickly. For example, the More menu in the Files app uses separators to help people distinguish actions that affect the content from items related to viewing and sorting. Using more than about three groups in a menu can make it seem difficult to parse.

시각적으로 관련된 menu 아이템들을 그룹화하기 위해서 구분자를 사용하세요. 시각적인 그룹을 만드는 것은 사용자가 menu를 더 빠르게 훑어보는 것을 도와줍니다. 예를 들어, Files 앱의 More 메뉴는 구분자를 사용하여 사용자가 내용에 영향을 미치는 동작과 보기 및 정렬과 관련된 항목들을 구별할 수 있도록 도와줍니다.

Let people know when a menu item is destructive, and ask them to confirm their intent. Menus use red text to highlight actions that you identify as potentially destructive. When people choose a destructive action, the system displays an action sheet (iOS) or popover (iPadOS) in which they can confirm their choice or cancel the action. Because an action sheet appears in a different location from the menu and requires deliberate dismissal, it can help people avoid losing data by mistake.

menu의 항목이 어떤 것을 삭제할 수 있을 때, 의도를 확인하기 위해서 묻는 것을 사용자에게 알려주세요. Menus는 빨간 텍스트를 사용하여, 잠재적으로 어떤 것을 삭제할 수 있는 기능이 있다고 간주되는 것을 강조합니다. 사용자가 삭제하는 동작을 선택할 때, 시스템은 action sheet (iOS) 또는 popover(iPadOS)를 보여주어, 그 동작의 선택이나 취소를 확인할 수 있도록 합니다. action sheet는 menu로부터 다른 장소에 나타나고 의도적인 무시가 필요하기 때문에, 사용자의 실수로 데이터 유실되는 것을 피할 수 있습니다.

Include a glyph with a menu item when it provides value. If you need to clarify an item's meaning, you can display a glyph or image after its title. Using an SF symbol for this purpose can help you provide a familiar experience while ensuring that the symbol remains aligned with the text at every scale.

의미있는 것을 제공할 때, 메뉴 아이템에 기호를 포함하세요. 아이템의 의미를 분명하게 하기 원한다면, 제목 뒤에 기호나 이미지를 보여줄 수 있습니다. 이런 목적을 위해 SF symbol를 사용하는 것은 기호가 모든 scale에서 텍스트와 나란히 유지되어 친숙한 경험을 제공하는 데 도와줄 수 있습니다.

Display a menu title if it adds meaning. In most cases, people understand the context of a menu's items because the menu appears instantly when they tap a button to perform an action. If necessary, you can provide a succinct title to display at the top of a menu

의미를 부여한다면 menu 제목을 보여주세요. 대부분의 경우, menu는 사용자가 동작을 수행하기 위해서 버튼을 탭 할 때 즉시 나타나기 때문에, 사용자들은 menu의 아이템들의 콘텍스트를 이해하고 있습니다. 필요하다면, menu의 최상단에 간결한 제목을 보여주기 위해서 제공할 수 있습니다.

---

수정해야 할 부분이 있다면 알려주세요!

감사합니다!