2017년 웹사이트 네비게이션 트렌드 7

웹사이트의 네비게이션 

네비게이션은 웹사이트의 ‘기준’이 되는 중요한 요소 중 하나인데요! 사용자가 웹사이트의 정보를 쉽게 찾고 접근할 수 있도록 도와주는 가장 중요한 역할을 하게 됩니다. 중요한 역할을 하는만큼 네비게이션을 활용하는 방법 역시 다양해지고 있는데요! 그래서 오늘은, 2017년의 네비게이션 트렌드를 하나씩 정리해보고자 합니다.

1.상단에 고정된 네비게이션

처음 말씀드렸던 것처럼 네비게이션은 방문자들이 랜딩페이지를 통해 다른곳으로 쉽게 이동할 수 있도록 도와주는 역할을 하게 됩니다. 랜딩페이지에서 바로 페이지를 떠나는 비율을 낮추기 위해서라도 네비게이션을 통해 다른 콘텐츠의 유무를 알리고 살펴볼 수 있도록 유도하는 장치가 필요합니다. 이를 위해 많이 쓰이는 방법이 네비게이션을 상단에 고정시키는 것인데요! 스크롤을 내리더라도 네비게이션이 상단에 늘 따라다니기 때문에 상단으로 이동하는 불편함 없이 언제든 원하는 곳으로 이동 할 수 있습니다. 네비게이션을 상단에 고정하는데 있어 유의해야할 점은, 많은 영역을 차지하거나 방문자 또는 사용자들이 콘텐츠를 확인하는데 있어 방해가 되어서는 안된다는 점입니다. 이는 되려 역효과를 불러 일으킬 수 있기 때문! ‘지금 써보러 갑니다’에도 네비가 상단에 고정되어 있으며, 대표 카테고리로 바로 이동하는 것이 가능합니다 🙂

2.메가 메뉴의 활용

매거진/미디어 형태의 블로그, 사이트들이 늘어나면서 자주 보이는 ‘메가 메뉴(Mega Menu)’. 대표적인 카테고리만을 노출시켜주는 기본적인 메뉴 형태와 달리 메가 메뉴의 경우 각 카테고리를 대표하는 주요 콘텐츠를 텍스트와 이미지 형태로 보여줄 수 있다는 점이 가장 매력적입니다. 저도 ‘지금 써보러 갑니다’에 적용하려고 여러모로 고민중이기도 하고요 🙂 ‘디자인’이라고 메뉴만 보여주는 것과 ‘디자인’이라는 메뉴는 물론 최근 인기가 많았던 콘텐츠나, 이미지를 강조할 수 있는 콘텐츠를 함께 보여준다면 이탈률은 낮추고 체류시간을 늘릴 수 있는 좋은 연결고리가 되지 않을까 싶네요!

3.유니버설 네비게이션

독립적인 하위 사이트를 보유한 브랜드/서비스에서 유니버설 네비게이션은 메인 사이트로 빠르게 접근할 수 있도록 돕는 역할을 합니다. 관련된 웹사이트들을 연결하기 위한 메뉴 구조를 제공하는 유일한 방법이기 때문이죠. ‘Universal Navigation: Connecting Subsites to Main Sites‘에는 유니버설 네이게이션을 건축에 비유하고 있는데요! 관리실에서 메인 로비로 직접 데려다주는 운송수단이라고 표현하고 있었습니다. 복잡한 구조에서 점점 벗어나는 것이 최근의 트렌드지만, 그렇다고 연관된 사이트 또는 정보들을 방치해둘 순 없기에 – 유니버설 네비게이션의 경우 그 형태가 조금씩 바뀔 순 있으나 앞으로도 꾸준히 사용될 네비게이션 중 하나가 아닐까 싶네요.

4.버티컬 네비게이션

전통적(?)으로 웹사이트의 네비게이션이 상단/수평 형태로 많이 쓰였다면, 이제는 사이드/수직 형태로 많이 쓰이고 있는데요! 초기에는 고정된 상태로 메뉴 버튼을 통해 네비게이션을 확인할 수 있었지만, 최근 흐름을 살펴보면 위의 이미지와 같이 아이콘을 활용해 메뉴 버튼을 클릭하지 않아도 바로 이동이 가능하다거나, 대표적인 내용만을 넣어두고 사용자가 원할때에만 상세 메뉴를 확인할 수 있도록 구성하는 등 더욱 다양하게 쓰이는 모습입니다.

5.히든 메뉴

반응형 웹이 널리 쓰이게 되면서, 함께 눈에 띄었던 것이 바로 ‘사이드 메뉴/햄버거 메뉴’가 아닐까 싶습니다. 모바일에서도 메뉴를 쉽게 탐색할 수 있어야 하기 때문이죠. 햄버거 메뉴의 가장 큰 특징은 구체적인 ‘메뉴’가 모두 숨겨져 있다는 것인데요! 방문자들이 원하는 콘텐츠를 바로 확인할 수 없다는 단점도 존재하지만, 롱스크롤을 활용해 서비스 소개 등을 노출해야 하는 경우에는 메뉴를 숨겨 놓는 것이 콘텐츠에 집중하게 만드는 좋은 방법이 되기도 합니다.

6.인기 있는 콘텐츠의 활용

블로그나 뉴스, 미디어 사이트에서 자주 쓰이는 방식으로, 메가 메뉴와 닮았지만 인기 있는, 연관성이 높은 콘텐츠를 직접적으로 노출해준다는 측면에서 조금 다르게 느껴집니다. 특정 카테고리의 콘텐츠를 보고 있다면 동일한 카테고리의 최신 또는 인기 있는 콘텐츠를 노출시켜 웹사이트를 떠나지 않고 계속해서 내용을 확인할 수 있도록 유도할 수 있는 것이죠. 위의 이미지는 뉴욕타임즈에서 활용하고 있는 네비게이션의 모습으로, 기본 네비게이션과는 별도로 운영되고 있는 것을 확인할 수 있습니다.

7.콘텐츠 테이블의 활용

https://ahrefs.com/blog/seo-tips/

긴 콘텐츠의 경우, 사이드를 활용해 목차 형태의 메뉴를 제공해주는 것도 많이 쓰이는 방법 중 하나인데요! 원하는 내용을 사용자가 바로 탐색하여 확인할 수 있도록 도와줄 수 있는 좋은 방법이기도 합니다. 웹에서도 적용될 수 있지만, 모바일의 경우 화면 자체가 크지 않기 때문에 더욱 유용하게 쓰일 수 있고요 🙂