Breadcrumb
Breadcrumb (브레드크럼)
브레드크럼은 복잡한 사이트나 앱의 계층 구조를 이해하고 이동하는 데 도움을 주는 컴포넌트예요. 보통 링크인 장소 이름을 최소 두 개 이상, 구분자(divider)로 나눠서 보여줘요.
출처: 문서
본문
브레드크럼은 사람들이 복잡한 사이트나 앱의 계층 구조를 이해하고 이동하도록 돕는 컴포넌트예요. 보통 링크인 장소 이름을 최소 두 개 이상 나열하고 구분자로 나눠요.
브레드크럼은 보조 내비게이션(secondary navigation)이에요. 현재 위치를 파악하고 더 높은 계층으로 빠르게 이동할 수 있게 해 주죠. 다만 브레드크럼만 단독으로 쓰면 안 돼요. 상단 내비게이션이나 사이드바 내비게이션 같은 다른 내비게이션 요소와 항상 함께 조합해서 사용하세요.
Behavior (동작)
브레드크럼 너비와 넘침
브레드크럼의 너비를 정할 때는 레이아웃에 확보할 수 있는 공간을 염두에 두세요. 브레드크럼은 절대 줄바꿈(wrap)되지 않지만, 제약이 없다면 가로로 스크롤될 수 있어요.
브레드크럼은 전체 표면 너비의 30%~50% 사이로 유지하는 것이 안전해요. 이렇게 하면 브레드크럼에서 맥락을 파악할 충분한 공간을 확보하면서도, 400% 줌까지 수용할 수 있죠.
어떤 경우에는 브레드크럼이 컨테이너 전체 너비를 차지할 수도 있어요. 이 동작은 드로어(drawer) 같은 보조 콘텐츠 표면을 위해 아껴 두세요. 브레드크럼 너비는 최대한 판단해서 정하되, 한 경험 안에서 일관되게 유지하세요.
최대 너비를 초과하면 브레드크럼은 두 번째 항목부터 넘침(overflow) 메뉴로 접혀요. 이렇게 하면 위쪽으로 이동하기 쉬워지고, 사람들이 현재 맥락을 유지하는 데 도움이 돼요. 첫 번째와 마지막 항목은 항상 보입니다.
최상의 경험을 위해, 호버할 때 툴팁을 제공해서 메뉴를 열지 않고도 넘침 항목이 무엇인지 알려주세요. 호버하거나 포커스할 때 넘침 트리거 위에 툴팁을 보여주고, 선택하면 넘침 메뉴가 나타나요.
넘침 메뉴에 항목이 많다면 아주 긴 툴팁으로 각 브레드크럼 항목을 나열하는 대신, 항목이 몇 개인지 알려주는 툴팁을 고려해 보세요.
비활성 항목(Disabled items)
연결된 상륙(langing) 페이지가 없는 계층 단계, 예를 들어 카테고리나 최상위 메뉴 항목을 나타낼 때는 비활성 브레드크럼 항목을 사용해요.
브레드크럼이 앱의 계층 구조를 한눈에 파악하게 돕는 것을 기억하세요. 모든 사람에게 공평한 경험을 만들려면, 비활성 브레드크럼 항목이 disabledFocusable prop을 true로 설정해 포커스 가능하게 하고, 화면 읽기 프로그램이 전체 계층을 알 수 있도록 aria-label을 갖추세요.
브레드크럼 항목 줄임(Truncating)
기본적으로 상호작용 가능한 브레드크럼 항목은 이름이 공백 포함 30자를 넘으면 줄여져요. 전체 브레드크럼 항목 이름을 보여주는 툴팁을 추가하세요. 툴팁 자체에도 공백 포함 80자라는 기본 제한이 있고, 그 이후로는 줄여져요.
각각에 다른 최대 문자 수를 설정할 수 있지만, 어떤 형태로든 길이 제한을 두는 것을 권장해요. 줄임은 모든 단계의 항목 이름에 적용돼요.
호버하거나 포커스할 때 줄임 처리된 브레드크럼 항목에 전체 링크 이름을 보여주는 툴팁도 꼭 제공하세요.
비상호작용 파일 경로(Non-interactive file paths)
맥락은 주지만 이동은 하지 않는 파일 경로를 전달해야 한다면, 비상호작용 파일 경로 패턴(non-interactive file path pattern)에 따른 텍스트 문자열을 사용하세요.
비상호작용 파일 경로는 순수하게 정보 제공용인 텍스트 전용 변형이에요. 사람들이 이동할 수 없거나 현재 맥락을 떠나고 싶지 않은 작업 흐름 안의 파일 경로에 가장 적합해요.
구분자는 쉐브론(chevron)이나 슬래시(forward-slash) 중 하나를 쓸 수 있어요. 구분자 양쪽에 공백을 넣어 공백 없는 일반적인 파일 경로와 구분되게 하세요.
Layout (레이아웃)
구분자는 브레드크럼 항목 사이에 시각적 경계를 만들어요. 현재 항목(Current item)은 현재 위치를 시각적으로 나타내요. 구분자(Dividers)는 각 브레드크럼 항목 사이에 놓이며, 상호작용하지 않고 포커스를 받지 않으며 보조 기술(assistive technology)이 무시해요.
Accessibility (접근성)
대부분의 aria 라벨은 브레드크럼을 구성하는 링크에 내장되어 있어요. 다만 현재 페이지는 비상호작용이라서, 브레드크럼의 마지막 항목에 aria-current=Pagename을 추가해야 해요.
<nav> 랜드마크 사용
브레드크럼을 랜드마크로 페이지를 탐색하는 사용자가 접근할 수 있게 하려면, 마크업을 <nav> 요소로 감싸세요. 그리고 이 랜드마크에 라벨을 붙이려면 aria-label을 사용하세요. 경험에 따라 개발자가 여기서 aria-label을 지정해 줄 수도 있어요.
키보드 포커스는 컨테이너 안의 첫 번째 상호작용 요소로 이동해요. 경험에 따라 브레드크럼 항목을 탐색할 때 화살표 키나 탭(Tab) 키를 사용할 수 있어요.
<ol>을 사용해 계층 표시
링크 집합을 계층 구조로 만들려면 순서 목록(ordered list) 태그를 사용하세요. 선택된 링크(선택된 페이지)인 마지막 링크에 aria-current를 추가하세요.
리플로(Reflow)
400% 줌과 작은 뷰포트에서는 흔적(trail)을 줄여 마지막 단계만 보여주세요.
Content (콘텐츠)
짧게 유지하기
기본적으로 브레드크럼 항목은 80자 뒤에 줄여지므로, 각 이름이 짧고 구체적이며 한눈에 훑을 수 있고 읽기 쉽게 만드세요. 항목이 줄여지면 항상 이름을 툴팁으로 보여주세요. 브레드크럼의 첫 번째 항목은 항상 홈 페이지나 루트 폴더이고, 마지막 항목은 현재 위치예요.
이상적으로 각 브레드크럼 항목은 페이지 제목과 정확히 일치해야 해요. 다만 반복이나 줄임을 피하기 위해 이름을 줄이는 것은 괜찮아요. 단, 여전히 이해하기 쉬워야 해요. 줄인 이름은 승인된 기능명이나 제품명만 사용하고 명확하고 구체적으로 유지하세요.
계층을 보여주지, 이력을 보여주지 마세요
사이트의 계층 구조를 보여주고, 특정 세션에서 거쳐 온 페이지 이력(history)은 보여주지 마세요. 이력은 세션마다 달라질 수 있기 때문이에요. 같은 페이지로 가는 방법이 여러 가지라면, 브레드크럼에서는 가장 명확하고 흔한 경로를 보여주세요. 세션 이력을 추적하는 데 브레드크럼을 사용하지 마세요.