적응형 양식 핵심 구성 요소 adaptive-forms-core-components-introduction

Adobe Experience Manager의 적응형 Forms 핵심 구성 요소를 사용하여 매력적인 등록 경험을 만들 수 있습니다.

핵심 구성 요소 overview

Adobe Experience Manager(AEM)에서 구성 요소는 페이지와 양식을 작성하는 데 사용되는 빌딩 블록입니다. 작성자가 콘텐츠를 만들고 관리할 수 있는 간단하고 강력한 방법을 제공하는 동시에 개발자에게 사용자 정의 구성 요소를 만드는 데 필요한 유연성과 확장성을 제공합니다. 이는 개발을 가속화하고 웹 사이트 및 양식의 유지 관리 비용을 절감하도록 설계되었으며, 유연하고 웹 사이트 및 양식의 특정 요구 사항에 맞게 쉽게 사용자 정의할 수 있습니다.

또한 핵심 구성 요소는 응답성이 뛰어나며 데스크탑, 태블릿 및 스마트폰을 포함한 다양한 디바이스를 지원하도록 설계되었습니다. 최신 웹 표준 및 모범 사례를 준수하여 강력하고 신뢰할 수 있는 웹 콘텐츠 제작 솔루션이기도 합니다.

전반적으로 핵심 구성 요소는 AEM에서 웹 콘텐츠를 만들고 관리하기 위한 필수 도구이며, 개발 시간과 유지 관리 비용을 줄이는 데 도움이 되는 강력하고 유연한 솔루션을 제공하는 동시에 웹 사이트 방문자에게 훌륭한 사용자 경험을 제공합니다.

적응형 양식 핵심 구성 요소

적응형 Forms 핵심 구성 요소는 Adobe Experience Manager WCM 핵심 구성 요소 를 기반으로 구축된 29개의 오픈 소스 BEM 호환 구성 요소 세트입니다. 사용자의 디바이스, 브라우저 및 화면 크기에 맞춰 조정되는 양식인 적응형 양식을 만드는 데 사용하도록 특별히 설계되었습니다.

이러한 구성 요소를 사용하면 텍스트 필드, 확인란, 드롭다운 메뉴 등을 포함한 다양한 양식 필드 옵션을 제공하여 탁월한 데이터 캡처 및 등록 경험을 만들 수 있습니다. 또한 여기에는 사용자 친화적이고 사용하기 쉬운 양식을 만드는 데 사용할 수 있는 유효성 검사, 조건부 논리 및 반응형 디자인과 같은 기능이 포함되어 있습니다.

이와 더불어 이러한 구성 요소는 오픈 소스이므로 개발자가 조직의 특정 요구 사항에 맞게 구성 요소를 쉽게 사용자 정의하고 확장할 수 있습니다. 또한 이러한 구성 요소는 BEM 방법론을 기반으로 구축되어 확장 및 유지 관리가 가능합니다.

적응형 양식 이미지

기능 features

제작 준비
반응형 양식 핵심 구성 요소는 24개의 강력한 WCM 구성 요소입니다.
클라우드 기반
다음에 사용 가능: AEM Forms as a Cloud Service.
유연성
구성 요소는 양식 작성자가 거의 모든 레이아웃을 조합할 수 있는 일반적인 개념을 나타냅니다.
구성 가능
템플릿 수준의 콘텐츠 정책은 사용하거나 사용할 수 없는 기능이 무엇인지 정의합니다.
액세스 가능
ARIA 레이블을 제공하고 키보드 탐색을 지원하며 화면 판독기와 같은 보조 기술에 대한 텍스트를 제공합니다.
테마 적용 가능
구성 요소는 스타일 시스템을 구현하고 마크업이 BEM CSS 명명을 따릅니다
사용자 정의 가능
몇 가지 패턴을 사용하여 HTML 조정부터 고급 기능 재사용까지 간편한 맞춤화를 구현할 수 있습니다.
버전 관리
버전 관리 정책을 사용하여 몇 가지 개선 사항을 수정하면 사이트는 핵심 구성 요소에 의해 연결이 끊기지 않습니다.
오픈 소스
매출이 평소와 같지 않다면 자신의 성과를 공개하십시오.

이점 benefits

데이터 캡처 경험은 리드 생성 및 등록에 매우 중요하며 적응형 양식 핵심 구성 요소는 데이터 캡처에 최적화된 양식을 만들기 위한 강력한 솔루션을 제공합니다. 핵심 구성 요소를 사용하여 기초 구성 요소에 대한 이러한 경험을 만드는 데에는 다음과 같은 몇 가지 이유가 있습니다.

  • GitHub에서 사용 가능: AEM 적응형 Forms 핵심 구성 요소는 오픈 소스이며, 포괄적인 설명서와 함께 GitHub에서 사용할 수 있습니다. 이를 통해 개발자는 구성 요소와 작동 방식을 보다 쉽게 이해할 수 있을 뿐만 아니라 개발에 기여할 수 있습니다. 개발자가 작동 중인 구성 요소를 확인하고 자세한 설명서에 액세스할 수 있는 유용한 리소스인 emcomponents.dev 웹 사이트도 있습니다.

  • 스타일링을 위한 BEM 모델: 핵심 구성 요소는 스타일링을 위해 BEM(Block Element Modifier) 모델을 따릅니다. 이 모델은 CSS를 구성하기 위해 잘 확립되고 널리 사용되는 방법입니다. 이를 통해 개발자가 스타일을 구성하는 방법과 특정 요구 사항에 맞게 스타일을 수정하는 방법을 보다 쉽게 이해할 수 있습니다.

  • 서드파티 라이브러리에 대한 종속성 없음: 핵심 구성 요소의 장점 중 하나는 JQuery 및 Underscore를 비롯한 서드파티 JavaScript 라이브러리에 종속되지 않는다는 점입니다. 이를 통해 구성 요소가 더 빠르고 가벼워질 뿐만 아니라 기존 AEM 구현에 쉽게 통합될 수 있습니다.

  • 성능 및 접근성에 대한 포커스: 핵심 구성 요소는 성능과 접근성을 염두에 두고 구축되었으며, 이는 높은 Google Lighthouse 및 웹 바이탈 점수에 반영됩니다. 이를 통해 개발자는 오늘날의 디지털 환경에서 점점 더 중요해지고 있는 접근성이 뛰어난 고성능 웹 페이지를 보다 쉽게 만들 수 있습니다.

  • Sites 30 템플릿 및 테마의 양식 구성 요소: 핵심 구성 요소는 Sites 30 템플릿 및 테마의 양식 구성 요소를 지원하므로 개발자가 AEM 내에서 양식을 보다 쉽게 만들고 사용자 정의할 수 있습니다.

  • 스타일을 쉽게 지정: 핵심 구성 요소는 기초 구성 요소에 비해 스타일을 쉽게 지정할 수 있습니다. 테마 생성 프로세스는 Sites와 유사하며 상위 Sites 페이지에서 동일한 테마/CSS를 상속할 수 있습니다. 또한 스타일링용 BEM 모델을 사용하면 스타일을 보다 쉽게 이해하고 수정할 수 있습니다.

  • 접근성: 적응형 Forms 핵심 구성 요소는 화면 판독기와 같은 보조 기술을 사용하는 구성 요소를 포함하여 장애가 있는 사람이 양식을 사용할 수 있도록 하기 위해 접근성 표준 및 지침을 지원합니다.

  • 버전 관리: 적응형 Forms을 기반으로 여러 버전의 핵심 구성 요소를 만들고 관리하고, 주석을 통해 공동 토론에 참여하고, 특정 양식 구성 요소에 주석을 첨부할 수 있으므로 전반적인 양식 작성 경험이 향상됩니다.

핵심 구성 요소, 기초 구성 요소 및 양식 블록 구성 요소 비교 components

현재 버전의 AEM에는 다음 핵심 구성 요소 가 있습니다. 기초 구성 요소, 및 양식 블록 구성 요소(Edge Delivery Services).

구성 요소
기초 구성 요소
핵심 구성 요소
양식 블록 구성 요소
추가 정보
Adobe Sign 차단
✔️
Adobe Sign 통합 는 기초 구성 요소에만 사용할 수 있습니다.
아코디언
✔️
✔️
Foundation 구성 요소의 경우에서 아코디언 레이아웃을 구성할 수 있습니다 패널 구성 요소 속성.
적응형 양식 조각
✔️
✔️
기초 구성 요소의 경우 다음을 수행할 수 있습니다. 조각 추가 자산 브라우저에서.
적응형 양식 reCAPTCHA
✔️
✔️
✔️
Foundation 구성 요소의 경우 Captcha 구성 요소를 사용하여 다음을 수행합니다 양식에 Google reCaptcha 추가.
버튼
✔️
✔️
✔️
Captcha
✔️
Foundation 구성 요소의 경우 Captcha 구성 요소를 사용하여 다음을 수행합니다 양식에 Google reCaptcha 추가.
차트
✔️
체크 상자
✔️
✔️
확인란 그룹
✔️
✔️
✔️
기초 구성 요소의 경우 확인란 구성 요소를 사용하여 여러 확인란을 추가합니다
데이터 입력 필드
✔️
핵심 구성 요소의 경우 날짜 선택 구성 요소. 별도로 추가할 수도 있습니다 텍스트 상자 또는 숫자 상자 일, 월 및 연도를 캡처할 구성 요소입니다.
날짜 선택기
✔️
✔️
✔️
드롭다운 목록
✔️
✔️
✔️
이메일
✔️
✔️
✔️
첨부 파일
✔️
✔️
✔️
첨부 파일 나열
✔️
바닥글
✔️
✔️
✔️
각주 플레이스홀더
✔️
양식 컨테이너
✔️
✔️
✔️
기초 구성 요소의 경우 루트 패널 구성 요소.
양식 제목
✔️
✔️
기초 구성 요소의 경우 제목 구성 요소를 사용합니다.
헤더
✔️
✔️
✔️
가로 탭
✔️
✔️
기초 구성 요소의 경우 다음을 구성할 수 있습니다. 상단(가로 탭) 레이아웃의 탭 패널 구성 요소 속성에서 참조하십시오.
이미지
✔️
✔️
✔️
이미지 선택
✔️
다음 버튼
✔️
✔️
사용 마법사 구성 요소 다음 및 이전 단추를 사용하여 여러 패널 간에 이동할 수 있습니다.
숫자 상자
✔️
✔️
✔️
숫자 스텝퍼
✔️
패널
✔️
✔️
✔️
암호 상자
✔️
✔️
전화/전화
✔️
✔️
✔️
이전 버튼
✔️
사용 마법사 구성 요소 다음 및 이전 단추를 사용하여 여러 패널 간에 이동할 수 있습니다.
라디오 버튼
✔️
✔️
라디오 단추 그룹
✔️
재설정 버튼
✔️
✔️
✔️
낙서 서명
✔️
분리자
✔️
제출 버튼
✔️
✔️
✔️
요약 단계
✔️
전환
✔️
✔️
✔️
약관
✔️
✔️
텍스트
✔️
✔️
✔️
텍스트 상자
✔️
✔️
✔️
제목
✔️
핵심 구성 요소의 경우 양식 제목 구성 요소.
세로 탭
✔️
✔️
기초 구성 요소의 경우 다음을 구성할 수 있습니다. 왼쪽(세로 탭) 레이아웃의 탭 패널 구성 요소 속성
마법사
✔️
✔️
✔️
기초 구성 요소의 경우 다음을 구성할 수 있습니다. 마법사 레이아웃 패널 구성 요소 속성
NOTE
  • 위에 나열된 구성 요소 외에도 Forms 블록은 유효한 모든 구성 요소를 지원합니다 HTML5 입력 유형텍스트 영역 구성 요소로 사용하십시오.
  • 위에 나열되지 않은 구성 요소가 필요하십니까? 공식 주소에서 aem-forms-ea@adobe.com으로 이메일을 보내 요청하십시오.

사용하기 쉬운 양식 편집기

적응형 Forms 기반의 핵심 구성 요소 편집기는 AEM Sites 페이지를 생성하는 데 이미 사용하는 편집기와 유사합니다. 제공되는 항목:

  • 익숙한 UI 요소 및 설정: 양식 구성 요소에 대한 속성을 구성할 때 속성 대화 상자는 WCM 코어 구성 요소에 대해 를 사용하는 것과 같은 모습입니다. 이렇게 하면 필요한 옵션을 더 빨리 찾을 수 있습니다. WCM 핵심 구성 요소와 마찬가지로 양식 구성 요소의 경우 속성 대화 상자가 편집기 중앙에 나타나며, 기본 및 고급 옵션, 도움말 텍스트 및 접근성 정보를 탭 형식으로 구분하여 쉽게 탐색할 수 있습니다.

  • 규칙 편집기: 코드를 작성하지 않고도 양식에 논리 및 동적 기능을 추가할 수 있습니다. 기본 제공 규칙 편집기를 사용하여 다음을 수행할 수 있습니다.

    • 사용자 선택 사항을 기반으로 필드 표시 또는 숨기기
    • 개체 활성화 또는 비활성화
    • 개체에 대한 값 설정
    • 계산 수행
    • 개체의 속성 설정
    • 데이터 항목 유효성 검사
    • 서비스 호출(외부 기능 호출)
    • 기본 제공 함수 사용(일반 작업의 경우 사전 정의된 함수)
    • 사용자 정의 함수 사용(특정 요구 사항에 맞는 자체 코드)
    • 필드 및 패널 유효성 검사(데이터가 요구 사항을 충족하는지 확인)
    • 개체 값의 유효성 검사
    • 개체 값을 계산하는 함수 실행
    • FDM(양식 데이터 모델) 서비스 호출 및 작업 수행
    • 동적으로 스타일 추가(조건에 따라 모양 변경)
    • 다른 규칙 만들기(체인 작업 및 논리)
    • 등!

    규칙 편집기에는 코드 편집기가 없습니다. 다음을 사용할 수 있습니다. 사용자 정의 함수 특정 요구 사항에 대한 자체 코드를 규칙 편집기에 추가합니다.

  • 양식 미리 채우기: 사용자가 양식을 열 때 양식의 특정 필드를 기존 데이터로 자동으로 채울 수 있습니다. 따라서 이미 사용 가능한 정보를 수동으로 입력할 필요가 없으므로 시간과 노력이 절약됩니다. 핵심 구성 요소 편집기는 양식 데이터 모델의 도움으로 양식 필드를 채울 수 있는 OOTB 미리 채우기 서비스를 제공합니다. 보다 복잡한 시나리오에 대한 사용자 지정 미리 채우기 서비스를 만들 수도 있습니다.

  • 기록 문서(DoR): DoR(Document of Record)은 양식을 통해 제출된 데이터를 공식적으로 인쇄할 수 있는 표현입니다. 이 파일은 사용자가 입력한 정보의 영구 레코드 역할을 하며, 사용자에게 친숙한 형식(일반적으로 PDF 문서)으로 제출된 데이터의 스냅샷을 제공합니다. 편집기를 사용하여 사용자 지정 템플릿을 쉽게 구성하거나 OOTB 템플릿을 사용하여 DoR을 생성할 수 있습니다.

  • 양식 데이터 모델: 적응형 Forms 데이터 모델(FDM)은 적응형 Forms과 데이터 소스 간의 다리 역할을 합니다. 기본적으로 양식이 수집하고 상호 작용하는 데이터의 구조와 구성을 정의합니다. 편집기를 사용하여 양식을 Forms 데이터 모델(FDM)과 쉽게 연결할 수 있습니다.

  • 양식 제출: 양식 제출은 사용자가 작성한 양식을 작성하여 전송하는 프로세스를 의미합니다. 이렇게 하면 양식의 구성 내에서 정의된 일련의 작업이 트리거되어 최종적으로 제출된 데이터를 저장하거나 처리할 수 있습니다. 적응형 Forms 편집기는 양식 제출을 구성하기 위한 다양한 옵션을 제공합니다. 일반적인 제출 작업 중 일부는 다음과 같습니다.

  • 사이트 페이지 편집기의 적응형 Forms 핵심 구성 요소: AEM 페이지 편집기 및 AEM Experience Fragments에서 적응형 Forms 핵심 구성 요소를 활성화하고 사용하여 Sites 페이지를 작성하는 동시에 데이터 캡처 경험을 직접 만들 수 있습니다.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

적응형 Forms 핵심 구성 요소 활성화

AEM Forms as a Cloud Service에서 적응형 양식 핵심 구성 요소를 활성화하면 여러 채널에 AEM Forms Cloud Service 인스턴스를 사용하여 핵심 구성 요소 기반 적응형 양식 및 Headless 양식을 만들고, 게시하고, 게재할 수 있습니다. 적응형 양식 핵심 구성 요소 활성화를 위한 자세한 지침은 AEM Forms as a Cloud Service 및 로컬 개발 환경에서 적응형 양식 핵심 구성 요소 활성화를 참조하십시오.

적응형 양식 핵심 구성 요소에는 다음과 같은 요구 사항이 있습니다.

AEM 버전
AEM Forms 추가 기능
적응형 양식 핵심 구성 요소
AEM as a Cloud Service
Forms - 디지털 등록
릴리스 2.0.10+
AEM 6.5
Forms 추가 기능
릴리스 1.1.12+

적응형 양식 핵심 구성 요소는 2023.02.0 릴리스 이전의 프리릴리스 일부로 제공되었으므로 사용 중인 AEM Cloud Service SDK 버전이 2023.02.0 이전 버전이라면 해당 환경에서 prerelease 플래그가 활성화되어 있어야 합니다.

핵심 구성 요소 기반 적응형 양식 만들기

AEM Forms as a Cloud Service 또는 AEM 6.5 Forms 환경 모두에서 다음 작업을 수행할 수 있습니다.

작업
AEM Forms 버전
독립 적응형 양식 만들기
AEM Forms as Cloud Service
AEM Sites 페이지에서 적응형 양식 만들기
AEM 6.5 Forms, AEM Forms as Cloud Service
AEM 경험 조각에서 적응형 양식 만들기
AEM 6.5 Forms, AEM Forms as Cloud Service
적응형 양식을 경험 조각으로 변환
AEM 6.5 Forms, AEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c