Breadcrumbs, 헨젤과 그레텔이 만든 웹 내비게이션

한 줄로

1812년 그림 형제 동화의 빵 부스러기가 1995년 웹사이트의 길찾기가 됐습니다.

어디서 왔나

독일 그림 형제(Brothers Grimm)의 동화 Hansel and Gretel(1812). 숲에 버려진 헨젤이 집으로 돌아오는 길을 찾기 위해 빵 부스러기(breadcrumbs)를 떨어뜨립니다. 잘 알려진 결말은 새들이 부스러기를 다 먹어 헨젤은 길을 잃습니다.

1995년, 하이퍼텍스트 연구자 마크 번스타인(Mark Bernstein)이 웹사이트 내비게이션에 이 비유를 도입했습니다. 사용자가 깊은 페이지에 들어갔을 때, "홈 > 카테고리 > 서브카테고리 > 현재 페이지" 식의 경로를 화면 상단에 표시합니다. 사용자는 자기가 어디에 있는지 파악하고, 한 단계 위로 빠르게 돌아갈 수 있습니다.

Yahoo!가 1996년 디렉터리에 이걸 도입하면서 대중화됐습니다. 그 후 모든 e커머스, 모든 기술 문서, 모든 위계 구조 사이트의 표준이 됐습니다.

지금 우리가 쓰는 방식

3가지 유형이 있습니다.

Location-based는 사이트 위계 그대로입니다. "Home > Electronics > Phones > iPhone 15". Path-based는 사용자가 실제 거쳐온 경로입니다. Attribute-based는 필터링한 속성 표시입니다. "노트북 > 13인치 > Apple > M2 칩".

SEO 측면에서도 강합니다. 구글이 검색 결과에 breadcrumb를 표시할 때가 있어서 클릭률이 올라갑니다(schema.org의 BreadcrumbList 마크업).

바이브 메이커가 챙길 한 가지

Breadcrumb는 "내가 어디에 있는가"를 한 줄로 알려줍니다. 사이트가 3단계 이상 깊어지면 거의 필수입니다. 다만 사이트가 평평하면(2단계 이하) 굳이 안 써도 됩니다. 헨젤도 숲이 얕으면 부스러기가 필요 없습니다.

관련

Site map · Information architecture · Navigation