햄버거 vs. 케밥
짧은 답변
세 줄 모양 버튼은 메인 메뉴를 열어. 점 세 개 버튼은 근처 항목의 추가 기능을 열어.
주로 작은 화면에서 숨겨진 내비게이션에는 세 줄을 사용하십시오. 추가 항목 동작이 맞지 않는 경우 세 점을 사용하고 버튼 이름을 “더 많은 동작”이라고 하십시오.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Hamburger Menu
↗ 햄버거 메뉴
가로줄이 세 개인 메뉴 버튼이에요. 공간이 좁아서 메뉴를 다 보여줄 수 없을 때 누르면 메뉴가 열려요.
좁은 쇼핑 페이지에서는 라벨이 붙은 메뉴 버튼이 카테고리, 계정, 도움말을 엶. 드로어는 포커스를 내부에 유지함.
- 사용할 때
- 가장 중요한 목적지를 항상 보이게 한 후 작은 화면에서 사용하세요.
- 다음 경우에는 사용하지 마세요
- 넓은 화면에서 모든 내비게이션을 숨기지 마세요. 아이콘에도 접근 가능한 이름과 확장 상태가 필요합니다.
- 코드에서 사용된 이름
button aria-controls aria-expanded + nav
Overflow Menu Button
↗ 넘침 메뉴 버튼
보통 점 세 개로 보이는 작은 버튼이 덜 중요한 기능을 열어줘. 이 기능들이 화면에 다 안 들어갈 때 써.
각 프로젝트 행에는 열림(Open)이 표시됩니다. 중복(Duplicate), 보관(Archive), 삭제(Delete)는 오버플로우 메뉴에 남아 있습니다.
- 사용할 때
- 하나의 항목이 여러 보조 작업을 가지고 있고 모든 버튼을 표시하면 페이지가 혼잡해질 때 사용하세요.
- 다음 경우에는 사용하지 마세요
- 주 행동이나 파괴적 결과를 라벨 없는 아이콘 뒤에 숨기지 마세요. 일반 작업으로 가는 유일한 경로는 항상 보이게 유지하세요.
- 코드에서 사용된 이름
button[aria-haspopup=menu] + role=menu
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 햄버거 메뉴Hamburger Menu | 가장 중요한 목적지를 항상 보이게 한 후 작은 화면에서 사용하세요. | 넓은 화면에서 모든 내비게이션을 숨기지 마세요. 아이콘에도 접근 가능한 이름과 확장 상태가 필요합니다. | button aria-controls aria-expanded + nav |
| 넘침 메뉴 버튼Overflow Menu Button | 하나의 항목이 여러 보조 작업을 가지고 있고 모든 버튼을 표시하면 페이지가 혼잡해질 때 사용하세요. | 주 행동이나 파괴적 결과를 라벨 없는 아이콘 뒤에 숨기지 마세요. 일반 작업으로 가는 유일한 경로는 항상 보이게 유지하세요. | button[aria-haspopup=menu] + role=menu |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 햄버거 메뉴 (Hamburger Menu)、넘침 메뉴 버튼 (Overflow Menu Button)에서 선택하세요. 이 규칙 사용: 세 줄 모양 버튼은 메인 메뉴를 열어. 점 세 개 버튼은 근처 항목의 추가 기능을 열어. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.