"오른쪽 위에 점 세 개 있잖아요, 그거 눌러보세요." 앱 사용법을 설명할 때 다들 이렇게 말하죠. 그런데 그 점 세 개에도 정식 이름이 있다는 걸 아시나요?
재미있게도 이름이 전부 음식입니다. 햄버거, 케밥, 미트볼, 도너. 생김새가 음식을 닮았다고 디자이너들이 붙인 별명이 그대로 업계 용어로 굳어졌습니다. (네이밍 회의는 아마 점심시간 직전이었을 겁니다)
이 글에서는 화면 구석에서 매일 만나는 메뉴 아이콘 4가지의 이름과 쓰임새를 정리했습니다. 디자이너·개발자와 대화할 일이 있다면 오늘부터 바로 써먹을 수 있습니다.
1. 햄버거 메뉴 (Hamburger Menu)
가로줄 3개(≡)가 쌓인 아이콘 — 빵·패티·빵이 겹친 햄버거 단면을 닮아서 붙은 이름입니다.
누르면 화면 옆이나 전체를 덮는 큰 메뉴가 열립니다. 화면이 좁은 모바일에서 메뉴 전체를 숨겨두는 용도로 가장 널리 쓰입니다. 주로 화면 왼쪽 위나 오른쪽 위 모서리에 자리합니다.
이럴 때 써요: "모바일에서는 상단 메뉴가 다 안 들어가니까 햄버거 메뉴로 접어 주세요."
2. 케밥 메뉴 (Kebab Menu)
세로 점 3개(⋮) 아이콘 — 꼬치에 고기가 세로로 꽂힌 케밥을 닮아서 붙은 이름입니다.
햄버거 메뉴가 사이트 전체 메뉴라면, 케밥 메뉴는 지금 보고 있는 항목에 대한 추가 동작(공유, 신고, 삭제 등)을 담는 작은 메뉴입니다. 안드로이드 앱 오른쪽 위에서 특히 자주 보입니다.
이럴 때 써요: "영상 신고는 어디서 하죠?" "영상 옆 케밥 메뉴 누르면 신고 항목이 있어요."
3. 미트볼 메뉴 (Meatball Menu)
가로 점 3개(⋯) 아이콘 — 접시에 나란히 놓인 미트볼을 닮아서 붙은 이름입니다.
역할은 케밥 메뉴와 같습니다. '이 항목에 대한 더 보기'죠. 차이는 방향뿐입니다. 세로로 긴 목록에는 케밥, 가로로 흐르는 카드나 게시물에는 미트볼이 어울린다는 식으로, 배치 공간에 따라 골라 씁니다. 트위터(X)나 페이스북 게시물 구석의 점 세 개가 바로 미트볼입니다.
이럴 때 써요: "카드 오른쪽 아래 미트볼 메뉴에 수정·삭제를 넣는 게 좋겠어요."
4. 도너 메뉴 (Doner Menu)
길이가 다른 가로줄 3개가 쌓인 아이콘 — 수직 꼬챙이에 고기가 층층이 쌓인 도너 케밥을 닮아서 붙은 이름입니다.
햄버거 메뉴와 비슷해 보이지만 줄 길이가 위에서 아래로 달라지는 게 특징입니다. 주로 목록을 조건에 맞게 거르는 필터(Filter) 버튼으로 쓰입니다. 쇼핑 앱에서 가격순·인기순을 고르는 버튼을 떠올리면 됩니다. 넷이 함께 있으면 은근히 헷갈리니, 햄버거는 메뉴·도너는 필터로 기억해 두세요.
이럴 때 써요: "검색 결과 위에 도너 메뉴 두고, 누르면 가격·브랜드 필터가 열리게 해 주세요."
자주 묻는 질문
케밥 메뉴와 미트볼 메뉴는 기능이 다른가요?
기능은 같습니다. 둘 다 특정 항목에 대한 추가 동작을 여는 더 보기 메뉴입니다. 점이 세로면 케밥, 가로면 미트볼로 부르며, 화면 배치 공간에 따라 선택합니다.
이 이름들은 공식 용어인가요?
표준 규격은 아니지만 전 세계 디자이너·개발자가 실제로 쓰는 관용 용어입니다. 해외 디자인 문서나 협업 도구에서도 hamburger menu, kebab menu라는 표현이 그대로 통용되니 실무 용어로 알아두면 유용합니다.
햄버거 메뉴는 왜 요즘 덜 쓰는 추세라고 하나요?
메뉴가 숨어 있으면 사용자가 그 기능의 존재 자체를 모르고 지나치기 쉽기 때문입니다. 그래서 자주 쓰는 메뉴는 화면 하단 탭바에 꺼내 두고, 덜 쓰는 항목만 햄버거 메뉴에 넣는 앱이 많아졌습니다.
정리하면 — 줄 세 개는 햄버거(전체 메뉴), 세로 점은 케밥(더 보기), 가로 점은 미트볼(더 보기), 길이 다른 줄은 도너(필터)입니다. 다음 편에서는 팝업·모달·토스트처럼 화면에 불쑥 나타나는 알림 UI 용어들을 다뤄볼게요.