Breadcrumb 및 Wayfinding System
목적
Breadcrumb 및 Wayfinding System은 메인 콘텐츠 위에 위치하는 보조 네비게이션 경로를 설계하는 방법론을 제공합니다. 이 시스템은 홈 페이지 또는 루트 디렉토리 기준의 명확한 선형 맵을 통해 사용자가 깊은 정보 구조(IA)에서 길을 잃지 않도록 합니다. 탐색 정밀성과 시각적 최소성을 균형 있게 유지하여 사용자가 현재 컨텍스트를 이해하고 한 번의 클릭으로 상위 계층으로 돌아갈 수 있도록 합니다.
사용 사례
- 전자상거래: Category > Sub-category > Product 네비게이션.
- 문서 및 위키: Volume > Chapter > Section > Page 이동.
- SaaS 대시보드: Account > Project > Asset 같은 중첩 엔티티 관리.
- 디렉토리 사이트: Location > Category > Listing 탐색.
- 검색 결과: 검색 결과에서 특정 항목에 이르는 경로 표시.
사용하지 말아야 할 경우
- 플랫 아키텍처: 사이트가 1-2 레벨(Home > Page)에 불과한 경우, 빵부스러기는 불필요한 복잡성을 추가합니다.
- 선형 진행형: 단계별 마법사나 체크아웃 흐름에는
step-progress-system을 사용하세요. - 동적/비계층적 경로: 사용자 경로가 고정 구조가 아닌 세션 기록(예: "검색 결과로 돌아가기")에 기반한 경우, "뒤로 가기" 버튼을 사용하세요.
- 랜딩 페이지: 단일 전환을 목표로 하고 네비게이션이 주요 CTA에서 주의를 분산시키는 페이지.
입력
- 정보 구조(IA): 사이트의 계층적 맵.
- 현재 노드: 사용자가 현재 보고 있는 특정 페이지.
- 부모 계층: 현재 페이지에서 루트까지의 조상 체인.
- 디스플레이 제약: 사용 가능한 수평 너비(
responsive-grid-system에서 제공).
출력
- 길찾기 청사진: 레이블, 구분자, 링크에 대한 정의된 구조.
- 생략 전략: 작은 화면 또는 오버플로 시나리오에서 긴 경로를 처리하기 위한 규칙.
- 반응형 매핑: 모바일 뷰포트에서 경로가 축소되거나 변환되는 방식.
- 의미론적 접근성 계층: 스크린 리더를 위한 정의된 ARIA 역할 및 레이블.
워크플로
1. 계층 경로 매핑
홈/루트에서 현재 페이지까지의 절대 경로를 결정합니다.
예: Home > Resources > Whitepapers > [현재 페이지 제목]
2. 시각적 구조 정의
각 구성 요소의 스타일을 설정합니다.
- 링크: 표준 링크 스타일(
interactive-state-system에서 제공). - 구분자: 레벨을 시각적으로 구분하는 비대화형 기호(예:
/,>, 또는→). - 현재 페이지: 클릭할 수 없는 일반 텍스트 레이블로 사용자의 위치를 확인합니다.
3. 공간 리듬 설정
fluid-spacing-system 적용:
- 간격: 링크와 구분자 사이에 작고 일관된 간격(예:
--space-xs)을 사용합니다. - 수직 배치: 경로를 메인
<h1>상단, 하지만 글로벌 사이트 헤더 아래에 일관되게 배치합니다.
4. 생략 및 오버플로 구현
깊은 경로(4레벨 이상) 또는 긴 제목의 경우:
- 중간 생략: 전체 너비가 컨테이너를 초과하면 중간 레벨을 줄임표(
...)로 축소합니다(예:Home > ... > Section > Page). - 레이블 생략: 개별 긴 레이블에 대해
max-width및text-overflow: ellipsis를 사용하여 줄바꿈을 방지합니다.
5. 반응형 적응 계획
모바일 환경 매핑:
- "부모로 돌아가기" 패턴: 매우 작은 화면에서는 전체 경로를 단일 "<- Back to [Parent]" 링크로 대체하여 공간을 절약합니다.
- 수평 스크롤: 전체 경로를 보존해야 하는 경우 빵부스러기 목록이 수평으로 스크롤될 수 있도록 합니다.
결정 규칙
- "항상 루트" 규칙: 경로의 첫 번째 항목은 항상 기능적 루트(보통 "Home")여야 합니다.
- 현재 페이지 상태: 빵부스러기의 마지막 항목(현재 페이지)은 링크가 아니어야 합니다. 이는 사용자가 이미 있는 페이지의 링크를 클릭하는 것을 방지합니다.
- 논리 vs 기록: 빵부스러기는 사용자의 브라우저 기록이 아닌 사이트 구조를 반영해야 합니다.
- 구분자 가시성: 구분자는 링크보다 시각적 가중치가 낮아야(예: 흐릿한 색상) 하여 주의를 분산시키지 않아야 합니다.
제약 조건
- 접근성:
<nav>요소로 감싸고aria-label="Breadcrumb"속성을 포함해야 하며, 스크린 리더가 위치와 총 개수를 알 수 있도록 순서가 있는 목록(<ol>)을 포함해야 합니다. - 대비: 링크와 구분자는 WCAG AA(4.5:1) 요구 사항을 충족해야 합니다.
- 터치 대상: 빵부스러기 링크는 가시 텍스트가 작더라도 WCAG 2.2 SC 2.5.8 최소 24x24px를 충족해야 합니다.
- 길이: 빵부스러기 레이블은 페이지 제목과 정확히 일치해야 하거나(또는 제목이 지나치게 긴 경우 짧은 버전 사용).
일반적인 실패 패턴
- "홈 분실": 홈/루트 링크를 포함하지 않아 사용자가 메인 메뉴를 통해 다시 시작해야 함.
- 링크 중복: 현재 페이지를 클릭 가능한 링크로 만들어 동일한 페이지를 다시 로드하며 사용자를 혼란시킴.
- 시각적 경쟁: 너무 크거나 대비가 높은 구분자를 사용하여 경로를 읽기 어렵게 만듦.
- 줄바꿈 오류: 모바일에서 빵부스러기가 3줄 이상으로 줄바꿈되어 메인 콘텐츠를 아래로 밀어냄.
- 불일치 IA: 사용자가 페이지에 도달한 방식에 따라 동일한 페이지에 대해 다른 경로를 표시.
검증 기준
- 경로가 Home/Root 노드로 시작.
- 현재 페이지는 마지막 항목이며 클릭할 수 없음.
- 빵부스러기가
<nav aria-label="Breadcrumb">랜드마크로 감싸져 있고<ol>목록 포함. - 시각적 구분자가 사용되고 링크보다 낮은 대비를 가짐.
- 경로가 모바일 뷰포트에 적절히 적응(생략 또는 "뒤로 가기" 링크).
- 항목 간 간격이 일관되고 유체 간격 시스템을 따름.
- 키보드 사용자가 중간 링크를
Tab으로 이동할 수 있음.