브레드크럼Breadcrumb

헨젤과 그레텔이 돌아갈 길에 뿌린 빵 부스러기에서 온 이름입니다. 깊은 페이지에 검색으로 바로 들어온 사람에게 "여기가 어디의 어디인지"를 알려 주고, 한 번에 위로 올라갈 길을 줍니다. 지금 보고 있는 이 페이지 위에도 있습니다.

언제 쓰나요

계층이 3단 이상인 사이트에 씁니다. 쇼핑몰(홈 › 카테고리 › 상품), 문서(홈 › 가이드 › 항목), 강의(홈 › 코스 › 레슨). 한두 단이면 필요 없고, 상단 내비게이션과 같은 내용이면 중복입니다.

마지막 조각은 현재 페이지라 링크를 걸지 않습니다. 모바일에서 길어지면 중간을 …으로 접거나 바로 위 한 단만 "‹ 가이드"처럼 보여 줍니다. 검색엔진도 이 경로를 읽으니 BreadcrumbList 구조화 데이터를 같이 넣으면 검색결과에 경로가 표시됩니다.

AI에게 시키기

강의 레슨 페이지 상단에 브레드크럼을 넣어줘.
- 홈 › 코스 이름 › 레슨 제목. 마지막(현재 페이지)은 링크 없이 진하게
- 구분자는 › 문자, nav[aria-label="현재 위치"] + ol/li 마크업
- 모바일(640px 이하)에서는 바로 위 단계만 "‹ 코스 이름" 으로 축약
- schema.org BreadcrumbList JSON-LD 도 같은 순서로 출력

"경로 표시해줘"라고 하면 텍스트만 나열합니다. 마지막 조각 처리·모바일 축약·구조화 데이터를 적어야 합니다.

혼동 주의

• 스텝: 한 작업 안의 순서(1 → 2 → 3)입니다. 브레드크럼은 사이트 구조 안의 위치입니다.
• 내비게이션 바: 사이트의 주요 영역 목록입니다. 브레드크럼은 지금 있는 자리로 내려온 경로입니다.
• 뒤로 가기 링크("← 목록으로"): 한 단계만 돌아갑니다. 브레드크럼은 어느 단계로든 바로 갑니다. 얕은 구조에서는 뒤로 가기 하나로 충분합니다.
• 페이지네이션: 같은 목록 안에서 앞뒤 페이지를 오갑니다. 계층 이동이 아닙니다.