이전 페이지와 상위 분류는 다릅니다: 경로 안내를 고르는 기준

검색으로 왔어도 경로 안내가 검색이 되는 것은 아닙니다

검색 결과를 눌러 상품에 들어왔다고 페이지의 상위 분류가 검색 결과인 것은 아닙니다. 경로 안내는 보통 사이트 안에서 현재 항목이 놓인 계층을 보여주고, 뒤로 가기는 실제 방문 기록을 따라갑니다. 두 정보를 같은 줄에서 바꾸어 표시하면 직접 주소로 들어온 사람에게는 경로가 사라지거나 의미가 달라질 수 있습니다.

예제 상품은 수납용품 안의 파우치로 분류했습니다. 검색과 뉴스레터 두 경로로 진입해도 “홈 → 수납용품 → 파우치 → 현재 상품”은 같습니다. 어디서 왔는지는 별도 문맥으로 표시합니다.

여러 분류에 속할 때는 보여줄 기준을 정합니다

상품이 여러 모음에 있을 수는 있습니다. 화면의 기본 분류를 정하거나 기획전 문맥에 맞는 경로를 제공할 수 있지만, 방문자가 현재 무엇을 보고 있는지 설명하는 기준이 필요합니다. 무작위로 마지막 클릭의 페이지를 상위 분류로 바꾸지는 않습니다.

Google의 breadcrumb 안내는 한 페이지에 복수 경로를 표현하는 구조도 설명합니다. 검색용 데이터와 화면에 보여줄 문서 관계를 함께 검토할 수 있지만, 경로를 여러 개 넣었다는 사실이 특정 검색 표시를 보장하는 것은 아닙니다.

목록과 현재 항목의 역할을 남깁니다

<nav aria-label="현재 위치">
  <ol>
    <li><a href="/">홈</a></li>
    <li><a href="/storage/">수납용품</a></li>
    <li><a href="/storage/pouches/">파우치</a></li>
    <li><span>캔버스 파우치</span></li>
  </ol>
</nav>

코드의 분류 주소는 구조를 설명하는 예입니다. 실제 사이트의 존재하는 분류와 연결해야 합니다. W3C APG는 경로를 이름 있는 navigation 영역에 두고, 현재 페이지가 링크라면 aria-current=page로 표시하는 관계를 설명합니다. 현재 항목을 링크가 아닌 텍스트로 표시할 수도 있습니다.

구분 화살표는 분류 이름의 일부가 아닙니다. CSS 장식으로 두거나 보조기술에 불필요하게 반복되지 않도록 처리하고, 목록의 읽기 순서를 유지합니다. 시각적으로 작은 메뉴라고만 보고 일반 텍스트 조각으로 흩어 놓지 않습니다.

이전 결과로 돌아갈 길은 별도 이름으로 둡니다

필터를 고른 목록에서 왔다면 “검색 결과로 돌아가기” 같은 경로를 별도로 제공할 수 있습니다. 돌아갔을 때 같은 필터와 페이지가 남는지도 설계해야 합니다. 단순히 브라우저의 이전 기록이 있다는 이유로 항상 사이트 안의 결과가 나올 것이라고 추정하지 않습니다.

뒤로 가기를 경로 안내의 첫 링크에 넣으면 홈과 이전 화면의 역할이 섞입니다. 계층으로 이동하는 링크, 현재 목록의 조건으로 돌아가는 링크, 브라우저 기록을 이동하는 행동을 구별하면 직접 진입과 외부 유입에서도 이름이 일관됩니다.

분류를 고치면 화면·연결·검색용 데이터가 같이 바뀝니다

파우치를 다른 상위 분류로 옮겼다면 경로의 이름만 고치지 말고 실제 목록 주소와 현재 상품의 소속을 대조합니다. 한쪽은 이전 경로, 다른 쪽은 새 분류를 설명하면 독자가 어느 쪽을 따라가야 할지 모호합니다. 첫 방문자의 현재 위치 안내와 연결해 읽을 수 있습니다.

검사할 때는 홈에서 따라 들어오는 경로와 상품 주소로 직접 들어오는 경로를 각각 열어 보세요. 어느 진입에서도 경로 이름이 현재 문서의 계층을 설명하고, 실제로 존재하는 상위 목록으로 이동해야 합니다.

예제를 직접 열어 보기

이 글의 화면 예제와 소스 받기 ZIP. 압축을 푼 뒤 index.html을 브라우저에서 열 수 있습니다. 예제의 입력과 표시 범위는 각 화면의 안내를 기준으로 확인하세요.

참고한 원문

• W3C APG: Breadcrumb Pattern
• Google Search: Breadcrumb