지금 내가 어디에 있지? 웹사이트와 보고서의 길잡이, 브레드크럼

작성·보완 및 검토기준일: 2026.10.30

웹사이트를 둘러보다 보면 화면 상단에서 다음과 같은 표시를 볼 수 있습니다.

이처럼 현재 보고 있는 페이지가 전체 구조에서 어디에 위치하는지를 보여주는 탐색 경로를 브레드크럼(Breadcrumb)이라고 합니다.

왜 ‘빵 부스러기’라고 부를까?

Breadcrumb를 직역하면 ‘빵 부스러기’입니다.

동화 「헨젤과 그레텔」에서 주인공들이 집으로 돌아가는 길을 찾기 위해 빵 부스러기를 떨어뜨린 이야기에서 유래한 표현입니다.

웹사이트에서도 사용자가 자신의 현재 위치와 상위 경로를 확인할 수 있도록 길을 표시해 준다는 의미입니다.

브레드크럼의 주요 기능

쇼핑몰의 브레드크럼 사례

쇼핑몰에서는 다음과 같은 형태로 브레드크럼을 활용할 수 있습니다.

사용자는 현재 제품이 어떤 분류에 속하는지 알 수 있고, ‘커피머신’이나 ‘주방가전’을 선택해 다른 제품을 쉽게 살펴볼 수 있습니다.

카테고리와 상품 수가 많은 쇼핑몰일수록 브레드크럼의 효과가 커집니다.

보고서에서도 현재 위치를 표시할 수 있다

분량이 많은 보고서나 파워포인트 자료에서도 독자가 현재 어느 장을 읽고 있는지 보여주는 장치가 필요합니다.

보고서 상단에 주요 장을 표시하고 현재 페이지가 속한 장의 글자색을 다르게 나타내면, 독자는 보고서의 전체 구성과 현재 위치를 직관적으로 파악할 수 있습니다.

보고서에서는 이러한 요소를 ‘상단 섹션 내비게이션’ 또는 ‘현재 섹션 표시’라고 할 수 있습니다. 웹사이트의 브레드크럼과 표현 방식은 다르지만, 독자에게 현재 위치를 안내한다는 목적은 같습니다.

특히 가치평가보고서, 실사보고서, 감사보고서 설명자료처럼 여러 개의 장으로 구성된 문서에서는 다음과 같은 효과가 있습니다.

• 보고서의 전체 구조를 한눈에 파악할 수 있습니다.
• 현재 읽고 있는 장을 쉽게 확인할 수 있습니다.
• 페이지가 바뀌어도 문서의 흐름을 놓치지 않게 해줍니다.
• 보고서 전체에 일관된 디자인 체계를 적용할 수 있습니다.

적용할 때 유의할 점

웹사이트의 브레드크럼은 일반적으로 페이지 상단의 제목 위나 아래에 배치합니다. 첫 단계는 ‘홈’으로 시작하고 현재 페이지까지의 계층을 단순하고 일관되게 표시하는 것이 좋습니다.

접근성 측면에서는 W3C APG가 제시하는 이름이 있는 내비게이션 영역과 현재 페이지 표시를 함께 검토합니다. 현재 페이지를 링크로 표시할 때는 aria-current="page"를 사용하며, 링크가 아닌 현재 항목에는 선택적으로 적용할 수 있습니다.

다만 브레드크럼은 기본 메뉴를 대체하는 기능이 아닙니다. 전체 메뉴와 검색 기능은 그대로 제공하면서 현재 위치와 상위 경로를 보조적으로 안내해야 합니다.

보고서의 섹션 내비게이션도 모든 장을 지나치게 많이 표시하기보다 주요 장만 간결하게 보여주는 것이 좋습니다. 현재 장은 글자색, 굵기 또는 밑줄 등을 활용해 일관되게 강조해야 합니다.

#브레드크럼 #Breadcrumb #섹션내비게이션 #보고서디자인 #파워포인트보고서 #PPT디자인 #웹사이트구조 #사용자경험 #UX #UI #검색엔진최적화

2026.10.30 작성·보완 · Collabo Finance and Tax Consulting