주제별 — 제품이 제공하는 서비스나 콘텐츠 카테고리처럼, 사이트의 콘텐츠 범위를 직접 보여줘요;
대상별 — 예: 관리자, 운영자, 사용자;
작업별 — 예: 협업 모델 이해하기, 협업 전문가에게 연락하기, 서명 프로세스, 협업 조정, 비즈니스 운영, 고객 서비스.

완전한 내비게이션은 사용자가 여러 경로를 따라 움직일 수 있게 해야 해요:

A - 측면 이동 (Lateral Move): 같은 레벨로 이동

B - 드릴다운 (Drill Down): 하위 레벨 콘텐츠로 진입

C - 돌아가기 (Return): 히스토리나 상위 레벨 콘텐츠로 탐색해 되돌아가기

D - 연관 내비게이션 (Associative Navigation): 연관성을 기반으로 콘텐츠로 이동

유형 (Types)

내비게이션 컴포넌트를 올바르게 이해하고 사용하는 것은 전체 제품 경험에 매우 중요해요.

우리는 내비게이션을 다음 5가지 유형으로 나눠요:

전역 내비게이션 (Global Navigation)
뒤로 가기 내비게이션 (Back Navigation)
페이지 내 내비게이션 (In-Page Navigation)
드릴다운 내비게이션 (Drill Down Navigation)
연관 내비게이션 (Associative Navigation)

전역 내비게이션은 웹사이트의 핵심 조직 구조를 반영해요.

사이드바 내비게이션 (Sidebar Navigation)

메뉴가 많을 때 사용하며, 메뉴 항목이 6개 이상일 때 권장해요;
여러 레벨을 담을 수 있지만 1-3 레벨을 권장해요;
엔터프라이즈 제품은 사이드바 내비게이션을 권장해요. 가시성이 좋고 스캔하기 쉬우며, 각 메뉴의 중요도가 메뉴 순서에 덜 영향을 받아요.

상단 내비게이션 (Top Navigation)

각 메뉴의 비중은 종종 순서와 양의 상관관계가 있어요. 즉 순서가 사용자 사용 빈도에 영향을 줘요;
콘텐츠 항목 2~7개를 권장해요;
1-2 레벨을 권장해요. 2 레벨이 넘으면 팝업 내비게이션을 권장해요.

팝업 내비게이션 (Pop-Up Navigation)

내비게이션의 지탱 레벨을 확장하는 데 사용되며, 대형 웹사이트에 적합해요.

사이트맵 스타일 내비게이션은 사용자가 전체 사이트에서 사용할 수 있는 기능을 한눈에 볼 수 있게 해요.

사용자가 좁은 호버 경로를 따라야 내비게이션 메뉴를 얻도록 만들지 마세요;
사용자가 메뉴의 각 레이어를 하나씩 열어 찾게 만들지 마세요. 비효율적이고 어려워요;

이 제안은 내비게이션 메뉴에만 해당하며, 운영 메뉴에는 해당하지 않아요.

유틸리티 내비게이션 (Utility Navigation)

보통 웹사이트 우측 상단에 배치하며, 습관적인 사용 방식이에요. 사용자는 이 위치에서 이런 콘텐츠를 찾는 데 익숙해요.

콘텐츠는 보통 다음을 포함해요:

• 전역 검색

• 공지 센터

• 사이트 도움말

• 고객 서비스 정보, 쇼핑 카트

• 즐겨찾기

• 로그인 도구

• 언어 전환

페이지 내 작업을 유틸리티 도구에 넣지 마세요.

엔터프라이즈 제품은 정보 아키텍처에서 계층 + 데이터베이스의 혼합 구조를 자주 채택해요. 이 구조는 보통 레이어가 깊어요. 사용자에게 얕고 평평하며 넓은 인지 레벨을 달성하려면, 몇 개의 깊은 레이어를 서브사이트로 조직해서 단일 사이트의 레벨 수를 줄이고 사용자 인지 부하를 낮춰요.

또 다른 서브사이트 시나리오는 큰 작업 공간을 요구하는 복잡한 작업을 마주할 때로, 서브사이트로 몰입해서(immersive) 작업을 처리하는 경우예요. 가장 흔한 예는 에디터예요. 서브사이트 모드에서는 전체 사이트 내비게이션 기능에 대한 요구가 낮아서, 보통 상위 레벨이나 홈페이지로 돌아가는 출구만 제공하면 돼요.

여기서 데이터베이스는 각 페이지의 콘텐츠가 독립적이지만 일관된 형식을 따르는 정보 아키텍처의 한 형태예요.

몰입형 내비게이션 (Immersive Navigation)

복잡한 작업이나 큰 작업 공간이 필요한 작업을 처리하는 데 사용돼요.

다단계 사이트 내비게이션 (Multilevel Site Navigation)

메뉴가 많은 서브사이트에 사용돼요;
서브사이트 디자인은 전체 사이트 내비게이션과 뚜렷이 달라야 해요. 새로운 공간에 들어간다는 것을 나타내는 분명한 전환이 필요해요.

정보 아키텍처의 하위 레벨에 대한 콘텐츠 내비게이션에는 페이지 내 내비게이션을 사용해요. 페이지를 다른 사람과 공유해야 한다면 URL에 위치 표시(location mark)를 추가해요.

페이지 헤더 (Page Header)

페이지 헤더는 페이지 콘텐츠 위에 위치하며, 주로 페이지 테마 선언, 페이지 내 정보 내비게이션, 페이지 레벨 콘텐츠 작업에 사용해요.

트리 컨트롤 (Tree Control)

페이지 안에서 다중 레벨 구조를 표시해요.

앵커 (Anchor)

평평한 레이아웃으로 표시된 콘텐츠가 너무 길 때, 페이지의 여러 섹션 사이를 점프해요.

맨 위로 (Back to Top)

페이지 상단으로 빠르게 돌아가요.

캐러셀 (Carousel)

일련의 콘텐츠를 순환해요.

클릭해서 정보 아키텍처의 하위 레벨 콘텐츠로 진입해요. 기본적으로 사이트 내 내비게이션이고, 외부 사이트는 새 탭으로 열려요. 대표적인 시나리오는 목록에서 상세로 드릴다운하는 경우예요.

브레드크럼 (Breadcrumbs)

현재 페이지의 웹사이트 구조 내 위치를 반영해요. 레벨이 3개 미만이면 브레드크럼을 표시할 필요가 없어요. 전역 내비게이션이 위치를 직접 보여줄 수 있기 때문이에요. 사용자는 브레드크럼으로 이전 페이지로 돌아갈 수 있어요.

뒤로 가기 버튼 (Back Button)

제목은 보통 브레드크럼과 함께 표시돼요. 브레드크럼이 있을 때 제목의 뒤로 가기 버튼은 권장하지 않아요.

페이지 헤더의 뒤로 가기 버튼은 짧은 브레드크럼과 같아서, 이전 레벨로 돌아가는 데 사용돼요. 전체 사이트 내비게이션이 숨겨진 서브사이트 시나리오에 적합하며, 사용자는 뒤로 가기 버튼으로 상위 레벨로 돌아가야 해요.

스텝 바 (Step Bar)

미리 정의된 순서에 따라 사용자를 단계별로 안내해요.

일련의 페이지 각각에 스텝 바를 표시해서, 이 선형 경로에서 현재 페이지의 위치를 표시해요.

적합한 경우:

• 선형 사용자 방문 경로;

• 스텝 바는 복잡한 작업을 다루기 쉬운 작은 작업으로 나눠, 사용자 오류를 줄이고 작업을 더 빨리 완료하게 해요.

이전/다음 (Previous/Next)

밀접하게 관련된 다른 웹 페이지로 이동하도록 도와줘요.

디자인 결과 검증 방법 (How to Validate Design Results)

내비게이션 시스템의 품질을 테스트하려면 스트레스 테스트를 해 보세요: 사이트에 낙하산처럼 착지해서 내비게이션 시스템의 한계를 테스트해요.

홈페이지를 무시하고 사이트의 임의의 페이지로 바로 이동해요;
사용자가 자신의 현재 위치와 사이트의 다른 부분과의 관계를 알 수 있는지 확인해요. 이 페이지는 사이트의 어느 부분인가요? 상위 페이지는 무엇인가요?
이 페이지가 어디로 데려갈지 아는지 확인해요. 링크 텍스트가 목적지를 설명하나요?

내비게이션