임베디드 구성 요소

핵심 구성 요소의 임베디드 구성 요소를 통해 AEM 콘텐츠 페이지에서 외부 콘텐츠를 임베드할 수 있습니다.

사용량

콘텐츠 작성자는 핵심 구성 요소의 임베디드 구성 요소를 통해 AEM 콘텐츠 페이지 내에 임베드할 외부 콘텐츠를 선택하고 정의할 수 있습니다. 또한, 임베드할 자유 형식의 HTML을 정의하는 옵션이 있습니다.

• 구성 대화 상자에서 구성 요소의 속성을 정의할 수 있습니다.
• 구성 요소를 페이지에 추가하는 경우 디자인 대화 상자에서 구성 요소의 기본값을 정의할 수 있습니다.

버전 및 호환성

현재 버전의 임베디드 구성 요소는 2019년 9월 핵심 구성 요소 릴리스 2.7.0과 함께 도입된 v1입니다. 이 문서에서는 해당 구성 요소에 대해 설명합니다.

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

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

샘플 구성 요소 출력

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

기술 세부 사항

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

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

구성 대화 상자

콘텐츠 작성자는 구성 대화 상자를 통해 페이지에 임베드할 외부 리소스를 정의할 수 있습니다. 우선 임베드해야 할 리소스 유형을 선택합니다.

• URL
• 임베드 가능
• HTML

임베드가 가능한 유형의 경우 광고 ID​를 정의할 수 있습니다. 이 옵션을 통해 HTML과 데이터 레이어에서 구성 요소의 고유 식별자를 제어할 수 있습니다.

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

URL

가장 단순한 임베드는 URL입니다. 간단히 URL 필드에서 임베드하려는 리소스의 URL을 붙여넣습니다. 구성 요소가 리소스 액세스를 시도하고, 프로세서 중 하나에서 구성 요소를 렌더링하는 경우 아래 URL 필드에 확인 메시지가 표시됩니다. 그렇지 않으면 필드에 오류가 표시됩니다.

임베디드 구성 요소에는 다음 유형의 리소스를 위한 프로세서가 포함됩니다.

• Facebook Post, Instagram, SoundCloud, Twitter 및 YouTube 등 표준 임베드를 준수하는 리소스
• Pinterest

개발자는 임베디드 구성 요소 개발자 설명서에 따라 URL 프로세서를 추가할 수 있습니다.

임베드 가능

임베디드 기능을 사용하여 임베디드 리소스를 추가로 사용자 정의할 수 있습니다. 해당 리소스는 매개 변수화되고 리소스에 추가 정보가 포함될 수 있습니다. 작성자는 사전 구성된 임베디드 기능 중 하나를 선택할 수 있으며, 구성 요소에는 즉시 사용 가능한 YouTube 임베디드 기능이 포함됩니다.

임베디드 기능 필드는 사용하려는 프로세스 유형을 정의합니다. YouTube 임베디드 기능의 경우 다음 항목을 정의할 수 있습니다.

• 비디오 ID - 임베드하려는 리소스의 YouTube 고유 비디오 ID
• 폭 - 임베디드 비디오 폭
• 높이 - 임베디드 비디오 높이
• 음소거 활성화 - 이 매개 변수는 기본적으로 비디오가 음소거를 재생할지 여부를 지정합니다. 음소거가 활성화되면 최신 브라우저의 자동 재생이 작동할 확률이 높아집니다.
• 자동 재생 활성화 - 이 매개 변수는 플레이어가 로드될 때 초기 비디오를 자동으로 재생할지 여부를 지정합니다. 게시 인스턴스 또는 작성 인스턴스의 게시로 보기 옵션을 사용하는 경우에만 적용됩니다.
• 루프 활성화 - 단일 비디오의 경우 이 매개 변수는 플레이어가 초기 비디오를 반복적으로 재생할지 여부를 지정합니다. 재생 목록의 경우 플레이어는 전체 재생 목록을 재생한 다음 최초 비디오에서 다시 시작합니다.
• 인라인 재생(iOS) 활성화 - 이 매개 변수는 iOS의 HTML5 플레이어에서 비디오가 인라인(켜짐) 또는 전체 화면(꺼짐)으로 재생될지를 제어합니다.
• 무제한 관련 비디오 - 이 옵션이 비활성화되면 비디오가 바로 재생되기 때문에 관련 비디오는 동일한 채널에서 가져옵니다. 그렇지 않으면 모든 채널에서 가져옵니다.

디자인 대화 상자를 통해 “활성화” 옵션이 활성화되고 기본값으로 설정될 수 있습니다.

다른 임베디드 기능은 유사 필드를 제공하고 임베디드 구성 요소 개발자 설명서에 따라 개발자에 의해 정의될 수 있습니다.

HTML

임베디드 구성 요소를 사용하여 자유 형식의 HTML을 페이지에 추가할 수 있습니다.

보안

(예로 작성자에게 관리 권한을 부여할 수 있는) 크로스 사이트 스크립팅 공격을 방지하려면 작성자가 보안용으로 입력할 수 있는 HTML 마크업을 필터링합니다.

일반적으로 출력에서 모든 스크립트와 style 요소뿐 아니라 모든 on* 및 style 속성을 제거합니다.

임베디드 구성 요소는 AEM의 HTML AntiSamy 정리 프레임워크 필터링 규칙 세트를 준수하기 때문에 전역 규칙은 더 복잡합니다. 해당 규칙 세트는 /libs/cq/xssprotection/config.xml에서 확인할 수 있습니다. 필요한 경우 개발자에 의해 프로젝트별 구성에 오버레이될 수 있습니다.

추가 보안 정보는 AEM 개발자 설명서(온프레미스 설치 및 AEM as a Cloud Service 설치용)에서 확인할 수 있습니다.

디자인 대화 상자

템플릿 작성자는 디자인 대화 상자를 통해 임베디드 구성 요소를 사용하는 콘텐츠 작성자에게 제공되는 옵션을 정의할 수 있습니다. 그리고 임베디드 구성 요소가 배치되면 기본값이 설정됩니다.

임베디드 기능 유형 탭

• URL 비활성화 - 선택한 경우 콘텐츠 작성자의 URL 옵션을 비활성화합니다.
• 임베디드 기능 비활성화 - 선택한 경우 허용된 임베디드 프로세서에 상관없이 콘텐츠 작성자의 임베디드 기능 옵션을 비활성화합니다.
• HTML 비활성화 - 선택한 경우 콘텐츠 작성자의 HTML 옵션을 비활성화합니다.
• 허용된 임베디드 기능 - 임베디드 옵션이 활성화될 경우 다중 선택으로 콘텐츠 작성자가 사용할 수 있는 임베디드 프로세서를 정의합니다.

YouTube 탭

• 음소거 비헤이비어 구성 허용 - YouTube 임베드 유형 선택 시 콘텐츠 작성자는 구성 요소에서 음소거 활성화 옵션을 구성할 수 있습니다.
  • 음소거의 기본값 - YouTube 임베드 유형 선택 시 음소거 활성화 옵션을 자동으로 설정합니다.
• 자동 재생 비헤이비어 구성 허용 - YouTube 임베드 유형 선택 시 콘텐츠 작성자는 구성 요소에서 자동 재생 활성화 옵션을 구성할 수 있습니다.
  • 자동 재생의 기본값 - YouTube 임베드 유형 선택 시 자동 재생 활성화 옵션을 자동으로 설정합니다.
• 루프 비헤이비어 구성 허용 - YouTube 임베드 유형 선택 시 콘텐츠 작성자는 구성 요소에서 루프 활성화 옵션을 구성할 수 있습니다.
  • 루프의 기본값 - YouTube 임베드 유형 선택 시 루프 활성화 옵션을 자동으로 설정합니다.
• 인라인 재생(iOS) 구성 허용 - YouTube 임베드 유형 선택 시 콘텐츠 작성자는 구성 요소에서 인라인 재생(iOS) 활성화 옵션을 구성할 수 있습니다.
  • 인라인 재생(iOS)의 기본값 - YouTube 임베드 유형 선택 시 인라인 재생(iOS) 활성화 옵션을 자동으로 설정합니다.
• 인라인 비디오 구성 허용 - YouTube 임베드 유형 선택 시 콘텐츠 작성자는 구성 요소에서 무제한 관련 비디오 옵션을 구성할 수 있습니다.
  • 무제한 관련 비디오의 기본값 - YouTube 임베드 유형 선택 시 무제한 관련 비디오 옵션을 자동으로 설정합니다.