Breadcrumb

Breadcrumb (브레드크럼)

브레드크럼은 사용자가 레벨 간의 위계를 이해하고 이전 단계로 다시 돌아갈 수 있게 도와주는 보조 내비게이션 패턴이에요. 현재 위치가 정보 구조(IA)에서 어디인지 보여주고, 상위 레벨이나 이전 단계로 빠르게 이동할 수 있게 해줍니다.

출처: Breadcrumb

본문

개요 (Overview)

브레드크럼은 사용자에게 정보 구조상의 현재 위치를 보여주고, 상위 레벨이나 이전 단계로 빠르게 이동할 수 있게 해줘요.

언제 사용할까요 (When to use)

브레드크럼은 2단계 이상의 위계로 구성된 콘텐츠가 많은 제품·경험에서 효과적이에요. 공간을 거의 차지하지 않으면서도 사용자가 내비게이션 위계에서 어디에 있는지에 대한 컨텍스트를 제공하죠.

언제 사용하지 말아야 할까요 (When not to use)

브레드크럼은 항상 보조(secondary)로 취급되며, 기본 내비게이션(primary navigation)을 완전히 대체해서는 안 돼요. 단일 레벨 내비게이션을 가진 제품에는 불필요한 군더더기를 만들기 때문에 사용하지 말아야 해요.

사용자를 다단계 프로세스로 안내한다면 프로그레스 인디케이터(progress indicator)를 대신 사용하세요.

유형 (Types)

Carbon은 두 가지 유형의 브레드크럼을 지원해요. 두 유형 모두 동일하게 스타일링되지만, 브레드크럼 트레일(trail)을 채우는 방식이 달라요. 사용하는 브레드크럼 유형은 제품 전체에서 일관되어야 합니다.

포맷 (Formatting)

구조 (Anatomy)

• 페이지 링크(Page link): 사용자를 상위 레벨 페이지로 안내해요.
• 구분 기호(Separator): 각 페이지를 명확히 구분해줘요.

크기 (Sizing)

브레드크럼에는 작은(small) 크기와 중간(medium) 크기 두 가지가 있어요. 작은 브레드크럼은 $label-01 타입 토큰을, 중간 브레드크럼은 $body-compact-01 타입 토큰을 사용합니다.

브레드크럼의 작은 크기와 중간 크기

작은 크기 (Small size)

작은 브레드크럼은 페이지 헤더에서 주로 사용돼요. 축소된 공간이나 더 작은 브레이크포인트에서도 쓸 수 있습니다. 균형 잡힌 콘텐츠 위계를 만들고자 할 때, 짝을 이루는 더 작은 브레드크럼이 필요하다면 작은 브레드크럼을 선택해도 좋아요.

작은 브레드크럼 사용 예시

중간 크기 (Medium size)

중간 브레드크럼은 페이지 헤더가 없을 때 주로 사용되며, 페이지 상단에 배치돼요. 브레드크럼의 기본 크기는 중간 크기입니다.

중간 기본 브레드크럼 사용 예시

배치 (Placement)

브레드크럼은 페이지의 왼쪽 상단에 배치돼요. 헤더와 내비게이션 아래, 페이지 제목 위에 자리합니다.

콘텐츠 (Content)

주요 요소 (Main elements)

페이지 링크 (Page link)

• 각 페이지 링크는 짧고, 링크되는 위치나 대상(엔티티)을 명확히 반영해야 해요.
• 가장 높은 레벨의 상위 페이지에서 시작해서 브레드크럼 트레일이 진행될수록 정보 구조의 더 깊은 곳으로 이동해요.
• 기본적으로 현재 페이지는 브레드크럼 트레일에 포함되지 않아요. 다만 페이지에 제목이 없거나 현재 페이지가 명확하지 않다면, 제품 사용 사례에 더 적합할 때 현재 페이지를 트레일에 포함할 수 있습니다. 현재 페이지가 트레일에 포함되면 항상 마지막 텍스트로 표시되며, 인터랙티브 링크가 아닙니다.

넘침 콘텐츠 (Overflow content)

공간이 부족해지면 오버플로우 메뉴(overflow menu)를 사용해 브레드크럼을 잘라내세요. 처음과 마지막 페이지 링크 두 개는 표시하고, 그 사이 나머지 브레드크럼은 오버플로우 메뉴로 접어야 해요. 브레드크럼은 두 번째 줄로 넘어가면 안 됩니다.

잘라내기 (Truncation)

더 큰 브레이크포인트의 대부분 사용 사례에서는, 오버플로우가 있을 때도 첫 번째 홈 브레드크럼 링크를 최대한 오래 유지하세요. 모바일이나 작은 뷰포트에서는 오버플로우를 먼저 두고, 그다음 브레드크럼 하나를 배치하는 방식으로 시작하세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

인터랙션 (Interactions)

브레드크럼 컴포넌트의 모든 페이지는 (현재 페이지를 제외하고) 인터랙티브여야 하며 각각의 페이지로 연결되어야 해요.

마우스 (Mouse)

사용자는 브레드크럼 페이지 링크를 클릭해 항목을 실행할 수 있어요. 페이지 링크 사이의 구분 기호는 인터랙티브하지 않습니다.

키보드 (Keyboard)

사용자는 Tab과 Shift-Tab을 눌러 브레드크럼 링크 사이를 이동할 수 있어요. 링크에 포커스가 있는 동안 Enter를 누르면 링크를 실행할 수 있습니다. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

수정자 (Modifiers)

기본적으로 Carbon 브레드크럼 트레일에는 현재 페이지가 포함되지 않아요. 페이지에 제목이 없거나 현재 페이지가 명확하지 않다면 트레일에 포함할 수 있습니다. 현재 페이지가 트레일에 포함되면 항상 마지막 텍스트로 표시되며 인터랙티브 링크가 아닙니다.

관련 컴포넌트 (Related)

• Global header
• Progress indicator
• UI shell header
• Overflow menu

더 알아보기 (Learn more)

브레드크럼은 위계가 깊은 제품에서 사용자의 위치 맥락을 제공하는 가벼운 보조 내비게이션이에요. 위치 기반 또는 경로 기반 유형을 제품 전체에 걸쳐 일관되게 사용하고, 공간이 부족할 때는 오버플로우 메뉴로 잘라내면 깔끔하게 유지할 수 있어요. 기본 내비게이션을 대체하지 않도록 주의하세요.