[HIG] Context menus
빠르게 기능에 접근하는 콘텍스트 메뉴
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
콘텍스트 메뉴(Context menu)를 사용하면 복잡한 인터페이스 없이 항목과 관련된 기능에 접근할 수 있습니다.
콘텍스트 메뉴(Context menu)는 자주 사용하는 항목에 편리하게 접근할 수 있지만 기본적으로 숨겨져 있어 사람들이 콘텍스트 메뉴(Context menu)에 대해 모를 수 있습니다. 보통 콘텍스트 메뉴(Context menu)를 표시하려면 화면이나 콘텐츠를 선택하고 현재 플랫폼의 설정에 맞는 입력 방법을 사용해 표시합니다. 예를 들면 다음과 같습니다.
iOS 및 iPadOS의 시스템 롱 프레스(long press) 제스처
macOS 및 iPadOS에서 컨트롤키 누르며 항목 선택
macOS 또는 iPadOS에서 Magic Trackpad 보조 클릭(secondary click)하기
역자설명 : 하단의 이미지는 mac의 콘텍스트 메뉴(Context menu) 예시입니다.
Best Practices
선택한 항목과의 연관된 기능 또는 항목을 콘텍스트 메뉴(context menu)에서 제공하세요. 콘텍스트 메뉴(Context menu)는 고급 항목이나 잘 사용하지 않는 기능을 사용자들에게 제공하기 위한 것이 아닌 현재 맥락에서 가장 필요한 작업을 빠르게 사용할 수 있도록 도와줍니다. 예를 들어 받은 편지함에 있는 메일의 콘텍스트 메뉴(Context menu)에는 회신 및 이동에 대한 항목이 있지만 내용 편집, 우편함 관리 또는 메시지 필터링에 대한 항목은 제공하지 않습니다.
콘텍스트 메뉴(context menu)의 항목을 적게 제공하세요. 콘텍스트 메뉴(Context menu)가 너무 많으면 사용자들이 확인 및 스크롤이 어려울 수 있습니다.
앱 전체에서 일관된 콘텍스트 메뉴(Context menu)를 사용할 수 있게 하세요. 특정 위치에서만 콘텍스트 메뉴(Context menus)를 제공한다면 사람들은 해당 기능을 사용할 수 있는 위치를 찾지 못하고 앱에 문제가 생겼다고 느낄 수 있습니다.
주요 인터페이스에서도 콘텍스트 메뉴(context menu)를 항상 사용할 수 있도록 합니다. 예를 들어 iOS 및 iPadOS의 경우 받은 메일함의 메시지에서 사용가능한 콘텍스트 메뉴(Context menu)는 메시지 화면의 도구 모음에서도 사용할 수 있습니다. macOS의 앱 메뉴는 다양한 콘텍스트 메뉴(Context menu) 작업을 포함한 앱의 모든 작업을 나열합니다.
콘텍스트 메뉴(context menu)의 하위 메뉴를 사용해야 한다면 한 단계의 하위 메뉴만 사용하세요. 하위 메뉴는 사용 맥락에 맞는 보조 메뉴를 보여줍니다. 하위 메뉴는 콘텍스트 메뉴(Context menu)를 단축시키고 작업을 명확하게 할 수 있지만 하나 이상의 하위 메뉴는 사용자 경험을 복잡하게 하여 사용자들이 조작에 어려움을 느낄 수 있습니다. 하위메뉴를 제공해야 한다면 사용자가 열어보지 않고도 콘텐츠를 예측할 수 있는 직관적인 제목을 함께 제공하세요.
자주 사용하는 메뉴 항목은 사람들이 가장 먼저 확인할 수 있는 곳에 배치하도록 하세요. 사람들은 콘텍스트 메뉴(Context menu)를 열 때 손가락이나 마우스와 가까운 부분부터 읽는 경우가 많습니다. 선택한 콘텐츠의 화면 위치에 따라 해당 영역 위 또는 아래에 콘텍스트 메뉴(Context menu)가 열릴 수 있으므로 메뉴 위치와 일치하도록 항목의 순서를 반대로 해야 할 수도 있습니다.
콘텍스트 메뉴(Context menu)가 아닌 앱의 기본 메뉴에 키보드 단축어를 표시합니다. 콘텍스트 메뉴(Context menu)는 작업에 대한 단축어를 제공하므로 키보드 단축어를 중복해 보여주는 것은 필요하지 않습니다.
세퍼레이터(separator)를 사용하여 모범 사례를 따르세요. 다른 유형의 메뉴와 마찬가지로 세퍼레이터(separator)를 사용하여 콘텍스트 메뉴(Context menu)의 항목을 그룹화하고 메뉴를 빠르게 확인할 수 있습니다. 일반적으로 콘텍스트 메뉴(Context menus)에서 세 개 이상의 그룹은 사용하지 않으며 자세한 내용은 Menus를 참고하세요.
Content
대부분의 경우 콘텍스트 메뉴(Context menus)는 제목을 표시하지 않지만 다른 모든 메뉴와 마찬가지로 콘텍스트 메뉴(Context menus)의 각 항목에는 해당 항목을 설명하는 짧은 레이블이 표시됩니다. 관련 가이드라인은 Menus > Labels를 참고하세요.
Platform considerations
Not supported in tvOS or watchOS.
iOS, iPadOS
일반적으로 콘텍스트 메뉴(Context menu)에는 제목을 추가하지 않습니다. 콘텍스트 메뉴(Context menus)가 명확하지 않은 콘텐츠를 대상으로 하는 경우는 예외로 제목을 사용합니다. 예를 들면 사람들이 여러 메일을 선택하고 도구 메뉴에서 표시 버튼을 누르면 콘텍스트 메뉴(Context menus) 제목에 선택한 메일의 수가 표시되고 사람들에게 현재 작업이 모든 메일에 영향을 준다는 것을 알려줍니다.
콘텍스트 메뉴(Context menu)에서 작업과 함께 기호 또는 인터페이스 아이콘을 제공하세요. 기호나 아이콘은 해당 작업을 사용자들이 쉽게 이해할 수 있도록 돕습니다. 동일한 기호를 사용해야 하는 작업이 여러 개 있는 경우에는 겹치지 않도록 모든 기호를 생략하는 것이 좋습니다.
한 항목에서 콘텍스트 메뉴(Context menu) 또는 편집 메뉴 중 하나만 제공하세요. 같은 항목에서 두 기능을 함께 사용한다면 사람들에게 혼란을 줄 수 있습니다. 관련 내용은 Edit menus를 참고하세요.
사람들에게 데이터 손실이 발생할 수 있는 콘텍스트 메뉴(Context menu)에 대해 미리 경고해야 합니다. 콘텍스트 메뉴(Context menu)에 삭제나 제거와 같이 파괴적인 작업을 제공해야 한다면, 메뉴의 가장 끝에 표시하고 위험을 명시해야 합니다.(개발자 가이드라인은 destructive를 참고하세요). 시스템은 빨간색상의 텍스트를 사용하여 파괴적인 메뉴 항목을 표시할 수 있습니다.
iPadOS에서 콘텍스트 메뉴(Context menu)를 사용하여 사람들이 앱에 새로운 개체를 만들 수 있도록 합니다. iPadOS에서는 터치스크린을 롱 프레스(long press) 하거나 트랙패드나 키보드가 연결된 보조 클릭(secondary click)을 사용하여 콘텍스트 메뉴(Context menu)를 표시할 수 있습니다. 예를 들어 파일과 폴더 사이의 영역에서 콘텍스트 메뉴(Context menu)를 표시하여 새 폴더를 만들 수 있습니다.
iOS 및 iPadOS에서 콘텍스트 메뉴(Context menu)는 목록과 가까운 곳에 현재 콘텐츠의 미리 보기를 표시할 수 있습니다. 사람들은 메뉴에서 작업을 선택하거나 미리 보기를 눌러 열거나 다른 영역으로 옮길 수 있습니다.
미리 보기는 콘텍스트 메뉴(Context menu) 작업의 대상을 명확히 보여주는 그래픽을 사용하는 것이 좋습니다. 예를 들어, 사람들이 메모나 메일 목록에서 콘텍스트 메뉴(Context menu)를 표시할 때, 미리 보기는 사람들이 원하는 항목으로 작업 중인지 확인할 수 있도록 실제 콘텐츠의 요약된 버전을 보여줍니다.
애니메이션이 실행될 때 미리 보기가 올바르게 보이는지 확인하세요. 콘텐츠의 미리 보기 이미지를 사용할 때 애니메이션을 함께 실행해 미리 보기와 메뉴 뒤의 화면을 어둡게 합니다. 애니메이션이 실행되는 동안 모서리의 둥글기 같은 윤곽선이 변경되지 않도록 미리 보기의 테두리를 미리 보기 이미지의 모양에 맞추는 것이 중요합니다. 개발자 가이드라인은 UIContextMenuInteractionDelegate를 참고하세요.
macOS
Mac에서 콘텍스트 메뉴(Context menu)를 contextual menu라고 하기도 합니다.
watchOS
watchOS 7 이전 버전에서는 화면을 강하게 누르면 현재 화면과 관련된 숨겨진 실행 메뉴를 열 수 있었습니다. watchOS 7 이후 버전에서 watchOS앱들은 주요 메뉴 항목을 관련 화면이나 설정 화면에 나타냅니다.
Resources
Related
Developer documentation
UIContextMenuInteraction — UIKit
Videos
What’s new in iPad app design WWDC22
Design with iOS pickers, menus and actions WWDC 2020
Changelog
September 14, 2022 : Refined guidance on including a submenu and added a guideline on using a context menu to support object creation in an iPadOS app.
