적응형 양식 작성 소개

마지막 업데이트: 2025년 5월 5일
  • 적용 대상:
  • Experience Manager 6.5

작성 대상:

  • 관리자
  • 사용자
  • 개발자
버전문서 링크
AEM as a Cloud Service여기 클릭
AEM 6.5이 문서

개요

적응형 양식을 사용하면 매력적인 반응형, 동적 및 적응형 양식을 만들 수 있습니다. AEM Forms은 적응형 양식을 만들고 작업할 수 있는 직관적인 사용자 인터페이스와 기본 구성 요소를 제공합니다. 양식 모델 또는 스키마를 기반으로 하거나 양식 모델 없이 적응형 양식을 만들도록 선택할 수 있습니다. 요구 사항에 적합할 뿐만 아니라 기존 인프라 투자와 자산을 확장하는 양식 모델을 신중하게 선택해야 합니다. 다음 옵션 중에서 선택하여 적응형 양식을 만들 수 있습니다.

  • 양식 데이터 모델 사용
    데이터 통합을 사용하면 개별 데이터 원본의 엔터티 및 서비스를 적응형 양식을 만드는 데 사용할 수 있는 양식 데이터 모델에 통합할 수 있습니다. 생성 중인 적응형 양식에 여러 데이터 소스에서 데이터를 가져오고 쓰는 작업이 포함된 경우 양식 데이터 모델을 선택합니다.

  • XDP 양식 템플릿 사용
    XFA 기반 양식이나 XDP 양식에 투자하는 경우 최적의 양식 모델이 됩니다. XFA 기반 양식을 적응형 양식으로 전환하는 직접적인 방법을 제공합니다. 기존 XFA 규칙은 연결된 적응형 양식에 유지됩니다. 결과 적응형 양식은 유효성 검사, 이벤트, 속성 및 패턴과 같은 XFA 구문을 지원합니다.

  • XML 스키마 정의(XSD) 또는 JSON 스키마 사용
    XML 및 JSON 스키마는 조직의 백엔드 시스템에서 데이터를 생성 또는 사용하는 구조를 나타냅니다. 스키마를 적응형 양식에 연결하고 해당 요소를 사용하여 적응형 양식에 다이내믹 콘텐츠를 추가할 수 있습니다. 적응형 양식을 작성할 때 스키마 요소는 콘텐츠 브라우저의 데이터 모델 개체 탭에서 사용할 수 있습니다.

  • 양식 모델 사용 안 함 또는 사용 안 함
    이 옵션을 사용하여 만든 적응형 양식은 양식 모델을 사용하지 않습니다. 해당 양식에서 생성된 데이터 XML에는 필드와 해당 값이 포함된 기본 구조가 있습니다.

적응형 양식 만들기에 대한 자세한 내용은 적응형 양식 만들기를 참조하십시오.

적응형 양식 작성 UI

적응형 양식 작성을 위해 터치에 적합한 UI는 직관적이며 다음을 제공합니다.

  • 드래그 앤 드롭 기능
  • 표준 양식 구성 요소
  • 자산의 통합 저장소

기존 적응형 양식을 만들거나 편집할 때 다음 UI 요소를 사용합니다.

적응형 양식 작성 UI

A. 사이드바 B. 페이지 도구 모음 C. 적응형 양식 페이지

사이드바를 사용하면 다음 작업을 수행할 수 있습니다.

  • 패널, 구성 요소, 필드와 레이아웃 등 양식 콘텐츠를 확인할 수 있습니다.
  • 구성 요소 속성을 편집할 수 있습니다.
  • AEM 디지털 자산 관리(DAM) 저장소에서 자산을 검색, 조회 및 사용할 수 있습니다.
  • 양식의 구성 요소를 추가할 수 있습니다.

사이드바

A. 콘텐츠 브라우저 B. 속성 브라우저 C. 자산 브라우저 D. 구성 요소 브라우저

사이드바는 다음 브라우저로 구성됩니다.

  • 콘텐츠 브라우저
    콘텐츠 브라우저에서 다음을 볼 수 있습니다.

    • 양식 오브젝트
      양식의 오브젝트 계층을 표시합니다. 작성자는 양식 오브젝트 트리의 해당 요소를 탭하여 특정 양식 구성 요소로 이동할 수 있습니다. 작성자는 오브젝트를 검색하고 이 트리에서 다시 정렬할 수 있습니다.

    • 데이터 모델 오브젝트
      양식 모델 계층을 확인할 수 있습니다.
      적응형 양식에 양식 모델 요소를 끌어다 놓을 수 있습니다. 추가된 요소는 원래 속성을 유지하면서 양식 구성 요소로 자동으로 변환됩니다. 양식에서 XML 스키마, JSON 스키마 또는 XDP 템플릿을 사용하는 경우 데이터 모델 오브젝트를 확인할 수 있습니다.

  • 속성 브라우저

    구성 요소의 속성을 편집할 수 있습니다. 속성은 구성 요소에 따라 변경됩니다. 적응형 양식 컨테이너의 속성을 보려면 다음 작업을 수행하십시오.

    구성 요소를 선택한 다음 필드 수준 > 적응형 양식 컨테이너 ​를 선택하고 cmpr 을 선택합니다.

  • 자산 브라우저

    이미지, 문서, 페이지, 비디오 등과 같은 다양한 유형의 콘텐츠를 구분합니다.

  • 구성 요소 브라우저

    적응형 양식을 작성하는 데 사용할 수 있는 구성 요소를 포함합니다. 구성 요소를에서 적응형 양식으로 드래그하여 양식 요소를 추가하고, 요구 사항에 따라 추가된 요소를 구성할 수 있습니다. 다음 표에서는 구성 요소 브라우저에 나열된 구성 요소에 대해 설명합니다.

구성 요소기능
Adobe Sign 차단Adobe Sign을 사용하여 서명하는 동안 채워질 필드에 대한 플레이스홀더가 포함된 텍스트의 블록을 추가합니다.
버튼구성하여 저장, 재설정, 다음으로 이동, 이전으로 이동 등과 같은 액션을 수행할 수 있는 버튼을 추가합니다.
CaptchaGoogle reCAPTCHA 서비스를 사용하여 CAPTCHA 유효성 검사를 추가합니다. 자세한 내용은 적응형 양식에서 CAPTCHA 사용을 참조하세요.
차트적응형 양식 및 문서에서 반복 가능한 패널 및 테이블 행에 2D 데이터를 시각적으로 표시하는 데 사용할 수 있는 차트를 추가합니다.
확인란확인란을 추가합니다.
데이터 입력 필드양식의 날짜 입력 필드 구성 요소를 사용하여 고객은 상자 세 개에 각각 일, 월, 년을 채울 수 있습니다. 구성 요소의 디자인을 사용자 정의하고 날짜 형식을 변경할 수 있습니다. 예: 고객은 MM/DD/YYYY 또는 DD/MM/YYYY 형식으로 날짜를 입력할 수 있습니다.
날짜 선택캘린더 필드를 추가하여 날짜를 선택합니다.
문서 조각재사용 가능한 서신의 구성 요소를 추가할 수 있습니다.
문서 조각 그룹레터 템플릿에 단일 단위로 사용할 수 있는 관련 문서 조각 그룹을 추가할 수 있습니다.
드롭다운 목록드롭다운 목록 추가 - 단일 또는 다중 선택
이메일

이메일 주소를 캡처하는 필드를 추가합니다. 이메일 구성 요소는 기본적으로 다음 정규 표현식을 사용하여 이메일 주소를 확인합니다.

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

파일 첨부

사용자가 지원 문서를 검색하여 양식에 첨부할 수 있는 단추를 추가합니다. 파일 첨부 구성 요소에 여러 파일을 첨부할 수 있습니다. 구성 요소의 속성 브라우저에서 첨부 파일에 대한 **최대 파일 크기** 및 **지원되는 파일 유형**​을 지정할 수도 있습니다.

메모:

  • 구성 요소는 \ / : * ? 문자를 포함하는 문자(.) 로 시작하는 파일 이름을 가진 파일의 첨부를 지원하지 않습니다. " < > | ; % $ 또는 nul, prn, con, lpt 또는 com과 같은 Windows 운영 체제용으로 예약된 특수 파일 이름을 포함합니다.
  • Apple Safari 브라우저에서 연 첨부 파일 구성 요소에 여러 파일을 첨부하려면 파일을 하나씩 선택하고 첨부합니다. 한 번에 여러 파일을 선택하여 첨부할 수 없습니다.
  • 첨부 파일 구성 요소는 Adobe Sign에 대해 활성화된 적응형 양식에서 사전 정의된 파일 형식 세트를 지원합니다. 자세한 내용은 지원되는 파일 형식을 참조하십시오.
첨부 파일 나열파일 첨부 구성 요소를 통해 업로드된 모든 첨부 파일을 나열하는 필드를 추가합니다.
헤더일반적으로 회사 로고, 양식 제목과 요약이 포함된 페이지 머리글을 추가합니다.
바닥글일반적으로 저작권 정보와 다른 페이지에 대한 링크가 포함된 페이지 바닥글을 추가합니다.
이미지이미지를 삽입할 수 있습니다.
이미지 선택고객은 이미지를 선택하여 정보를 제공할 수 있습니다. 이 정보를 사용하여 맞춤형 서비스를 고객에게 제공할 수 있습니다.
다음 버튼버튼을 추가하여 양식에서 다음 패널로 이동합니다.
숫자 상자숫자 값을 캡처하는 필드 추가
숫자 스텝퍼양식의 숫자 스텝퍼를 사용하여 고객은 사전 정의된 단계에 따라 증감할 수 있는 숫자 값을 입력할 수 있습니다.
패널

패널 또는 하위 패널을 추가합니다.

하위 패널 추가 버튼을 사용하여 상위 패널 도구 모음에서 패널 구성 요소를 추가할 수도 있습니다. 마찬가지로 패널 도구 모음 추가 버튼을 사용하여 패널별 도구 모음을 추가할 수 있습니다. 패널 편집 대화 상자를 사용하여 패널 도구 모음의 위치를 구성할 수 있습니다.

암호 상자암호를 캡처하는 필드를 추가합니다.
이전 버튼사용자가 이전 페이지 또는 패널로 돌아가는 데 필요한 버튼을 추가합니다.
라디오 버튼라디오 버튼을 추가합니다.
재설정 버튼버튼을 추가하여 양식 필드를 재설정합니다.
저장 버튼버튼을 추가하여 양식 데이터를 저장합니다.
스크리블 서명스크리블 서명을 캡처하는 필드를 추가합니다.
분리자양식에서 패널을 시각적으로 구분할 수 있습니다.
서명 단계사용자가 양식을 확인하고 서명할 수 있도록 양식과 서명 필드에 제공된 정보를 표시합니다.
텍스트정적 텍스트를 지정할 수 있습니다.
제출 버튼구성된 제출 액션에 양식을 제출하기 위한 제출 단추를 추가합니다.
요약 단계양식을 제출하고, 양식이 제출되면 작성자가 지정한 요약 텍스트를 표시합니다.
전환전환 또는 활성화/비활성화 액션을 수행하는 스위치를 추가합니다. 전환 구성 요소에서는 두 개 이상의 옵션을 추가할 수 없습니다. 스위치에는 켜기 또는 끄기 등 두 가지 값만 있을 수 있으므로 필수 항목은 적용되지 않습니다. 사용자 입력에 상관없이 적어도 한 개의 값이 저장됩니다.
표행 및 열에 데이터를 구성할 수 있는 표를 추가합니다.
전화 번호

필드를 추가하여 전화 번호를 캡처합니다. 전화 구성 요소를 사용하여 작성자는 다음 전화 번호 유형 중 하나를 구성할 수 있습니다. 각 유형은 유효성 확인에 필요한 기본 정규 표현식과 연결됩니다.

  • Type International은 ^[+][0-9]{0,14}$에서 검증합니다.
  • Type USPhoneNumber는 {'+1 ('999') '999-9999}에서 검증합니다.
  • Type UKPhoneNumber는 text{'+'99 999 999 9999}에서 검증합니다.
  • Type Custom은 기본 유효성 확인 패턴을 제공하지 않습니다. 마지막으로 선택한 전화 번호 유형 값을 얻습니다. 사용자 고유의 유효성 확인 패턴을 지정할 수도 있습니다.
사용 약관사용자가 양식을 작성하기 전에 검토할 수 있도록 작성자가 약관을 지정하는 데 사용할 수 있는 필드를 추가합니다.
텍스트 상자

사용자가 필수 정보를 지정할 수 있는 텍스트 상자를 추가합니다.

기본적으로 텍스트 상자 구성 요소는 일반 텍스트만 허용합니다. 리치 텍스트를 허용하도록 텍스트 상자 구성 요소를 활성화할 수 있습니다. 리치 텍스트가 활성화된 텍스트 구성 요소는 헤더를 추가하고, 문자 스타일(볼드체, 이탤릭체, 밑줄)을 변경하고, 순차 목록 및 비순차 목록을 만들고, 텍스트 배경 및 색상을 변경하고, 하이퍼링크를 추가하는 옵션을 제공합니다. 텍스트 상자에 대한 리치 텍스트를 활성화하려면 구성 요소 속성에서 리치 텍스트 허용 옵션을 활성화합니다.

제목적응형 양식의 제목을 지정합니다.
단계 확인

사용자 확인 용도의 채워진 양식을 표시하기 위한 플레이스홀더를 추가합니다.

참고: 확인 구성 요소가 포함된 적응형 양식은 익명 사용자를 지원하지 않습니다. 또한 적응형 양식 조각에서 확인 구성 요소를 사용하지 않는 것이 좋습니다.