텍스트 오버레이

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

  • 개요
  • 텍스트 오버레이 사용
  • 텍스트 오버레이 속성 이해
  • 텍스트 오버레이에서 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](https://docs.adobe.com/content/help/ko-KR/experience-manager-screens/user-guide/developing/configuring-context-hub.html)에서 [ContextHub 구성을 참조하십시오.

프로젝트에 필요한 구성을 설정했으면 아래 절차에 따라 google 시트의 값을 사용하십시오.

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

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

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

    2. 세그먼트 경로​를 conf > screens > 설정 > wcm > <a10/>세그먼트​를 선택하고​선택<a1> 3/>.

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

      노트

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

      image1

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

    image1

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

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

    image1

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

    노트

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

  7. 자리 표시자 필드에 ​을 입력하고 ContextHub 변수​에서 google 시트의 값을 가져올 행을 선택하고 기본 값​을 입력합니다. 를 20​로 설정합니다. 완료되면 체크 표시를 클릭합니다.

    image1

    노트

    참조용으로 다음 이미지는 google 시트의 검색 값을 표시합니다.

    image1

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

    image1

  9. 원하는 출력을 보려면 미리 보기​를 클릭합니다.

    image1

이 페이지에서는

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free