탐색경로 구성요소 빌드

사용자가 사이트를 탐색할 수 있도록 반응형이고 접근 가능한 탐색 경로 구성요소를 빌드하는 방법에 관한 기본 개요입니다.

Adam Argyle

이 게시물에서는 탐색 경로 구성요소를 빌드하는 방법에 대한 생각을 공유하고자 합니다. 데모 사용해 보기

데모

동영상을 선호하는 경우 이 게시물의 YouTube 버전을 확인하세요.

개요

탐색경로 구성요소는 사이트 계층 구조에서 사용자의 위치를 보여줍니다. 이름은 어두운 숲에 탐색경로를 떨어뜨리고 탐색경로를 거슬러 집으로 돌아갈 수 있었던 헨젤과 그레텔에서 따왔습니다.

이 게시물의 탐색 경로는 표준 탐색 경로가 아니라 탐색 경로와 유사합니다. <select>를 사용하여 탐색에 형제 페이지를 바로 배치하여 다단계 액세스를 가능하게 함으로써 추가 기능을 제공합니다.

백그라운드 UX

위의 구성요소 데모 동영상에서 자리표시자 카테고리는 비디오 게임 장르입니다. 이 트레일은 아래와 같이 home » rpg » indie » on sale 경로를 탐색하여 생성됩니다.

이 탐색 경로 구성요소를 사용하면 사용자가 이 정보 계층 구조를 이동하여 속도와 정확성을 가지고 브랜치를 건너뛰고 페이지를 선택할 수 있어야 합니다.

정보 아키텍처

컬렉션과 항목을 기준으로 생각하는 것이 도움이 됩니다.

컬렉션

컬렉션은 선택할 수 있는 옵션의 배열입니다. 이 게시물의 탐색 경로 프로토타입 홈페이지에서 컬렉션은 FPS, RPG, 격투 게임, 던전 크롤러, 스포츠, 퍼즐입니다.

항목

비디오 게임은 항목이며, 특정 컬렉션이 다른 컬렉션을 나타내는 경우에도 항목이 될 수 있습니다. 예를 들어 RPG는 항목이자 유효한 컬렉션입니다. 상품인 경우 사용자는 해당 컬렉션 페이지에 있습니다. 예를 들어 AAA, 인디, 자체 게시와 같은 추가 하위 카테고리가 포함된 RPG 게임 목록이 표시되는 RPG 페이지에 있습니다.

컴퓨터 과학 용어로 이 탐색 경로 구성요소는 다차원 배열을 나타냅니다.

const rawBreadcrumbData = {
  "FPS": {...},
  "RPG": {
    "AAA": {...},
    "indie": {
      "new": {...},
      "on sale": {...},
      "under 5": {...},
    },
    "self published": {...},
  },
  "brawler": {...},
  "dungeon crawler": {...},
  "sports": {...},
  "puzzle": {...},
}

앱이나 웹사이트에는 맞춤 정보 아키텍처 (IA)가 있어 다차원 배열이 다를 수 있지만, 컬렉션 방문 페이지와 계층 구조 탐색 개념이 탐색 경로에도 적용될 수 있기를 바랍니다.

레이아웃

마크업

적절한 HTML로 시작하는 것이 좋은 구성요소입니다. 다음 섹션에서는 마크업 선택사항과 이것이 전체 구성요소에 미치는 영향을 다룹니다.

어두운 모드와 밝은 모드

<meta name="color-scheme" content="dark light">

위 스니펫의 color-scheme 메타 태그는 이 페이지가 밝은 브라우저 스타일과 어두운 브라우저 스타일을 원한다고 브라우저에 알립니다. 예시 탐색 경로에는 이러한 색 구성표의 CSS가 포함되어 있지 않으므로 탐색 경로에는 브라우저에서 제공하는 기본 색상이 사용됩니다.

탐색 요소

<nav class="breadcrumbs" role="navigation"></nav>

사이트 탐색에는 암시적 ARIA 탐색 역할이 있는 <nav> 요소를 사용하는 것이 적절합니다. 테스트에서 role 속성을 사용하면 화면 리더가 요소와 상호작용하는 방식이 변경되는 것을 확인했습니다. 실제로 탐색으로 발표되었으므로 이를 추가하기로 했습니다.

아이콘

아이콘이 페이지에서 반복되는 경우 SVG <use> 요소는 path를 한 번 정의하고 아이콘의 모든 인스턴스에 사용할 수 있음을 의미합니다. 이렇게 하면 동일한 경로 정보가 반복되어 문서가 커지고 경로 불일치가 발생할 수 있습니다.

이 기법을 사용하려면 숨겨진 SVG 요소를 페이지에 추가하고 아이콘을 고유 ID가 있는 <symbol> 요소로 래핑하세요.

<svg style="display: none;">

  <symbol id="icon-home">
    <title>A home icon</title>
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>

  <symbol id="icon-dropdown-arrow">
    <title>A down arrow</title>
    <path d="M19 9l-7 7-7-7"/>
  </symbol>

</svg>

브라우저가 SVG HTML을 읽고 아이콘 정보를 메모리에 넣고 다음과 같이 아이콘을 추가로 사용하기 위한 ID를 참조하여 나머지 페이지를 계속합니다.

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-home" />
</svg>

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <use href="#icon-dropdown-arrow" />
</svg>

렌더링된 SVG 사용 요소를 보여주는 DevTools

페이지 성능에 미치는 영향을 최소화하고 유연한 스타일로 원하는 만큼 여러 번 사용할 수 있습니다. aria-hidden="true"가 SVG 요소에 추가됩니다. 콘텐츠를 듣기만 하는 사용자가 탐색할 때는 아이콘이 유용하지 않으므로 이러한 사용자에게 아이콘을 숨기면 불필요한 노이즈가 추가되지 않습니다.

분할 링크 `.crumb`

여기서 기존 탐색 경로와 이 구성요소의 탐색 경로가 달라집니다. 일반적으로는 <a> 링크만 있지만, 위장된 선택으로 탐색 UX를 추가했습니다. .crumb 클래스는 링크와 아이콘을 배치하는 역할을 하고 .crumbicon는 아이콘과 선택 요소가 함께 쌓이는 역할을 합니다. 기능이 분할 버튼과 매우 유사하지만 페이지 탐색을 위한 것이므로 분할 링크라고 했습니다.

<span class="crumb">
  <a href="#sub-collection-b">Category B</a>
  <span class="crumbicon">
    <svg>...</svg>
    <select class="disguised-select" title="Navigate to another category">
      <option>Category A</option>
      <option selected>Category B</option>
      <option>Category C</option>
    </select>
  </span>
</span>

링크와 일부 옵션은 특별한 것은 아니지만 간단한 탐색 경로에 더 많은 기능을 추가합니다. <select> 요소에 title를 추가하면 스크린 리더 사용자에게 버튼의 작업에 관한 정보를 제공할 수 있습니다. 하지만 다른 사용자에게도 동일한 도움을 제공하므로 iPad에서 전면에 표시됩니다. 하나의 속성이 여러 사용자에게 버튼 컨텍스트를 제공합니다.

보이지 않는 선택 요소에 마우스를 가져가면 컨텍스트 도움말이 표시되는 스크린샷

구분선 장식

<span class="crumb-separator" aria-hidden="true">→</span>

구분자는 선택사항이며 하나만 추가해도 됩니다 (위 동영상의 세 번째 예 참고). 그런 다음 각 aria-hidden="true"에 부여합니다. 이는 장식용이며 스크린 리더가 알릴 필요가 없기 때문입니다.

다음에 설명하는 gap 속성을 사용하면 이러한 간격을 간단하게 지정할 수 있습니다.

스타일

색상에서 시스템 색상을 사용하므로 스타일은 대부분 간격과 스택입니다.

레이아웃 방향 및 흐름

탐색경로 탐색이 플렉스박스 오버레이 기능과 정렬된 모습을 보여주는 DevTools

기본 탐색 요소 nav.breadcrumbs는 하위 요소가 사용할 범위가 지정된 맞춤 속성을 설정하고, 그렇지 않으면 가로로 세로 정렬된 레이아웃을 설정합니다. 이렇게 하면 경로, 구분선, 아이콘이 정렬됩니다.

.breadcrumbs {
  --nav-gap: 2ch;

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
}

하나의 탐색 경로가 flexbox 오버레이와 함께 세로로 정렬되어 표시됩니다.

각 .crumb는 간격이 있는 가로 세로 정렬 레이아웃도 설정하지만, 특별히 링크 하위 요소를 타겟팅하고 white-space: nowrap 스타일을 지정합니다. 이는 여러 단어로 된 탐색 경로가 여러 줄로 표시되지 않도록 하는 데 중요합니다. 이 게시물의 뒷부분에서는 이 white-space 속성으로 인해 발생하는 가로 오버플로를 처리하는 스타일을 추가합니다.

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);

  & > a {
    white-space: nowrap;

    &[aria-current="page"] {
      font-weight: bold;
    }
  }
}

aria-current="page"은 현재 페이지 링크가 다른 링크와 구별되도록 하기 위해 추가됩니다. 스크린 리더 사용자에게 링크가 현재 페이지용임을 명확하게 표시할 뿐만 아니라 시각적 스타일을 지정하여 시력이 있는 사용자도 비슷한 사용자 환경을 이용할 수 있도록 했습니다.

.crumbicon 구성요소는 그리드를 사용하여 SVG 아이콘을 '거의 보이지 않는' <select> 요소와 함께 스택합니다.

행과 열의 이름이 모두 스택인 버튼에 오버레이된 그리드 DevTools

.crumbicon {
  --crumbicon-size: 3ch;

  display: grid;
  grid: [stack] var(--crumbicon-size) / [stack] var(--crumbicon-size);
  place-items: center;

  & > * {
    grid-area: stack;
  }
}

<select> 요소는 DOM에서 마지막에 있으므로 스택의 맨 위에 있고 대화형입니다. 요소를 계속 사용할 수 있도록 opacity: .01 스타일을 추가하면 아이콘 모양에 완벽하게 맞는 선택 상자가 표시됩니다. 이는 내장 기능을 유지하면서 <select> 요소의 모양을 맞춤설정하는 좋은 방법입니다.

.disguised-select {
  inline-size: 100%;
  block-size: 100%;
  opacity: .01;
  font-size: min(100%, 16px); /* Defaults to 16px; fixes iOS zoom */
}

오버플로

경로는 매우 긴 트레일을 나타낼 수 있어야 합니다. 적절한 경우 항목이 가로로 화면 밖으로 나가도록 하는 것을 좋아하는데 이 탐색 경로 구성요소가 적합하다고 생각했습니다.

.breadcrumbs {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--nav-gap) / 2);

  & > .crumb:last-of-type {
    scroll-snap-align: end;
  }

  @supports (-webkit-hyphens:none) { & {
    scroll-snap-type: none;
  }}
}

오버플로 스타일은 다음 UX를 설정합니다.

오버스크롤 포함이 있는 가로 스크롤
가로 스크롤 패딩입니다.
마지막 탐색 경로에 스냅 포인트가 하나 있습니다. 즉, 페이지 로드 시 첫 번째 크럼이 스냅되어 표시됩니다.
가로 스크롤과 스냅 효과 조합에 문제가 있는 Safari에서 스냅 포인트를 삭제합니다.

미디어 쿼리

작은 뷰포트의 경우 '홈' 라벨을 숨기고 아이콘만 남기는 것이 좋습니다.

@media (width <= 480px) {
  .breadcrumbs .home-label {
    display: none;
  }
}

비교를 위해 홈 라벨이 있는 탐색 경로와 없는 탐색 경로를 나란히 표시합니다.

접근성

모션

이 구성요소에는 움직임이 많지 않지만 전환을 prefers-reduced-motion 확인으로 래핑하면 원치 않는 움직임을 방지할 수 있습니다.

@media (prefers-reduced-motion: no-preference) {
  .crumbicon {
    transition: box-shadow .2s ease;
  }
}

다른 스타일은 변경할 필요가 없습니다. 호버 및 포커스 효과는 transition 없이도 훌륭하고 의미가 있지만, 모션이 괜찮다면 상호작용에 미묘한 전환을 추가할 것입니다.

자바스크립트

먼저 사이트나 애플리케이션에서 사용하는 라우터 유형과 관계없이 사용자가 탐색 경로를 변경하면 URL이 업데이트되어야 하고 사용자에게 적절한 페이지가 표시되어야 합니다. 둘째, 사용자 환경을 정규화하려면 사용자가 <select> 옵션을 탐색할 때 예기치 않은 탐색이 발생하지 않도록 해야 합니다.

JavaScript로 처리해야 하는 두 가지 중요한 사용자 환경 측정: 변경된 항목 선택 및 적극적인 <select> 변경 이벤트 발생 방지

<select> 요소를 사용하므로 적극적인 이벤트 방지가 필요합니다. Windows Edge 및 기타 브라우저에서 사용자가 키보드로 옵션을 탐색하면 선택 changed 이벤트가 발생합니다. 사용자가 마우스 오버나 포커스와 같이 옵션을 의사 선택했지만 enter 또는 click로 선택을 확인하지 않았기 때문에 eager라고 했습니다. 이 적극적인 이벤트로 인해 이 구성요소 카테고리 변경 기능에 액세스할 수 없습니다. 사용자가 준비되기 전에 선택 상자를 열고 항목을 탐색하기만 해도 이벤트가 발생하고 페이지가 변경되기 때문입니다.

더 나은 `<select>` 변경 이벤트

const crumbs = document.querySelectorAll('.breadcrumbs select')
const allowedKeys = new Set(['Tab', 'Enter', ' '])
const preventedKeys = new Set(['ArrowUp', 'ArrowDown'])

// watch crumbs for changes,
// ensures it's a full value change, not a user exploring options via keyboard
crumbs.forEach(nav => {
  let ignoreChange = false

  nav.addEventListener('change', e => {
    if (ignoreChange) return
    // it's actually changed!
  })

  nav.addEventListener('keydown', ({ key }) => {
    if (preventedKeys.has(key))
      ignoreChange = true
    else if (allowedKeys.has(key))
      ignoreChange = false
  })
})

이 전략은 각 <select> 요소에서 키보드 다운 이벤트를 감시하고 눌린 키가 탐색 확인 (Tab 또는 Enter)인지 공간 탐색 (ArrowUp 또는 ArrowDown)인지 확인하는 것입니다. 이 확인을 통해 구성요소는 <select> 요소의 이벤트가 발생할 때 대기할지 이동할지 결정할 수 있습니다.

결론

이제 제가 어떻게 했는지 아셨으니, 어떻게 하시겠어요? 🙂

다양한 접근 방식을 사용하고 웹에서 빌드하는 모든 방법을 알아보세요. 데모를 만들고 트윗으로 링크를 보내주세요. 아래 커뮤니티 리믹스 섹션에 추가해 드리겠습니다.

커뮤니티 리믹스

Tux Solbakk을 웹 구성요소로 사용: 데모 및 코드