[Front-End] 보조 탐색

주요 내비게이션 vs 보조 탐색

주요 내비게이션은 일반적으로 사이트의 모든 페이지에 표시되어야 하는 가장 중요한 링크와 버튼을 가지고 있다.

보조 탐색은 일반적으로 현재 페이지로 연결되는 클릭 가능한 페이지 또는 속성으로 구성된다.

 

---

보조 탐색

보조 탐색(Secondary navigation or breadcrumb navigation)은 헨젤과 그레텔 이야기에서 길을 잃은 아이들이 돌아갈 길을 찾을 수 있도록 해 준 "빵 부스러기"의 의미를 가진다.

 

Breadcrumbs를 사용하면, 사용자가 사이트의 어느 위치에 있는지 빠르게 파악하고 사이트의 범위를 예측할 수 있음.

이동 경로는 일반적으로 페이지의 가로 형태로 표시되며 최소한의 공간을 차지함. 

사용자는 헤더, 왼쪽 부분, 주요 내비게이션 아래 등에서 볼 수 있을 것이라고 생각함.

일반적으로 ">"또는 "/"기호로 구분됨.

 

href="#" 값을 사용하면, 링크를 클릭했을 때 현재 페이지의 맨 위로 스크롤됨.

이동 경로는 일반적으로 현재 페이지에 따라 상대적이므로 각 페이지의 이동 경로 리스트는 달라야 함. 

ex) 이동 경로 목록이 Food > Fruite > Imported > Yellow 이면, 사용자가 "Imported"을 클릭했을 때 해당 페이지의 이동 경로 목록은 Food > Fruite > Imported 여야 한다.

 

 

 

- 이동 경로 스타일

 

화살표 효과를 만들기 위해 몇 가지 CSS 트릭을 사용. 

1. ::before및 ::after 요소를 사용하여 각 리스트 아이템의 앞뒤에 사각형(빈 content)을 추가.

2. 테두리 일부를 투명하게 설정하여 화살표의 꼬리(tail)를 만든다.

3. 2번을 활용하여 화살표의 머리(head)를 만든다.

 

 

 

- 이동 경로 유형

 

• Location 위치

위치 기반 이동 경로는 웹 사이트의 탐색 구조와 관련하여 현재 위치를 기반으로 한다. 

"Food"와 "Fruite" li요소는 위치 기반이다.

 

• Attribute 속성

속성 기반 이동 경로는 탐색 중인 페이지 또는 제품의 속성을 기반으로 한다. 

"Imported"와 "Yellow" li요소는 속성 기반입니다.

사용자가 속성을 제거할 수 있도록 하려면 (x) 버튼 또는 이와 유사한 버튼을 제공할 수 있다. 

 

• Path 경로

경로 기반 이동 경로는 사이트를 통한 사용자의 고유한 경로를 기반으로 한다. 

ex) 홈 페이지에 도착하여 정보 페이지로 이동한 다음 마지막으로 등록 페이지로 이동 한 경우 이동 경로 추적은 

Home > About > Register일 수 있다. 표시를 단순화하기 위해 ... > About > Register처럼 시작 부분을 축약할 수 있다.

☆ 일반적으로 잘 사용하지 않으므로 진짜 필요할 때에만 사용해야 함.

 

☆ 사이트에 보조 탐색을 넣기 전에 진정으로 필요한지 고려해본 후에 사용. (사용자의 예상을 벗어나 혼란을 줄 수도 있기 때문에)