내비게이션

내비게이션 (Navigation)

출처: 문서

본문

내비게이션은 '어디로 갈지, 어떻게 거기에 도달할지'라는 사용자의 문제를 해결하는 데 집중해요. 일반적으로 '사이드바 내비게이션(sidebar navigation)'과 '상단 내비게이션(top navigation)'으로 나눌 수 있어요.

올바른 내비게이션 고르기 ​

적절한 내비게이션은 사용자에게 매끄러운 경험을 주지만, 부적절한 내비게이션은 혼란을 불러와요. 사이드바 내비게이션과 상단 내비게이션의 차이를 정리해 볼게요.

사이드 내비게이션 (Side Navigation) ​

내비게이션을 왼쪽 가장자리에 고정하면 가시성이 좋아져 페이지 전환이 더 쉬워져요. 이 경우 페이지의 상단 영역에는 검색 바, 도움말 버튼, 알림 버튼 등 자주 쓰는 도구를 배치해요. 백오피스 관리 사이트나 유틸리티성 웹사이트에 적합해요.

1단계 카테고리 ​

한 단계의 페이지만 있는 단순한 구조의 사이트에 적합해요. 브레드크럼이 필요 없죠.

2단계 카테고리 ​

사이드바는 최대 2단계 내비게이션까지 표시해요. 브레드크럼은 2단계 내비게이션과 함께 쓰는 걸 권장해요. 사용자가 위치를 찾고 탐색하기 쉬워지거든요.

3단계 카테고리 ​

복잡한 유틸리티 웹사이트에 적합해요. 왼쪽 사이드바는 1단계 내비게이션을, 중간 컬럼은 2단계 내비게이션이나 다른 유틸리티 옵션을 표시해요.

상단 내비게이션 (Top Navigation) ​

위에서 아래로 읽는 일반적인 브라우징 순서를 따르기 때문에 더 자연스러워요. 다만 내비게이션 개수와 텍스트 길이는 상단 너비에 제한되죠. 내비게이션이 적고 덩어리가 큰 사이트에 적합해요.

더 알아보기 (Learn more)