경험 조각 사용

이 페이지에서는 다음 주제를 다룹니다.

  • 개요
  • AEM Screens에서의 경험 조각 사용
  • 페이지에 변경 사항 전파

개요

경험 조각​은 페이지 내에서 참조할 수 있는 컨텐츠 및 레이아웃을 포함한 하나 이상의 구성 요소 그룹입니다. 경험 조각은 단락 시스템 내에 어떤 것이든 포함할 수 있는 하나 이상의 구성 요소 등, 구성 요소를 포함할 수 있으며, 이러한 구성 요소는 완전한 경험에 참조되거나 세 번째 종단점에 의해 요청됩니다.

AEM Screens에서의 경험 조각 사용

노트

다음 예제에서는 We.Retail​을 Sites 페이지에서 AEM Screens 프로젝트로 경험 조각을 활용하는 데모 프로젝트로 사용합니다.

예를 들어, 다음 워크플로우는 Sites에서 We.Retail의 경험 구성요소를 사용하는 방법을 보여줍니다. 웹 페이지를 선택하고 프로젝트 중 하나에서 AEM Screens 채널에서 해당 컨텐츠를 활용할 수 있습니다.

전제 조건

채널을 사용하여 데모 프로젝트 만들기

프로젝트 만들기

  1. 스크린 프로젝트 만들기​를 클릭하여 새 프로젝트를 만듭니다.
  2. 제목을 DemoProject​로 입력합니다.
  3. 저장​을 클릭합니다.

DemoProject​가 AEM Screens에 추가됩니다.

채널 생성

  1. 만든 DemoProject 로 이동하고 채널 폴더를 선택합니다.

  2. 작업 표시줄에서 만들기​를 클릭하여 마법사를 엽니다.

  3. 마법사에서 시퀀스 채널 템플릿을 선택하고 다음​을 클릭합니다.

  4. 제목TestChannel 로 입력하고 만들기​를 클릭합니다.

TestChannel​이 DemoProject​에 추가됩니다.
screen_shot_2019-07-29at105101am

경험 조각 생성

아래 절차에 따라 We.Retail​에서 DemoProject​의 TestChannel​에 콘텐츠를 활용하십시오.

  1. We.Retail에서 사이트 페이지로 이동합니다

    1. 사이트 로 이동하고 We.Retail -> 미국 -> 영어 -> 장비​를 선택하고 이 페이지를 선택하여 스크린 채널에 대한 경험 조각으로 사용합니다.

    2. 작업 표시줄에서 편집​을 클릭하여 스크린 채널의 경험 조각으로 사용할 페이지를 엽니다.

  2. 컨텐츠 다시 사용

    1. 채널에 포함할 조각을 선택합니다.
    2. 오른쪽에서 마지막 아이콘을 클릭하여 경험 조각​으로 변환 대화 상자를 엽니다.

    screen_shot_2019-07-29at105314am

  3. 경험 조각 만들기

    1. 작업​을 새 경험 조각 만들기​로 선택합니다.

    2. 상위 경로​를 선택합니다.

    3. 템플릿​을 선택합니다. 여기서 경험 조각 - 화면 변형 템플릿을 선택합니다( /libs/settings/screens/experience-fragments/templates/experience-fragment-template-screens 필드의 값).

    4. 조각 제목​을 ScreensFragment​로 입력합니다.

    5. 확인 표시를 클릭하여 새 경험 조각 만들기를 완료합니다.

    screen_shot_2019-07-29at105918am

    참고: 더 쉬운 옵션을 선택하려면 필드 오른쪽의 확인 표시를 클릭하여 선택 대화 상자를 엽니다.

  4. 경험 조각의 Live Copy 생성

    1. AEM 홈 페이지로 이동합니다.
    2. 경험 구성요소​를 선택하고 ScreensFragment​를 강조 표시하고 아래 그림과 같이 변형을 Live Copy​로 클릭합니다.

    screen_shot_2019-07-29at110443am

    c. Live Copy 만들기 마법사에서 ScreensFragment​을 선택하고 다음​을 클릭합니다.

    d. 제목이름​을 화면​으로 입력합니다.

    e. 만들기​를 클릭하여 Live Copy를 만듭니다.

    f. 완료​를 클릭하여 ScreensFragment 페이지로 돌아갑니다.

    screen_shot_2019-07-29at110616am

    노트

    스크린 조각을 만들면 조각의 속성을 편집할 수 있습니다. 조각을 선택하고 작업 표시줄에서 속성​을 클릭합니다.

    스크린 조각의 속성 편집

    1. ScreensFragment(이전 단계에서 만든 경우)로 이동하고 작업 표시줄에서 속성​을 클릭합니다.

    2. 아래 그림과 같이 오프라인 구성 탭을 선택합니다.

    클라이언트측 라이브러리(java 및 css) 및 정적 파일​을 경험 조각에 추가할 수 있습니다.

    다음 예에서는 경험 조각에 정적 파일의 일부로서 클라이언트측 라이브러리와 글꼴을 추가하는 것을 보여줍니다. 조각

  5. 스크린 채널에서 경험 조각을 구성 요소로 사용

    1. Screens 조각을 사용할 스크린 채널로 이동합니다.

    2. TestChannel​을 선택하고 작업 표시줄에서 편집​을 클릭합니다.

    3. 사이드 탭에서 구성 요소 아이콘을 클릭합니다.

    4. 경험 조각​을 채널에 끌어다 놓습니다.

    screen_shot_2019-07-29at123115pm

    e. 경험 조각 구성 요소를 선택하고 맨 위의 왼쪽(공구모양) 아이콘을 선택하여 경험 조각 대화 상자를 엽니다.

    f. 경로​의 단계 3​에서 만든 조각의 Screens 라이브 카피를 선택합니다.

    screen_shot_2019-07-26at82650pm

    f. 경험 조각​의 3단계​에서 만든 조각의 Screens 라이브 카피를 선택합니다.

    screen_shot_2019-07-26at82509pm

    h. 기간​에 밀리초 값을 입력합니다.

    나. 경험 조각 대화 상자에서 오프라인 구성​을 선택하여 클라이언트측 라이브러리와 정적 파일을 정의합니다.

    노트

    (4) 단계에서 구성한 것 외에 클라이언트 측 라이브러리 또는 정적 파일을 추가하려는 경우 경험 조각 대화 상자의 오프라인 구성 탭에서 추가할 수 있습니다.

    screen_shot_2019-07-26at82844pm

    j. 확인 표시를 클릭하여 프로세스를 완료합니다.

결과 유효성 검사

이전 단계가 완료되면 다음 방법으로 ChannelOne​에서 경험 조각의 유효성을 확인할 수 있습니다.

  1. TestChannel​로 이동합니다.
  2. 작업 표시줄에서 미리 보기​를 선택합니다.

아래 그림과 같이 채널의 사이트 페이지(경험 조각의 Live Copy)에서 컨텐츠를 볼 수 있습니다.
screen_shot_2018-06-08at120739pm

페이지에 변경 사항 전파

Live Copy는 롤아웃 구성에 정의된 대로 동기화 작업에 의해 유지 관리되는 소스의 사본을 나타냅니다.

경험 조각 이후, 생성된 는 사이트 페이지의 Live Copy이므로, 마스터 페이지에서 해당 특정 조각을 변경하는 경우 경험 조각을 사용한 채널 또는 대상의 변경 사항을 볼 수 있습니다.

노트

Live Copy에 대한 자세한 내용은 컨텐츠 재사용 을 참조하십시오. 다중 사이트 관리자 및 Live Copy.

아래 절차에 따라 마스터 채널의 변경 내용을 대상 채널에 전파합니다.

  1. 사이트 (마스터) 페이지에서 경험 조각을 선택하고 연필 아이콘을 클릭하여 경험 조각의 항목을 편집합니다.

    screen_shot_2018-06-08at122655pm

  2. 경험 조각을 선택하고 공구모양 아이콘을 클릭하여 이미지를 편집할 대화 상자를 엽니다.

    screen_shot_2018-06-08at25031pm

  3. 제품 표 대화 상자가 열립니다.

    screen_shot_2018-06-08at25306pm

  4. 이미지를 편집할 수 있습니다. 예를 들어 이 조각에서 첫 번째 이미지가 대체됩니다.

    screen_shot_2018-06-08at25608pm

  5. 경험 조각을 선택하고 롤아웃 아이콘을 클릭하여 채널에서 사용되는 조각에 변경 사항을 전파합니다.

    screen_shot_2018-06-08at31352pm

  6. 롤아웃 을 클릭하여 변경 사항을 확인합니다.

    그러면 변경 사항이 롤아웃됩니다.

    screen_shot_2018-06-08at32148pm

변경 사항 확인

아래 절차에 따라 채널의 변경 사항을 확인하십시오.

  1. Screens -> 채널 -> TestChannel​로 이동합니다.

  2. 작업 표시줄에서 미리 보기​를 클릭하여 변경 내용을 확인합니다.

다음 이미지는 TestChannel​의 변경 사항을 보여줍니다.
screen_shot_2018-06-08at33351pm

이 페이지에서는