탐색 구성 요소

마지막 업데이트: 2024년 7월 13일

작성 대상:

  • 개발자
  • 관리자
  • 사용자

사용자는 탐색 구성 요소를 사용하여 전역 사이트 구조를 간편하게 탐색할 수 있습니다.

사용량

사이트 사용자가 사이트 구조를 간편하게 탐색할 수 있도록 탐색 구성 요소는 페이지 트리를 보여 줍니다.

탐색 구성 요소는 전역 사이트 구조를 자동으로 감지하고 현지화된 페이지에 자동으로 적용될 수 있습니다.또한 메인 콘텐츠 구조 이외의 다른 구조를 보여 주기 위해 섀도 리디렉션 페이지를 사용하여 임의의 사이트 구조를 지원할 수 있습니다.

콘텐츠 작성자는 편집 대화 상자를 통해 탐색의 깊이와 함께 탐색 루트 페이지를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 통해 탐색 루트 및 깊이에 대한 기본값을 정의할 수 있습니다.

버전 및 호환성

현재 버전의 탐색 구성 요소는 2022년 2월 핵심 구성 요소 릴리스 2.18.0과 함께 도입된 v2입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

다음 표에서 구성 요소의 모든 지원 버전, 구성 요소 버전과 호환되는 AEM 버전 및 이전 버전에 대한 설명서 링크에 대해 자세히 살펴볼 수 있습니다.

구성 요소 버전AEM 6.4AEM 6.5AEM as a Cloud Service
v2-호환 가능호환 가능
v1호환 가능호환 가능호환 가능

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전을 참조하십시오.

현지화된 사이트 구조 지원

지역에 따라 여러 언어로 웹 사이트가 제공되는 경우가 있습니다. 일반적으로 현지화된 페이지에는 페이지 템플릿의 일부로 포함된 탐색 요소가 포함됩니다. 탐색 구성 요소를 통해 사이트 페이지의 모든 템플릿에 구성 요소가 한 번 배치되면 전역 사이트 구조에 따라 현지화된 개별 페이지에 자동으로 적용됩니다.

  • 탐색 구성 요소의 현지화 기능이 어떻게 작동하는지 사례를 알고 싶다면 아래 섹션을 참조하십시오.
  • 핵심 구성 요소의 현지화 기능이 어떻게 서로 작동하는지 사례를 알고 싶다면 핵심 구성 요소의 현지화 기능을 참조하십시오.

예

콘텐츠의 형태가 다음과 같습니다.

/content
+-- wknd
   +-- language-masters
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- es
      +-- fr
      \-- it
   +-- us
      +-- en
         \-- experience
            \-- arctic-surfing-in-lofoten
      \-- es
   \-- ch
      +-- de
         \-- experience
            \-- arctic-surfing-in-lofoten
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

사이트 WKND의 경우 탐색 구성 요소를 머리말의 일부로서 페이지 템플릿에 배치할 수도 있습니다. 템플릿의 일부인 경우 구성 요소의 탐색 루트 ​가 해당 사이트 마스터 콘텐츠의 시작점이 되기 때문에 해당 루트를 /content/wknd/language-masters/en로 설정할 수 있습니다. 또한 탐색 구조 깊이 ​를 2로 설정하려는 이유는 전체 콘텐츠 트리가 구성 요소가 아니라 처음 두 레벨에 의해 표시되기 때문입니다.

탐색 루트 값을 사용하여 탐색 구성 요소는 /content/wknd/language-masters/en 이후 탐색과 동시에 사이트 구조가 반복적으로 2단계 하향 조정되면서(탐색 구조 깊이 ​로 정의) 탐색 옵션을 생성할 수 있다고 인식하고 있습니다.

사용자가 조회 중인 페이지가 아무리 현지화되어도 탐색 구성 요소는 현재 페이지 위치를 인지하면서 현지화된 해당 페이지를 찾을 수 있습니다. 루트로 거슬러 올라간 다음 순차적으로 해당 페이지로 내려옵니다.

따라서 방문자가 /content/ch/de/experience/arctic-surfing-in-lofoten를 조회하고 있다면 구성 요소는 /content/wknd/language-masters/de에 따라 탐색 구조를 생성해야 한다는 것을 인지합니다. 마찬가지로 방문자가 /content/us/en/experience/arctic-surfing-in-lofoten를 조회하고 있다면 구성 요소는 /content/wknd/language-masters/en에 따라 탐색 구조를 생성해야 한다는 것을 인지합니다.

새도 사이트 구조 지원

경우에 따라 실제 사이트 구조와 다른 방문자용 탐색 메뉴를 만들 필요가 있습니다. 프로모션을 통해 콘텐츠 목록이 재정렬되면 메뉴의 특정 콘텐츠가 노출될 수 있습니다. 간단히 다른 콘텐츠 페이지로 리디렉션하는 그림자 페이지를 사용하여 탐색 구성 요소는 임의로 필요한 탐색 사이트 구조를 생성할 수 있습니다.

이렇게 하려면 다음 작업을 수행해야 합니다.

  1. 그림자 페이지를 원하는 사이트 구조를 보여 주는 빈 페이지로 만듭니다. 이를 종종 그림자 사이트 구조라고 합니다.
  2. 해당 페이지의 페이지 속성에서 리디렉션 값을 설정하여 실제 콘텐츠 페이지를 지정합니다.
  3. 그림자 페이지의 페이지 속성에서 탐색 숨기기 옵션을 설정합니다.
  4. 탐색 구성 요소의 탐색 루트 값을 설정하여 새 그림자 구조의 루트를 지정합니다.

그러면 탐색 구성 요소는 그림자 사이트 구조에 따라 메뉴를 렌더링합니다. 구성 요소에서 렌더링한 링크는 그림자 페이지 자체가 아니라 그림자 페이지가 리디렉션하는 실제 콘텐츠 페이지에 연결됩니다. 또한, 탐색이 그림자 페이지에 따라 달라지는 경우에도 구성 요소에 실제 페이지 이름이 표시되고 활성 페이지가 강조 표시됩니다. 방문자가 탐색 구성 요소를 사용하면 그림자 페이지가 완전히 투명해집니다.

NOTE
그림자 페이지를 통해 탐색 옵션을 보다 유연하게 구성할 수 있지만 이 구조는 완전히 수동으로 유지 보수한다는 점을 참고하십시오. 실제 사이트 콘텐츠를 재정렬하거나 콘텐츠를 추가/제거하는 경우 필요 시 그림자 구조를 수동으로 업데이트해야 합니다.
NOTE
그림자 사이트 구조를 렌더링하는 경우 그림자 페이지만 탐색 논리에 의해 반복적으로 사용됩니다. 논리는 리디렉션 대상의 구조를 반복적으로 사용하지 않습니다.

탐색에서 리디렉션

페이지에 리디렉션 대상이 있으면(외부 URL 또는 다른 AEM 페이지 지정 여부에 관계없이) 탐색 구성 요소에는 리디렉션 대상의 URL을 직접 지정하는 링크가 포함됩니다.

예

  • 페이지 B로 리디렉션하는 페이지 A를 만듭니다.
  • https://aemcomponents.dev로 리디렉션하는 페이지 C를 만듭니다.
  • 페이지 D에서 페이지 A 및 C가 포함된 탐색 구성 요소를 삽입합니다.
  • 그때 생성된 해당 링크는 페이지 B 및 https://aemcomponents.dev를 직접 지정합니다.

샘플 구성 요소 출력

탐색 구성 요소를 경험하고 구성 옵션의 샘플뿐만 아니라 HTML 및 JSON 출력을 확인하려면 구성 요소 라이브러리를 참조하십시오.

기술 세부 사항

탐색 구성 요소에 대한 최신 기술 설명서는 GitHub에서 확인할 수 있습니다.

핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 참조하십시오.

NOTE
핵심 구성 요소 릴리스 2.1.0부터 탐색 구성 요소는 schema.org microdata를 지원합니다.

편집 대화 상자

편집 대화 상자에서 콘텐츠 작성자는 탐색을 위한 루트 페이지와 탐색 구조의 깊이를 정의할 수 있습니다.

속성 탭

탐색 구성 요소의 편집 대화 상자 속성 탭

  • 탐색 루트 - 탐색 트리 제작에 사용되는 루트 페이지.

  • 루트 수준 제외 - 주로 루트는 탐색에서 제외시켜야 합니다. 이 옵션을 사용하여 제외하려는 루트에서 레벨 높이기의 횟수를 지정할 수 있습니다. 예:

    • 0 = 루트 수준 표시
    • 1 = 루트 수준 제외
    • 2 = 루트 제외 및 레벨 1 이상 높이기
    • 등

  • 모든 하위 페이지 수집 - 탐색 루트 하위에 속한 모든 페이지를 수집합니다.

  • 탐색 구조 깊이 - 탐색 루트에 따라 구성 요소에 표시되는 탐색 트리의 레벨 횟수를 정의할 수 있습니다(모든 하위 페이지 수집 ​이 선택되지 않은 경우에만 사용 가능).

  • 섀도잉 비활성화 - 계층 구조 내의 페이지가 리디렉션된 경우 대상이 아닌 리디렉션된 페이지 이름이 표시됩니다. 자세한 내용은 그림자 사이트 구조 지원을 참조하십시오.

  • ID - 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.

    • 비워 두면 고유 ID는 자동으로 생성되고 결과 페이지 검사를 통해 발견될 수 있습니다.
    • ID가 지정된 경우 작성자는 ID가 고유한지 확인해야 합니다.
    • ID가 변경되면 CSS, JS 및 데이터 레이어 추적에 영향을 미칠 수 있습니다.

접근성 탭

탐색 구성 요소의 편집 대화 상자 접근성 탭

접근성 탭에서 구성 요소에 대한 ARIA 접근성 라벨 값을 설정할 수 있습니다.

  • 라벨 - 구성 요소에 대한 ARIA 라벨 속성 값

스타일 탭

탐색 구성 요소는 AEM 스타일 시스템을 지원합니다.

드롭다운을 사용하여 구성 요소에 적용할 스타일을 선택합니다. 편집 대화 상자에서 선택한 항목은 구성 요소 툴바에서 선택한 항목과 동일한 효과를 가집니다.

드롭다운 메뉴를 사용하려면 디자인 대화 상자에서 이 구성 요소에 대한 스타일을 구성해야 합니다.

탐색 구성 요소의 디자인 대화 상자 스타일 탭

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 통해 콘텐츠 작성자에게 제공되는 탐색 루트 페이지와 탐색 깊이에 대한 기본값을 정의할 수 있습니다.

속성 탭

탐색 구성 요소의 디자인 대화 상자

  • 탐색 루트 - 콘텐츠 작성자가 구성 요소를 페이지에 추가할 때 탐색 트리 제작에 사용되고 기본 설정되는 탐색 구성 요소의 루트 페이지에 대한 기본값

  • 루트 수준 제외 - 주로 루트는 탐색에서 제외시켜야 합니다. 이 옵션을 사용하여 제외하려는 루트에서 레벨 높이기의 기본값을 지정할 수 있습니다. 예:

    • 0 = 루트 수준 표시
    • 1 = 루트 수준 제외
    • 2 = 루트 제외 및 레벨 1 이상 높이기
    • 등

  • 모든 하위 페이지 수집 - 탐색 루트 하위에 속한 모든 페이지를 선택하는 옵션의 기본값

  • 탐색 구조 깊이 - 탐색 구조 경로의 기본값.

  • 섀도잉 비활성화 - 탐색 구성 요소 추가 시 섀도잉이 비활성화되는 경우의 기본값

스타일 탭

탐색 구성 요소는 AEM 스타일 시스템을 지원합니다.

Adobe 클라이언트 데이터 레이어

탐색 구성 요소는 Adobe 클라이언트 데이터 레이어지원합니다.

Experience Manager