언어 탐색 구성 요소 language-navigation-component

방문자가 서로 다른 로케일에서 동일한 페이지로 이동할 수 있도록 언어 탐색 구성 요소는 사이트에 언어/국가/지역 탐색을 제공합니다.

사용량 usage

지역에 따라 여러 언어로 웹 사이트가 제공되는 경우가 있습니다. 방문자는 언어 탐색 구성 요소를 사용하여 서로 다른 언어/로케일에서 동일한 페이지로 열람할 수 있습니다. 따라서 스위스/독일어 버전의 웹 사이트를 방문하여도 미국 영어 버전의 동일한 페이지로 간편하게 전환할 수 있습니다. 언어 탐색 구성 요소는 사이트 언어 구조를 이해하고 해당 페이지를 자동으로 검색합니다.

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

편집 대화 상자를 통해 전역 사이트 루트와 탐색이 적용될 구조의 깊이를 정의할 수 있습니다. 템플릿 작성자는 디자인 대화 상자를 통해 동일한 옵션의 기본값을 설정할 수 있습니다.

버전 및 호환성 version-and-compatibility

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

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

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

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

샘플 구성 요소 출력 sample-component-output

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

기술 세부 사항 technical-details

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

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

디자인 대화 상자 design-dialog

디자인 대화 상자를 통해 전역 사이트 루트와 탐색이 적용될 구조의 깊이를 정의할 수 있습니다.

일반적으로 이러한 구성은 페이지 템플릿 수준에서만 수행되어야 합니다. 하지만 페이지 수준에서 편집 대화 상자를 통해 변경할 수 있습니다.

속성 탭 properties-tab

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

  • 탐색 루트

    • 여기서 사이트에 대한 언어 탐색이 시작됩니다.
    • 사이트의 언어 구조는 이 루트 아래의 다음 수준에서 시작됩니다.
  • 언어 구조 깊이

    • 다음은 사이트의 언어 구조를 보여 주는 탐색 루트 아래에 있는 콘텐츠 트리의 레벨 횟수입니다. 예:

      • 일반적으로 1는 언어만 선택할 수 있음을 의미합니다.
      • 일반적으로 2는 언어와 국가를 선택할 수 있음을 의미합니다.
      • 일반적으로 3는 언어, 국가 및 지역을 선택할 수 있음을 의미합니다.

example

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

/content
+-- wknd
   +-- language-masters
   +-- us
      +-- en
      \-- es
   \-- ch
      +-- de
      +-- fr
      \-- it
+-- wknd-events
\-- wknd-shop

사이트 WKND의 경우 언어 탐색 구성 요소를 머리말의 일부로서 페이지 템플릿에 배치할 수도 있습니다. 템플릿의 일부인 경우 구성 요소의 탐색 루트 ​가 해당 사이트 현지화된 콘텐츠의 시작점이 되기 때문에 해당 루트를 /content/wknd로 설정할 수 있습니다. 구조가 두 단계로 구성되기 때문에(국가 다음 언어 순) 언어 구조 깊이 ​를 2으로 설정할 수도 있습니다.

탐색 루트 값을 사용하여 언어 구성 요소는 /content/wknd 다음 두 단계 콘텐츠 트리를 사이트 언어 탐색 구조로 인식하면서(언어 구조 깊이 ​로 정의) 언어 탐색 옵션을 생성할 수 있다고 인식하고 있습니다.

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

스타일 탭 styles-tab

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

편집 대화 상자 edit-dialog

속성 탭 properties-tab-edit

일반적으로 사이트의 페이지 템플릿에서만 언어 탐색 구성 요소를 추가하고 구성할 수 있습니다. 하지만, 언어 탐색 구성 요소를 개별 페이지에 추가해야 할 경우 콘텐츠 작성자는 디자인 편집 상자 설명에 따라 편집 대화 상자를 통해 동일한 값을 구성할 수 있습니다.

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

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

언어 탐색 구성 요소의 편집 대화 상자

접근성 탭 accessibility-tab

  • 라벨 - 구성 요소의 ARIA 라벨 속성을 설정하기 위해 페이지에 두 가지 이상의 언어 탐색이 있는 경우 이 옵션을 정의해야 합니다.

언어 탐색 접근성 탭

스타일 탭 styles-tab-edit

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

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

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

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

Adobe 클라이언트 데이터 레이어 data-layer

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

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c