Breadcrumb(브레드크럼)이란? 대형 사이트에서 더 중요해지는 이유와 만드는 법

Breadcrumb(브레드크럼)은 "홈 > 가전 > 노트북 > 게이밍"처럼 지금 보고 있는 페이지가 사이트의 어디쯤에 있는지 보여 주는 경로 표시예요. 페이지가 적은 사이트에서는 없어도 괜찮지만, 단계가 깊고 페이지가 많은 대형 사이트일수록 길을 잃기 쉬워서 브레드크럼의 역할이 커져요. 검색이나 광고로 중간 페이지에 바로 들어온 사람에게는 사실상 유일한 지도가 되기도 해요.

작은 사이트를 만들 때는 브레드크럼을 빼도 아무도 모르는데, 쇼핑몰이나 기관 사이트를 작업하면 "브레드크럼 꼭 넣어 주세요"라는 요청이 꼭 나와요. 왜 규모가 커질수록 중요해지는지 정리해 봤어요.

---

Breadcrumb이란?

브레드크럼은 현재 페이지까지 이어지는 상위 단계들을 한 줄로 보여 주는 보조 내비게이션이에요. 보통 본문 제목 바로 위에 작게 놓여요.

홈 > 가전 > 노트북 > 게이밍 노트북

이름은 동화 「헨젤과 그레텔」에서 왔어요. 숲에서 길을 잃지 않으려고 빵 부스러기(breadcrumb)를 떨어뜨려 지나온 길을 표시한 장면이요. 웹에서는 지나온 길보다 사이트 구조 안의 위치를 보여 주는 쪽으로 더 많이 써요.

브레드크럼은 몇 가지 종류가 있나요?

크게 세 가지예요.

구분	보여 주는 것	예
위치형	사이트 구조 안의 위치	홈 > 고객지원 > 자주 묻는 질문
속성형	고른 조건(필터)	노트북 > 16인치 > 32GB
경로형	사용자가 거쳐 온 페이지 순서	방금 본 페이지 기록

대부분의 사이트는 위치형을 써요. 경로형은 뒤로 가기 버튼과 역할이 겹쳐서 요즘은 거의 쓰지 않아요.

---

대형 사이트에서 브레드크럼이 더 중요한 이유는?

사용자가 메인으로 들어오지 않아요

작은 사이트는 보통 메인 페이지에서 시작해서 메뉴를 타고 들어가요. 대형 사이트는 달라요. 검색 결과, 광고, 공유 링크로 깊숙한 페이지에 바로 떨어지는 경우가 훨씬 많아요.

예를 들어 "게이밍 노트북 추천"을 검색해서 상품 목록 페이지에 들어왔다고 해 볼게요. 이 사람은 이 쇼핑몰의 메뉴를 한 번도 타 본 적이 없어요. 이때 제목 위의 "홈 > 가전 > 노트북 > 게이밍 노트북" 한 줄이 "여긴 노트북 코너 안이고, 위로 가면 다른 노트북도 있다"는 걸 알려 줘요.

단계가 깊을수록 길을 잃어요

GNB는 사이트의 첫 단계(1depth)만 보여 줘요. 3단계, 4단계로 내려가면 지금 내가 어디쯤인지 GNB만으로는 알 수 없어요. 브레드크럼은 지나온 모든 단계를 한 줄에 보여 주니까, 깊이 들어갈수록 쓸모가 커져요.

한 단계 위로 올라가는 길이 돼요

상품 하나를 보다가 "다른 노트북도 볼까?" 싶을 때, 뒤로 가기를 여러 번 누르는 대신 브레드크럼의 "노트북"을 누르면 돼요. 특히 검색으로 들어와서 뒤로 가기를 누르면 검색 결과로 돌아가 버리는 경우에 사이트 안에 머물게 해 주는 길이 돼요.

검색 결과에도 쓰여요

구글은 페이지의 브레드크럼 정보를 검색 결과의 주소 자리에 보여 줄 수 있어요. 2025년 1월부터 모바일 검색 결과에서는 도메인만 보이도록 바뀌었지만, 데스크톱 검색 결과에서는 여전히 경로가 보여요. 검색엔진에 이 정보를 정확히 알려 주려면 구조화 데이터(BreadcrumbList)를 함께 넣어요.

---

브레드크럼은 어떻게 만드나요?

HTML은 이렇게 써요

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/appliances">가전</a></li>
    <li><a href="/appliances/laptop">노트북</a></li>
    <li aria-current="page">게이밍 노트북</li>
  </ol>
</nav>

• nav에 aria-label을 붙여서 스크린 리더가 "브레드크럼 내비게이션"으로 알아듣게 해요.
• 순서가 있는 목록이라 ol을 써요.
• 마지막 항목은 지금 페이지라서 링크를 걸지 않고 aria-current="page"를 붙여요.
• > 같은 구분 기호는 글자로 넣지 말고 CSS로 그려요. 그래야 스크린 리더가 "보다 큼"이라고 읽지 않아요.

구조화 데이터는 이렇게 넣어요

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "가전", "item": "https://example.com/appliances" },
    { "@type": "ListItem", "position": 2, "name": "노트북", "item": "https://example.com/appliances/laptop" },
    { "@type": "ListItem", "position": 3, "name": "게이밍 노트북" }
  ]
}
</script>

마지막 항목(지금 페이지)은 item 주소를 빼도 돼요. 화면에 보이는 브레드크럼과 내용이 같아야 해요.

---

브레드크럼을 만들 때 자주 하는 실수는?

실수	왜 문제인가요?	이렇게 고쳐요
브레드크럼만 두고 메뉴를 줄임	브레드크럼은 위로만 가는 길이라 옆 섹션으로 못 가요	GNB·LNB는 그대로 두고 보조로 써요
마지막 항목에도 링크	지금 페이지로 또 이동하는 헛클릭이 생겨요	마지막은 글자만, aria-current
메뉴 이름과 다른 이름	"고객센터"와 "고객지원"이 섞이면 같은 곳인지 헷갈려요	GNB, 페이지 제목과 이름을 맞춰요
너무 작은 글씨와 터치 영역	모바일에서 누르기 어려워요	글씨는 작아도 터치 영역은 넉넉하게
2단계짜리 사이트에도 넣음	"홈 > 소개"처럼 정보가 없어요	단계가 3개 이상일 때부터 넣어요

모바일에서는 어떻게 하나요?

모바일 화면에서는 경로가 길면 두세 줄로 넘어가요. 그럴 땐 바로 위 단계 하나만 "‹ 노트북"처럼 보여 주거나, 가로로 스크롤되게 한 줄로 두는 방법을 많이 써요. 저는 중간 단계를 줄이기보다 바로 위 단계로 가는 링크를 남기는 쪽을 먼저 골라요. 모바일에서 가장 많이 쓰는 동작이 "한 단계 위로"거든요.

---

자주 묻는 질문

---

정리