컨텍스트 메뉴 vs 드롭다운
컨텍스트 메뉴는 누르거나 클릭한 항목에 쓸 수 있는 행동을 보여줘요. 드롭다운은 목적이 명확하게 보이는 버튼에서 열려요.
컨텍스트 메뉴를 유일한 경로가 아닌 추가 단축키로 사용하세요. 메뉴가 어디에서 열리는지 사람들이 볼 수 있어야 할 때는 드롭다운을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
macOS Context Menu
macOS Context Menu는 마우스 포인터가 가리키는 곳의 짧은 동작 목록이에요. 우클릭 같은 보조 클릭으로 열어요.
선택한 파일을 오른쪽 클릭하면 목록을 벗어나지 않고 이름 바꾸기, 복제, 공유, 휴지통으로 이동이 표시됩니다.
- 사용할 때
- 포인터 아래 아이템이나 선택에 따라 달라지는 덜 일반적인 짧은 동작 집합에 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 중요 명령에 대한 유일한 경로로 컨텍스트 메뉴를 만들지 마세요. 전체 앱 명령은 특정 항목 작업에서 멀리 두세요.
- 코드에서 사용된 이름
AppKit NSMenu / SwiftUI contextMenu
드롭다운 & 컨텍스트 메뉴 — 학습 번들
이 학습 번들은 메뉴가 열리는 방식으로 비교합니다. 드롭다운은 제어 장치에서 열립니다. 컨텍스트 메뉴는 하나의 객체에 속하며 흔히 포인터에서 열립니다. 이 번들은 하나의 표준 메뉴 용어가 아닙니다.
DropdownMenu / ContextMenu더보기 버튼은 일반 작업을 엽니다. 파일을 우클릭하면 해당 파일에 대한 작업만 열립니다.
- 사용할 때
- 트리거와 객체가 작업에 맞는 메뉴를 선택합니다. 그 후 키보드 동작을 빌드합니다.
- 다음 경우에는 사용하지 마세요
- 명령 메뉴 안에 폼 필드나 사이트의 주요 내비게이션을 절대 넣지 마세요.
- 코드에서 사용된 이름
DropdownMenu / ContextMenu
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| macOS Context MenumacOS Context Menu | 포인터 아래 아이템이나 선택에 따라 달라지는 덜 일반적인 짧은 동작 집합에 사용하십시오. | 중요 명령에 대한 유일한 경로로 컨텍스트 메뉴를 만들지 마세요. 전체 앱 명령은 특정 항목 작업에서 멀리 두세요. | AppKit NSMenu / SwiftUI contextMenu |
| 드롭다운 & 컨텍스트 메뉴 — 학습 번들Dropdown & Context Menu — Learning Bundle | 트리거와 객체가 작업에 맞는 메뉴를 선택합니다. 그 후 키보드 동작을 빌드합니다. | 명령 메뉴 안에 폼 필드나 사이트의 주요 내비게이션을 절대 넣지 마세요. | DropdownMenu / ContextMenu |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 macOS Context Menu (macOS Context Menu)、드롭다운 & 컨텍스트 메뉴 — 학습 번들 (Dropdown & Context Menu — Learning Bundle)에서 선택하세요. 이 규칙 사용: 컨텍스트 메뉴는 누르거나 클릭한 항목에 쓸 수 있는 행동을 보여줘요. 드롭다운은 목적이 명확하게 보이는 버튼에서 열려요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.