브레드크럼(Breadcrumb)

1. 정의

• 유저에게 사이트 구조 상 현재 위치 안내하는 역할
• 유저는 브래드크럼에 기반하여 탐색 중인 페이지의 맥락을 이해할 수 있고 경로가 포함하고 있는 링크를 이용하여 쉽게 상위 수준의 콘텐츠로 이동 가능
• 논리적인 선형 구조가 분명한 사이트에 효율적(논리적 계층구조, 그룹핑이 없는 단일 레벨 웹사이트 이용 시 비효율적)

[오늘의 집 발췌]

2. 장점

• 유저가 상위 페이지로 가기 위해 취해야 하는 행동 수 감소 효과
  (뒤로가기, 전체 네비게이션 이용하지 않고 한번에 이동 가능)
• 텍스트를 가로로 펼쳐서 보여주기 때문에 최소한의 공간 차지

3. 가이드

• 브레드스크럼은 주 네비게이션을 대체하지 않는다. (즉 주 네비게이션을 보조하는 역할을 한다.)

[Coupang 발췌]

• 네비게이션상에서 현 페이지에는 링크를 걸지 않는다.
  e.g. 레고 코리아의 경우, '홈'과 '아이디어' 링크 연결, BTS Dynamite는 링크 미연결
         쿠팡의 경우, 브레드크럼에 상품의 카테고리로만 구성(현 페이지 제외)되어 있어 전체 링크 연결

[레고 코리아 발췌]

• 구분해주는 부호를 사용한다.(예: '>', '>>', '/', '→' 등)
  e.g. 홈 > 식품 > 면
• 크기와 여백을 적절하게 정한다.
• 디자인의 중심이 되게 만들지 않는다.
• 모바일에선 브레드스크럼을 이용하지 않는다.