마법사 구성 요소 wizard-adaptive-forms-core-component

적응형 양식의 마법사 레이아웃은 사용자가 양식을 한 번에 한 단계씩 이동함에 따라 여러 단계 또는 페이지로 나누어지는 양식을 나타냅니다. 이 레이아웃은 단계별 프로세스에서 양식을 통해 사용자를 안내하기 때문에 “마법사”라고 합니다.

마법사의 각 단계에는 일반적으로 관련 양식 필드 그룹과 단계 사이를 이동할 수 있는 탐색 메커니즘(예: “다음” 및 “뒤로” 버튼)이 포함되어 있습니다. 사용자는 현재 단계가 완료되고 모든 필수 필드가 채워진 후에만 다음 단계로 진행할 수 있습니다.

마법사 레이아웃은 양식을 더 작고 관리하기 쉬운 청크로 분리하므로, 수집해야 하는 필드나 정보가 많은 양식에 유용하게 사용할 수 있습니다. 또한 사용자가 한 번에 하나의 필드 세트에 집중할 수 있도록 도와주므로 양식 작성 프로세스를 부담 없이 수행할 수 있습니다.

단, 이렇게 하면 사용자가 양식을 완성하기 위해 여러 페이지를 거쳐야 하므로 양식의 복잡성이 증가할 수도 있습니다. 따라서 마법사 레이아웃을 사용하기로 결정하기 전에 양식 요구 사항과 사용자 요구 사항을 먼저 평가해 보아야 합니다.
적응형 양식에서 마법사 레이아웃 핵심 구성 요소를 사용하여 마법사 레이아웃을 만들 수 있습니다.

예

사용 reasons-to-use-wizard-in-an-adaptive-form

적응형 양식에 마법사 레이아웃을 포함하는 것이 유익할 수 있는 몇 가지 이유는 다음과 같습니다.

  • 간단함: 양식을 여러 단계로 나누면 사용자가 한 번에 하나의 필드 세트에만 집중할 수 있으므로 이해하고 완료하기가 더 쉬워집니다.

  • 체계적: 마법사 레이아웃은 주제나 용도별로 양식을 구성하는 데 도움이 될 수 있으며 관련 필드를 함께 그룹화하여 양식 작성 프로세스를 보다 논리적이고 효율적으로 만들 수도 있습니다.

  • 유효성 검사: 마법사 레이아웃을 사용하면 사용자가 양식이 끝날 때까지 기다리지 않고 진행하면서 오류를 식별하고 수정하는 데 도움이 되는 단계별 유효성 검사를 수행할 수 있습니다.

  • 진행률 표시기: 마법사 레이아웃은 양식의 진행률을 표시하여 사용자가 완료해야 할 양식의 양을 이해하는 데 도움을 줄 수 있습니다.

  • 긴 양식: 양식에 필드가 많이 포함되어 있는 경우 사용자가 한 번에 모든 필드를 보는 것이 부담스러울 수 있습니다. 따라서 더 작고 관리하기 쉬운 청크로 분리하면 부담을 줄일 수 있습니다.

  • 폐기 방지: 사용자가 진행 상황을 확인하고 남은 작업이 얼마나 많이 남았는지 이해할 수 있는 경우에 양식을 완료할 가능성이 높으므로, 마법사 레이아웃을 사용하면 양식 폐기를 방지하는 데 도움이 될 수 있습니다.

  • 모바일 경험: 마법사 레이아웃을 사용하면 더 빠르게 로드되고 탐색하기 쉬운 더 작은 페이지로 작업할 수 있으므로 모바일 디바이스에서 액세스하는 양식에도 유용할 수 있습니다.

전반적으로 마법사 레이아웃은 사용자의 양식 채우기 프로세스를 보다 관리하기 쉽고 효율적으로 만들 수 있지만, 이러한 유형의 레이아웃을 사용하기로 결정하기 전에 양식의 복잡성과 사용자의 요구 사항을 먼저 고려해 보는 것이 중요합니다.

버전 및 호환성 version-and-compatibility

적응형 양식 마법사 레이아웃 핵심 구성 요소는 핵심 구성 요소 2.0.4의 일부로 2023년 2월에 릴리스되었습니다. 다음 표에서는 지원되는 모든 버전, AEM 호환성 및 해당 문서에 대한 링크를 보여 줍니다.

구성 요소 버전
AEM as a Cloud Service
v1
릴리스 2.0.4 이상 버전과 호환 가능

핵심 구성 요소 버전 및 릴리스에 대한 자세한 내용은 핵심 구성 요소 버전 문서를 참조하십시오.

기술 세부 정보 technical-details

적응형 양식 제목 핵심 구성 요소에 대한 최신 정보는 GitHub의 기술 설명서에서 확인할 수 있습니다. 핵심 구성 요소 개발에 대한 자세한 내용은 핵심 구성 요소 개발자 설명서를 확인하십시오.

구성 대화 상자 configure-dialog

구성 대화 상자를 사용하여 방문자를 위한 마법사 경험을 손쉽게 사용자 정의할 수 있습니다. 마법사 옵션을 간편하게 정의하여 원활한 사용자 경험을 제공할 수도 있습니다.

기본 탭 basic-tab

기본 탭

  • 이름 - 양식과 규칙 편집기 모두에서 고유한 이름으로 양식 구성 요소를 쉽게 식별할 수 있습니다. 단, 이름에는 공백이나 특수 문자가 포함되어서는 안 됩니다.

  • 제목 - 제목을 사용하면 양식에서 구성 요소를 쉽게 식별할 수 있으며, 기본적으로 제목은 구성 요소 상단에 나타납니다.

  • 제목 숨기기 - 구성 요소의 제목을 숨기려면 이 옵션을 선택합니다.

  • 양식 제출 시 하위 구성 요소의 데이터 그룹화(오브젝트에 데이터 래핑) - 이 옵션을 선택하면 하위 구성 요소의 데이터가 상위 구성 요소의 JSON 오브젝트 내에 중첩됩니다. 그러나 이 옵션을 선택하지 않으면 제출된 JSON 데이터는 상위 구성 요소에 대한 오브젝트가 없는 평면 구조를 갖습니다. 예:

    • 이 옵션을 선택하면 하위 구성 요소(예: 도로 번호, 구/군/시 및 우편 번호)의 데이터가 상위 구성 요소(주소) 내에 JSON 오브젝트로 중첩됩니다. 이렇게 하면 계층 구조가 생성되고 데이터는 상위 구성 요소 아래에 구성됩니다.

      제출된 데이터의 구조:

      code language-json
      { "Address":
      
      { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
      }
      
    • 이 옵션을 선택하지 않으면 제출된 JSON 데이터는 상위 구성 요소(주소)에 대한 오브젝트가 없는 평면 구조를 갖습니다. 모든 데이터는 계층 구조 없이 동일한 수준에 있습니다.

      제출된 데이터의 구조:

      code language-json
         { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }
      
  • 바인드 참조 - 바인드 참조는 외부 데이터 소스에 저장되고 양식에서 사용되는 데이터 요소에 대한 참조입니다. 바인드 참조를 사용하면 데이터를 양식 필드에 동적으로 바인딩하여 양식이 데이터 소스의 최신 데이터를 표시하도록 할 수 있습니다. 예를 들어 바인드 참조를 사용하여 양식에 입력된 고객의 ID를 기반으로 고객의 이름과 주소를 양식에 표시할 수 있습니다. 바인드 참조를 사용하여 양식에 입력된 데이터로 데이터 소스를 업데이트할 수도 있습니다. 이러한 방식으로 AEM Forms를 사용하면 외부 데이터 소스와 상호 작용하는 양식을 만들어 데이터 수집 및 관리를 위한 원활한 사용자 경험을 제공할 수 있습니다.

  • 구성 요소 숨기기 - 양식에서 구성 요소를 숨기려면 이 옵션을 선택합니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다. 구성 요소 숨기기는 사용자가 보거나 직접 변경할 필요가 없는 정보를 저장해야 할 때 유용합니다.

  • 구성 요소 비활성화 - 구성 요소를 비활성화하려면 이 옵션을 선택합니다. 비활성화된 구성 요소는 활성 상태가 아니므로 최종 사용자가 편집할 수 없습니다. 사용자는 필드 값을 볼 수 있지만 수정할 수는 없습니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다.

  • 읽기 전용 - 구성 요소를 편집할 수 없도록 만들려면 이 옵션을 선택합니다. 사용자는 필드 값을 볼 수 있지만 수정할 수는 없습니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다.

반복 마법사 탭 repeat-wizard-tab

반복 마법사

반복 옵션을 사용하여 마법사와 해당 하위 구성 요소를 복제하고, 최소 및 최대 반복 횟수를 정의하고, 양식 내에서 유사한 섹션을 손쉽게 복제할 수 있습니다. 마법사 구성 요소와 상호 작용하고 설정에 액세스할 때 다음 옵션이 표시됩니다.

  • 마법사가 반복 가능하도록 설정: 사용자가 반복 기능을 활성화 또는 비활성화할 수 있는 토글 기능입니다.
  • 최소 반복: 마법사 패널을 반복할 수 있는 최소 횟수를 설정합니다. 값이 0이면 마법사 패널이 반복되지 않음을 나타냅니다. 기본값은 0입니다.
  • 최대 반복: 마법사 패널을 반복할 수 있는 최대 횟수를 설정합니다. 기본적으로 이 값은 무제한입니다.

마법사 내에서 반복 가능한 섹션을 효율적으로 관리하려면 반복 가능한 섹션이 있는 양식 만들기 문서에 기재되어 있는 단계를 따르십시오.

항목 탭 items-tab

항목 탭

이 옵션을 사용하면 편집 모드에서 마법사가 추가될 때 기본적으로 나타나는 추가 버튼을 클릭하여 적응형 양식 구성 요소를 추가할 수 있습니다.

도움말 탭 help-tab

도움말 탭

  • 간단한 설명 - 간단한 설명은 특정 양식 필드의 용도에 대한 추가 정보 또는 설명을 제공하는 간단한 텍스트 설명입니다. 사용자가 필드에 입력해야 하는 데이터 유형을 이해하는 데 도움이 되며 입력된 정보가 유효하고 원하는 기준을 충족하는지 확인하는 데 도움이 되는 지침 또는 예시를 제공할 수 있습니다. 기본적으로 간단한 설명은 숨겨진 상태로 유지됩니다. 간단한 설명 항상 표시 옵션을 활성화하여 구성 요소 아래에 표시할 수 있습니다.

  • 간단한 설명 항상 표시 - 이 옵션을 활성화하여 구성 요소 아래에 간단한 설명을 표시할 수 있습니다.

  • 도움말 텍스트 - 도움말 텍스트는 양식 필드를 올바르게 작성하는 데 도움이 되도록 사용자에게 제공되는 추가 정보 또는 지침을 나타냅니다. 구성 요소 옆에 있는 도움말 아이콘(i)을 클릭하면 표시됩니다. 도움말 텍스트는 양식 필드의 레이블이나 플레이스홀더 텍스트보다 더 자세한 정보를 제공하며 사용자가 필드의 요구 사항이나 제한 사항을 이해하는 데 도움이 되도록 설계되었습니다. 또한 양식을 보다 쉽고 정확하게 작성할 수 있도록 제안이나 예시를 제공할 수도 있습니다.

접근성 탭 accessibility

접근성 탭

  • 화면 판독기용 텍스트 - 화면 판독기용 텍스트는 시각 장애인이 사용하는 화면 판독기와 같은 보조 기술로 읽을 수 있도록 특별히 고안된 추가 텍스트를 나타냅니다. 이 텍스트는 양식 필드의 용도에 대한 오디오 설명을 제공하며, 여기에는 필드의 제목, 설명, 이름 및 관련 메시지(사용자 정의 텍스트)에 대한 정보가 포함될 수 있습니다. 화면 판독기 텍스트는 시각 장애가 있는 사용자를 포함한 모든 사용자가 양식에 액세스할 수 있도록 돕고 양식 필드 및 해당 요구 사항을 완전히 이해할 수 있도록 합니다.

    • 사용자 정의 텍스트: ARIA 접근성 레이블에 사용자 정의 텍스트를 사용하려면 이 옵션을 선택합니다. 이 옵션을 선택하면 사용자 정의 텍스트 대화 상자가 표시됩니다. 사용자 정의 텍스트 대화 상자에서 관련 정보를 추가할 수 있습니다.
    • 설명: ARIA 접근성 레이블에 설명을 사용하려면 이 옵션을 선택합니다.
    • 제목: ARIA 접근성 레이블에 제목을 사용하려면 이 옵션을 선택합니다.
    • 이름: ARIA 접근성 레이블에 이름을 사용하려면 이 옵션을 선택합니다.
    • 없음: ARIA 접근성 레이블에 아무 것도 추가하지 않으려면 이 옵션을 선택합니다.
  • 화면 판독기가 알릴 HTML 역할 - HTML 역할은 화면 판독기와 같은 보조 기술에 대한 HTML 요소의 용도를 지정하는 데 사용되는 속성입니다. 역할 속성은 요소에 추가 컨텍스트 및 의미를 제공하는 데 사용되며, 이를 통해 화면 판독기는 콘텐츠를 더 쉽게 해석하고 사용자에게 알릴 수 있습니다. 예를 들어 AEM Forms에서 양식 필드의 레이블은 “레이블”이라는 역할을 가질 수 있으며 해당 입력 필드는 “텍스트 상자”라는 역할을 가질 수 있습니다. 이렇게 하면 화면 판독기가 레이블과 입력 필드 간의 관계를 이해하고 사용자에게 올바르게 알릴 수 있습니다.

디자인 대화 상자 design-dialog

디자인 대화 상자를 사용하면 템플릿 작성자가 요소들이 기본적으로 표시되는 방식을 제어할 수 있습니다. 적응형 양식 마법사 구성 요소의 경우 다음과 같은 옵션을 설정할 수 있습니다.

  • 양식 작성자가 적응형 양식 편집기에서 마법사에 추가할 수 있는 핵심 구성 요소
  • 적응형 양식 편집기에서 마법사 구성 요소의 속성 대화 상자에 적용할 수 있는 스타일(CSS 클래스)의 간단한 이름

이렇게 하면 양식을 만들고 사용자 정의하는 프로세스를 보다 간단하고 효율적으로 만들 수 있습니다.

허용된 구성 요소 탭 allowed-components-tab

허용된 구성 요소 탭

허용된 구성 요소 탭을 사용하면 템플릿 편집기에서 적응형 양식 편집기의 마법사 구성 요소 패널에 항목으로 추가할 수 있는 구성 요소를 설정할 수 있습니다.

스타일 탭 styles-tab

디자인 대화 상자는 구성 요소의 CSS 스타일을 정의하고 관리하는 데 사용됩니다. 적응형 양식 마법사 핵심 구성 요소는 AEM 스타일 시스템을 지원합니다.

스타일 탭

  • 기본 CSS 클래스: 적응형 양식 마법사 핵심 구성 요소에 기본 CSS 클래스를 제공할 수 있습니다.

  • 허용된 스타일: 이름과 스타일을 나타내는 CSS 클래스를 제공하여 스타일을 정의할 수 있습니다. 예를 들어 “bold text”라는 스타일을 만들고 “font-weight: bold”라는 CSS 클래스를 제공할 수 있습니다. 적응형 양식 편집기에서 이러한 스타일을 적응형 양식에 사용하거나 적용할 수 있습니다. 스타일을 적용하려면 적응형 양식 편집기에서 스타일을 적용할 구성 요소를 선택하고 속성 대화 상자로 이동한 다음 스타일 드롭다운 목록에서 원하는 스타일을 선택합니다. 스타일을 업데이트하거나 수정해야 하는 경우 디자인 대화 상자로 돌아가서 스타일 탭에서 스타일을 업데이트하고 변경 내용을 저장하면 됩니다.

사용자 정의 속성 탭

사용자 정의 속성 탭

사용자 정의 속성을 사용하면 양식 템플릿을 사용하여 사용자 정의 속성(키-값 쌍)을 적응형 양식 핵심 구성 요소에 연결할 수 있습니다. 사용자 정의 속성은 구성 요소의 Headless 렌디션에서 속성 섹션에 반영됩니다. 사용자 정의 속성 값에 따라 조정되는 동적 양식 동작을 만들 수 있습니다. 예를 들어 개발자는 모바일, 데스크탑 또는 웹 플랫폼을 위한 Headless 양식 구성 요소의 다양한 표현을 디자인하여 다양한 디바이스에서 사용자 경험을 크게 향상시킬 수 있습니다.

  • 그룹 이름: 사용자 정의 속성 그룹을 식별하기 위해 이름을 제공할 수 있습니다. 여러 사용자 정의 속성 그룹을 추가, 삭제 또는 재배열할 수 있습니다. 사용자 정의 속성 그룹을 추가하면 다음 옵션이 표시됩니다.

    • 키-값 쌍: 각 사용자 정의 속성 그룹의 추가 버튼을 클릭하여 여러 사용자 정의 속성 이름과 사용자 정의 속성 값을 추가할 수 있습니다.

    • 삭제: 사용자 정의 속성 이름과 사용자 정의 속성 값을 탭하거나 클릭하여 삭제할 수 있습니다.

    • 재배열: 사용자 정의 속성 이름과 사용자 정의 속성 값을 탭하거나 클릭하고 드래그하면 순서를 재배열할 수 있습니다.

관련 문서 related-articles

추가 참조 see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c