눈에 띄는 웹사이트 메뉴 디자인 10가지
웹사이트를 만들기로 결정할 때, 웹사이트 메뉴를 이용하면 페이지의 여러 요소를 한데 모아 방문자가 사이트를 원활하고 쉽게 탐색할 수 있게 합니다. 이러한 메뉴바는 사이트의 사용자 경험에 결정적인 역할을 하고 탐색하는 데 큰 영향을 미치는 요소이기도 합니다.
오늘은 웹사이트 구조를 설정할 때 꼭 염두해 두어야 하는 웹사이트/홈페이지 메뉴에 대한 자세한 사항과 다양한 메뉴바 디자인에 대해서 알아보겠습니다.
웹사이트 메뉴란?
웹사이트 메뉴는 사이트의 여러 페이지 또는 섹션 간 웹 내비게이션을 용이하게 만드는 역할을 하는 일련의 링크된 항목을 일컫습니다. 웹사이트의 콘텐츠와 디자인에 따라 여러 가지 메뉴 종류가 있는데요. 웹사이트 메뉴의 주요 유형을 살펴보겠습니다.
클래식 탐색(내비게이션) 메뉴: 가장 널리 사용되는 종류인 이 메뉴는 일반적으로 웹사이트 헤더에 앵커 링크가 있는 수평 목록으로 배치됩니다.
고정 메뉴: 고정 메뉴 또는 플로팅 메뉴라고도 하는 이 메뉴는 방문자가 사이트를 아래로 스크롤을 해도 그대로 유지됩니다. 이러한 메뉴는 스크롤이 긴 페이지에 이상적입니다.
햄버거 메뉴: 세 개의 가로 줄무늬로 구성된 아이콘을 클릭하면 메뉴가 열립니다. 이 디자인 관습은 모바일 탐색 디자인에 근간을 두고 있지만 데스크톱에도 널리 사용됩니다.
드롭다운 메뉴: 방문자가 메뉴 항목 중 하나를 클릭하거나 마우스 커서를 가져다 대면 추가 항목 목록이 열리는 메뉴입니다. 이 메뉴 옵션은 콘텐츠가 많은 웹사이트에 적합합니다.
사이드바 메뉴: 웹페이지의 왼쪽 또는 오른쪽에 있는 메뉴 항목 목록입니다.
전문가 TIP: 페이지가 많은 웹사이트에서는 방문자가 자신의 위치를 추적할 수 있도록 클래식 메뉴에 현재 위치(브레드크럼; Breadcrumb) 및 이동 경로 탐색을 추가하는 경우가 많습니다. 긴 콘텐츠가 있는 사이트의 경우를 위한 최소한의 옵션은 특정 페이지에서 이동할 때 사용자에게 현재 위치를 알려주는 상태 바입니다.
눈에 띄는 웹사이트 메뉴 10가지
이제부터 Wix로 구축한 웹사이트 메뉴바의 10가지 디자인 예시를 알아보겠습니다. 이러한 예시들에서는 웹사이트 내비게이션과 디자인 측면에서 메뉴를 창의적으로 다양하게 활용하고 있는데요. 다음은 영감을 얻기 위한 웹사이트 메뉴 예시들입니다.
01. Yang’s Place: 쉽게 액세스할 수 있는 브랜드와 어울리는 메뉴
중식당인 Yang's Place의 웹사이트는 첫 번째 폴드와 웹사이트 헤더, 전체 화면 메뉴에 로고를 표시하여 완전히 브랜드화시켰습니다. 헤더에 있는 로고는 모든 페이지에 고정되어 있기 때문에 방문자를 홈페이지로 다시 유도할 수 있어 사용자 경험을 개선하는 데 매우 유용합니다.
이 메뉴는 전체 화면으로 열리는 햄버거 메뉴 형태와 Wix 프로 갤러리를 사용하여 만든 홈페이지의 사진과 텍스트 상자로 구성된 기하학적 웹사이트 레이아웃 이 두 가지 형태에서 액세스할 수 있습니다.
02.William LaChance: 애니메이션을 적용한 스크롤이 긴 메뉴바
Willian LaChance의 포트폴리오에는 기본적인 사이드바 메뉴가 있는 반면에 페이지를 아래로 스크롤하면 이미지와 동영상 상자로 구성된 추가 메뉴가 나타납니다. 이 메뉴는 방문자의 시선을 사로잡기 위해 웹사이트 애니메이션과 밝고 선명한 색상을 활용했습니다.
크고 화려한 이 스크롤은 아주 단순한 사이드바를 보완하여 대화형 탐색 방식과 더불어 보다 직관적인 탐색 방식을 가능하게 합니다. 홈페이지에만 있는 애니메이션과 달리 사이드바는 웹사이트의 모든 내부 페이지에 그대로 나타납니다.
03. I Love Dust: 화면의 모든 모서리에 분할되어 있는 메뉴
이 그래픽 디자인 에이전시 I Love Dust 웹사이트는 스튜디오의 작업물을 전체화면으로 보여주는 빠른 속도의 쇼 릴을 통해 매우 환영하는 분위기의 쇼를 선보입니다. 반면 웹사이트 메뉴는 화면의 각 모서리에 각자 다른 메뉴 항목이 있는 단순하고 정적인 상태를 유지합니다. 최근 웹 디자인 트렌드인 분할 메뉴는 화면 측면에 드롭하여 구현할 수 있습니다.
04. Calvin Pausania: 대담한 분위기의 전체 화면 메뉴
Calvin Pausania의 온라인 포트폴리오 웹사이트는 사이트를 열자마자 역동적인 전체 화면 동영상으로 시작됩니다.
홈페이지에서 'Enter' 버튼을 클릭하면 6개의 메뉴 항목이 흰색의 큰 글씨로 전면 중앙에 표시됩니다. 이러한 유형의 타이포그래피와 웹사이트 메뉴 화면 배치는 특히 대담하고 매력적으로 보일 수 있습니다.
05. SQUARE-Urban Legends: 상단으로 스크롤할 필요가 없는 플로팅 메뉴
이 온라인 쇼핑몰의 제품은 수작업으로 스크린 인쇄한 아름다운 일러스트 패턴이 돋보이는데요. 웹사이트의 밝고 다채로운 디자인과 벡터 도형과 패턴으로 이루어진 브랜드의 창의적인 로고와 조화를 이룹니다.
SQUARE-Urban Legends의 웹사이트 메뉴는 웹페이지에 고정되어 있는 플로팅 메뉴 역할을 합니다. 또한, 홈페이지 중앙에 'Show now' 버튼이 전략적으로 배치되어 있어 방문자는 웹사이트의 제품 페이지로 바로 이동할 수 있습니다.
06.Ruby Love: 온라인 쇼핑몰 사이트용 드롭다운 메뉴바
Ruby Love는 위생 속옷 의류를 전문으로 하며 언더웨어부터 슬립웨어, 스윔수트까지 다양한 필수 아이템을 제공하는 비즈니스입니다. 결과적으로 Ruby Love의 온라인 쇼핑몰 웹사이트는 수많은 다양한 제품을 정리하여 색인화하는 시스템이 필요했습니다. 따라서 각 옵션에 대한 드롭다운 메뉴를 표시하는 것이 가장 적합합니다.
07.Doris Liou: 갑자기 나타나는 애니메이션이 딸린 일러스트 메뉴
Doris Liou의 일러스트 포트폴리오는 캘리포니아에서 활동하는 아티스트 Doris Liou가 직접 그린 그림으로 채워져 있어 일러스트 헤더 메뉴가 아늑한 느낌을 선사합니다. 메뉴 아이콘은 연필로 그려져 있는데요. '일러스트레이션' 페이지 아이콘은 작은 신문을, 'SNS' 아이콘은 꽃을 그렸습니다.
메뉴 아이콘 위로 마우스를 가져다 대면 다채로운 애니메이션 GIF가 갑자기 나타나 생동감을 불어넣습니다. 일러스트레이터의 이름 위에 또 다른 마우스오버 효과 덕분에 우리는 유쾌한 작은 캐릭터가 떠다니는 것을 볼 수 있습니다. 이 친근한 요소는 사이트의 파비콘에도 사용되어 일관성을 부여하고 포트폴리오의 브랜딩과 가시성을 높여줍니다.
08. Adva Santo: 브랜드에 어울리는 대화형 사이드바
Adva Santo의 이 온라인 디자인 포트폴리오의 웹사이트 메뉴는 독특한 대화형 메뉴입니다. 주황색, 검정색, 흰색 메뉴 색상은 웹사이트의 나머지 배색과 일치합니다. 다른 메뉴 항목을 클릭하면 버튼 위에 선이 나타나면서 글자를 지우는 듯한 모양을 만들어 재미있는 대화형 경험을 선사할 수 있습니다. 사이트의 다른 부분에서도 메뉴의 글자를 지우는 듯한 모양의 요소를 보완하는 낙서와 손글씨 느낌의 폰트를 볼 수 있습니다.
09. Liron Eldar-Ashkenazi: 작지만 강력한 메뉴바
Liron Eldar-Ashkenazi의 웹사이트에 방문하면 메뉴 표시줄에 다음과 같은 굵은 텍스트 한 줄이 방문자를 맞이합니다. "I am Lirona and this is what I do best(저는 Lirona이고 이것은 제가 가장 잘하는 일입니다.)." 인용문은 모든 페이지의 상단에 나타나기 때문에 일관성이 유지됩니다. Liron Eldar-Ashkenazi의 미니멀한 디자인 웹사이트 메뉴에는 'About Me'라는 소개 페이지와 'Shop'이라는 제목의 온라인 쇼핑몰이 있습니다. 디자이너는 메뉴 옵션 개수를 단순화하여 사용자가 전체 사이트를 더 쉽게 탐색할 수 있도록 했습니다.
10. Roee Ben Yehuda: 예술 작품을 중심으로 하여 네 개의 모서리로 나뉜 메뉴
Roee Ben Yehuda는 자신의 작업 목표가 '전통과 현대 디자인을 융합하는 것'이라고 말하며, 그의 웹사이트는 이를 잘 반영하고 있습니다. 사이트는 여백이 넉넉한 깔끔한 디자인으로 꾸며져 있어 그의 작품이 더욱 돋보이게 합니다.
웹사이트 메뉴는 홈페이지의 각 모서리에 나뉘어 있어 예술적인 오브제가 더욱 중요해 보입니다. 난색조의 색상이 자연 소재를 보완하고, 사이트 이미지의 고르지 않은 분할이 신중하게 어우러져 독특한 분위기를 자아냅니다.
웹사이트 메뉴 탐색 모범 사례
웹사이트 메뉴 탐색은 사용자 경험에 있어서 중요한 역할을 하며, 방문자에게 웹사이트를 안내하고 방문자가 원하는 정보를 쉽게 찾을 수 있도록 도움을 줍니다. 효과적인 메뉴 탐색은 명확하고 일관적이고 사용자 친화적이어야 하며, 방문자가 콘텐츠를 쉽게 탐색하고 목표를 달성할 수 있도록 해야 합니다. 웹사이트 메뉴 탐색을 위한 몇 가지 주요 모범 사례를 소개하겠습니다.
단순성: 이해하기 쉬우며 탐색이 간편한 단순하고 직관적인 메뉴 구조를 갖추려 노력해야 합니다. 계층 구조가 복잡하고 메뉴 항목이 너무 많다면 사용자에게 혼란을 주고 원하는 콘텐츠를 찾기 어렵게 만들 수 있으므로 피해야 합니다.
일관성: 웹사이트 전반에 있어서 메뉴 배치, 라벨링 및 동작의 일관성을 유지하세요. 사용자의 기대에 부합하는 친숙한 용어와 규칙을 사용하여 방문자가 어떤 페이지에 있든 직관적으로 탐색할 수 있어야 합니다.
시각적 계층 구조: 시각적 단서를 사용하여 메뉴 항목 간의 명확한 계층 구조를 설정해야 합니다. 다양한 폰트 굵기, 크기 및 색상을 사용하여 기본 탐색 카테고리, 하위 카테고리, 각각의 링크를 구분해 보세요. 이러한 시각적 구성은 사용자의 관심을 유도하고 쉽게 살펴볼 수 있도록 돕습니다.
모바일 최적화: 메뉴 탐색이 모바일 기기에 최적화되어 있는지 확인해야 합니다. 반응형 디자인 관습을 활용하여 메뉴 레이아웃과 상호 작용을 다양한 화면 크기와 터치 기반 인풋에 맞게 조정하세요. 작은 화면에서는 확장 메뉴나 햄버거 메뉴를 사용하는 것이 좋습니다.
맥락 탐색: 웹사이트의 현재 페이지 또는 섹션과 관련된 맥락에 맞는 탐색 옵션을 제공하는데요. 예를 들어, 관련 콘텐츠 제안, 이동 경로 또는 자주 액세스하는 페이지로 연결되는 퀵 링크가 해당될 수 있습니다.
접근성: 메뉴 탐색이 접근성 가이드라인을 준수하는지 확인하세요. 메뉴 항목에 적절한 색상 대비, 선명한 글꼴 스타일 및 대체 텍스트를 사용하여 시각 장애가 있는 사용자가 이용할 수 있도록 해야 합니다.
정기적인 평가: 사용자 테스트 및 분석을 통해 메뉴 탐색의 효과를 정기적으로 평가하세요. 사용자로부터 피드백을 수집하고 클릭률, 이탈률 등의 지표를 모니터링함으로써 개선이 필요한 부분을 파악해야 합니다.
영감 얻기: 웹사이트 탐색의 최신 트렌드와 혁신에 대한 최신 정보를 확인하세요. 비슷한 목표 및 타겟 고객층을 가진 다른 웹사이트가 메뉴 디자인에 어떻게 접근하는지 관찰한 후 효과적인 요소를 자신의 탐색 구조에 적용하는 것을 고려해 보세요.
웹사이트 메뉴 FAQ
웹사이트의 메뉴 탭이란 무엇인가요?
웹사이트의 메뉴 탭은 일반적으로 '내비게이션 바' 또는 '내비게이션 메뉴'라고 하는데요. 웹사이트의 상단 또는 측면에 위치한 수평 또는 수직의 막대로 웹사이트의 주요 섹션이나 페이지로 연결되는 링크를 표시합니다.
좋은 웹사이트 메뉴란 무엇인가요?
웹사이트 메뉴 바에는 무엇이 있어야 하나요?
웹사이트 메뉴는 어떻게 구성해야 하나요?
By 조윤정
SEO & 블로그 전문가
Comments