다중 영역 레이아웃

마지막 업데이트: 2023-05-20
  • 작성 대상:
  • Intermediate
    Admin
    Developer

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

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

개요

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

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

사전 요구 사항

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

다중 영역 레이아웃 만들기

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

채널 만들기

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

  2. 다음으로 이동 채널 폴더 및 클릭 만들기 작업 표시줄에서

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

  4. 클릭 다음 을(를) 입력한 후 제목 다음으로: 다중 영역.

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

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

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

  1. 채널에 콘텐츠 추가

    1. 다음으로 이동 영역 —> 채널—> 다중 영역.
    2. 다음 항목 선택 다중 영역 채널 및 클릭 편집 작업 표시줄에서 을 클릭하여 편집기를 엽니다.
  2. 채널에 이미지 추가

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

    이미지

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

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

  1. 채널 폴더 만들기

    1. 다음으로 이동 영역 —> 다중 영역 —> 채널 및 클릭 만들기 작업 표시줄에서
    2. 선택 채널 폴더 다음에서 만들기 마법사 및 클릭 다음.
    3. 제목을 다음으로 입력 EmbeddedChannel 및 클릭 만들기.

    screen_shot_2018-12-19at125428pm

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

    1. 다음으로 이동 영역 —> 채널 —> EmbeddedChannel 및 클릭 만들기 작업 표시줄에서
    2. 선택 시퀀스 채널 다음에서 만들기 이라는 제목이 있는 채널을 만드는 마법사 Zone1.
    3. 선택 Zone1 및 클릭 편집 작업 표시줄에서 을 클릭하여 편집기를 엽니다.
    4. 몇 개의 이미지를 이 채널로 드래그 앤 드롭하십시오.
    5. 마찬가지로 라는 다른 시퀀스 채널을 만듭니다. Zone2 위치: EmbeddedChannel 폴더를 삭제합니다.
    6. 비디오를 이 채널로 드래그 앤 드롭하십시오.

    다음 그림은 채널을 보여줍니다 Zone1Zone2:

    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. 다음으로 채널 경로 선택 영역 —> 채널 —> EmbeddedChannel —> Zone1​을 참조하십시오.

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

      이미지

위치 및 디스플레이 만들기

스크린 플레이어에서 콘텐츠를 볼 수 있는 위치 및 디스플레이를 만듭니다.

  1. 위치 생성

    1. 다음으로 이동 영역 —> 위치 폴더를 삭제합니다.
    2. 다음 항목 선택 위치 폴더 및 클릭 만들기 작업 표시줄에서
    3. 선택 위치 다음에서 만들기 마법사 및 클릭 다음.
    4. 다음을 입력합니다. 제목 다음으로: 산호세 및 클릭 만들기.
  2. 디스플레이 만들기

    1. 다음으로 이동 영역 —> 위치 폴더를 삭제합니다.
    2. 다음 항목 선택 산호세 위치 및 클릭 만들기 작업 표시줄에서
    3. 선택 표시 다음에서 만들기 마법사 및 클릭 다음.
    4. 다음을 입력합니다. 제목 다음으로: 로비 및 클릭 만들기.

디스플레이에 채널 할당

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

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

    1. 다음으로 이동 영역 —> 위치 —> 산호세—> 로비.

    2. 다음 항목 선택 로비 표시 및 클릭 채널 할당 작업 표시줄에서

    3. 에 대한 경로 입력 다중 영역 의 채널 채널 경로.

    4. 설정 지원되는 이벤트 다음으로: 초기 로드, 유휴 화면, 및 타이머.

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

      이미지

    6. 마찬가지로 다른 두 개의 임베드된 채널(Zone1Zone2)을 클릭하여 표시합니다.

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

      이미지

      중요

      주 채널을 할당하면(이 경우, 다중 영역) 디스플레이에 다른 두 개의 임베드된 채널을 할당해야 합니다 Zone1Zone2 동일한 디스플레이에 추가.

장치 등록

위치 및 디스플레이를 설정한 후에는 아래 단계에 따라 장치를 등록하고 장치에 디스플레이를 지정하십시오.

  1. 장치 등록

    1. 다음으로 이동 영역 —> 장치 폴더를 삭제합니다.

    2. 다음 항목 선택 장치 폴더 및 클릭 장치 관리자 작업 표시줄에서

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

      노트

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

      1. 제목이 장치 토큰과 일치하는 경우 장치를 선택하고 을(를) 클릭합니다 **장치 등록** 작업 표시줄에서
    4. 등록 코드가 Screens 플레이어의 코드와 일치하는 경우 장치 등록 탭을 클릭하고 유효성 검사 작업 표시줄에서

      이미지

    5. 다음을 입력합니다. 제목 다음으로: Chrome-Device1 및 클릭 등록.

    6. 선택 디스플레이 할당 장치 구성의 경로를 선택합니다.

    노트

    Screens 플레이어에서 콘텐츠를 보려면 다음을 클릭하십시오. 오프라인 컨텐츠 업데이트 디스플레이에 할당된 각 채널에 대한 채널 대시보드에서 을 참조하십시오.

결과 보기

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

화면 플레이어를 선택하여 두 개의 다른 영역에 컨텐츠를 표시하는 출력을 확인합니다. 왼쪽 및 오른쪽 영역(둘 다 포함된 시퀀스를 구성 요소로 사용)은

왼쪽 영역은 시퀀스 채널이고 오른쪽 영역은 비디오를 포함한다.

new2-1

이 페이지에서는