Kebab menu, 세로 3점, 꼬치(꼬챙이) 비유

한 줄로

세로로 점 3개입니다. 햄버거 메뉴의 사촌이고, 모양이 꼬치(케밥)처럼 생겼다는 비유로 이름이 붙었습니다.

어디서 왔나

햄버거 메뉴(가로 3줄, 1981 Norm Cox)가 2009년 모바일 시대와 함께 부활한 뒤, 비슷한 변종들이 줄지어 등장했습니다. 그중 하나가 kebab menu입니다. 세로로 점 3개. 보통 카드나 리스트 항목의 오른쪽 끝에 위치합니다.

이름은 음식 비유입니다. 꼬치(꼬챙이)에 끼운 케밥처럼 점들이 세로로 줄지어 있는 모양에서요. 햄버거 메뉴와 짝을 이루는 음식 비유입니다.

Google Material Design(2014)이 공식 문서에 "three dots vertical"을 표준 컴포넌트로 채택하면서 kebab이라는 이름이 산업 표준이 됐습니다.

햄버거 vs 케밥의 의미 차이

같은 "메뉴" 아이콘이지만 의미가 다릅니다.

• 햄버거 메뉴 (가로 3줄): 화면 전체의 글로벌 메뉴. 보통 좌측 상단.
• 케밥 메뉴 (세로 3점): 특정 항목·카드의 컨텍스트 옵션. "이 항목에 대해 추가 동작."

예시입니다.

• Gmail의 좌측 상단 = 햄버거 (전체 메뉴).
• 각 메일 옆 = 케밥 (이 메일에만 적용되는 옵션: 삭제, 보관, 라벨).

음식 메뉴 패밀리

3점 패밀리입니다.

• Hamburger (가로 3줄): 글로벌 메뉴.
• Kebab (세로 3점): 항목 옵션.
• Meatballs (가로 3점): 화면 옵션 (일부 OS).
• Bento (9점 그리드): 앱 런처.
• Hotdog (가운데 1줄): Material의 단일 동작.

함정

햄버거 메뉴와 동일한 비판이 적용됩니다. 숨겨진 동작은 발견되지 않는다는 것입니다. 자주 쓰는 동작을 케밥 안에 묻으면 안 쓰입니다.

해결책: 자주 쓰는 1~2개 동작은 명시적 버튼으로 노출, 나머지만 케밥 안으로 넣습니다.

바이브 메이커가 챙길 한 가지

카드/리스트에 케밥을 둘 때 자문합시다. "이 안에 든 옵션을 사용자가 발견하지 못해도 괜찮은가?" 답이 "안 된다"라면 케밥이 아니라 명시적 버튼으로 빼야 합니다.

관련

Hamburger menu · Meatballs menu · Bento menu