텍스트 오버레이

이 섹션에서는 다음 주제를 다룹니다.

  • 개요
  • 텍스트 오버레이 사용
  • 텍스트 오버레이 속성 이해
  • 텍스트 오버레이에서 ContextHub 값 사용
주의

텍스트 오버레이 기능은 AEM 6.3 기능 팩 5 또는 AEM 6.4 기능 팩 3을 설치한 경우에만 사용할 수 있습니다.

개요

텍스트 오버레이는 AEM Screens에서 사용할 수 있는 기능으로, 이미지 위에 겹쳐진 제목 또는 설명을 제공하여 시퀀스 채널에서 매력적인 경험을 만들 수 있습니다.

사용자 지정 구성 요소를 만드는 방법에 대한 자세한 내용은 AEM Screens 구성 요소 확장 을 참조하십시오.

이 섹션에서는 AEM Screens 프로젝트에서 포스터 구성 요소를 사용 및 활용하고 시퀀스 채널 중 하나에서 텍스트 오버레이로 사용하는 방법을 소개합니다.

텍스트 오버레이 사용

다음 섹션에서는 AEM Screens 프로젝트에서 텍스트 오버레이를 사용하는 방법에 대해 설명합니다.

전제 조건

이 기능 구현을 시작하기 전에 텍스트 오버레이 구현을 시작하기 위한 전제 조건으로 프로젝트를 설정했는지 확인하십시오. 예,

  • AEM Screens 프로젝트를 만듭니다(이 예에서 TextOverlayDemo)

  • 채널 폴더 아래에 TextSample​이라는 시퀀스 채널을 만듭니다

  • TextSample 채널에 컨텐츠를 추가합니다

다음 이미지는 채널 폴더에 TextSample 채널이 있는 TextOverlayDemo 프로젝트를 보여줍니다.

screen_shot_2018-12-16at75908pm

AEM Screens 채널에서 텍스트 오버레이를 사용하려면 아래 절차를 따르십시오.

  1. TextOverlayDemo —> 채널 —> TextSample 로 이동하고 작업 표시줄에서 편집​을 클릭하여 편집기를 엽니다.

    screen_shot_2018-12-16at80017pm

  2. 이미지를 선택하고 구성(공구아이콘)을 클릭하여 속성 대화 상자를 엽니다.

    screen_shot_2018-12-16at80221pm

  3. 아래 그림과 같이 대화 상자의 탐색 막대에서 텍스트 오버레이 옵션을 선택합니다.

    screen_shot_2018-12-16at80424pm

텍스트 오버레이 속성 이해

텍스트 오버레이 속성을 사용하여 스크린 프로젝트의 구성 요소에 텍스트를 추가할 수 있습니다. 다음 섹션에서는 텍스트 오버레이에서 사용할 수 있는 속성에 대한 개요를 제공합니다.

텍스트

텍스트 상자에 텍스트를 추가하고 굵게, 기울임체, 밑줄 등과 같은 인쇄 강조를 추가할 수 있습니다.

색상 변형이 옵션을 사용하면 텍스트를 어두운(검은색 텍스트) 또는 밝은(흰색 텍스트) 중 하나로 만들 수 있습니다.

크기 조정 및 위치지정이 옵션을 사용하면 텍스트를 가로 또는 세로로 정렬하거나 텍스트 정렬을 위해 세밀하게 정렬된 도구를 사용할 수 있습니다.

노트

세분화된 도구를 올바르게 사용하려면 (px)를 접미어로 사용하여 올바른 위치(예: 200px)를 픽셀 단위로 식별하십시오. 이 식의 결과는 시작점에서 200픽셀이 됩니다.

텍스트 오버레이에서 ContextHub 값 사용

다음 섹션에서는 데이터 저장소의 값 사용(예: 텍스트 오버레이 구성 요소의 google 시트)에 대해 설명합니다.

전제 조건

AEM Screens 프로젝트에 대한 ContextHub 구성을 설정해야 합니다.

데이터 저장소를 사용하여 데이터 기반 자산 변경 사항을 설정 및 관리하는 방법에 대한 자세한 내용은 AEM Screens에서 ContextHub 구성을 참조하십시오.

프로젝트에 필요한 구성을 설정한 후에는 아래 단계에 따라 google 시트의 값을 사용하십시오.

  1. TextOverlayDemo —> 채널 —> TextSample​로 이동하고 작업 표시줄에서 속성​을 클릭합니다.

  2. 개인화 탭을 선택하여 ContextHub 구성을 설정합니다.

    1. ContextHub 경로​를 libs > 설정 > cloudsettings > 기본 > ContextHub 구성​을 선택하고 선택​을 클릭합니다.

    2. 세그먼트 경로​를 conf > screens > 설정 > wcm > 세그먼트​로 선택하고 선택​을 클릭합니다.

    3. 저장 후 닫기​를 클릭합니다.

      노트

      Context Hub 구성 및 세그먼트를 처음 저장한 ContextHub 및 세그먼트 경로를 사용합니다.

      image1

  3. TextOverlayDemo —> 채널 —> TextSample 로 이동하고 작업 표시줄에서 편집​을 클릭하여 편집기를 엽니다.

    image1

  4. 이 페이지의 텍스트 오버레이 사용 섹션에 설명된 대로 이미지 및 텍스트 오버레이 구성 요소를 이미지에 추가합니다.

  5. 구성(공구아이콘)을 클릭하여 이미지 대화 상자를 엽니다.

    image1

  6. 이미지 대화 상자에서 ContextHub 탭으로 이동합니다. 추가​를 클릭합니다.

    노트

    ContextHub 구성을 설정하지 않은 경우 이 옵션은 프로젝트에 대해 비활성화됩니다.

  7. 자리 표시자 필드에 ​을 입력하고 ContextHub 변수​에 있는 google 시트의 값을 가져올 행을 선택하고(이 경우, 값은 google 시트의 행 2 및 열 1에서 검색됨) 기본값​을 20​로 입력합니다. 아래 그림과 같이 입력합니다. 완료되면 확인 표시를 클릭합니다.

    image1

    노트

    참조용으로 다음 이미지에는 google 시트에서 검색된 값이 표시됩니다.

    image1

  8. 이미지 대화 상자에서 텍스트 오버레이 탭으로 돌아가서 아래 그림과 같이 현재 온도 {Value} 텍스트를 추가합니다.

    image1

  9. 미리 보기​를 클릭하여 원하는 출력을 봅니다.

    image1

이 페이지에서는