설명서AEM 6.5사용 안내서

대화형 통신 작성 UI 소개 introduction-to-interactive-communication-authoring-ui

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

작성 대상:

  • 관리자
  • 사용자
  • 개발자

대화형 통신을(를) 작성하기 위한 사용자 인터페이스는 직관적이며 대화형 통신의 인쇄 및 웹 채널을 작성하기 위해 다음을 제공합니다.

  • WYSIWYG 드래그 앤 드롭 문서 편집기
  • 에셋용 통합 저장소 - 서버에 업로드되고 생성된 에셋은 대화형 통신 작성 인터페이스의 에셋 브라우저에서 사용할 수 있습니다

기존 대화형 통신을 만들거나 편집할 때 다음 사용자 인터페이스 요소를 사용합니다.

대화형 통신 작성 사용자 인터페이스

A. 사이드바 B. 페이지 도구 모음 C. 콘텐츠 영역

사이드바 sidebar

사이드바

A. 채널 브라우저 B. 콘텐츠 브라우저 C. 속성 브라우저 D. 에셋 브라우저 E. 구성 요소 브라우저 F. 데이터 소스 브라우저 - 데이터 모델 G. 데이터 소스 브라우저 - 기본 콘텐츠

사이드바에는 다음 항목이 포함됩니다.

  • 채널 브라우저

채널 브라우저는 대화형 통신의 인쇄 채널과 웹 채널 간을 전환하는 데 도움이 됩니다. 채널 브라우저에서 선택한 채널을 기반으로 콘텐츠 및 구성 요소와 같은 브라우저에 옵션이 표시됩니다.

  • 콘텐츠 브라우저
    컨텐트 브라우저에서 선택한 채널에 대한 문서의 객체 계층 구조를 볼 수 있습니다. 작성자는 문서 개체 트리에서 해당 요소를 탭하여 특정 구성 요소로 이동할 수 있습니다. 작성자는 웹 채널에서 객체를 검색하고 이 트리에서 재배열할 수 있습니다.

  • 속성 브라우저

    구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 예를 들어 문서 컨테이너의 속성을 보려면 다음과 같이 하십시오.
    구성 요소를 선택한 다음 필드 수준 > 문서 컨테이너 ​를 선택하고 cmpr 을 선택합니다.

  • Assets 브라우저
    레이아웃 단편, 이미지, 문서, 페이지, 비디오와 같은 다양한 유형의 콘텐츠를 분리합니다. 작성자는 자산을 대화형 통신으로 드래그 앤 드롭할 수 있습니다.

  • 구성 요소 브라우저
    문서의 인쇄 및 웹 채널을 만드는 데 사용할 수 있는 구성 요소를 포함합니다. 구성 요소를 대화형 통신으로 드래그하여 요소를 추가하고 요구 사항에 따라 추가된 요소를 구성할 수 있습니다. 다음 표에서는 인쇄 및 웹 채널에 대한 구성 요소 브라우저에 나열된 구성 요소에 대해 설명합니다.

구성 요소
인쇄 채널
웹 채널
기능
차트
✓
✓
대화형 통신에서 양식 데이터 모델 수집 항목에서 검색한 2차원 데이터의 시각적 표현을 위해 사용할 수 있는 차트를 추가합니다.
문서 조각
✓
✓
재사용 가능한 구성 요소, 텍스트, 목록 또는 조건을 대화형 통신에 추가할 수 있습니다. 대화형 통신에 추가하는 재사용 가능한 구성 요소는 양식 데이터 모델 기반이거나 양식 데이터 모델이 없을 수 있습니다.
이미지
✓
✓
이미지를 삽입할 수 있습니다.
패널
-
✓
패널 구성 요소는 다른 구성 요소를 함께 그룹화하기 위한 자리 표시자이며 구성 요소 그룹이 대화형 통신에서 어떻게 배치되는지 제어합니다. 또한 패널 구성 요소를 사용하여 교육 자격 증명을 채우는 데 필요한 여러 항목 내에서 최종 사용자가 반복적으로 사용할 수 있는 구성 요소 그룹을 만들 수 있습니다. 여러 탭이 있는 대화형 통신의 탭에 대해 각각 패널을 사용하는 것도 좋습니다.
표
*
✓
행 및 열에 데이터를 구성할 수 있는 표를 추가합니다.
대상 영역
**
✓
웹 채널에 대상 영역을 삽입하여 웹 채널별 구성 요소를 구성합니다.
텍스트
-
✓
대화형 통신의 웹 채널에 텍스트를 추가합니다. 텍스트는 양식 데이터 모델 개체를 사용하여 콘텐츠를 동적으로 만들 수 있습니다.

* 인쇄 채널에서 레이아웃 조각을 사용하여 표를 추가합니다.

** 인쇄 채널에서 대상 영역은 XDP/인쇄 템플릿에 미리 정의되어 있습니다. 대화형 통신 작성 UI를 사용하여 새 대상 영역을 추가할 수 없습니다.

  • 데이터 원본 브라우저
    데이터 소스 브라우저에는 대화형 통신을 만드는 동안 선택한 양식 데이터 모델의 사용 가능한 데이터 소스가 표시됩니다.

구성 요소 작업의 핵심 사항 key-points-for-working-with-components

대화형 통신 구성 요소로 작업할 때의 주요 사항은 다음과 같습니다.

  • 각 구성 요소에는 모양 및 기능을 제어하는 관련 속성이 있습니다. 구성 요소의 속성을 구성하려면 구성 요소를 선택하고 cmpr 을 선택하여 속성 브라우저에서 구성 요소 속성을 엽니다.

  • 구성 요소는 요소 이름으로 식별됩니다. cmppr 을(를) 선택하면 속성 브라우저에서 요소 이름 필드 값을 변경하여 구성 요소의 이름을 변경할 수 있습니다. 요소 이름 필드는 문자, 숫자, 하이픈(-) 및 밑줄(_)만 허용합니다. 다른 특수 문자는 허용되지 않으며 요소 이름은 문자로 시작해야 합니다.

  • 제목이 대화형 통신에 표시되는 한 속성 브라우저를 열지 않고 편집기에서 인라인으로 대화형 통신 구성 요소의 제목 속성을 수정할 수 있습니다. 방법은 다음과 같습니다.

    1. 제목 속성이 있고 제목 숨기기 속성이 비활성화된 구성 요소를 선택하려면 선택합니다.

    2. 제목을 편집할 수 있게 하려면 aem_6_3_edit 을(를) 선택하십시오.

    3. 제목을 수정하고 Return 키를 선택하거나 구성 요소 외부 아무 곳이나 선택하여 변경 사항을 저장합니다. Esc 키를 선택하여 변경 내용을 취소합니다.

구성 요소 도구 모음 component-toolbar

구성 요소 도구 모음 레이블

구성 요소를 선택하면 해당 구성 요소로 작업할 수 있는 도구 모음이 표시됩니다. 구성 요소의 속성을 자르고, 붙여넣고, 이동하고, 지정하는 옵션이 제공됩니다. 옵션은 다음과 같습니다.

A.구성: 구성 ​을 선택하면 구성 요소 속성이 사이드바에 표시됩니다.

B.규칙 편집: 규칙 편집을 선택하면 선택한 구성 요소에 대한 규칙을 편집하고 만들 수 있는 규칙 편집기가 나타납니다. 규칙 편집기에서 다른 양식 객체(구성 요소)를 선택하고 해당 양식 객체에 대한 규칙을 편집/작성할 수도 있습니다.

C.복사: 복사 옵션을 사용하여 구성 요소를 복사하여 대화형 통신의 다른 위치에 붙여넣을 수 있습니다.

D.잘라내기: 잘라내기 옵션을 사용하여 대화형 통신에서 구성 요소를 한 위치에서 다른 위치로 이동할 수 있습니다.

E. 삭제: 대화형 통신에서 구성 요소를 삭제할 수 있습니다.

F. 구성 요소 삽입: 선택한 구성 요소 위에 구성 요소를 삽입할 수 있습니다.

G. 붙여넣기: 위에서 설명한 옵션을 사용하여 잘라내거나 복사한 구성 요소를 붙여넣을 수 있습니다.

H. 그룹: 두 개 이상의 구성 요소를 함께 자르고 복사하거나 붙여넣으려는 경우 여러 구성 요소를 선택할 수 있습니다.

I. 상위: 구성 요소의 상위 항목을 선택할 수 있습니다.

J. SOM 식 보기: 구성 요소에 대한 SOM 식을 볼 수 있습니다.

K: 패널의 개체 그룹화: 패널에서 해당 구성 요소에 대한 작업을 동시에 수행할 수 있도록 해당 구성 요소를 그룹화할 수 있습니다. 자세한 내용은 패널의 그룹 개체를 참조하십시오.

L. 하위 패널 추가(패널만 해당): 하위 패널을 패널에 추가할 수 있습니다.

M: 패널 도구 모음 추가(패널만 해당):패널 구성 요소용 도구 모음을 추가할 수 있습니다. 그런 다음 도구 모음에서 추가 작업을 수행할 수 있습니다.

또한 도구 모음의 바꾸기 옵션을 사용하면 기존 구성 요소를 대체 구성 요소로 바꿀 수 있습니다. 패널 구성 요소에는 옵션을 사용할 수 없습니다.

페이지 도구 모음 page-toolbar

맨 위에 있는 페이지 도구 모음에서는 대화형 통신을 미리 보고 해당 속성을 변경할 수 있는 옵션을 제공합니다. 대화형 통신을 작성할 때 미리 보고 그에 따라 변경할 수 있습니다. 페이지 도구 모음에는 다음 항목이 표시됩니다.

  • 사이드 패널 전환 사이드 패널 전환 : 사이드바를 표시하거나 숨길 수 있습니다.

  • 페이지 정보 페이지 정보 : 페이지 속성을 볼 수 있습니다.

  • 에뮬레이터 눈금자 : 태블릿 및 휴대폰과 같은 다양한 디스플레이 크기에 대해 대화형 통신의 모양을 에뮬레이션할 수 있습니다.

  • 편집: 편집, 스타일, 개발자 및 디자인과 같은 다른 모드를 선택할 수 있습니다.

    • 편집: 대화형 통신 및 해당 구성 요소의 속성을 편집할 수 있습니다. 예: 구성 요소 추가, 이미지 드롭, 필수 필드 지정 등.

    • 스타일: 대화형 통신 구성 요소의 모양 스타일을 지정할 수 있습니다. 예를 들어 스타일 모드에서는 패널을 선택하고 배경색을 지정할 수 있습니다.

    • 개발자: 개발자가 다음과 같은 작업을 수행할 수 있습니다.

      • 대화형 커뮤니케이션이 무엇으로 구성되어 있는지 알아봅니다.
      • 장소와 시간에 따라 발생하는 문제를 디버그하면 문제 해결에 도움이 됩니다.

    • Target: 사용자 지정 구성 요소 또는 사이드바에 나열되지 않은 기본 구성 요소를 활성화하거나 비활성화할 수 있습니다.

  • 미리 보기: 게시할 때 대화형 통신이 어떻게 보이는지 미리 볼 수 있습니다.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2