시각적 콘텐츠 조각 visual-content-fragments

콘텐츠 조각에는 디자인 또는 레이아웃 없이 JSON 출력용 구조화된 콘텐츠가 포함되어 있습니다. HTML 템플릿을 추가하면 HTML 형식의 구조화된 컨텐츠와 함께 완전히 장식된 시각적 경험을 만들 수 있습니다.

  • 콘텐츠 조각을 시각화하면 콘텐츠 품질 보증이 도움이 되어 이해 당사자가 콘텐츠 조각 편집기를 열지 않고도 콘텐츠를 사용하기 전에 검토할 수 있습니다

  • 시각적 조각을 전달하면 웹, 이메일 또는 모바일 앱과 같은 채널에서 모듈식 경험을 재사용할 수 있는 옴니채널 전달이 도움이 됩니다.

첨부된 AEM 템플릿의 레이아웃 및 디자인을 사용하는 HTML 콘텐츠 조각의 렌더링된 출력을 시각적 콘텐츠 조각​이라고 합니다.

HTML 템플릿에는 레이아웃 및 디자인 정보가 포함되어 있어 콘텐츠 조각을 시각화할 수 있습니다. HTML 태그를 콘텐츠 조각 모델에 정의된 데이터 유형(필드)에 매핑하기 위해 Handlebars 구문을 사용하여 템플릿과 콘텐츠 조각 간의 연결이 설정됩니다. 이 정의를 사용하면 콘텐츠 조각 편집기의 각 필드에 작성된 콘텐츠를 템플릿 내의 적절한 위치에 표시할 수 있습니다.

사용자 또는 개발 팀은 자체 HTML 템플릿을 만들고 사용자 지정한 다음 콘텐츠 조각 모델에 하나 이상을 업로드 및 첨부하여 해당 조각을 경험으로 렌더링, 미리 보기 및 게시 및 필요에 따라 제공할 수 있습니다.

NOTE
일반 템플릿​은(는) 항상 AEM 내에서 기본값으로 사용할 수 있으며 모든 모델과 연결됩니다. 이 템플릿을 사용하면 구조화된 컨텐츠의 키/값 쌍을 깔끔한 표 스타일 형식으로 표시하여 컨텐츠 품질 Assurance(QA) 사용 사례를 지원할 수 있습니다.
NOTE
시각적 컨텐츠 조각(HTML 템플릿이 있는 컨텐츠 조각)은 현재 복합 필드를 지원하지 않습니다.

템플릿 만들기 create-a-template

핸들바를 사용하여 개발된 HTML 템플릿을 사용하면 시각적 컨텐츠 조각을 HTML 형식으로 미리 보고 전달할 수 있습니다. Handlebars.js 구문은 콘텐츠 조각 필드에서 작성된 콘텐츠의 자리 표시자를 정의합니다.

사용자 고유의 템플릿 개발에 대한 자세한 내용은 시각적 콘텐츠 조각 - 템플릿을 참조하십시오.

템플릿 업로드 및 할당 upload-and-assign-your-template

템플릿은 콘텐츠 조각 모델에 연결되어 있으므로 해당 모델에서 만든 콘텐츠 조각과 함께 사용할 수 있습니다.

새 HTML 템플릿을 업로드하려면:

  1. 콘텐츠 조각 콘솔에서 콘텐츠 조각 모델​에 대한 탭을 엽니다.

  2. 조각 모델의 위치로 이동합니다.

  3. 필요한 모델의 정보 아이콘(i)을 선택합니다.

    콘텐츠 조각 콘솔 - 정보 아이콘

    오른쪽 패널이 표시됩니다.

  4. 아래로 스크롤하여 HTML 템플릿​을 표시합니다. 일반 템플릿​이(가) 기본값이므로 이미 나열되어 있습니다.

    일반 HTML 템플릿으로 조각 미리 보기

  5. HTML 파일(.html)에서 템플릿을 업로드하려면 +​을(를) 선택하십시오. 대화 상자를 통해 로컬 파일 시스템을 검색​하고 템플릿 파일을 선택할 수 있습니다.

  6. 업로드되면 두 가지 템플릿 보기가 검토하도록 표시됩니다.

    • 왼쪽: 콘텐츠 없이 템플릿 렌더링
    • 오른쪽: AEM으로 가져오기 전에 여기에서 편집할 수도 있는 HTML 코드

    업로드 시 HTML 템플릿 검토

  7. 계속하려면 다음​을 선택하세요.

  8. AEM에서 사용할 템플릿 이름​을(를) 입력하십시오.

  9. 템플릿 만들기​를 사용하여 확인합니다.

  10. 템플릿은 AEM에서 만들어지고 콘텐츠 조각 모델의 속성에서 HTML 템플릿 아래에 나열됩니다.
    로드된 후에는 조각 미리 보기 및 게시에 사용할 수 있습니다. 템플릿을 다운로드​하거나 삭제​할 수도 있습니다.

템플릿을 사용하여 조각 미리보기 및 게시 preview-and-publish-your-fragment-with-a-template

템플릿을 사용하여 시각적 콘텐츠 조각을 미리 보고 게시하려면 다음 작업을 수행하십시오.

IMPORTANT
콘텐츠 조각을 게시하려면 콘텐츠 조각이 게시되어야 합니다.
NOTE
일반 템플릿​을(를) 항상 사용할 수 있으므로 사용자 지정 템플릿을 로드하지 않고 조각을 미리 볼 수 있습니다.
  1. 콘텐츠 조각 콘솔에서 조각의 위치로 이동합니다.

  2. 다음 중 하나를 선택합니다.

    • 콘솔에서 조각 선택
    • 편집기에서 조각 열기
  3. 다음의 위쪽 도구 모음에서 미리 보기​를 선택합니다.

    • 콘텐츠 조각 콘솔
    • 편집기에서 템플릿​을(를) 선택할 수 있습니다.

두 경우 모두 새 모달 창이 열립니다.

  1. 사용 가능한 사용자 지정 템플릿이 없으면 AEM은 일반 템플릿​을 사용하여 조각을 표시합니다. 일반 템플릿:

    • 조각의 필드를 테이블 형식으로 표시합니다(이름 및 콘텐츠).
    • 참조된 조각의 전체 하이드레이션된 콘텐츠를 동일한 보기에 표시합니다.
  2. 사용자 지정 서식 파일을 사용할 수 있는 경우 사용할 서식 파일(일반 서식 파일 포함)을 선택할 수 있습니다.

  3. 콘텐츠 조각이 이미 게시된 경우 시각적 콘텐츠 조각을 다음 중 하나에 게시할 수 있습니다.

    • 미리 보기 URL은 미리 볼 VCF 게시​입니다.
    • 게재에 VCF 게시​를 사용하는 게시 URL
  4. 미리 보기 URL 및 게시 URL​을(를) 보고 복사할 수도 있습니다.

예:

HTML 템플릿으로 조각 미리 보기

템플릿 편집 edit-your-template

콘텐츠 조각 모델의 경우 콘솔에서 템플릿을 편집할 수 있습니다.

  1. 콘텐츠 조각 콘솔의 콘텐츠 조각 모델 섹션으로 이동합니다.

  2. 모델을 선택합니다.

  3. 정보 아이콘을 사용하여 오른쪽 패널을 엽니다.

  4. 오른쪽 패널의 HTML 템플릿 섹션에서 템플릿에 대해 편집 옵션을 사용합니다.

    HTML 템플릿 편집

  5. 제공된 대화 상자에서 업데이트를 수행합니다.

  6. 다음​을 선택합니다.

  7. AEM은 대화 상자를 제공하고 기존 템플릿을 업데이트하는 중이며 변경 사항이 현재 버전을 덮어쓰게 됨을 경고합니다.

  8. 템플릿 업데이트​로 변경 내용을 확인합니다.

시각적 콘텐츠 조각 전달 deliver-your-visual-content-fragment

시각적 컨텐츠 조각은 HTML 형식의 다양한 대상에 전달할 수 있습니다.

브라우저에 게재 deliver-to-the-browser

미리 보기 URL 또는 게시 URL​을(를) 복사합니다. 브라우저에서 직접 액세스하여 시각적 콘텐츠 조각을 볼 수 있습니다.

Edge Delivery Services에 게재 deliver-to-edge-delivery-services

EDS(Edge Delivery 서비스) 페이지에서 시각적 조각을 전달할 수 있습니다.

  1. EDS 프로젝트로 이동합니다.
  2. embed 유형의 Block​을(를) 추가하거나 액세스합니다.
  3. 게시 URL​을(를) 블록에 붙여 넣습니다.
  4. EDS 페이지 게시. 조각의 HTML 표현이 표시됩니다.
NOTE
자세한 내용은 Edge Delivery Services과 통합(포함 블록)을 참조하세요.

AEM 페이지에 게재 deliver-to-an-AEM-page

핵심 구성 요소인 콘텐츠 조각을 사용하여 AEM 페이지에서 시각적 콘텐츠 조각을 전달할 수 있습니다.

페이지에서 콘텐츠 조각 구성 요소를 구성할 때:

  1. 필요한 콘텐츠 조각​을 지정하십시오.

  2. 콘텐츠 조각 시각화​를 선택하십시오.

  3. 드롭다운 목록에서 필요한 시각화 템플릿​을(를) 선택합니다.

    시각적 조각에 대한 콘텐츠 조각 구성 요소 구성

  4. 시각적 조각이 페이지에 표시됩니다.

NOTE
자세한 내용은 통합 - 핵심 구성 요소가 있는 AEM Sites을 참조하세요.

템플릿 다운로드 download-your-template

AEM에서 HTML 템플릿을 다운로드하려면 다음을 수행하십시오.

  1. 콘텐츠 조각 콘솔에서 콘텐츠 조각 모델​에 대한 탭을 엽니다.

  2. 조각 모델의 위치로 이동합니다.

  3. 필요한 모델의 정보 아이콘(i)을 선택합니다.

    콘텐츠 조각 콘솔 - 정보 아이콘

    오른쪽 패널이 표시됩니다.

  4. 아래로 스크롤하여 HTML 템플릿​을 표시합니다.

  5. 다운로드할 템플릿으로 타원을 선택합니다.

  6. 다운로드​를 선택합니다.

  7. 파일 이름과 위치를 지정합니다.

  8. 저장​을 사용하여 확인합니다.

템플릿 삭제 delete-your-template

새 HTML 템플릿을 삭제하려면(AEM에서) 다음 작업을 수행하십시오.

  1. 콘텐츠 조각 콘솔에서 콘텐츠 조각 모델​에 대한 탭을 엽니다.

  2. 조각 모델의 위치로 이동합니다.

  3. 필요한 모델의 정보 아이콘(i)을 선택합니다.

    콘텐츠 조각 콘솔 - 정보 아이콘

    오른쪽 패널이 표시됩니다.

  4. 아래로 스크롤하여 HTML 템플릿​을 표시합니다.

  5. 다운로드할 템플릿으로 타원을 선택합니다.

  6. 삭제​를 선택합니다.

  7. 다음 대화 상자에서 삭제​를 사용하여 작업을 확인합니다.

recommendation-more-help
experience-manager-cloud-service-help-main-toc