Adobe Experience Manager 터치 지원 UI의 개념 concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager(AEM)는 터치 및 데스크톱 장치 모두에서 작동하도록 디자인된 작성 환경용 반응형 디자인이 포함된 터치 지원 UI를 제공합니다.

NOTE
터치 지원 UI는 AEM용 표준 UI입니다. 클래식 UI는 AEM 6.4에서 더 이상 사용되지 않습니다.

터치 지원 UI에는 다음이 포함됩니다.

  • 다음과 같은 세트 헤더입니다.

    • 로고 표시
    • 전역 탐색에 대한 링크를 제공합니다.
    • 검색, 도움말, Experience Cloud 솔루션, 알림 및 사용자 설정과 같은 기타 일반 작업에 대한 링크를 제공합니다.
  • 왼쪽 레일(필요할 때 표시되며 숨길 수 있음)은 다음과 같이 표시할 수 있습니다.

    • 타임라인
    • 참조
    • 필터
  • 탐색 헤더입니다. 이 헤더는 다시 문맥을 구분하며 다음을 표시할 수 있습니다.

    • 현재 사용 중인 콘솔, 해당 콘솔 내 위치 또는 둘 다를 나타냅니다.
    • 왼쪽 레일 선택
    • 이동 경로
    • 적절한 만들기 작업에 액세스
    • 선택 항목 보기
  • 다음과 같은 콘텐츠 영역:

    • 콘텐츠 항목(페이지, 에셋, 포럼 게시물 등)을 나열합니다.
    • 열, 카드 또는 목록과 같이 요청한 대로 형식을 지정할 수 있습니다.
    • 반응형 디자인 사용(디스플레이는 장치 및/또는 창 크기에 따라 자동으로 크기 조정)
    • 무한 스크롤링 사용(더 이상 페이지 매김을 하지 않음, 모든 항목이 하나의 창에 나열됨)

chlimage_1-79

터치 지원 UI는 여러 제품에서 사용자 경험에 일관성을 제공하도록 Adobe에서 설계되었습니다. 이는 다음을 기반으로 합니다.

  • Coral UI(CUI) 터치 사용 UI에 대한 Adobe 시각적 스타일의 구현입니다. Coral UI는 제품/프로젝트/웹 애플리케이션이 UI 시각적 스타일을 채택하는 데 필요한 모든 것을 제공합니다.
  • Granite UI 구성 요소가 Coral UI로 빌드되었습니다.

터치 지원 UI의 기본 원칙은 다음과 같습니다.

  • 모바일 우선(데스크탑을 염두에 두고)
  • 반응형 디자인
  • 컨텍스트 관련 표시
  • 재사용 가능
  • 포함된 참조 설명서 포함
  • 포함된 테스트 포함
  • 이러한 원칙이 모든 요소 및 구성 요소에 적용되도록 하는 상향식 설계

터치 사용 UI 구조에 대한 자세한 개요는 AEM 터치 사용 UI 구조를 참조하십시오.

AEM 기술 스택 aem-technology-stack

AEM은 Granite 플랫폼을 기반으로 하며, Granite 플랫폼에는 Java™ Content Repository가 포함되어 있습니다.

chlimage_1-80

Granite granite

Granite는 Adobe의 오픈 웹 스택으로, 다음을 포함한 다양한 구성 요소를 제공합니다.

  • 애플리케이션 런처
  • 모든 것이 배포되는 OSGi 프레임워크
  • 애플리케이션 구축을 지원하는 여러 OSGi 표준 서비스
  • 다양한 로깅 API를 제공하는 포괄적인 로깅 프레임워크
  • JCR API 사양의 CRX 저장소 구현
  • Apache Sling 웹 프레임워크
  • 현재 CRX 제품의 추가 부분
NOTE
Granite는 Adobe 내에서 개방형 개발 프로젝트로 운영됩니다. 코드, 토론 및 문제에 대한 기여는 회사 전체에서 이루어집니다.
그러나 Granite는 오픈 소스 프로젝트가 아님 ​입니다. 여러 오픈 소스 프로젝트(특히 Apache Sling, Felix, Jackrabbit, Lucene)를 기반으로 하고 있지만, Adobe은 공개 프로젝트와 내부 프로젝트 간에 명확한 선을 긋습니다.

Granite UI granite-ui

Granite 엔지니어링 플랫폼은 기본 UI 프레임워크를 제공합니다. 주요 목표는 다음과 같습니다.

  • 세분화된 UI 위젯 제공
  • UI 개념 구현 및 모범 사례 설명(긴 목록 렌더링, 목록 필터링, 개체 CRUD, CUD 마법사…)
  • 확장 가능한 플러그인 기반 관리 UI 제공

이는 다음 요구 사항을 준수합니다.

  • "모바일 우선" 존중
  • 확장 가능
  • 재정의 용이성

chlimage_1-81
GraniteUI.pdf

파일 가져오기
Granite UI:

  • Sling의 RESTful 아키텍처 사용
  • 컨텐츠 중심 웹 애플리케이션 구축을 위한 구성 요소 라이브러리 구현
  • 세분화된 UI 위젯 제공
  • 표준화된 기본 UI 제공
  • 확장 가능
  • 모바일 장치와 데스크탑 장치 모두를 위해 설계되었습니다(먼저 모바일을 고려함).
  • 모든 Granite 기반 플랫폼/제품/프로젝트에서 사용할 수 있습니다(예: AEM).

chlimage_1-82

클라이언트측과 서버측 client-side-vs-server-side

Granite UI의 클라이언트 서버 통신은 개체가 아닌 하이퍼텍스트로 구성되므로 클라이언트가 비즈니스 논리를 이해할 필요가 없습니다

  • 서버는 시맨틱 데이터로 HTML을 풍성하게 한다
  • 클라이언트는 하이퍼미디어(상호 작용)로 하이퍼텍스트를 강화합니다

chlimage_1-83

클라이언트측 client-side

이는 작성자가 대화형 웹 앱을 빌드하려는 의도를 표현할 수 있도록 제공되는 HTML 어휘의 확장을 사용합니다. 이는 WAI-ARIAmicroformats에 대한 유사한 접근 방식입니다.

주로 클라이언트측에서 실행되는 JS 및 CSS 코드로 해석되는 상호 작용 패턴(예: 양식을 비동기적으로 제출)의 컬렉션으로 구성됩니다. 클라이언트측의 역할은 상호 작용을 위한 마크업(서버에서 하이퍼미디어 어포던스로 제공됨)을 향상시키는 것입니다.

클라이언트측은 어떤 서버 기술과도 독립적입니다. 서버가 적절한 마크업을 제공하는 한 클라이언트측은 자신의 역할을 수행할 수 있습니다.

현재 JS 및 CSS 코드는 범주 아래에 Granite clientlibs(으)로 전달됩니다.

granite.ui.foundation and granite.ui.foundation.admin

이러한 구성 요소는 콘텐츠 패키지의 일부로 제공됩니다.

granite.ui.content

서버측 server-side

이는 작성자가 웹 앱을 빠르게 작성 ​할 수 있도록 하는 슬링 구성 요소 컬렉션으로 구성됩니다. 개발자는 구성 요소를 개발하고 작성자는 구성 요소를 웹 앱으로 어셈블합니다. 서버측의 역할은 하이퍼미디어 어포던스(마크업)를 클라이언트에게 제공하는 것이다.

현재 구성 요소는 다음 위치의 Granite 저장소에 있습니다.

/libs/granite/ui/components/foundation

이는 콘텐츠 패키지의 일부로 제공됩니다.

granite.ui.content

클래식 UI와의 차이점 differences-with-the-classic-ui

Granite UI와 ExtJS(클래식 UI에 사용됨) 간의 차이점도 관심 대상입니다.

ExtJS
Granite UI
원격 프로시저 호출
상태 전환
데이터 전송 개체
하이퍼미디어
클라이언트가 서버 내부 정보 파악
클라이언트가 내부 정보를 알 수 없음
"Fat 클라이언트"
"씬 클라이언트"
특수 클라이언트 라이브러리
범용 클라이언트 라이브러리

Granite UI Foundation 구성 요소 granite-ui-foundation-components

Granite UI 기초 구성 요소는 UI 구축에 필요한 기본 구성 요소를 제공합니다. 여기에는 다음과 같은 항목이 포함됩니다.

  • 버튼
  • 하이퍼링크
  • 사용자 아바타

기초 구성 요소는 다음과 같습니다.

/libs/granite/ui/components/foundation

이 라이브러리에는 각 Coral 요소에 대한 Granite UI 구성 요소가 포함되어 있습니다. 구성 요소는 저장소에 상주하면서 컨텐츠를 기반으로 합니다. 이를 통해 손으로 HTML 마크업을 작성하지 않고도 Granite UI 애플리케이션을 구성할 수 있다.

목적:

  • HTML 요소용 구성 요소 모델
  • 구성 요소 구성
  • 자동 장치 및 기능 테스트

구현:

  • 저장소 기반 구성 및 구성
  • Granite 플랫폼에서 제공하는 테스트 시설 사용
  • JSP 템플릿

이 기초 구성 요소 라이브러리는 다른 라이브러리에서 사용하거나 확장할 수 있습니다.

ExtJS 및 해당 Granite UI 구성 요소 extjs-and-corresponding-granite-ui-components

Granite UI를 사용하도록 ExtJS 코드를 업그레이드할 때 다음 목록에서는 ExtJS xtype 및 노드 유형과 그에 해당하는 Granite UI 리소스 유형에 대한 편리한 개요를 제공합니다.

ExtJS xtype
Granite UI 리소스 유형
button
granite/ui/components/foundation/form/button
checkbox
granite/ui/components/foundation/form/checkbox
componentstyles
cq/gui/components/authoring/dialog/componentstyles
cqinclude
granite/ui/components/foundation/include
datetime
granite/ui/components/foundation/form/datepicker
dialogfieldset
granite/ui/components/foundation/form/fieldset
hidden
granite/ui/components/foundation/form/hidden
html5smartfile, html5smartimage
granite/ui/components/foundation/form/fileupload
multifield
granite/ui/components/foundation/form/multifield
numberfield
granite/ui/components/foundation/form/numberfield
pathfield, paragraphreference
granite/ui/components/foundation/form/pathbrowser
selection
granite/ui/components/foundation/form/select
sizefield
cq/gui/components/authoring/dialog/sizefield
tags
granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags
textarea
granite/ui/components/foundation/form/textarea
textfield
granite/ui/components/foundation/form/textfield
노드 유형
Granite UI 리소스 유형
cq:WidgetCollection
granite/ui/components/foundation/container
cq:TabPanel
granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs
cq:panel
granite/ui/components/foundation/container

Granite UI 관리 구성 요소 granite-ui-administration-components

Granite UI 관리 구성 요소는 모든 관리 응용 프로그램에서 구현할 수 있는 일반 구성 요소를 제공하기 위해 기초 구성 요소를 기반으로 합니다. 여기에는 다음과 같은 것들이 포함됩니다.

  • 전역 탐색 막대
  • 레일(스켈레톤)
  • 검색 패널

목적:

  • 관리 애플리케이션을 위한 통합 디자인
  • 관리 애플리케이션용 RAD

구현:

  • 기초 구성 요소를 사용하여 사전 정의된 구성 요소
  • 구성 요소를 사용자 정의할 수 있습니다.

Coral UI coral-ui

CoralUI.pdf

파일 가져오기
Coral UI(CUI)는 여러 제품에서 사용자 경험에 일관성을 제공하도록 설계된 터치 지원 UI에 대한 Adobe의 시각적 스타일 구현입니다. Coral UI는 작성 환경에서 사용되는 시각적 스타일을 채택하는 데 필요한 모든 기능을 제공합니다.

CAUTION
Coral UI는 AEM 고객이 라이선스가 부여된 제품 사용 범위 내에서 애플리케이션 및 웹 인터페이스를 구축하기 위해 사용할 수 있는 UI 라이브러리입니다.
Coral UI 사용은 다음 경우에만 허용됩니다.
  • AEM과 함께 배송되고 번들로 제공된 경우.
  • 작성 환경의 기존 UI를 확장할 때 사용합니다.
  • Adobe 기업 자료, 광고 및 프레젠테이션.
  • Adobe 브랜드 애플리케이션의 UI(글꼴을 다른 용도로 사용할 수 없음).
  • 약간의 맞춤화가 필요합니다.
다음 환경에서는 Coral UI를 사용하지 않아야 합니다.
  • Adobe과 관련이 없는 문서 및 기타 항목.
  • 콘텐츠 만들기 환경(다른 사용자가 이전 항목을 생성할 수 있는 경우).
  • Adobe에 명확하게 연결되어 있지 않은 애플리케이션/구성 요소/웹 페이지.

Coral UI는 웹 애플리케이션 개발을 위한 빌딩 블록 모음입니다.

chlimage_1-84

처음부터 모듈식으로 설계되었으며, 각 모듈은 기본 역할을 기반으로 하여 별개의 레이어를 형성합니다. 비록 층들이 서로 지지하도록 설계되었지만, 필요하다면 독립적으로 사용될 수도 있다. 이를 통해 모든 HTML 지원 환경에서 Coral의 사용자 경험을 구현할 수 있습니다.

Coral UI를 사용하면 특정 개발 모델 및/또는 플랫폼을 사용해야 하는 것은 아닙니다. Coral의 기본 목표는 이 마크업을 내보내는 데 사용되는 실제 방법과 독립적으로 통일되고 깔끔한 HTML5 마크업을 제공하는 것입니다. 이는 클라이언트 또는 서버측 렌더링, 템플릿, JSP, PHP 또는 Adobe Flash RIA 애플리케이션에 사용될 수 있습니다.

HTML 요소 - 마크업 레이어 html-elements-the-markup-layer

HTML 요소는 모든 기본 UI 요소(탐색 막대, 버튼, 메뉴, 레일 등 포함)에 공통된 모양과 느낌을 제공합니다.

가장 기본적인 수준에서 HTML 요소는 전용 클래스 이름이 있는 HTML 태그입니다. 보다 복잡한 요소는 여러 태그로 구성될 수 있으며, 특정 방식으로 서로 내부에 중첩될 수 있습니다.

CSS를 사용하여 실제 모양과 느낌을 제공합니다. 모양과 느낌을 쉽게 사용자 지정할 수 있도록(예: 브랜딩의 경우) 실제 스타일 값은 런타임 중에 LESS 프리 프로세서에 의해 확장되는 변수로 선언됩니다.

목적:

  • 일반적인 모양과 느낌의 기본 UI 요소 제공
  • 기본 그리드 시스템 제공

구현:

  • Bootstrap에서 영감을 얻은 스타일의 HTML 태그
  • 클래스는 LESS 파일에 정의됩니다
  • 아이콘은 글꼴 스프라이트로 정의됩니다

예를 들어 마크업은 다음과 같습니다.

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

다음과 같이 표시됩니다.

chlimage_1-85

룩앤필은 전용 클래스 이름으로 요소에 연결된 LESS에서 정의됩니다(간결성을 위해 다음 추출이 단축됨).

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

실제 값은 LESS 변수 파일에 정의됩니다(간결성을 위해 다음 추출이 단축됨).

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

요소 플러그인 element-plugins

HTML 요소 대부분은 팝업 메뉴 열기 및 닫기와 같은 일종의 동적 동작을 표시해야 합니다. JavaScript을 사용하여 DOM을 조작하여 이러한 작업을 수행하는 요소 플러그인의 역할입니다.

플러그인은 다음 중 하나입니다.

  • 특정 DOM 요소에서 작동하도록 디자인되었습니다. 예를 들어 대화 상자 플러그인은 DIV class=dialog을(를) 찾을 것으로 예상합니다.
  • 일반적인 기능. 예를 들어 레이아웃 관리자는 DIV 또는 LI 요소의 모든 목록에 대한 레이아웃을 제공합니다

플러그인 동작은 다음 중 하나를 수행하여 매개 변수를 사용하여 사용자 정의할 수 있습니다.

  • JavaScript 호출을 사용하여 매개 변수 전달
  • HTML 마크업에 연결된 전용 data-* 특성 사용

개발자는 모든 플러그인에 대해 최상의 접근 방식을 선택할 수 있지만 경험상 규칙은 다음과 같습니다.

  • HTML 레이아웃과 관련된 옵션에 대한 data-* 특성입니다. 예를 들어 열의 수를 지정하려면
  • 데이터와 관련된 기능에 대한 API 옵션/클래스. 예를 들어 표시할 항목 목록 구성

양식 유효성 검사를 구현하는 데 동일한 개념을 사용합니다. 유효성을 검사하려는 요소의 경우 필수 입력 양식을 사용자 지정 data-* 특성으로 지정해야 합니다. 그런 다음 이 속성은 유효성 검사 플러그인에 대한 옵션으로 사용됩니다.

NOTE
HTML5 기본 양식 유효성 검사는 가능한 한 항상 사용하거나 확장해야 합니다.

목적:

  • HTML 요소에 동적 동작 제공
  • 순수 CSS로는 불가능한 사용자 정의 레이아웃 제공
  • 양식 유효성 검사 수행
  • 고급 DOM 조작 수행

구현:

  • 특정 DOM 요소에 연결된 jQuery 플러그인
  • data-* 특성을 사용하여 동작 사용자 지정

예제 마크업의 추출(data-* 특성으로 지정된 옵션 참고):

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
          <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

jQuery 플러그인에 대한 호출:

$('.cards').cardlayout ();

이는 다음과 같이 표시됩니다.

chlimage_1-86

cardLayout 플러그인은 각각의 높이를 기반으로 둘러싸인 UL 요소를 레이아웃하며 부모의 너비도 고려합니다.

HTML 요소 위젯 html-elements-widgets

위젯은 하나 이상의 기본 요소를 JavaScript 플러그인과 결합하여 "더 높은 수준의" UI 요소를 형성합니다. 이렇게 하면 단일 요소가 전달할 수 있는 것보다 더 복잡한 비헤이비어와 더 복잡한 모양과 느낌을 구현할 수 있습니다. 태그 선택기 또는 레일 위젯이 좋은 예입니다.

위젯은 사용자 정의 이벤트를 트리거하고 수신하여 페이지의 다른 위젯과 협력할 수 있습니다. 일부 위젯은 Coral HTML 요소를 사용하는 기본 jQuery 위젯입니다.

목적:

  • 복잡한 동작을 나타내는 높은 수준의 UI 요소 구현
  • 이벤트 트리거 및 처리

구현:

  • jQuery 플러그인 + HTML 마크업
  • 클라이언트/서버측 템플릿 사용 가능

마크업의 예는 다음과 같습니다.

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

jQuery 플러그인 호출(옵션 포함):

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

플러그인은 HTML 마크업을 내보냅니다(이 마크업은 내부적으로 다른 플러그인을 사용할 수 있는 기본 요소를 사용함).

<span>Pisa</code>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></code>

<span id="myTag_1" class="myTag"><span>Rome</code>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></code>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

이는 다음과 같이 표시됩니다.

chlimage_1-87

유틸리티 라이브러리 utility-library

이 라이브러리는 다음과 같은 JavaScript 도우미 플러그인 및/또는 함수의 컬렉션입니다.

  • UI 독립적
  • 완벽한 기능을 갖춘 웹 애플리케이션을 구축하는 데 있어 매우 중요합니다.

여기에는 XSS 처리 및 이벤트 버스가 포함됩니다.

HTML 요소 플러그인 및 위젯은 유틸리티 라이브러리에서 제공하는 기능에 의존할 수 있지만 유틸리티 라이브러리는 요소 또는 위젯 자체에 대한 엄격한 종속성을 가질 수 없습니다.

목적:

  • 공통 기능 제공
  • 이벤트 버스 구현
  • 클라이언트측 템플릿
  • XSS

구현:

  • jQuery 플러그인 또는 AMD 호환 JavaScript 모듈
recommendation-more-help
51c6a92d-a39d-46d7-8e3e-2db9a31c06a2