브레드크럼 (Breadcrumb)

디자인학
한 줄 정의: 사용자가 현재 위치한 페이지까지의 경로를 계층적으로 표시하여 상위 단계로의 이동을 돕는 내비게이션 UI 요소이다.

쉽게 풀면

지금 내가 어느 페이지에 있는지, 어떤 경로로 왔는지 순서대로 보여주는 표시이다.

왜 중요한가

브레드크럼은 현재 페이지가 사이트 구조의 어디에 있는지를 '홈 > 카테고리 > 상품' 형태로 보여 주는 내비게이션으로, 검색이나 외부 링크로 깊은 페이지에 바로 들어온 사용자가 위치를 파악하고 상위로 이동하게 합니다. 대규모 커머스나 문서 사이트에서 사이트맵의 위계를 화면에 드러내는 가장 가벼운 방법입니다. 전자상거래에서는 브레드크럼의 각 단계가 실제 카테고리 필터 링크로도 기능해, 단순한 위치 표시를 넘어 상위 카테고리로 이동하며 상품을 다시 탐색하는 내비게이션 수단으로도 쓰인다. 브레드크럼의 구분 기호로는 화살표나 슬래시가 흔히 쓰이는데, 이 기호 하나의 방향성이 사용자에게 '더 상위로 갈수록 왼쪽'이라는 위계 방향을 암묵적으로 전달한다.

논문에서는 이렇게 쓰입니다

본 연구는 브레드크럼 도입이 대규모 카테고리 구조를 가진 쇼핑몰의 탐색 만족도에 미친 영향을 조사하였다.

계층 경로 표시 도입이 사용자 탐색 경험에 미치는 영향을 검증한 UX 연구이다.

"검색엔진을 통해 상품 상세 페이지로 곧바로 들어온 사용자들에게 '홈 > 가전 > 세탁기' 형태의 브레드크럼을 제공하자, 관련 카테고리로 이동해 추가 탐색을 이어가는 비율이 늘어났다."

이 문장은 사용자가 사이트 구조를 거치지 않고 깊숙한 페이지에 바로 도착했을 때, 자신이 전체 구조의 어디에 있는지 알려 주는 표시가 다음 탐색을 도왔다는 뜻입니다.

조금 더 깊게 보면

브레드크럼에는 위치 기반(구조상 경로)과 경로 기반(사용자가 실제 거쳐 온 순서)이 있는데, 후자는 브라우저 뒤로 가기와 중복되어 혼란을 준다는 이유로 사용성 연구에서 권장되지 않습니다. 브레드크럼은 주 내비게이션을 대체하지 못하는 보조 장치이며, 위계가 얕은 사이트나 한 콘텐츠가 여러 카테고리에 속하는 구조에서는 오히려 잘못된 위치 정보를 줄 수 있습니다. 브레드크럼은 마지막 항목(현재 페이지)을 클릭할 수 없는 일반 텍스트로 표시하고 그 앞 단계만 링크로 연결하는 것이 표준 관행이며, 이는 이미 있는 위치를 다시 클릭하게 만드는 불필요한 상호작용을 없애기 위함이다.

주의할 점

브레드크럼은 얕은 계층 구조의 사이트에서는 큰 효용이 없을 수 있어 정보구조의 깊이에 따라 필요성이 달라진다.

개념 계통

분야 전체 개념 지도 보기 →

관련 용어