다중 영역 레이아웃

마지막 업데이트: 2024년 7월 15일

작성 대상:

  • 중간
  • 관리자
  • 개발자

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

  • 개요
  • 다중 영역 레이아웃 만들기
  • 사전 요구 사항
  • 하나 이상의 영역에서 단일 Assets 사용
  • 하나 이상의 영역에서 순차적 컨텐츠 사용

개요

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

프로젝트 요구 사항에 따라 한 채널에 여러 영역이 필요하며 이를 하나의 포괄적인 단위로 편집해야 하는 경우가 있습니다. 예를 들어, 단일 채널에서 세 개의 별도 영역에서 실행되는 관련 소셜 미디어 피드가 있는 제품 시퀀스입니다.

NOTE
다중 영역 채널에서는 잠재적인 충돌 및 의도하지 않은 동작으로 인해 자산 수준 스케줄링을 권장하지 않습니다. 에셋 수준 스케줄링이 필요한 경우 별도의 시퀀스 채널을 생성하고 해당 채널 내에 스케줄링 로직을 적용합니다. 그런 다음 시퀀스 채널을 다중 영역 채널에 포함합니다.

사전 요구 사항

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

다중 영역 레이아웃 만들기

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

채널 만들기

  1. Adobe Experience Manager 링크(왼쪽 상단)를 클릭한 다음 Screens ​을 클릭합니다. 또는 직접 http://localhost:4502/screens.html/content/screens(으)로 이동할 수 있습니다.

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

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

  4. 다음 ​을 클릭하고 제목 ​을 MultiZone(으)로 입력하십시오.

  5. 채널 만들기를 완료하려면 만들기 ​를 클릭하십시오.

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

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

  1. 채널에 콘텐츠 추가

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

  2. 채널에 이미지 추가

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

    이미지

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

영역에 이미지 및 비디오 시퀀스를 다른 영역에 표시하려면 아래 단계를 따라 자세한 내용을 확인하십시오.

  1. 채널 폴더 만들기

    1. 영역 > 다중 영역 > 채널(으)로 이동한 다음 작업 표시줄에서 만들기 ​를 클릭합니다.
    2. 만들기 마법사에서 채널 폴더 ​를 클릭하고 다음 ​을 클릭합니다.
    3. 제목을 EmbeddedChannels(으)로 입력하고 만들기 ​를 클릭합니다.

    screen_shot_2018-12-19at125428pm

  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. 주 채널(MultiZone)에 포함된 시퀀스(구성 요소) 추가

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

    2. 작업 표시줄에서 편집 ​을 클릭합니다.

    3. 포함된 시퀀스 구성 요소를 두 영역으로 끌어다 놓습니다.

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

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

    6. 아래 그림과 같이 채널 경로를 영역 > 채널 > 임베드된 채널 > Zone1(으)로 클릭합니다.

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

      이미지

위치 및 디스플레이 만들기

AEM Screens 플레이어에서 컨텐츠를 볼 수 있도록 위치 및 디스플레이를 만듭니다.

  1. 위치 만들기

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

  2. 디스플레이 만들기

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

디스플레이에 채널 할당

디스플레이에 채널을 할당하여 콘텐츠를 봅니다. 아래 단계에 따라 채널을 디스플레이에 지정하십시오.

  1. 디스플레이에 채널 할당

    1. 영역 > 위치 > 산호세> 로비 ​로 이동합니다.

    2. 로비 표시를 클릭하고 작업 표시줄에서 채널 할당 ​을 클릭합니다.

    3. 채널 경로 ​에서 MultiZone 채널의 경로를 입력하십시오.

    4. 지원되는 이벤트 ​을(를) 초기 로드, 유휴 화면 및 타이머(으)로 설정하십시오.

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

      이미지

    6. 마찬가지로 다른 두 개의 임베드된 채널(Zone1 및 Zone2)을 이 디스플레이에 할당하십시오.

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

      이미지

      IMPORTANT
      기본 채널(이 경우 MultiZone)을 디스플레이에 할당하면 다른 두 개의 임베드된 채널 Zone1 ​과(와) Zone2 ​도 동일한 디스플레이에 할당해야 합니다.