유니크한 상단 메뉴 만들기🤩 (with. 이모지) | 1분 디자인 레시피

2023. 05. 26


남들과 똑같은 브랜드 웹사이트 디자인은 이제 그만! 아임웹 디자인 모드의 간단한 설정 하나로 독특한 웹사이트를 만들 수 있는 디자인 꿀팁을 소개할게요.

이번 아임웹 레시피에서는 가족 구성원 모두가 각자의 브랜드를 만들어 운영하고 있는 라이프스타일 편집샵 브랜드 <무지개샐러드>의 사례를 통해 이모지(emoji)를 활용한 상단 위젯 구성법을 알아보겠습니다. 무지개샐러드는 상단의 로그인, 장바구니, 마이페이지 위젯을 이모지로 위트 있게 보여주고 있는데요.


무지개샐러드의 레시피, 지금 알아볼까요?👩‍🍳


📌이런 분이라면 특히 주목해 주세요!

  • 독특하고 재밌는 웹사이트 디자인을 원하시는 분
  • 방문자의 눈길을 끄는 온라인 쇼핑몰을 만들고 싶은 분
  • 컨셉셜한 브랜드 이미지를 웹사이트 구성 요소를 통해 드러내고 싶은 분




STEP 1
디자인모드에 접속 후 상단 위치에서 마우스 오른쪽을 클릭해 [상단설정]메뉴로 들어가 주세요.


STEP 2
[로그인/장바구니]위젯에 마우스 오른쪽 클릭, [로그인/장바구니 설정]메뉴로 이동해 주세요.


STEP 3
[로그인 전]과 [로그인 후]중 이모지 적용을 원하는 탭과 메뉴를 클릭한 다음, 하단에 [아이콘]버튼을 클릭해 주세요.


STEP 4
왼쪽 상단 메뉴에 [Emoji]를 클릭한 후, 원하는 이모지를 고른 뒤 원하는 형태로 조절하면 완성이에요!

여기서 잠깐!
상단 메뉴는 PC와 모바일 각각 설정이 필요해요. 만약 모바일에도 이모지 메뉴를 적용하고 싶다면, 뷰포트를 모바일로 변경한 뒤 모바일 디자인모드에서 아이콘을 한 번 더 설정해 주세요.




다른 브랜드들은 이 기능을 어떻게 활용했을까요?


🔎 shesaidthat
[장바구니]버튼을 메인 페이지의 ‘장바구니’ 이미지와 유사한 아이콘으로 설정하여, 소소한 위트를 보여주었어요.

 

🔎 mumm
[마이페이지], [장바구니]버튼을 브랜드 컨셉과 어울리는 아이콘으로 설정하여, 일관된 톤앤매너를 보여주었어요.


상단 위젯(로그인/장바구니), 이런 용도로도 활용할 수 있어요!

  • 위젯 아이콘에 색상을 추가하여 포인트 주기
  • 로그인 전/로그인 후 표시되는 메뉴 아이콘을 다르게 설정하기
  • [롤오버(Hover) 기능 활용] 마우스 커서를 가져다 대면 다른 이모지가 보이도록 설정하기 (ex. 🛍️→ 👕)



아임웹 디자인모드 내 기능들을 잘 활용하면, 평범한 버튼도 위트 있게 바꿀 수 있다는 사실! 오늘 소개해 드린 내용을 통해 한 끗 다른 웹사이트를 만들어 보자구요💪


레시피 사례로 소개한 무지개샐러드를 비롯해 shesaidthatmumm은 아임웹과 함께 성장하는 브랜드입니다.


💌 평소 궁금했던 디자인 설정법이 있다면 알려주세요!

아임웹을 사용하거나, 고객사례를 보며 궁금했던 디자인 설정법이 있으셨다면 👉 여기에 남겨주세요. 보내주신 의견을 참고하여, 더욱 유익한 디자인 레시피를 들고 찾아올게요!




📖 오늘 내용과 연관된 아임웹 가이드



🔖 다른 레시피 보러가기




by 마케팅 소영