임베드 구성 요소 (v1)

마지막 업데이트: 2025년 6월 27일

작성 대상:

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

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

사용량

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

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

버전 및 호환성

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

주의
이 문서에서는 임베드 구성 요소 v1에 대해 설명합니다.
현재 버전의 임베드 구성 요소에 대한 자세한 내용은 임베드 구성 요소 문서를 참조하십시오.

샘플 구성 요소 출력

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

기술 세부 정보

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

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

구성 대화 상자

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

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

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

URL

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

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

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

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

URL용 임베드 구성 요소의 편집 대화 상자

임베드 가능

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

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

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

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

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

임베드 가능 항목을 위한 임베드 구성 요소의 편집 대화 상자

노트
페이지 작성자가 사용할 수 있는 디자인 대화 상자를 통해 템플릿 수준에서 임베드 가능 항목을 활성화해야 합니다.

HTML

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

HTML용 임베드 구성 요소의 편집 대화 상자

노트
스크립트와 같은 불안전한 태그는 입력한 HTML에서 필터링되고 결과 페이지에서는 렌더링되지 않습니다.

보안

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

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

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

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

노트
/libs/cq/xssprotection/config.xml 오버레이를 통해 HTML AntiSamy 정리 프레임워크 규칙을 구성할 수 있지만 해당 변경 사항은 핵심 임베드 구성 요소뿐 만 아니라 모든 HTL 및 JSP 비헤이비어에 영향을 줄 수 있습니다.