안녕하세요! ANO입니다👋
오늘은 UX/UI 디자인에서 자주 보이는
음식 모양의 메뉴 아이콘들을 소개할게요 🍔
이 아이콘들은
친근한 이름과 디자인 덕분에
현대 웹과 앱에서 자주 쓰이는데요.
각 아이콘의 개념과 유래,
그리고 활용 방법을
차근차근 알려드릴게요!
1. Bento Menu Icon
(벤또 메뉴 아이콘) 🍱
유래
일본 도시락인 ‘벤또’를 닮은 이 아이콘은
네모난 칸 안에 각각 구획된
메뉴 구조가 떠오르는데요!
보통 다양한 옵션을
한 번에 보여주는 경우에 활용됩니다.
언제 쓰나요?
다양한 카테고리를 정리해 보여주고 싶을 때
주로 사용해요.
이 아이콘을 탭하면
여러 메뉴가 펼쳐지는 구조로 되어 있어,
쇼핑몰이나 콘텐츠 사이트의 네비게이션에서
자주 보입니다!
어떻게 쓰나요?
사용자가 쉽게 여러 섹션을 탐색할 수 있도록
정리할 때 적합해요.
예를 들어, 음식 배달 앱에서
카테고리별 메뉴를 나눌 때 유용합니다.
2. Hamburger Menu Icon
(햄버거 메뉴 아이콘) 🍔
유래
햄버거 모양처럼 보이는
세 개의 가로줄이 쌓여 있는 아이콘이에요.
앱과 웹에서 가장 널리 쓰이는 메뉴 버튼 중 하나죠.
언제 쓰나요?
스크린 공간을 절약하고 싶을 때 많이 활용해요.
클릭하면 사이드바가 열리거나
메뉴가 확장되면서
여러 옵션을 보여주는 방식이에요.
어떻게 쓰나요?
모바일 앱이나 웹사이트의 상단에 배치해
다양한 메뉴를 숨기고,
필요할 때 확장하는 형태로 활용하면 좋습니다.
소셜 미디어나 뉴스 앱에서도 자주 볼 수 있어요!
3. Döner Menu Icon
(되네르 메뉴 아이콘) 🌯
유래
터키 음식인 ‘되네르 케밥’에서 유래했어요.
보통 중앙을 기준으로
동그랗게 펼쳐지는 모습 때문에 이런 이름이 붙었죠!
언제 쓰나요?
중앙 집중형 네비게이션이 필요할 때 적합해요.
아이콘을 탭하면 원형으로 메뉴가 펼쳐지는 방식이에요!
어떻게 쓰나요?
인터랙티브하고 동적인 메뉴가 필요한 경우 사용돼요.
주로 게임이나 이벤트 앱에서
핵심 메뉴를 원형 배치로 구성할 때 쓰입니다
하지만, 최근에는 잘 사용하지 않는 편이에요!
4. Meatballs Menu Icon
(미트볼 메뉴 아이콘) 🍗
유래
세 개의 동그란 점이
미트볼을 닮아서 붙여진 이름이에요.
메뉴 옵션이 한눈에 보여
작지만 기능적으로 사용하기 좋아요!
언제 쓰나요?
세부 설정이나
추가 옵션을 숨길 때 활용돼요.
드롭다운 형태로 확장되어
한정된 옵션을 제공할 때 유용하죠.
어떻게 쓰나요?
앱이나 웹에서 각 메뉴 아이템 옆에
설정이나 추가 옵션을 숨기고자 할 때 사용해요.
예를 들어, 이메일 앱의 개별 메일 옵션이나
소셜 미디어의 개별 포스트 옵션에 적합합니다!
5. Kebab Menu Icon
(케밥 메뉴 아이콘) 🥙
유래
중동의 꼬치 케밥에서 따온 이름으로,
세 개의 세로 점이
꼬치에 꽂힌 맛난 고기를 연상시켜요🍗
언제 쓰나요?
세로형 메뉴를 간단히 표시할 때 적합해요.
모바일 앱이나 웹에서 제한된 공간에
세부 설정을 숨기기 위해 자주 쓰입니다.
어떻게 쓰나요?
주로 화면 오른쪽 상단에 위치해
특정 아이템의 추가 옵션을 제공하는 드롭다운 메뉴로 사용돼요.
소셜 미디어의 게시물 옵션이나
리스트 뷰에서 활용하기 좋아요.
Key Point
| Bento Menu | 일본 도시락 '벤또' | 다양한 카테고리를 보여주는 메뉴 | 쇼핑몰, 콘텐츠 사이트 |
| Hamburger Menu | 햄버거 모양의 가로줄 | 공간 절약형 기본 메뉴 | 모바일 웹, 소셜 미디어 |
| Döner Menu | 터키 음식 '되네르 케밥' | 중앙 집중형 네비게이션 | 게임, 이벤트 앱 |
| Meatballs Menu | 세 개의 둥근 미트볼 | 세부 설정/추가 옵션 제공 | 이메일 앱, 소셜 미디어 |
| Kebab Menu | 세로로 나열된 꼬치 케밥 | 세로형 추가 옵션 메뉴 | 리스트 뷰, 게시물 옵션 |
'디자인' 카테고리의 다른 글
| 모달(Modal)/팝업(Popup)/다이얼로그(Dialog) 차이점 및 총정리! (0) | 2024.11.18 |
|---|