디스플레이 레이아웃 편집기

검색
사용 안내서

이 페이지

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

버전용 도움말 콘텐츠:

영역 매핑을 사용하면 서로 다른 영역을 만들고, 문맥에 따라 단일 화면에서 결합할 수 있는 비디오, 이미지 및 텍스트와 같은 다양한 자산을 사용할 수 있습니다. 이미지, 비디오 및 텍스트를 가져와서 모두 함께 혼합하여 대화령의 직관적인 디지털 경험을 만들 수 있습니다. 프로젝트 요구 사항에 따라 디스플레이에 여러 영역이 필요할 수 있습니다.

예를 들어, 단일 디스플레이의 분리된 두 영역에서 관련된 소셜 미디어 피드가 실행 중인 제품 시퀀스가 있을 수 있습니다.

개요

채널용 디스플레이를 만드는 동안 채널에서 서로 다른 템플릿 선택 사항을 선택하여 컨텐츠를 보거나 관리할 수 있습니다.

디스플레이용 영역을 만드는 동안 다음 템플릿을 사용할 수 있습니다.

  • 2x1 
  • 2x2 
  • 3x1 
  • 4x1
  • 5x1

이러한 템플릿 중 하나를 사용하면 단일 화면에서 다양한 컨텐츠를 활용할 수 있는 대화형의 직관적인 디지털 그래픽을 만들 수 있습니다.

참고:

채널 및 디스플레이 작성에 대한 자세한 내용은 각각 스크린 작성에서 채널 관리 및 디스플레이 관리를 참조하십시오.

사용 사례 설명

이 사용 사례에서는 컨텐츠를 활용하는 채널이 있는 AEM Screens 프로젝트를 만들어 이 프로젝트를 화면에 여러 영역으로 표시할 수 있습니다. 

참고:

영역은 컨텐츠 크기를 변경하지 않으며 그러한 작업은 컨텐츠를 채널에 삽입하기 전에 수행해야 합니다.

프로젝트 생성 절차

아래 절차에 따라 AEM Screens 프로젝트용 영역 매핑을 성취하는 방법을 보여주는 AEM Screens 프로젝트를 만드십시오.

  1. 새 스크린 프로젝트 생성

    1. Adobe Experience Manager 링크(왼쪽 위)를 선택한 다음 스크린을 선택합니다. 또는 http://localhost:4502/screens.html/content/screens로 바로 이동해도 됩니다.
    2. 만들기를 클릭하여 새 스크린 프로젝트를 만듭니다.
    3. 스크린 프로젝트 만들기 마법사에서 스크린을 선택하고 다음을 클릭합니다. 
    4. 제목으로 데모 매핑 프로젝트를 입력하고 만들기를 클릭합니다.
    zm1

  2. 새 채널 폴더 만들기

    1. 영역 매핑 프로젝트로 이동합니다.
    2. 작업 표시줄에서 만들기를 클릭합니다. 마법사가 열립니다.
    3. 채널 폴더를 선택하고 다음을 클릭합니다.
    4. 제목으로 이중 영역을 입력하고 만들기를 클릭합니다.
    zm2

  3. 새 채널 만들기

    1. 만든 영역 매핑 프로젝트로 이동하고 채널 폴더(이중 영역)를 선택합니다.
    2. 작업 표시줄에서 만들기를 클릭합니다. 마법사가 열립니다.
    3. 시퀀스 채널을 선택하고 다음을 클릭합니다. 
    4. 제목으로 왼쪽을 입력하고 만들기를 클릭합니다.

    유사하게, 영역 매핑 프로젝트에서 오른쪽이라는 다른 시퀀스 채널을 만드십시오.

    zm3

  4. 채널에 컨텐츠 추가

    1. 만든 영역 매핑 프로젝트로 이동하고 만든 채널을 선택합니다.
    2. 작업 표시줄에서 편집을 클릭합니다.
    3. 왼쪽용 편집기가 열립니다. 작업 표시줄의 왼쪽에 있는 사이드 패널을 전환하는 아이콘을 클릭하여 자산과 구성 요소를 엽니다.
    4. 채널에 추가할 구성 요소를 드래그하여 놓습니다.

    유사하게, 오른쪽 채널에도 컨텐츠를 추가하십시오.

    zm4

    참고:

    프로젝트 요구 사항에 따라 채널의 컨텐츠를 다양한 자산(이미지, 비디오)으로 채울 수 있습니다.

  5. 새 위치 만들기

    1. 영역 매핑 프로젝트로 이동하여 위치 폴더를 선택합니다.
    2. 작업 표시줄의 더하기 아이콘 옆에 있는 만들기를 클릭합니다. 마법사가 열립니다. 
    3. 마법사에서 위치를 선택하고 다음을 클릭합니다.
    4. 위치에 사용할 제목을 입력하고(제목으로 San Jose 입력) 만들기를 클릭합니다.
    zm5

  6. San Jose용 새 디스플레이 만들기

    1. 디스플레이를 만들 위치(데모 매핑 프로젝트 --> 위치 --> San Jose)로 이동하고 San Jose를 선택합니다.
    2. 작업 표시줄에서 만들기를 클릭합니다. 만들기 마법사에서 디스플레이를 선택하고 다음을 클릭합니다.
    3. 디스플레이 위치에 사용할 제목을 입력합니다(제목으로 이중 영역 입력).
    4. 디스플레이 탭 아래에서 레이아웃 세부 사항을 선택합니다. 해상도로 Full HD를 선택하십시오.
    5. 수평 장치 수로 2를 선택하고 수직 장치 수로 1을 선택합니다.
    6. 만들기를 클릭합니다.
    zm6

  7. 채널 지정

    1. [영역 매핑 프로젝트] --> [위치] --> 'San Jose' --> '이중 영역 디스플레이'로 이동합니다.
    2. 작업 표시줄에서 이중 영역 디스플레이를 선택하고 [채널 지정]을 선택합니다. 또는,
    3. 대시보드를 클릭하고 아래 그림과 같이 [지정된 채널 및 일정] 패널의 오른쪽 위에서 [+채널 지정]을 선택합니다. [채널 지정] 대화 상자가 열립니다.
    4. [채널 역할]을 '영역'으로 입력합니다.
    5. 경로 기준 [참조 채널]을 선택합니다. 채널에서 채널 폴더 경로를 선택하십시오([영역 매핑 프로젝트] --> [채널] --> '이중 영역').
    6. 이 채널에 대한 [우선순위]를 1로 선택합니다. [지원되는 이벤트]를 [초기 로드] 및 [유휴 화면]으로 선택하십시오.
    7. [저장]을 클릭합니다.
    zm7

  8. 장치 등록 및 지정

    1. 별도의 브라우저 창을 실행합니다. 웹 브라우저를 사용하여 Screens 플레이어로 이동하거나 AEM Screens 앱을 실행하십시오. 장치를 열면 장치의 상태가 등록되지 않음으로 표시됩니다. 
    2. AEM 대시보드에서 영역 매핑 프로젝트 --> 장치로 이동합니다.
    3. 작업 표시줄에서 장치 관리자를 클릭합니다.
    4. 장치 등록을 클릭하면 보류 중인 장치가 표시됩니다.
    5. 등록할 장치를 선택하고 장치 등록을 클릭합니다.
    6. 웹 브라우저나 AEM Screens 플레이어에서 코드를 확인하여 코드의 유효성을 검사해야 합니다. 유효성 검사를 클릭하여 장치 등록 화면으로 이동합니다.
    7. 제목으로 영역 장치를 입력하고 등록을 클릭하십시오. 그러면 장치가 등록됩니다.
    8. 디스플레이 지정을 클릭하여 디스플레이에 장치를 지정하는 다음 단계로 이동합니다.
    9. 장치 지정을 클릭하고 채널용 디스플레이 경로를 /content/screens/Test_Project/Locations/TestLocation/TestDisplay로 선택합니다. 지정을 클릭하십시오.
    10. 완료를 클릭하여 프로세스를 완료합니다. 이제 장치가 할당되었습니다.
    zm8

  9. 다중 영역 디스플레이 만들기

    1. 영역 매핑 프로젝트 --> 위치 --> San Jose --> 이중 영역 디스플레이로 이동하여 디스플레이를 선택하고 작업 표시줄에서 대시보드를 클릭합니다.
    2. 장치 패널에서 플레이어의 장치 구성 왼쪽에 있는 아이콘을 선택하고 속성을 클릭합니다.
    3. 장치 구성 탭으로 이동하여 매핑 및 템플릿 필드를 입력합니다. 매핑 필드에서 {"a1":"${display.channel}/left", "a2": "${display.channel}/right"}를 입력하고 템플릿으로 grid-2x1을 입력하십시오. 
    4. 저장 및 닫기를 클릭하고 플레이어를 다시 로드합니다.

    참고:

    장치 구성의 매핑 및 템플릿 이해

    • 식별자 "a1"과 "a2"는 템플릿에 정의된 영역, 즉 "screens-zone-a1"과 "screens-zone-a2"에 해당합니다.
    • ${display.channel}/left"는 영역에 포함할 채널을 가리키며, 여기서 "display.channel"은 디스플레이에 있는 현재 채널 경로를 가리킵니다. 이렇게 하면 채널의 "왼쪽" 및 "오른쪽" 하위 항목이 효과적으로 포함됩니다.

    screen_shot_2018-01-22at114708am

AEM Screens 플레이어에서 컨텐츠 보기

AEM Screens 플레이어를 로드하거나 웹 브라우저를 사용하십시오.

두 채널 모두(왼쪽 및 오른쪽)의 컨텐츠가 Screens 플레이어에 표시되는 것을 확인할 수 있습니다. 컨텐츠는 2x1 디스플레이 영역으로 표시됩니다.

screen_shot_2018-01-22at120206pm

유추

AEM Screens에서 채널을 만들 때 사용할 수 있는 템플릿 중 하나를 사용하는 영역 매핑 기능을 사용하면 클라이언트 측 병합을 수행할 수 있습니다. 화면에서 다양한 영역을 만들고, 나아가 영역을 비디오, 이미지 및 기타 사용 가능한 자산으로 채울 수도 있습니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책