다중 영역 레이아웃 multi-zone-layout
다음 페이지에서는 다중 영역 레이아웃의 사용에 대해 설명하고 다음 항목을 다룹니다.
- 개요
- 다중 영역 레이아웃 만들기
- 사전 요구 사항
- 하나 이상의 영역에서 단일 Assets 사용
- 하나 이상의 영역에서 순차적 컨텐츠 사용
개요 overview
다중 영역 레이아웃 을 사용하면 여러 영역 콘텐츠를 만들고 비디오, 이미지, 텍스트와 같은 다양한 에셋을 사용하여 한 화면에서 결합할 수 있습니다. 이미지, 비디오 및 텍스트를 가져와서 모두 함께 혼합하고 직관적인 디지털 경험을 만들 수 있습니다.
프로젝트 요구 사항에 따라 한 채널에 여러 영역이 필요하며 이를 하나의 포괄적인 단위로 편집해야 하는 경우가 있습니다. 예를 들어, 단일 채널에서 세 개의 별도 영역에서 실행되는 관련 소셜 미디어 피드가 있는 제품 시퀀스입니다.
사전 요구 사항 prerequisites
이 기능을 구현하기 전에 다음에 대한 개념적 지식이 있는지 확인하십시오.
다중 영역 레이아웃 만들기 creating-multi-zone-layout
채널을 만드는 동안 다른 템플릿을 사용하여 채널에 영역을 만들 수 있습니다. 하나의 이미지, 비디오 또는 여러 에셋을 시퀀스에 표시할 수 있는 임베드된 채널을 추가할 수 있습니다.
채널 만들기
-
Adobe Experience Manager 링크(왼쪽 상단)를 클릭한 다음 Screens 을 클릭합니다. 또는 직접
http://localhost:4502/screens.html/content/screens
(으)로 이동할 수 있습니다. -
채널 폴더로 이동한 다음 작업 표시줄에서 만들기 를 클릭합니다.
-
만들기 마법사에서 1x2 분할 화면 채널 을 클릭합니다.
-
다음 을 클릭하고 제목 을 MultiZone(으)로 입력하십시오.
-
채널 만들기를 완료하려면 만들기 를 클릭하십시오.
하나 이상의 영역에서 단일 Assets 사용 using-single-assets-in-one-or-more-zones
모든 개별 영역에서 이미지 또는 비디오와 같은 단일 자산을 사용할 수 있습니다. 구현을 위해 아래 단계를 따르십시오.
-
채널에 콘텐츠 추가
- 영역 > 채널> 다중 영역 으로 이동합니다.
- MultiZone 채널을 클릭하고 작업 표시줄에서 편집 을 클릭합니다.
-
채널에 이미지 추가
두 영역에서 단일 이미지 또는 비디오를 재생하려면 아래 그림과 같이 채널 편집기의 각 영역으로 이미지를 드래그하여 놓기만 하면 됩니다.
하나 이상의 영역에서 순차적 컨텐츠 사용 using-sequenced-content-in-one-or-more-zones
영역에 이미지 및 비디오 시퀀스를 다른 영역에 표시하려면 아래 단계를 따라 자세한 내용을 확인하십시오.
-
채널 폴더 만들기
- 영역 > 다중 영역 > 채널(으)로 이동한 다음 작업 표시줄에서 만들기 를 클릭합니다.
- 만들기 마법사에서 채널 폴더 를 클릭하고 다음 을 클릭합니다.
- 제목을 EmbeddedChannels(으)로 입력하고 만들기 를 클릭합니다.
-
채널 폴더에 채널을 두 개 더 추가
- 영역 > 채널 > 포함된 채널(으)로 이동한 다음 작업 표시줄에서 만들기 를 클릭합니다.
- 만들기 마법사에서 시퀀스 채널 을(를) 클릭하여
Zone1
(으)로 제목이 지정된 채널을 만듭니다. Zone1
을(를) 클릭하고 작업 표시줄에서 편집 을(를) 클릭합니다.- 이미지 몇 개를 이 채널로 드래그하여 놓습니다.
- 마찬가지로 EmbeddedChannels 폴더에
Zone2
(으)로 지정된 다른 시퀀스 채널을 만듭니다. - 비디오를 이 채널로 드래그 앤 드롭하십시오.
다음 그림은 채널
Zone1
및Zone2
을(를) 보여줍니다.Zone1
시퀀스 채널의 편집기에 추가된 이미지는 다음과 같습니다.Zone2
시퀀스 채널의 편집기에 추가된 비디오는 다음과 같습니다. -
주 채널(MultiZone)에 포함된 시퀀스(구성 요소) 추가
-
영역 > 채널 > 다중 영역 으로 이동합니다.
-
작업 표시줄에서 편집 을 클릭합니다.
-
포함된 시퀀스 구성 요소를 두 영역으로 끌어다 놓습니다.
-
영역 중 하나에서 포함된 시퀀스를 클릭합니다.
-
편집기에 포함된 시퀀스 중 하나에 대한 구성(렌치) 아이콘을 클릭합니다.
-
아래 그림과 같이 채널 경로를 영역 > 채널 > 임베드된 채널 >
Zone1
(으)로 클릭합니다. -
마찬가지로 편집기에서 다른 포함된 시퀀스 구성 요소에
Zone2
을(를) 추가합니다.
-
위치 및 디스플레이 만들기 creating-location
AEM Screens 플레이어에서 컨텐츠를 볼 수 있도록 위치 및 디스플레이를 만듭니다.
-
위치 만들기
- 영역 > 위치 폴더로 이동합니다.
- 위치 폴더를 클릭하고 작업 표시줄에서 만들기 를 클릭합니다.
- 만들기 마법사에서 위치 를 클릭하고 다음 을 클릭합니다.
- 제목 을(를) 산호세(으)로 입력하고 만들기 를 클릭합니다.
-
디스플레이 만들기
- 영역 > 위치 폴더로 이동합니다.
- 산호세 위치를 클릭하고 작업 표시줄에서 만들기 를 클릭합니다.
- 만들기 마법사에서 표시 를 클릭하고 다음 을 클릭합니다.
- 제목 을(를) 로비(으)로 입력하고 만들기 를 클릭합니다.
디스플레이에 채널 할당 channel-channel
디스플레이에 채널을 할당하여 콘텐츠를 봅니다. 아래 단계에 따라 채널을 디스플레이에 지정하십시오.
-
디스플레이에 채널 할당
-
영역 > 위치 > 산호세> 로비 로 이동합니다.
-
로비 표시를 클릭하고 작업 표시줄에서 채널 할당 을 클릭합니다.
-
채널 경로 에서 MultiZone 채널의 경로를 입력하십시오.
-
지원되는 이벤트 을(를) 초기 로드, 유휴 화면 및 타이머(으)로 설정하십시오.
-
저장 을 클릭합니다.
-
마찬가지로 다른 두 개의 임베드된 채널(
Zone1
및Zone2
)을 이 디스플레이에 할당하십시오. -
세 채널을 모두 로비 디스플레이에 할당하면 디스플레이 대시보드에서 할당된 채널을 볼 수 있습니다.
note important IMPORTANT 기본 채널(이 경우 MultiZone)을 디스플레이에 할당하면 다른 두 개의 임베드된 채널 Zone1
과(와)Zone2
도 동일한 디스플레이에 할당해야 합니다.
-
장치 등록 registering-device
위치 및 디스플레이를 설정한 경우 아래 단계에 따라 장치를 등록하고 디스플레이를 장치에 할당합니다.
-
장치 등록
-
영역 > 장치 폴더로 이동합니다.
-
장치 폴더를 클릭하고 작업 표시줄에서 장치 관리자 를 클릭합니다.
-
장치 등록 을 클릭하고 목록에서 보류 중인 장치를 클릭합니다.
note note NOTE 장치의 제목은 장치 등록 탭에 표시되는 장치 토큰(토큰 필드)과 일치해야 합니다. -
제목이 장치 토큰과 일치하면 장치를 클릭하고 작업 표시줄에서 장치 등록 을 클릭합니다.
-
등록 코드가 Screens 플레이어 장치 등록 탭의 코드와 일치하는 경우 작업 표시줄에서 유효성 검사 를 클릭하십시오.
-
제목 을(를)
Chrome-Device1
(으)로 입력하고 등록 을(를) 클릭합니다. -
디스플레이 할당 을 클릭하고 장치 구성 경로를 클릭합니다.
note note NOTE Screens 플레이어에서 콘텐츠를 보려면 디스플레이에 할당된 각 채널에 대해 채널 대시보드에서 오프라인 콘텐츠 업데이트 를 클릭하십시오. -
결과 보기 viewing-the-result
이전 단계를 사용하여 다중 영역 레이아웃을 구현하면 다음 출력이 표시됩니다.
두 개의 다른 영역에 콘텐츠를 표시하는 출력을 볼 수 있도록 Screens 플레이어를 확인합니다. 왼쪽 및 오른쪽 영역(둘 다 포함된 시퀀스를 구성 요소로 사용)은
왼쪽 영역은 시퀀스 채널이고 오른쪽 영역은 비디오를 포함한다.