브레드크럼이란 무엇인가

브레드크럼(Breadcrumb)은 웹사이트에서 홈부터 현재 페이지까지의 상위 페이지를 순서대로 링크로 늘어놓아 사용자에게 사이트 계층 안의 현재 위치를 알리는 보조 내비게이션이다.

보통 “홈 > 의류 > 여성의류 > 코트”처럼 헤더와 본문 사이에 한 줄로 놓인다.

이름은 동화 헨젤과 그레텔에서 집으로 돌아갈 길을 표시하려고 떨어뜨린 빵 부스러기에서 왔다 (Wikipedia, Breadcrumb navigation). 한국어 위키백과는 “사이트 이동 경로”, 구글 문서는 “탐색경로”라고 부른다.

MDN은 브레드크럼을 사이트 헤더와 기본 콘텐츠 사이에 놓이는 탐색 보조 도구로 정의하고, 사용자가 상위 페이지로 돌아가는 데 필요한 클릭 수를 줄인다고 설명한다 (MDN, Breadcrumb 용어 사전).

사용자에게는 길잡이이고 검색엔진에는 사이트 구조 신호다. 구글은 브레드크럼 마크업을 읽어 검색결과의 URL 자리에 경로를 대신 보여준다.

브레드크럼에는 어떤 유형이 있는가?

위치 기반, 경로 기반, 속성 기반 셋이다. 위치 기반은 사이트 계층 안의 고정 위치를, 경로 기반은 사용자가 거쳐 온 순서를, 속성 기반은 현재 페이지를 분류하는 속성값을 보여준다 (Wikipedia, 위 인용).

유형	보여주는 것	예	특징
위치 기반(Location)	사이트 계층 안의 고정 위치	홈 > 노트북 > 게이밍 노트북	같은 페이지면 누구에게나 같음. 가장 흔함
경로 기반(Path)	사용자가 거쳐 온 순서	홈 > 검색결과 > 상품	방문자마다 달라짐. 브라우저 뒤로가기와 중복
속성 기반(Attribute)	현재 페이지의 분류 속성	홈 > 노트북 > 15인치 > 삼성	필터를 여러 개 건 쇼핑몰에서 사용

닐슨 노먼 그룹은 브레드크럼이 사용자의 방문 기록이 아니라 사이트 계층을 보여야 한다고 못박는다. 기록은 브라우저의 뒤로가기 버튼이 이미 맡고 있다 (Jakob Nielsen, Breadcrumb Navigation Increasingly Useful).

그래서 실무에서는 위치 기반이 기본이고, 속성 기반은 구조화 데이터로 여러 경로를 함께 표시할 때 쓴다.

브레드크럼은 어떻게 설계해야 하는가?

주 내비게이션을 대체하지 않는 보조 수단으로 두고, 홈에서 시작해 현재 페이지로 끝내되 마지막 항목은 링크로 만들지 않는다. 닐슨 노먼 그룹의 2018년 가이드라인은 데스크톱 8개와 모바일 3개다 (Page Laubheimer, Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines).

1. 주 내비게이션을 보완하되 대체하지 않는다.
2. 방문 기록이 아니라 계층 구조를 보여준다.
3. 한 페이지가 여러 상위에 속하더라도 경로는 하나만 보여준다.
4. 현재 페이지를 마지막 항목으로 넣되 링크로 만들지 않는다.
5. 실제 페이지가 있는 항목만 링크한다. 페이지가 없는 논리적 분류는 링크하지 않는다.
6. 계층이 1~2단계인 평평한 사이트나 순서대로 읽는 사이트에는 넣지 않는다.
7. 첫 항목은 홈 링크로 시작한다.
8. 모바일에서는 여러 줄로 감기지 않게 하고, 탭 영역을 최소 1cm x 1cm로 유지하며, 필요하면 상위 한두 단계만 남긴 축약형을 쓴다.

브레드크럼은 사용자 테스트에서 문제를 일으킨 적이 없는 요소다. 닐슨은 2007년 조사에서 사용자가 이 작은 요소를 지나칠 수는 있어도 잘못 해석하거나 조작에 어려움을 겪은 적은 없었고, 그해 수상 인트라넷의 80%가 브레드크럼을 쓰고 있었다고 보고했다 (Nielsen, 위 인용).

정부 디자인 시스템 KRDS는 사용자의 목표가 계층 구조 안에서 위치를 파악하고 상위 수준으로 이동하는 것일 때 브레드크럼을 쓰라고 안내하고, 구조와 접근성, 마크업 가이드를 함께 제공한다 (KRDS, 브레드크럼 컴포넌트).

브레드크럼은 검색결과와 SEO에 어떤 영향을 주는가?

구글은 페이지의 브레드크럼 마크업을 읽어 검색결과에서 그 페이지의 정보를 분류하고, 결과 상단의 표시 URL 자리에 도메인과 함께 브레드크럼 경로를 보여준다. 검색결과의 표시 URL은 도메인과 탐색경로 트레일 두 요소로 구성된다 (Google 검색 센터, 시각 요소 갤러리).

즉 “example.com/products/laptop/gaming-x1” 대신 “example.com > 노트북 > 게이밍 노트북”이 검색결과에 찍힌다. 클릭 전에 페이지가 사이트 어디에 속하는지 읽히는 유일한 자리다.

이 표시를 얻는 방법은 BreadcrumbList 구조화 데이터다. 구글은 항목마다 position, name, item 세 속성을 요구하고, 트레일의 마지막 항목은 item URL을 생략할 수 있으며, 한 페이지에 여러 트레일을 넣을 수 있다고 안내한다 (Google 검색 센터, 탐색경로(BreadcrumbList) 구조화된 데이터).

구글 가이드라인은 URL 구조를 그대로 옮기는 대신 페이지에 이르는 일반적인 사용자 경로를 브레드크럼으로 표현하라고 권한다 (Google 검색 센터, 탐색경로 문서, 위 인용). 2026년 9월 14일 갱신본 기준이다.

순위 신호로서의 효과는 구글이 명시한 적이 없다.

확인된 효과는 둘이다. 검색결과의 표시 방식이 바뀌고(리치 스니펫의 한 형태), 모든 페이지에서 상위 카테고리로 가는 내부 링크가 생겨 크롤러가 계층을 읽기 쉬워진다.

브레드크럼은 어떻게 구현하는가?

화면에 보이는 마크업과 검색엔진이 읽는 구조화 데이터 두 층을 함께 넣는다. 보이는 쪽은 nav 요소 안의 순서 목록으로, 읽히는 쪽은 JSON-LD의 BreadcrumbList로 만든다.

W3C의 접근성 패턴은 브레드크럼을 현재 페이지의 상위 페이지 링크를 계층 순서로 늘어놓은 목록으로 정의하고, nav 랜드마크 안에 넣어 aria-label로 이름을 붙이고, 현재 페이지 링크에는 aria-current=“page”를 지정하라고 한다 (W3C WAI, Breadcrumb Pattern).

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/wiki/">GEO 위키</a></li>
    <li><a href="/wiki/breadcrumb/" aria-current="page">브레드크럼</a></li>
  </ol>
</nav>

구조화 데이터는 schema.org의 BreadcrumbList 타입을 쓴다. 링크된 웹페이지의 연쇄를 URL과 이름으로 기술하고 보통 현재 페이지로 끝나는 ItemList이며, position은 1부터 시작하는 정수다 (schema.org, BreadcrumbList).

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "홈", "item": "https://example.com/"},
    {"@type": "ListItem", "position": 2, "name": "GEO 위키", "item": "https://example.com/wiki/"},
    {"@type": "ListItem", "position": 3, "name": "브레드크럼"}
  ]
}

워드프레스라면 Yoast SEO나 Rank Math 같은 플러그인이 두 층을 함께 넣어 준다. 네이버 지식iN의 브레드크럼 질문에는 플러그인을 지운 뒤 남은 숏코드를 없애는 방법이 반복해 올라온다.

서치폴라리스 위키는 브레드크럼을 어떻게 넣었는가?

위키 문서마다 홈, GEO 위키, 문서 제목 3단계 브레드크럼을 화면과 구조화 데이터에 함께 넣는다. 2026년 9월 27일 /wiki/embedding/ 페이지를 curl로 실측한 결과는 다음과 같다.

층	실측 내용
화면 마크업	nav 요소, aria-label=“Breadcrumb”
구조화 데이터	BreadcrumbList 1개, ListItem 3개(position 1 Home, 2 GEO 위키, 3 임베딩)
마지막 항목	item URL 포함(현재 페이지 URL)

이 구조는 Astro 라우트가 문서마다 자동으로 주입한다. 원고에는 넣지 않으므로 98편 전부 같은 형식을 유지한다.

검색 수요도 함께 실측했다. 구글 키워드 플래너 기준 “브레드크럼”은 월 1,000회(12개월 720~1,300회), “breadcrumb”은 1,300회, “브레드크럼 뜻”은 40회다.

네이버 검색광고 기준 “브레드크럼”은 PC 130회, 모바일 50회다.

구글 자동완성은 “브레드크럼 ui”, “뜻”, “브레드크럼빙”, “예시”, “영어로”, “디자인”, “모바일 브레드크럼”, “워드프레스 브레드크럼” 순이다. 네이버 지식iN 61건 중 상위 10건은 “SEO에 좋은가” 질문 5건과 워드프레스 Rank Math 숏코드 삭제 질문 2건이었다.

브레드크럼에 대해 자주 묻는 질문은 무엇인가?

브레드크럼이 뭐야?

홈부터 현재 페이지까지의 상위 페이지를 한 줄 링크로 보여주는 보조 내비게이션이다. 사용자에게는 현재 위치를, 검색엔진에는 사이트 계층을 알린다.

브레드크럼빙이 무엇인가요?

브레드크럼과 무관한 연애 용어다. 관계를 이어갈 뜻은 없으면서 가끔 연락을 흘려 상대를 붙잡아 두는 행동을 빵 부스러기를 흘리는 데 비유한 말이다.

구글 자동완성과 관련 질문에 함께 뜨지만 이 문서의 브레드크럼과는 다른 뜻이다.

bread crumb은 무슨 뜻인가요?

영어로 빵 부스러기다. 웹에서는 헨젤과 그레텔이 길에 남긴 빵 부스러기처럼 돌아갈 길을 표시하는 내비게이션을 가리키고, 구글 문서는 이를 “탐색경로”로 번역한다.

모바일에서 브레드크럼은 어떻게 하나?

여러 줄로 감기지 않게 하고 탭 영역을 최소 1cm x 1cm로 유지하며, 필요하면 바로 위 단계만 남긴 축약형을 쓴다 (Nielsen Norman Group, Breadcrumbs 가이드라인, 위 인용). 구조화 데이터는 화면 표시와 무관하게 전체 경로를 넣는다.

참고 자료

• Wikipedia, Breadcrumb navigation
• 위키백과, 사이트 이동 경로
• MDN, Breadcrumb (브레드크럼) 용어 사전
• Jakob Nielsen, Nielsen Norman Group, Breadcrumb Navigation Increasingly Useful (2007-04-09)
• Page Laubheimer, Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines for Desktop and Mobile (2018-12-23)
• KRDS, 브레드크럼 컴포넌트
• Google 검색 센터, Google 검색의 시각 요소 갤러리
• Google 검색 센터, 탐색경로(BreadcrumbList) 구조화된 데이터 (2026-09-14 갱신)
• W3C WAI, ARIA Authoring Practices Guide: Breadcrumb Pattern
• schema.org, BreadcrumbList