세점 메뉴 ☰ (케밥?, 햄버거?) 더보기-이름 정확하게!

(들어가며)

이름이 모야? 더보기 메뉴 아이콘?  햄버거 버튼? 

☰,   ⋮,   …,   ⋯,   ⁝,   ⋰

헷갈리는 아이콘 이름을 총정리! 해 드립니다.

 

앱이나 웹사이트에 요즘 어딜 가나 자주 보이는 세 줄짜리 점, 아이콘, 익숙하시죠?

익숙한데 그 이름이 있다는 것은 알고 계셨나요? 과연 그 이름은?

 

아래 (1)~(4) 버튼들의 각각의 공식 명칭은 (보기) 중 무엇일까요?

(보기)
(미트볼 메뉴)	(땡땡이 메뉴)	(햄버거 메뉴)	(케밥 메뉴)

 

 

 

 

이 아이콘들의 정확한 명칭과 용도, 디자인 의미까지 한 번에 정리해드립니다.  
**IT 입문자도, 디자이너도, 개발자도 알면 유용한 정보!**

먹는 음식과 연관시켜 놓았습니다. 이번에는 그 재미있는 메뉴에 대해서 알아봅니다. 

정답은 쭈~욱 아래쪽에 있습니다.

 

•

•

•

 

👇🏾

•

•

•

 

🧠 햄버거 버튼과 더보기 버튼은 다를까?

이 각각은 생긴 건 비슷한데, 이름과 기능도 비슷할까요?

 

🔎 1. 더보기 메뉴 아이콘 이름 도표

 

아이콘 이름의 의미와 일반 위치

아이콘	아이콘 이름	아이콘 기능	아이콘 위치
☰	햄버거 버튼 (Hamburger Button)	메뉴 전체 보기 (주로 내비게이션 메뉴)	상단 좌측 또는 우측
⋮ 또는 …	케밥 메뉴 (Kebab Menu) 또는 더보기 버튼	상세 옵션, 서브 메뉴, 추가 기능 보기	항목 우측, 앱 내 조작 위치
⋯ (수평)	미트볼 메뉴 (Meatball Menu)	웹/앱에서 세부 조작 (아이템 옆 등)	리스트 아이템 옆
⁝ 또는 ⋰	땡땡이 메뉴, 세로 점 3개	거의 케밥과 비슷하게 사용	보통 모바일 앱에서

 

이 표 하나면 햄버거 버튼과 케밥 버튼의 차이, 더 이상 헷갈리지 않아요!

 

---

 

🍔 (1) 햄버거 버튼 (Hamburger Menu)

• 형태: ☰ (가로선 3개)
• 기능: 전체 메뉴(내비게이션) 열기
• 위치: 모바일 웹/앱의 좌측 상단
• 명칭 유래: 빵-패티-빵 구조의 햄버거처럼 생겨서
• 이유: 생김새가 빵-패티-빵, 즉 햄버거처럼 생겼다고 해서 디자이너들이 붙인 별칭입니다.
• 역할: 웹사이트나 앱에서 전체 내비게이션 메뉴를 숨겨뒀다가 펼치기 위한 버튼입니다.
• 사용 예시 :  쇼핑몰 카테고리, 앱 전체 메뉴 열기
  
  

---

🥓 (2) 케밥 메뉴 (Kebab Menu)

• 형태: ⋮ (세로 점 3개)
• 기능: 항목에 대한 옵션/설정 메뉴
• 위치: 리스트 항목 우측, 앱 우측 상단
• 명칭 유래: 세로로 꽂힌 (고기 꼬치를 연상해서) 케밥 꼬치
• 사용 예시:  게시물 삭제, 설정 변경, 공유 기능 등

---

🍡 (3) 미트볼 메뉴 (Meatball Menu)

• 형태: ⋯ (가로 점 3개)
• 기능: 기본 동작 메뉴, 더보기 기능
• 위치: 수평 레이아웃, 항목 옆
• 사용 예시:  리스트 항목 옆의 추가 메뉴, 앱 내 더보기

 

---

🔔 (4) 기타 아이콘(땡땡이 메뉴)

• 형태 : ⋰, 혹은  ⋮  : 드롭다운, 확장용 아이콘
• + : 새 항목 추가, 확장 기능

---

 

🧠 2. 햄버거 버튼과 더보기 버튼은 다르다!

 

햄버거 버튼은 전체 메뉴 열기용,  케밥/미트볼은 옵션 보기용이에요. 생김새가 비슷하다고 같은 용도로 사용되면 혼동됩니다.

 

 

이제 처음 문제의 정답은,

---

 

🔍 3. (참고): 공식 명칭일까?

이 명칭들은 UI/UX 업계에서 관용적으로 사용되며, 영어권에서는 사실상 표준화되어가고 있습니다.

한국에서는 햄버거 버튼을 제외하면 기능 중심으로 "더보기", "삼점" 등으로 표현합니다.

 

 

 

✍️ 결론: 아이콘도 이름과 역할이 있다

이제부터는 앱이나 웹사이트에서 이런 아이콘들을 볼 때  
**"햄버거? 케밥? 미트볼?"** 하며 정확하게 구분할 수 있겠죠?  
디자인, UI/UX 공부에도 도움이 되고,  
일반 사용자라 해도 메뉴 구성의 맥락을 파악하는 데 유용합니다!