Breadcrumb은 언제 필요한가
먼저 던질 질문
사용자는 현재 위치를 어떻게 이해하는가
핵심 관점
Breadcrumb은 뒤로가기 버튼이 아니라 정보 구조를 보여주는 지도다. 현재 페이지가 전체 구조 안에서 어디인지 이해해야 할 때 가치가 있다.
탐색이 빨라지는 장면
문서 사이트에서 Docs > Guides > Accessibility처럼 현재 위치를 보여준다.
쇼핑몰 카테고리 상세에서 상위 카테고리로 돌아갈 수 있게 한다.
발견을 방해하는 흐름
단일 깊이 페이지에 불필요한 Breadcrumb을 넣어 화면만 복잡하게 만든다.
모바일에서 너무 긴 경로를 그대로 보여줘 핵심 제목을 밀어낸다.
탐색 사례와 근거
Breadcrumb은 깊은 정보 구조에서 위치를 알려준다
NN/g의 Breadcrumb 가이드는 Breadcrumb이 사용자가 현재 위치를 이해하고 상위 단계로 이동하는 데 도움을 준다고 설명한다. 문서, 설정, 이커머스 카테고리, 관리자 화면처럼 계층 구조가 깊은 제품에서 유용하다.
깊이가 얕거나 사용자가 선형 흐름을 따라가는 화면에서는 Breadcrumb보다 진행 표시가 더 적합할 수 있다. 결제 단계와 회원가입 단계는 위치보다 완료까지의 단계가 중요하다.
실무 해석
WAI-ARIA Breadcrumb 패턴은 Breadcrumb을 현재 페이지의 부모 페이지 링크 목록으로 설명한다. 구현에서는 nav 라벨, 현재 페이지 표시, aria-current 같은 의미 전달을 함께 고려해야 한다.
탐색 패턴 선택 기준
- 정보 구조가 충분히 깊은지 확인한다
- 상위 단계로 이동할 필요가 있는지 본다
- 현재 페이지 제목과 경로가 중복되는지 조절한다
자주 빠지는 함정
얕은 구조에 Breadcrumb을 넣으면 탐색보다 장식이 된다. 반대로 깊은 구조에서 생략하면 사용자는 현재 위치를 URL이나 기억에 의존해야 한다.
추가로 비교할 탐색 사례
- 문서 사이트, 쇼핑몰 카테고리, 관리자 설정 화면의 Breadcrumb을 비교한다
- Breadcrumb이 불필요하게 중복되는 얕은 구조 사례를 찾는다
- 모바일에서 경로를 축약하는 사례를 모은다
탐색 설계 질문
- 현재 위치와 상위 이동의 필요성을 구분했는가
- aria-current와 nav 구조를 다뤘는가
출처
- Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines for Desktop and Mobile: https://www.nngroup.com/articles/breadcrumbs/
- WAI-ARIA APG, Breadcrumb Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
- W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
- Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/