wlog

브레드크럼 (Breadcrumb) 가이드

브레드크럼은 사용자가 웹사이트나 애플리케이션 안에서 자신의 현재 위치를 파악하고, 상위 계층으로 쉽게 이동할 수 있도록 돕는 보조 내비게이션 요소입니다. 이름은 헨젤과 그레텔이 길을 찾기 위해 떨어뜨린 빵부스러기에서 유래했습니다.

1. 주요 역할

위치 파악: 사용자가 "내가 지금 어디에 있는가?"를 빠르게 이해할 수 있습니다.
상위 이동: 뒤로 가기를 여러 번 누르지 않고 원하는 상위 단계로 이동할 수 있습니다.
구조 설명: 사이트나 앱의 계층 구조를 자연스럽게 보여줍니다.

2. 브레드크럼의 유형

위치 기반(Location-based): 사이트의 논리적 계층 구조를 보여줍니다. 가장 일반적인 형태입니다.
- 예: 홈 > 고객지원 > 자주 묻는 질문 > 결제
속성 기반(Attribute-based): 상품이나 콘텐츠의 분류 속성을 보여줍니다. 주로 이커머스에서 사용됩니다.
- 예: 가전 > 세탁기 > 드럼세탁기 > 20kg 이상
경로 기반(Path-based): 사용자가 실제로 거쳐 온 경로를 보여줍니다. 브라우저 히스토리와 역할이 겹쳐 최근에는 많이 사용되지 않습니다.

3. 언제 유용한가

브레드크럼은 문서 사이트, 쇼핑몰 카테고리, 관리자 설정 화면처럼 상위-하위 관계가 뚜렷한 화면에서 유용합니다.

반대로 계층이 얕거나, 검색 결과처럼 사용자의 진입 경로가 더 중요한 화면에서는 큰 도움이 되지 않을 수 있습니다.

4. 디자인 및 UX 원칙

구분자 사용: 항목 사이에 >, /, › 같은 기호를 사용해 계층을 구분합니다.
현재 페이지 표기: 마지막 항목은 현재 페이지를 의미합니다. 보통 링크를 제거하거나 강조합니다.
상위 항목 링크화: 현재 페이지를 제외한 항목은 상위 페이지로 이동할 수 있어야 합니다.
위치 선정: 보통 메인 메뉴 아래, 페이지 제목 위에 배치합니다.
간결함: 경로가 너무 길면 중간 단계를 ...으로 생략합니다.

5. 접근성과 SEO

브레드크럼은 nav, ol, aria-current="page" 등을 사용하면 스크린 리더에도 더 명확하게 전달할 수 있습니다.

또한 검색 엔진이 사이트 구조를 이해하는 데 도움을 줄 수 있으며, 공개 웹 페이지에서는 BreadcrumbList 구조화 데이터와 함께 사용되기도 합니다.