페이지 구성 요소

페이지 구성 요소는 템플릿 편집기와 함께 작동하도록 디자인된 확장 가능한 페이지 구성 요소로서, 페이지 머리글/바닥글 및 구조 구성 요소를 템플릿 편집기로 어셈블할 수 있도록 합니다.

사용량

페이지 구성 요소는 핵심 구성 요소로 디자인된 모든 페이지와 편집 가능한 템플릿을 기반으로 합니다. 페이지 구성 요소, 머리글, 바닥글 및 페이지의 구조는 다른 핵심 구성 요소를 사용하여 템플릿으로 정의할 수 있습니다.

디자인 대화 상자를 사용하여 페이지에 대해 사용자 지정 클라이언트측 라이브러리를 정의할 수 있습니다. 페이지 구성 요소 자체가 페이지 구성 요소이므로 구성 요소에서 직접 액세스할 수 있는 편집 대화 상자가 있는 다른 구성 요소와 달리, 페이지 구성 요소의 편집 대화 상자는 페이지 속성 창입니다.

점진적 웹 앱 지원

코어 구성 요소 릴리스 2.15.0에서는 AEM에 대한 지원을 Cloud Service의 내장 점진적 웹 앱(PWA) 기능으로 도입했습니다. 사이트 수준에서 간단한 구성을 사용하여 AEM 경험을 PWA으로 전환하십시오!

버전 및 호환성

페이지 구성 요소의 현재 버전은 v2이며, 2018년 1월에 핵심 구성 요소 릴리스 2.0.0에서 도입되었으며, 이 문서에 설명되어 있습니다.

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

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

기술 세부 정보

페이지 구성 요소 에 대한 최신 기술 설명서는 GitHub에 있습니다.

코어 구성 요소 개발에 대한 자세한 내용은 코어 구성 요소 개발자 설명서에서 확인할 수 있습니다.

편집 대화 상자

구성 요소는 전체 페이지를 나타내므로 일반적으로 편집 대화 상자에 있는 설정은 페이지 속성 창에 있습니다.

디자인 대화 상자

구성 요소는 전체 페이지를 나타내므로 페이지 템플릿을 편집할 때 페이지 정보 -> 페이지 정책​을 통해 디자인 대화 상자에 액세스합니다.

속성 탭

페이지 디자인 창에서 로드할 클라이언트 라이브러리와 페이지에 대한 웹 리소스 라이브러리를 정의할 수 있습니다.

• 클라이언트 라이브러리 - 로드할 클라이언트 라이브러리 카테고리를 정의합니다. JavaScript가 본문 끝에 추가되고 CSS가 페이지 헤드에 추가됩니다.

• 클라이언트 라이브러리 JavaScript 페이지 헤드 - 페이지 헤드에 로드할 JavaScript 클라이언트 라이브러리 카테고리를 정의합니다.

  • 여기에 정의된 카테고리는 클라이언트 라이브러리 필드에도 있으며, 본문 끝이 아니라 페이지 헤드에 JavaScript가 로드됩니다.
  • 카테고리가 클라이언트 라이브러리 필드에도 없는 한 CSS가 로드되지 않습니다.

• 웹 리소스 클라이언트 라이브러리 - 파비콘과 같은 웹 리소스를 제공하는 데 사용되는 클라이언트 라이브러리 카테고리입니다.

• 기본 컨텐츠 요소 선택기 로 이동 - 페이지의 기본 컨텐츠로 바로 건너뛸 수 있는 액세스 가능성 기능으로 사용됩니다.

라이브러리는 클라이언트 라이브러리 및 클라이언트 라이브러리 JavaScript 페이지 헤드 필드 모두에 대해 다음과 같이 구성할 수 있습니다.

• 새 필드를 추가하려면 필드 아래에 있는 추가 단추를 클릭하거나 탭합니다.
• 필드를 제거하려면 제거할 필드 옆에 있는 휴지통 아이콘을 클릭하거나 탭합니다.
• 로드 순서를 재정렬하려면 이동할 필드 옆에 있는 핸들을 클릭하거나 탭하고 드래그합니다.

클라이언트측 라이브러리 사용에 대한 자세한 내용은 클라이언트 측 라이브러리 사용을 참조하십시오.

스타일 탭

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

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

페이지 구성 요소는 Adobe 클라이언트 데이터 계층을 지원합니다.