다중 영역 레이아웃

다음 페이지에서는 다중 영역 레이아웃의 사용에 대해 설명하고 다음 주제를 다룹니다.

  • 개요
  • 다중 영역 레이아웃 만들기
  • 전제 조건
  • 하나 이상의 영역에서 단일 자산 사용
  • 하나 이상의 영역에서 순차 컨텐츠 사용

개요

다중 영역 레이아웃 을 사용하면 여러 영역 컨텐츠를 만들고 단일 화면에서 결합할 수 있는 비디오, 이미지 및 텍스트와 같은 다양한 에셋을 사용할 수 있습니다. 이미지, 비디오 및 텍스트를 가져와서 함께 혼합하여 직관적인 디지털 경험을 만들 수 있습니다.

프로젝트 요구 사항에 따라 채널에서 여러 영역이 필요하고 이를 하나의 포괄적인 단위로 편집하는 경우가 있습니다. 예를 들어, 단일 채널의 분리된 세 영역에서 관련된 소셜 미디어 피드가 실행 중인 제품 시퀀스가 있을 수 있습니다.

전제 조건

이 기능을 구현하기 전에 다음 사항에 대한 개념 지식이 있는지 확인하십시오.

다중 영역 레이아웃 만들기

채널을 만드는 동안 채널에서 영역을 만들려면 다른 템플릿을 사용할 수 있습니다. 하나의 이미지, 비디오 또는 포함된 채널을 추가하여 여러 자산을 하나의 시퀀스에 표시할 수 있습니다.

채널 생성

  1. Adobe Experience Manager 링크(왼쪽 위)를 선택한 다음 스크린​을 선택합니다. 또는 다음 위치로 바로 이동할 수 있습니다.http://localhost:4502/screens.html/content/screens.

  2. 채널 폴더로 이동하고 작업 표시줄에서 만들기​를 클릭합니다.

  3. 만들기 마법사에서 1x2 분할 화면 채널​을 선택합니다.

  4. 다음​을 클릭하고 제목​을 다중 영역​으로 입력합니다.

  5. 만들기​를 클릭하여 채널 만들기를 완료합니다.

하나 이상의 영역에서 단일 자산 사용

모든 개별 영역에서 이미지나 비디오와 같은 단일 자산을 사용할 수 있습니다. 구현하려면 아래 단계를 따르십시오.

  1. 채널에 컨텐츠 추가

    1. 영역 —> 채널—> 다중 영역​으로 이동합니다.
    2. MultiZone 채널을 선택하고 작업 표시줄에서 편집​을 클릭하여 편집기를 엽니다.

  2. 채널에 이미지 추가

    두 영역에서 단일 이미지나 비디오를 재생하려면 아래 그림과 같이 채널 편집기의 각 영역에 이미지를 드래그하여 놓으면 됩니다.

    이미지

하나 이상의 영역에서 순차 컨텐츠 사용

영역이 다른 영역에 이미지 시퀀스와 비디오를 표시하려면 아래 단계를 따르십시오.

  1. 채널 폴더 만들기

    1. Zones —> MultiZone —> 채널​으로 이동하고 작업 표시줄에서 만들기​를 클릭합니다.
    2. 만들기 마법사에서 채널 폴더​를 선택하고 다음​을 클릭합니다.
    3. 제목을 EmbeddedChannels​로 입력하고 만들기​를 클릭합니다.

    screen_shot_2018-12-19at125428pm

  2. 채널 폴더에 2개의 채널 추가

    1. 영역 —> 채널 —> 포함된 채널​으로 이동하고 작업 표시줄에서 만들기​를 클릭합니다.
    2. 만들기 마법사에서 시퀀스 채널​을 선택하여 Zone1​이라는 이름의 채널을 만듭니다.
    3. Zone1​을 선택하고 작업 표시줄에서 편집​을 클릭하여 편집기를 엽니다.
    4. 이 채널에 몇 개의 이미지를 드래그하여 놓습니다.
    5. 마찬가지로 EmbeddedChannels 폴더에 Zone2​라는 제목의 다른 시퀀스 채널을 만드십시오.
    6. 비디오를 이 채널에 드래그하여 놓습니다.

    다음 그림은 Zone1 및 Zone2 채널을 보여줍니다.

    screen_shot_2018-12-19at125930pm

    Zone1 시퀀스 채널의 편집기에 추가된 이미지는 아래에 표시됩니다.

    screen_shot_2018-12-19at125930pm

    Zone2 시퀀스 채널의 편집기에 추가된 비디오는 아래에 표시됩니다.

    screen_shot_2018-12-19at125930pm

  3. 기본 채널(다중 영역)에 포함된 시퀀스(구성 요소) 추가

    1. 영역 —> 채널 —> 다중 영역​으로 이동합니다.

    2. 작업 표시줄에서 편집​을 클릭하여 편집기를 엽니다.

    3. 포함된 시퀀스 구성 요소를 두 영역 모두로 드래그하여 놓습니다.

    4. 영역 중 하나에서 포함된 시퀀스를 선택합니다.

    5. 편집기에 포함된 시퀀스 중 하나에 해당하는 구성(렌치) 아이콘을 클릭합니다.

    6. 아래 그림과 같이 채널 경로를 영역 —> 채널 —> 포함된 채널 —> 영역1​으로 선택합니다.

    7. 마찬가지로 Zone2​를 편집기의 다른 포함된 시퀀스 구성 요소에 추가합니다.

      이미지

위치 만들기 및 표시

Screens 플레이어에서 컨텐츠를 보려면 위치 및 디스플레이를 만들어야 합니다. 위치 및 디스플레이를 만들려면 아래 절차를 따르십시오.

  1. 위치 생성

    1. 영역 —> 위치 폴더로 이동합니다.
    2. 위치 폴더를 선택하고 작업 표시줄에서 만들기​를 클릭합니다.
    3. 만들기 마법사에서 위치​를 선택하고 다음​을 클릭합니다.
    4. 제목​을 SanJose​로 입력하고 만들기​를 클릭합니다.

  2. 디스플레이 만들기

    1. 영역 —> 위치 폴더로 이동합니다.
    2. SanJose 위치를 선택하고 작업 표시줄에서 만들기​를 클릭합니다.
    3. 만들기 마법사에서 표시​를 선택하고 다음​을 클릭합니다.
    4. 제목​을 로비​로 입력하고 만들기​를 클릭합니다.

디스플레이에 채널 할당

컨텐츠를 보려면 채널을 디스플레이에 지정해야 합니다. 아래 절차에 따라 디스플레이에 채널을 지정합니다.

  1. 디스플레이에 채널 지정

    1. 영역 —> 위치 —> SanJose—> 로비​로 이동합니다.

    2. 로비 디스플레이를 선택하고 작업 표시줄에서 채널 지정​을 클릭합니다.

    3. 채널 경로​에 MultiZone 채널 경로를 입력합니다.

    4. 지원되는 이벤트​를 초기 로드, 유휴 화면 및 Timer​으로 설정합니다.

    5. 저장​을 클릭합니다.

      이미지

    6. 마찬가지로, 다른 두 개의 포함된 채널(Zone1 및 Zone2)을 이 디스플레이에 할당해야 합니다.

    7. 세 개의 채널을 모두 로비 디스플레이에 할당하면 디스플레이 대시보드에서 지정된 채널을 볼 수 있습니다.

      이미지

      중요

      기본 채널(이 경우 MultiZone)을 디스플레이에 할당하면 다른 두 개의 포함된 채널 Zone1 및 Zone2​도 동일한 디스플레이에 지정해야 합니다.

장치 등록

위치 및 디스플레이를 설정하고 나면 아래 절차에 따라 장치를 등록하고 디스플레이를 장치에 할당합니다.

  1. 장치 등록

    1. Zones —> Devices 폴더로 이동합니다.

    2. 장치 폴더를 선택하고 작업 표시줄에서 장치 관리자​를 클릭합니다.

    3. 장치 등록​을 클릭하고 목록에서 보류 중인 장치를 선택합니다.

      노트

      장치의 제목은 장치 등록 탭에 표시된 장치 토큰(토큰 필드)과 일치해야 합니다.

    4. 제목이 장치 토큰과 일치하는 경우 장치를 선택하고 작업 표시줄에서 장치 등록​을 클릭합니다.

    5. 등록 코드가 Screens 플레이어 장치 등록 탭의 코드와 일치하는 경우 작업 표시줄에서 유효성 검사​를 클릭합니다.

      이미지

    6. 제목​을 Chrome-Device1​으로 입력하고 등록​을 클릭합니다.

    7. 디스플레이 지정​을 선택하고 장치 구성의 경로를 선택합니다.

    노트

    Screens 플레이어에서 컨텐츠를 보려고 하는 경우 디스플레이에 할당된 각 채널의 채널 대시보드에서 오프라인 콘텐츠 업데이트​를 클릭해야 합니다.

결과 보기

위의 단계를 사용하여 다중 영역 레이아웃을 구현하면 다음 출력이 표시됩니다.

서로 다른 두 영역에 컨텐츠를 표시하는 출력을 보려면 Screens 플레이어를 선택합니다. 왼쪽 및 오른쪽 영역(모두 포함된 시퀀스를 구성 요소로 사용).

왼쪽 영역은 시퀀스 채널이고 오른쪽 영역에는 비디오가 포함됩니다.

new2-1

이 페이지에서는