대화형 통신 제작 UI 소개

인터랙티브 커뮤니케이션을 작성하는 데 사용할 수 있는 다양한 유저 인터페이스 요소에 대한 소개

대화형 통신 작성을 위한 사용자 인터페이스는 직관적이며 대화형 커뮤니케이션의 인쇄 및 웹 채널을 작성하는 데 사용할 다음 내용을 제공합니다.

  • WYSIWYG 드래그 앤 드롭 방식의 문서 편집기
  • 자산에 대한 통합 저장소 - 서버에 업로드되고 서버에 만들어진 자산은 대화형 통신 제작 인터페이스의 자산 브라우저에서 사용할 수 있습니다

새 내용을 만들거나 기존 대화형 통신을 편집하는 경우 다음 사용자 인터페이스 요소를 사용합니다.

인터랙티브한 커뮤니케이션 저작 유저 인터페이스

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

사이드바

확대하려면 클릭

A. 채널 브라우저 B. C. 속성 컨텐츠 브라우저 D. Asset 브라우저E.E. ​Asset 구성 요소 브라우저F.F.F.Data Sources 브라우저 - Data Sources 브라우저G.GBrowserData Sources 기본 - Content

사이드바는 다음과 같습니다.

  • 채널 브라우저

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

  • 컨텐츠 브라우저

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

  • 속성 브라우저

    구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 예를 들어 문서 컨테이너의 속성을 보려면 다음을 수행하십시오.

    구성 요소를 선택한 다음 필드 수준 > 문서 컨테이너​를 탭한 다음 cmppr를 탭합니다.

  • 자산 브라우저

    레이아웃 조각, 이미지, 문서, 페이지, 비디오 등 다양한 유형의 컨텐츠를 구분합니다. 작성자는 자산을 대화형 통신에 드래그하여 놓을 수 있습니다.

  • 구성 요소 브라우저

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

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

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

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

  • 데이터 소스 브라우저

    Data Sources 브라우저는 대화형 통신을 생성하는 동안 선택한 양식 데이터 모델에 사용 가능한 데이터 소스를 표시합니다.

구성 요소작업을 위한 주요 포인트

인터랙티브한 커뮤니케이션 구성 요소를 사용하여 작업할 때 중요한 점은 다음과 같습니다.

  • 각 구성 요소에는 모양과 기능을 제어하는 연관된 속성이 있습니다. 구성 요소의 속성을 구성하려면 구성 요소를 누르고 cmppr을 탭하여 속성 브라우저에서 구성 요소 속성을 엽니다.

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

  • 제목이 인터랙티브 커뮤니케이션에 표시되는 한 속성 브라우저를 열지 않고도 편집기에서 대화형 통신 구성 요소 인라인의 제목 속성을 수정할 수 있습니다. 이렇게 하려면 다음을 수행하십시오.

    1. 제목 속성이 있고 제목 숨기기 속성이 비활성화된 구성 요소를 탭하여 선택합니다.
    2. aem_6_3_edit을 탭하여 제목을 편집 가능하게 만듭니다.
    3. 제목을 수정하고 Return 키를 누르거나 구성 요소 외부의 아무 곳이나 눌러 변경 내용을 저장합니다. Esc 키를 눌러 변경 내용을 취소합니다.

구성 요소 도구 모음

구성 요소를 선택하면 구성 요소로 작업할 수 있는 도구 모음이 표시됩니다. 구성 요소의 잘라내기, 붙여넣기, 이동 및 속성 지정 옵션이 제공됩니다. 옵션은 다음과 같습니다.

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

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

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

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

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

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

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

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

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

J.자세히:선택한 구성 요소로 작업할 수 있는 추가 옵션을 제공합니다.

  • SOM 표현식 보기(패널에만 해당)
  • 패널에서 개체 그룹화(패널에만 해당)
  • 조각 편집(조각에만 해당)
  • 패널을 조각으로 저장(패널에만 해당)
  • 하위 패널 추가(패널에만 해당)
  • 패널 도구 모음 추가(패널에만 해당)
  • 바꾸기(패널이 아님)

페이지 도구 모음

맨 위의 [페이지] 도구 모음은 대화형 통신을 미리 보고 속성을 변경할 수 있는 옵션을 제공합니다. 작성 시 대화형 통신을 미리 보고 그에 따라 변경할 수 있습니다. 페이지 도구 모음에서 다음을 볼 수 있습니다.

  • 사이드 패널 토글 사이드 패널 켜기/끄기:사이드바를 표시하거나 숨길 수 있습니다.

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

  • 에뮬레이터 눈금자:태블릿과 휴대폰과 같은 다양한 디스플레이 크기에 맞게 인터랙티브 커뮤니케이션의 모양을 에뮬레이션할 수 있습니다.

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

    • 편집:대화형 통신 및 해당 구성 요소의 속성을 편집할 수 있습니다. 예를 들어, 구성 요소 추가, 이미지 삭제 및 필수 필드 지정을 참조하십시오.

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

    • 개발자:개발자가 다음을 수행할 수 있습니다.

      • 인터랙티브 커뮤니케이션을 구성하는 요소를 살펴볼 수 있습니다.
      • 언제 어디에서 발생하는지 디버깅하여 문제를 해결할 수 있습니다.
    • Target:사이드바에 나열되지 않은 사용자 지정 구성 요소 또는 기본 구성 요소를 활성화하거나 비활성화할 수 있습니다.

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

이 페이지에서는