내비게이션 바만 다루는 인스피레이션 갤러리
내비게이션 바는 가장 대충 넘기기 쉬운 컴포넌트입니다. 로고는 왼쪽, 메뉴는 오른쪽, 이상 끝. Navbar Gallery는 방향을 반대로 잡았습니다. 오직 내비게이션 바만, 잘 만든 것만 나란히 모아 놓고 고르게 합니다.
현재 수백 개 실제 사이트의 내비게이션 구현을 수록하고 있고, 페이지를 넘겨 가며 볼 수 있습니다. 모든 항목에 원본 사이트 링크가 남아 있어서, 클릭하면 디자인 시안이 아니라 실제로 작동 중인 인터랙션을 보게 됩니다.
분류 방식
구조 유형을 기준으로 나눠 두었는데, 실제로 패턴을 고르는 사고방식과 잘 맞습니다.
- Static / Sticky: 상단에 고정되고 드롭다운이 없는 기본형 내비게이션
- Dropdown / Flyout: 2차 메뉴가 상위 항목 아래로 접히는 형태
- Mega Menu: 카테고리가 많은 사이트에 맞는, 넓게 펼쳐지는 다단 메뉴
- Side Bar: 세로형 사이드 내비게이션
- Search Bar: 검색창이 내비게이션의 주체가 되는 형태
- Announcement Bar: 프로모션이나 버전 공지에 쓰는 상단의 얇은 띠
- Full Screen Menu: 그래픽 요소를 곁들이는 전체 화면 메뉴
- Breadcrumbs: 현재 위치를 보여주는 계층형 내비게이션
활용법
도구라기보다 패턴 선택을 위한 참고 매뉴얼에 가깝습니다. 새 프로젝트에서 내비게이션 구조를 정할 때 유형별로 한 번 걸러 보면, 비슷한 사이트들이 모바일에서 메뉴를 어떻게 접는지, CTA를 어디에 두는지, 스크롤할 때 색을 어떻게 바꾸는지 금방 파악됩니다. 머리로 짜맞추며 시험해 보는 것보다 훨씬 빠르죠. 디자인 단계의 커뮤니케이션 비용도 줄어듭니다. 말로 설명하는 것보다 링크를 던져 주는 쪽이 압도적으로 명확하니까요.
사이트는 Mobbin이 후원하고 있고, 별도로 제보와 뉴스레터 구독 창구도 열려 있습니다.
