핵심 구성 요소 개발

When to Use the Core Components?

핵심 구성 요소가 새로워졌고 여러 이점을 제공하므로 새 AEM 프로젝트에서 이러한 구성 요소를 사용하는 것이 좋습니다. 기존 프로젝트의 경우 마이그레이션은 리브랜딩 또는 전체 리팩터링 등 대규모 프로젝트 작업에 포함되었습니다.

따라서 Adobe은 다음 권장 사항을 제공합니다.

  • 새 프로젝트​새 프로젝트는 항상 핵심 구성 요소를 사용해야 합니다. 핵심 구성 요소를 프로젝트 요구 사항을 충족하기 위해 직접 또는 확장할 수 없는 경우, 핵심 구성 요소에 지정된 구성 요소 아키텍처 다음에 사용자 지정 구성 요소를 만듭니다. 그렇지 않은 경우 외에는 기본 구성 요소를 사용하지 마십시오.
  • 사이트나 구성 요소​리팩토링을 계획하지 않는 한 기존 프로젝트 는 계속기초 구성 요소를사용합니다.
    대부분의 기존 프로젝트에서 매우 널리 사용되고 있으므로 기본 구성 요소는 계속 지원됩니다.
  • 새로운 사용자 지정 구성 요소​기존 핵심 구성 요소를 사용자 정의할 수 있는지평가합니다.
    그렇지 않은 경우 구성 요소 지침에 따라 새 사용자 지정 구성 요소를 만드는 것이 좋습니다.
  • 기존 사용자 지정 구성 요소​가 예상대로 작동하면 구성 요소를 그대로 유지합니다.

    그렇지 않은 경우 위의 "새 사용자 지정 구성 요소"를 참조하십시오.

핵심 구성 요소 성공 방법

핵심 구성 요소는 강력하고 유연하며 사용하기 쉽고 사용자 정의할 수 있습니다. 몇 가지 주요 지침을 따르면 핵심 구성 요소를 사용한 프로젝트가 성공했는지 확인합니다.

핵심 구성 요소로 마이그레이션

모든 새 프로젝트는 핵심 구성 요소를 사용하여 구현해야 합니다. 그러나 기존 프로젝트에는 일반적으로 Foundation 구성 요소의 광범위한 구현이 있습니다.

기존 프로젝트(예: 리브랜딩 또는 전체 리팩토링)에서 더 많은 노력을 기울이면 종종 핵심 구성 요소로 마이그레이션할 수 있습니다. 이러한 마이그레이션을 용이하게 하기 위해 Adobe은 핵심 구성 요소 및 최신 AEM 기술 채택을 장려하기 위한 여러 마이그레이션 도구를 제공했습니다.

AEM Modern Tools를 사용하면

  • 정적 템플릿을 편집 가능한 템플릿
  • 디자인 구성을 정책
  • 기초 구성 요소를 코어 구성 요소
  • 클래식 UI를 터치 사용 UI

이러한 도구 사용에 대한 자세한 내용은 해당 설명서를 참조하십시오.

노트

AEM 현대화 도구는 커뮤니티의 노력이며 Adobe에 의해 지원되거나 보증되지 않습니다.

핵심 구성 요소 지원

핵심 구성 요소는 AEM의 필수적인 부분으로, 빠른 시작의 일부로 전달된 것처럼 동일한 이용 약관에 따라 지원됩니다.

다른 AEM 제품 기능과 마찬가지로 일반적인 규칙은 다음과 같습니다.구성 요소는 먼저 폐기되고 다음 AEM 릴리스에 대해 가장 빨리 제거됨을 알립니다. 따라서 고객은 지원을 중단하기 전에 적어도 하나의 릴리스 주기를 새로운 버전의 구성 요소로 전환할 수 있습니다.

각 구성 요소의 버전은 지원되는 AEM 버전을 명확하게 설명합니다. AEM 버전에 대한 지원이 중단되면 해당 버전의 AEM에 대한 핵심 구성 요소에 대한 지원도 중단됩니다.

구성 요소 사용자 지정 지원에 대한 자세한 내용은 핵심 구성 요소 사용자 지정 페이지를 참조하십시오.

기술 기능

다음 표는 핵심 구성 요소와 기본 구성 요소 간의 차이점을 대략적으로 설명합니다.

작성 기능 및 구성 가능 옵션에 대한 자세한 내용은 작성 페이지 를 참조하십시오.

기능 핵심 구성 요소 기본 구성 요소
논리 구현 Sling 모델 주석이 있는 Java POJO JSP 코드
마크업 정의 HTML 템플릿 언어 (HTL) 구문 JSP 코드
XSS 기밀 정보 가리기 HTL로 자동화 대부분 수동
CSS 클래스 이름 지정 BEM( 블록 요소 수정자 ) 표기법을 기반으로 하는 표준 명명 규칙(릴리스 2.0.0 기준) 사용자 지정 구성표
대화 상자 정의 산호 3 Coral 2 + 클래식 UI
JSON 출력 Sling Models Exporter with Jackson serialization 기본 Sling 서블릿
버전 관리 모델 및 HTL의 경우 없음
테스트 단위 테스트 + 통합 테스트 통합 테스트
배달 공개 GitHub를 통해 빠른 시작을 통해
라이센스 Apache License Adobe 독점
기여도 풀 요청을 통해 불가능
접근성 WCAG 2.0 AA 표준 준수 WCAG 2.0 AA 표준을 일부 준수하는 경우에만

구성 요소 목록

다음 표에는 사용 가능한 핵심 구성 요소(API에 연결)가 나열되며, 어떤 기본 구성 요소를 대체하는지를 나타냅니다.

핵심 구성 요소 설명 기본 구성 요소 교체
페이지 템플릿 편집기를 사용한 응답형 페이지 /libs/foundation/components/page /libs/wcm/foundation/components/page
탐색 표시 페이지 계층 탐색 /libs/foundation/components/breadcrumb
제목 H1-H6 제목 /libs/foundation/components/title /libs/wcm/foundation/components/title
텍스트 리치 텍스트 /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
이미지 최적의 변환 크기의 지능적이고 레이지 로딩 /libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
목록 페이지 목록 /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
소셜 미디어 공유 Facebook 및 Pinterest 공유 위젯 -
양식 컨테이너 반응형 양식 단락 시스템 /libs/foundation/components/form/start /libs/foundation/components/form/end
양식 텍스트 텍스트 입력 필드 /libs/foundation/components/form/text /libs/foundation/components/form/password
양식 옵션 여러 옵션 입력 필드 /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
숨겨진 양식 숨겨진 입력 필드 /libs/foundation/components/form/hidden
양식 단추 전송 또는 사용자 정의 단추 /libs/foundation/components/form/submit
탐색 중첩된 페이지 계층을 나열하는 사이트 탐색 구성 요소 /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
언어 탐색 글로벌 언어 구조를 나열하는 언어 및 국가 전환기 -
빠른 검색 드롭다운 메뉴에서 결과를 즉석 제안으로 표시하는 검색 구성 요소 /libs/foundation/components/search
티저 컨텐츠 작성자는 이미지, 제목 또는 리치 텍스트를 사용하여 추가 컨텐츠에 티저를 쉽게 만들고 추가 컨텐츠 또는 기타 작업에 연결할 수 있습니다 -
컨텐츠 작성자가 여러 탭 내에서 페이지 컨텐츠를 구성할 수 있습니다. -
회전판 컨텐츠 작성자가 슬라이드의 회전 회전하는 회전 슬라이드에 컨텐츠를 구성할 수 있습니다. /libs/foundation/components/carousel
콘텐츠 조각 컨텐츠 조각 표시 허용 -
콘텐츠 조각 목록 컨텐츠 조각 목록을 표시할 수 있습니다. -
분리자 페이지의 컨텐츠 분리 -
어코디언 축소 가능한 아코디언을 사용하여 컨텐츠 패널 구성 -
컨테이너 컨테이너 내의 구성 요소 구성 -
단추 페이지에 단추 만들기 -
다운로드 페이지에 다운로드 가능한 자산 추가 -
경험 조각 페이지에 경험 조각 추가 /libs/cq/experience-fragments/editor/components/experiencefragment
포함 페이지 내에 외부 리소스 포함 -
진행률 표시줄 목표를 향해 진행 상황을 시각적으로 표시 -
PDF 뷰어 페이지에 PDF 문서 표시 -

예정된 구성 요소

예정된 핵심 구성 요소 로드맵에 대한 개요는 GitHub의 프로젝트 Wiki를 참조하십시오.

핵심 구성 요소 업그레이드

버전 관리 구성 요소의 이점 중 하나는 새 AEM 버전으로 마이그레이션하는 것을 새 구성 요소 버전으로 마이그레이션하는 것에서 분리하는 것입니다. 또한 새 구성 요소 버전을 사용할 수 있는 경우 각 구성 요소를 새 버전으로 개별적으로 마이그레이션할 수 있습니다.

새 AEM 버전으로 마이그레이션해도 핵심 구성 요소가 작동하는 방식에는 영향을 주지 않습니다. 단, 마이그레이션 중인 새 AEM 버전도 지원합니다. 핵심 구성 요소에 대한 사용자 지정은 더 이상 사용되지 않거나 제거된 API를 사용하지 않는 한 영향을 받지 않아야 합니다.

핵심 구성 요소의 새 버전으로 마이그레이션해도 구성 요소의 작동 방식에는 영향을 주지 않지만, 기본 동작을 원하지 않는 경우 템플릿 편집기의 일부 구성이 필요할 수 있는 페이지 작성자에게 새로운 기능이 도입될 수 있습니다. 하지만 사용자 지정을 수정해야 할 수도 있습니다. 자세한 내용은 핵심 구성 요소 사용자 지정 페이지를 참조하십시오.

이 페이지에서는