유니크한 상단 메뉴 만들기🤩 (with. 이모지) | 1분 디자인 레시피
2023. 05. 26
남들과 똑같은 브랜드 웹사이트 디자인은 이제 그만! 아임웹 디자인 모드의 간단한 설정 하나로 독특한 웹사이트를 만들 수 있는 디자인 꿀팁을 소개할게요.
이번 아임웹 레시피에서는 가족 구성원 모두가 각자의 브랜드를 만들어 운영하고 있는 라이프스타일 편집샵 브랜드 <무지개샐러드>의 사례를 통해 이모지(emoji)를 활용한 상단 위젯 구성법을 알아보겠습니다. 무지개샐러드는 상단의 로그인, 장바구니, 마이페이지 위젯을 이모지로 위트 있게 보여주고 있는데요.
무지개샐러드의 레시피, 지금 알아볼까요?👩🍳
📌이런 분이라면 특히 주목해 주세요!
- 독특하고 재밌는 웹사이트 디자인을 원하시는 분
- 방문자의 눈길을 끄는 온라인 쇼핑몰을 만들고 싶은 분
- 컨셉셜한 브랜드 이미지를 웹사이트 구성 요소를 통해 드러내고 싶은 분
STEP 1
디자인모드에 접속 후 상단 위치에서 마우스 오른쪽을 클릭해 [상단설정]메뉴로 들어가 주세요.
STEP 2
[로그인/장바구니]위젯에 마우스 오른쪽 클릭, [로그인/장바구니 설정]메뉴로 이동해 주세요.
STEP 3
[로그인 전]과 [로그인 후]중 이모지 적용을 원하는 탭과 메뉴를 클릭한 다음, 하단에 [아이콘]버튼을 클릭해 주세요.
STEP 4
왼쪽 상단 메뉴에 [Emoji]를 클릭한 후, 원하는 이모지를 고른 뒤 원하는 형태로 조절하면 완성이에요!
✋여기서 잠깐!
상단 메뉴는 PC와 모바일 각각 설정이 필요해요. 만약 모바일에도 이모지 메뉴를 적용하고 싶다면, 뷰포트를 모바일로 변경한 뒤 모바일 디자인모드에서 아이콘을 한 번 더 설정해 주세요.
다른 브랜드들은 이 기능을 어떻게 활용했을까요?
🔎 shesaidthat
[장바구니]버튼을 메인 페이지의 ‘장바구니’ 이미지와 유사한 아이콘으로 설정하여, 소소한 위트를 보여주었어요.
🔎 mumm
[마이페이지], [장바구니]버튼을 브랜드 컨셉과 어울리는 아이콘으로 설정하여, 일관된 톤앤매너를 보여주었어요.
✅ 상단 위젯(로그인/장바구니), 이런 용도로도 활용할 수 있어요!
- 위젯 아이콘에 색상을 추가하여 포인트 주기
- 로그인 전/로그인 후 표시되는 메뉴 아이콘을 다르게 설정하기
- [롤오버(Hover) 기능 활용] 마우스 커서를 가져다 대면 다른 이모지가 보이도록 설정하기 (ex. 🛍️→ 👕)
우리 브랜드만의 감도 높은 웹사이트, 쉽고 빠르게 만들어 보세요!
아임웹은 웹사이트, 온라인 쇼핑몰 제작을 고민하는 여러분들을 위해 70여 개의 템플릿을 무료로 제공하고 있어요. 조금만 수정해도 꽤 그럴듯한 웹사이트가 완성되죠! 마음에 드는 템플릿을 발견했다면, 지금 바로 가볍게 만들어 보세요👇
📖 오늘 내용과 연관된 아임웹 가이드
🔖 다른 레시피 보러가기
