Meatballs menu, 가로 3점의 미트볼

한 줄로

가로로 점 3개입니다. 케밥 메뉴를 90도 돌린 형태입니다. 음식 비유는 미트볼(고기 완자 3개)입니다.

어디서 왔나

햄버거 메뉴 패밀리의 또 다른 변종입니다. 가로로 점 3개로, 케밥(세로 3점)을 옆으로 눕힌 모습입니다. 이 아이콘이 미트볼 3개가 접시에 놓인 모양 같다는 비유에서 이름이 붙었습니다.

대표적 사용처입니다.

• Twitter / X: 트윗 옆 옵션 메뉴 (저장, 신고, 차단).
• iOS: 일부 시스템 옵션.
• Slack: 메시지 호버 시 추가 동작.
• Material Design: 일부 사용. 보통은 케밥이 표준.

케밥 vs 미트볼의 미세한 차이

기능적으로 거의 같지만 디자이너들 사이 비공식 컨벤션입니다.

• 세로 3점 (kebab): 항목 옆 추가 동작. 보통 우측 끝.
• 가로 3점 (meatballs): 화면/문서 전체에 대한 추가 동작. 보통 상단.

이 구분은 엄격하지 않습니다. 디자인 시스템마다 다르고, 한 앱 안에서도 혼용되는 경우가 흔합니다.

시각적 차이

가로 3점이 세로 3점보다 살짝 더 "고요해" 보입니다. 시선이 자연스럽게 가로로 흐르기 때문에 눈에 덜 띕니다. 그래서 덜 자주 쓰는 메뉴에 가로 3점을 쓰는 게 의미적으로 맞습니다.

발견성 문제

햄버거·케밥과 마찬가지로 미트볼도 사용자가 모를 수 있습니다. 특히 가로 3점은 세로 3점보다 클릭 가능한 것으로 인식되지 않는 경향이 있습니다 (사용성 연구).

해결책입니다.

• 호버 상태에서 배경 강조: 클릭 가능함을 시각적으로 알립니다.
• 모바일에서는 더 큰 영역: 손가락이 닿는 영역(44pt)을 확보합니다.
• 자주 쓰는 동작은 직접 노출: 미트볼 안에 묻지 않습니다.

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

햄버거·케밥·미트볼·벤토 모두 본질은 같습니다. "여기 더 있어요"라는 신호입니다. 어떤 형태를 쓸지는 (1) 위치 (2) 일관성 (3) 시각적 무게로 결정합니다. 한 앱에 4가지를 다 쓰면 안 되고, 1~2개로 통일하는 게 좋습니다.

관련

Hamburger menu · Kebab menu · Bento menu