테마 만들기 및 사용 creating-and-using-themes

소개 introduction

테마를 만들고 적용하여 적응형 양식 또는 대화형 커뮤니케이션에 스타일을 지정할 수 있습니다. 테마에는 구성 요소 및 패널에 대한 스타일 세부 사항이 포함되어 있습니다. 스타일은 배경색, 상태 색상, 투명도, 정렬 및 크기와 같은 속성을 포함합니다. 테마를 적용하면 지정된 스타일이 해당 구성 요소에 반영됩니다. 테마는 적응형 양식이나 대화형 커뮤니케이션에 대한 참조 없이 독립적으로 관리됩니다.

다음과 같은 작업을 수행할 수 있습니다.

테마 만들기, 다운로드 또는 업로드 creating-downloading-or-uploading-a-theme

AEM Forms을 사용하면 테마를 생성, 다운로드 또는 업로드할 수 있습니다. 테마는 양식, 문서 및 문자와 같은 다른 자산과 같이 만들어집니다. 테마는 양식과 같은 메타 속성이 포함된 별도의 엔티티로 저장됩니다. 별도의 엔티티인 테마를 사용하면 여러 적응형 양식 및 대화형 커뮤니케이션에서 재사용할 수 있습니다. 테마를 다른 AEM Forms 인스턴스로 이동하고 다시 사용할 수도 있습니다.

테마 만들기 creating-a-theme

테마를 만들려면 다음 단계를 수행하십시오.

테마 다운로드 downloading-a-theme

테마를 zip 파일로 내보내고 다른 프로젝트 또는 AEM 인스턴스에서 사용할 수 있습니다. 테마를 다운로드하려면

테마 업로드 uploading-a-theme

프로젝트에서 스타일 사전 설정으로 생성된 테마를 사용할 수 있습니다. 다른 사용자가 만든 테마 패키지를 프로젝트에서 업로드하여 가져올 수 있습니다.

테마를 업로드하려면

테마의 메타데이터 metadata-of-a-theme

테마의 메타 속성 목록(테마의 속성 페이지에 있음).

테마 편집기 정보 about-the-theme-editor

AEM Forms은 테마 편집기와 함께 제공됩니다. 다양한 적응형 양식 및 대화형 커뮤니케이션 요소의 스타일을 쉽게 지정하는 데 필요한 기능을 제공하는 비즈니스 사용자 및 웹 디자이너/개발자 친화적 인터페이스입니다. 테마를 만들면 양식, 대화형 통신, 문자, 문서 조각 및 데이터 사전과 같은 별도의 엔티티로 저장됩니다.

테마 편집기를 사용하면 테마로 스타일이 지정된 구성 요소의 스타일을 사용자 지정할 수 있습니다. 폼이나 대화형 통신이 장치에서 보이는 방식을 사용자 지정할 수 있습니다.

테마 편집기는 두 개의 패널로 분할됩니다.

스타일 지정 구성 요소 styling-components

여러 적응형 양식 및 대화형 커뮤니케이션에서 테마를 사용할 수 있으며, 테마에 지정한 구성 요소 서식을 가져옵니다. 제목, 설명, 패널, 필드, 아이콘 및 텍스트 상자 등 다양한 구성 요소의 스타일을 지정할 수 있습니다. 위젯을 사용하여 테마에서 구성 요소 속성을 구성합니다. CSS 무시 섹션을 사용하여 CSS 코드를 작성하거나 사용자 지정 선택기를 제공할 수 있지만 CSS 또는 LESS에 대한 이전 지식이 필요하지 않습니다. 사이드바에서 구성 요소를 선택하면 CSS 무시 섹션이 나타납니다.

다양한 구성 요소를 선택하고 스타일을 지정할 수 있는 사이드바의 옵션.

사이드바의 구성 요소에 대해 편집 단추를 클릭하면 캔버스에서 구성 요소가 선택되고 사이드바의 옵션을 사용하여 구성 요소의 스타일을 지정할 수 있습니다.

텍스트 상자, 숫자 상자, 라디오 단추 및 확인란과 같은 특정 구성 요소는 필드 와 같은 일반 구성 요소에서 분류됩니다. 예를 들어 라디오 단추의 스타일을 사용자 정의하려고 합니다. 스타일을 지정할 라디오 단추를 선택하려면 필드 > 위젯 > 라디오 단추.

클릭 모두 확장 미리 표시되지 않는 분류된 구성 요소를 보고, 선택하고, 스타일을 지정할 수 있습니다.

스타일 지정 패널 레이아웃 styling-panel-layouts-br

AEM Forms의 테마는 양식 및 대화형 커뮤니케이션에서 패널 레이아웃의 요소 스타일을 지원합니다. 기본 제공 레이아웃 및 사용자 정의 레이아웃의 요소 스타일링을 지원합니다.

기본적으로 다음과 같은 패널이 있습니다.

선택기는 각 레이아웃에 따라 다릅니다.
테마 편집기에서 사용자 정의 레이아웃에 스타일을 지정하는 작업은 다음과 같습니다.

다양한 화면 크기에 따라 다른 스타일 different-styles-for-different-screen-sizes-br

데스크탑 및 모바일 레이아웃은 약간 또는 완전히 다른 스타일을 가질 수 있습니다. 모바일 장치의 경우, 태블릿 및 휴대폰은 구성 요소 크기를 제외하고 유사한 레이아웃을 공유합니다.

테마 편집기 중단점을 사용하여 다양한 화면 크기에 대한 대체 스타일링을 정의합니다. 테마 작성을 시작하는 기본 장치 또는 해상도를 선택할 수 있으며 다른 해상도의 스타일링 변형이 자동으로 생성됩니다. 모든 해상도의 스타일링을 명시적으로 수정할 수 있습니다.

객체 선택 시 사이드바의 스타일 지정 속성 컨텍스트 변경 styling-properties-context-changes-in-sidebar-on-selecting-objects

캔버스에서 구성 요소를 선택하면 해당 스타일 지정 속성이 사이드바에 나열됩니다. 객체 유형 및 해당 상태를 선택한 다음 해당 스타일을 제공합니다.

테마 편집기에서 최근에 사용한 스타일 recently-used-styles-in-theme-editor

테마 편집기는 구성 요소에 적용된 최대 10개의 스타일을 캐시합니다. 캐시된 스타일을 테마의 다른 구성 요소와 사용할 수 있습니다. 사이드바에서 선택한 구성 요소 바로 아래에 목록 상자로 최근에 사용한 스타일을 사용할 수 있습니다. 처음에는 최근에 사용한 스타일 목록이 비어 있습니다.

구성 요소의 스타일을 지정하면 스타일이 캐시되고 목록 상자에 나열됩니다. 이 예제에서 텍스트 상자의 레이블은 글꼴 크기와 색상을 변경하도록 스타일이 지정됩니다. 이미지를 선택하거나 색상을 변경하여 구성 요소에 스타일을 지정하는 유사한 단계를 수행할 수 있습니다. 필드 레이블 스타일이 변경될 때 스타일이 캐시되고 목록 상자에 나열되는 방식을 확인합니다.

이 예에서 필드 레이블의 스타일이 변경되고, 스타일을 위해 응답형 패널 설명을 선택하면 자산 라이브러리에 목록 항목이 추가됩니다. 자산 라이브러리의 항목은 응답형 패널 설명에 대한 스타일을 변경하는 데 사용할 수 있습니다.

자산 라이브러리에 스타일을 추가하면 다른 테마 및 스타일 모드 양식 편집기 또는 대화형 통신 편집기 UI에 대한 섹션을 참조하십시오. 마찬가지로 양식 편집기 또는 대화형 통신 편집기 UI의 스타일 모드를 사용하여 구성 요소의 스타일을 지정하면 스타일이 캐시되고 테마에서 사용할 수 있습니다.

자산 라이브러리에 대한 더하기 단추를 사용하면 지정한 이름으로 스타일을 영구적으로 저장할 수 있습니다. 사이드바에서 저장 단추를 클릭하여 스타일을 구성 요소에 적용하지 않더라도 더하기 단추는 스타일을 저장합니다. 나중에 사용할 스타일을 저장하는 더하기 단추는 스타일 모드에서 사용할 수 없습니다.

스타일에 대한 사용자 지정 이름을 제공하면 스타일이 테마에 연결되어 있으므로 더 이상 다른 테마에 사용할 수 없습니다. 저장된 스타일을 삭제하려면

변경 내용을 실시간으로 미리 보기, 저장 및 삭제합니다 live-preview-save-and-discard-changes

스타일링에서 수정한 사항은 캔버스에 로드된 양식 또는 대화형 커뮤니케이션에 즉시 반영됩니다. 라이브 미리 보기를 사용하면 대화식으로 스타일링의 영향을 정의하고 볼 수 있습니다. 구성 요소의 스타일을 변경하면 완료 단추가 사이드바에서 활성화되어 있습니다. 변경 사항을 유지하려면 완료 버튼을 클릭합니다.

다른 적응형 양식 또는 대화형 커뮤니케이션이 있는 테마 theme-with-another-adaptive-form-or-interactive-communication

테마를 만들면 테마 편집기와 함께 제공되는 양식이 만들어집니다. 이 양식에서 구성 요소에 대한 스타일을 제공합니다. 테마 편집기와 함께 제공되는 양식 대신 원하는 양식 또는 대화형 커뮤니케이션을 선택하여 스타일을 제공하고 결과를 미리 볼 수 있습니다.

테마 편집기 캔버스에서 현재 양식 또는 대화형 커뮤니케이션을 바꾸려면 다음을 수행하십시오.

다시 실행/실행 취소 redo-undo

실수로 발생하는 원치 않는 변경을 실행 취소하거나 재실행할 수 있습니다. 캔버스에서 재실행/실행 취소 단추를 사용합니다.

그림: 캔버스에서 실행 취소/다시 실행 단추

테마 편집기에서 구성 요소의 스타일을 지정할 때 재실행/실행 취소 단추가 나타납니다.

테마 편집기 사용 using-the-theme-editor

테마 편집기를 사용하면 만들거나 업로드한 테마를 편집할 수 있습니다. 다음으로 이동 Forms 및 문서 > 테마 ​및 테마를 선택하고 엽니다. 테마가 테마 편집기에서 열립니다.

위에서 설명한 대로 테마 편집기에는 두 개의 패널이 있습니다. 사이드바 및 캔버스.

테마 편집기에서 텍스트 상자 위젯 구성 요소의 성공 상태 스타일링 사용자 지정. 구성 요소 는 캔버스에서 선택되고 그 상태는 사이드바에서 선택됩니다. 사이드바에서 사용할 수 있는 스타일링 옵션은 구성 요소의 모양을 사용자 지정하는 데 사용됩니다.

캔버스 사용 using-canvas

테마는 기본 제공 양식을 사용하거나 원하는 양식 또는 대화형 커뮤니케이션을 사용하여 만들어집니다. 캔버스는 테마에 지정된 사용자 지정 항목을 사용하여 테마를 만드는 데 사용되는 양식 또는 대화형 커뮤니케이션의 미리 보기를 표시합니다. 양식 위의 눈금자는 장치 표시 크기에 따라 레이아웃을 결정하는 데 사용됩니다.

캔버스 도구 모음에서 다음을 볼 수 있습니다.

캔버스에서 구성 요소를 선택하면 구성 요소 도구 모음 위에 구성 요소 도구 모음이 표시됩니다. 구성 요소 도구 모음에서 구성 요소를 선택하거나 일반 구성 요소로 전환할 수 있습니다. 예를 들어 패널에서 숫자 텍스트 상자를 선택합니다. 구성 요소 도구 모음에 다음 옵션이 표시됩니다.

그림: 캔버스에서 숫자 상자에 있는 구성 요소 도구 모음

사이드바 사용 using-rail

테마 편집기의 사이드바는 테마에서 구성 요소의 스타일을 사용자 지정하고 선택기를 사용하는 옵션을 제공합니다. 선택기를 사용하면 구성 요소 그룹 또는 개별 구성 요소를 선택할 수 있으며, 사이드바에서 선택기를 검색할 수 있습니다. 사용자 지정 구성 요소에 대해 선택기를 작성할 수 있습니다.

캔버스 또는 사이드바의 선택기에서 구성 요소를 선택하면 사이드바에 대한 스타일을 사용자 지정할 수 있는 모든 옵션이 표시됩니다.
아래는 구성 요소를 선택할 때 사이드바에 표시되는 옵션입니다.

상태 state

상태는 구성 요소와 사용자의 상호 작용을 나타내는 지표입니다. 예를 들어 사용자가 텍스트 상자에 오류 데이터를 입력하면 텍스트 상자의 상태가 오류 상태로 변경됩니다. 테마 편집기를 사용하면 특정 상태에 대한 스타일을 지정할 수 있습니다.

상태 스타일을 사용자 지정하는 옵션은 다른 구성 요소에 따라 다릅니다.

속성 시트 property-sheet

오류/성공 시뮬레이션 simulate-error-success

사이드바 아래쪽에서 오류 및 성공 시뮬레이션 옵션을 사용할 수 있습니다. 사이드바 하단에 표시되는 표시/숨기기 화살표를 사용하여 표시됩니다. 테마 편집기를 사용하여 구성 요소의 다양한 상태 스타일을 지정할 수 있습니다.

예를 들어 양식에 숫자 필드를 추가하고 테마 편집기에서 해당 스타일을 지정합니다. 사용자가 필드에 영숫자 값을 입력하는 경우 텍스트 상자의 배경색을 변경할 수 있습니다. 테마에서 숫자 필드를 선택하고 사이드바에서 상태 옵션을 사용합니다. 사이드바에서 오류 상태를 선택하고 배경색을 빨간색으로 변경합니다. 동작을 미리 보려면 사이드바에서 사용할 수 있는 오류 시뮬레이션 옵션을 사용할 수 있습니다. 오류 시뮬레이션 및 성공 옵션은 아래에 자세히 설명되어 있습니다.

구성 요소 스타일 지정 styling-a-component

예를 들어 양식에는 두 가지 유형의 텍스트 상자가 있습니다. 숫자 값만 허용하는 숫자 및 영숫자 값을 허용하는 숫자 값 숫자 값(숫자 상자)만 허용하는 텍스트 상자에 대한 스타일링을 사용자 지정할 수 있습니다.

다음 단계를 수행하여 특정 구성 요소(이 예제의 숫자 상자)에 대한 스타일을 사용자 지정합니다.

선택하는 대신 숫자 상자 위젯, 선택 필드 위젯 구성 요소 도구 모음에서 위의 단계를 수행합니다. 차원 선택 시 필드 위젯 옵션을 선택하면 숫자 상자를 제외한 모든 텍스트 상자의 크기가 동일합니다.

지정된 상태에 대한 스타일링 필드 styling-fields-given-state

구성 요소 도구 모음을 사용하여 다른 상태에 대한 구성 요소의 스타일을 지정할 수도 있습니다. 예를 들어, 구성 요소가 비활성화되어 있으면 비활성화된 상태입니다. 테마 편집기에서 스타일을 지정할 수 있는 구성 요소의 일반적으로 사용되는 상태는 다음과 같습니다. 기본값, 포커스, 비활성화, 오류, 성공 및 마우스로 가리키기 캔버스에서 구성 요소를 선택하고 사이드바의 상태 옵션을 사용하여 구성 요소의 모양을 사용자 지정할 수 있습니다.

특정 상태의 구성 요소에 대한 스타일을 사용자 지정하려면 다음 단계를 수행하십시오.

상태를 지정한 후 구성 요소의 스타일을 사용자 지정하는 경우 지정된 상태에 대해서만 구성 요소에 대한 사용자 지정이 표시됩니다. 예를 들어 마우스로 가리키기 상태가 선택되어 있을 때 구성 요소에 대한 스타일링을 사용자 지정하는 경우, 테마를 적용하는 렌더링된 양식 또는 대화형 커뮤니케이션의 구성 요소 위로 포인터를 이동하면 구성 요소에 대한 사용자 지정이 나타납니다.

오류 및 성공 이외의 상태의 동작을 시뮬레이션하려면 미리 보기 모드를 사용합니다. 미리 보기 모드를 사용하려면 미리 보기 를 클릭합니다.

더 작은 디스플레이를 위한 스타일 레이아웃 styling-layouts-for-smaller-displays

캔버스에서 눈금자를 사용하여 더 작은 디스플레이가 있는 장치의 중단점을 선택합니다. 에뮬레이터 클릭 캔버스에서 눈금자와 중단점을 볼 수 있습니다. 중단점을 사용하면 전화 및 태블릿과 같은 다양한 장치와 관련된 표시 크기에 대한 양식 또는 대화형 커뮤니케이션을 미리 볼 수 있습니다. 테마 편집기에서 여러 표시 크기가 지원됩니다.

다른 중단점에 대한 구성 요소의 스타일을 지정하려면 다음을 수행합니다.

여러 장치를 위한 양식 또는 대화형 통신 구성 요소의 스타일을 지정할 수 있습니다. 데스크탑 및 모바일 장치용 양식 및 대화형 통신 구성 요소는 완전히 다른 스타일을 가질 수 있습니다.

테마에서 웹 글꼴 사용 using-web-fonts-in-a-theme

이제 적응형 양식 또는 대화형 커뮤니케이션에서 웹 서비스에서 사용할 수 있는 글꼴을 사용할 수 있습니다. 즉시 사용 가능, TypekitAdobe의 웹 글꼴 서비스인 를 구성으로 사용할 수 있습니다. Typekit을 사용하려면 키트 및 글꼴을 만들고 키트 ID를 Typekit 웹 사이트.

다음 단계를 수행하여 AEM에서 Typekit을 구성합니다.

TypeKit 구성을 사용하도록 테마를 구성하려면 다음 단계를 수행하십시오.

테마 편집기에서 글꼴 나열 및 선택 listing-and-selecting-fonts-in-theme-editor

테마 구성 서비스를 사용하여 테마 편집기에 글꼴을 더 추가할 수 있습니다. 글꼴을 추가하려면 다음 단계를 수행하십시오.

테마 편집기에서 글꼴 선택 selecting-fonts-in-theme-editor

​+ 단추를 사용하여 글꼴을 추가할 수 있습니다. 글꼴을 추가하면 사이드바에 나열됩니다.

테마 구성 옵션 외에도 테마 편집기 자체에서 글꼴을 추가할 수도 있습니다. 사이드바 아래의 글꼴 패밀리 필드에 사용할 글꼴을 입력하고 키보드의 반환 키를 누릅니다.

글꼴을 선택하면 글꼴 패밀리 목록 아래에 추가됩니다. 테마 편집기의 [마스크] 옵션을 사용하여 나열된 글꼴을 비활성화하거나 활성화할 수 있습니다.

구성 요소 글꼴 변경 사항을 확인할 수 있습니다.

글꼴 패밀리 필드는 여러 글꼴을 지원합니다. 글꼴을 입력하면 브라우저가 해당 글꼴을 찾아 선택한 구성 요소에 적용합니다. 브라우저에서 글꼴을 찾을 수 없으면 해당 글꼴의 옆에 있는 글꼴을 찾습니다. 원하는 특정 글꼴을 입력부터 시작할 수 있습니다. 사용할 글꼴을 찾지 못하면 일반 글꼴을 패밀리에 입력하고 사용할 수 있습니다.

테마 편집기에 적용된 마스크 스타일 mask-styles-applied-in-theme-editor

테마로 적용된 마스크 스타일을 적용할 수 있습니다. 테마 편집기 사이드바에서 아이콘을 클릭하여 적용된 스타일을 비활성화합니다. 예를 들어 폼이나 대화형 커뮤니케이션에서 구성 요소의 차원을 변경하면 속성 왼쪽의 마스크 단추를 사용하여 구성 요소를 비활성화할 수 있습니다. 테마를 저장하면 선택한 마스킹 옵션이 유지됩니다.

아래 예제는 테마에서 마스크와 마스크가 해제된 스타일을 보여줍니다.

양식 또는 대화형 커뮤니케이션에 테마 적용 applying-a-theme-to-a-form-or-interactive-communication-br

적응형 양식에 테마를 적용하려면:

대화형 커뮤니케이션에 테마를 적용하려면:

런타임 시 양식의 테마 변경 change-theme-of-a-form-at-runtime

테마 스타일은 양식의 다른 구성 요소입니다. 를 사용할 수 있습니다 themeOverride 폼의 테마를 동적으로 변경할 속성입니다. 양식의 일반적인 URL은 다음과 같습니다.

https://<server>:<port>/content/forms/af/test.html

테마 재정의 매개 변수를 사용하여 런타임에 테마를 적용할 수 있습니다.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

다음 themeOverride 옵션을 사용하면 테마 경로를 제공할 수 있습니다. 양식의 테마를 변경하고 업데이트된 스타일로 양식을 새로 고칩니다.

테마를 사용하여 특정 모양 가져오기 specific-af-appearance

AEM Forms과 기본 기본 기본 캔버스 테마가 함께 있으면 다른 많은 테마가 있습니다. 추가 변경 사항과 함께 다른 테마를 사용하여 폼이나 대화형 커뮤니케이션을 디자인하려면 테마 라이브러리 폴더에서 테마를 복사하십시오. 복사된 테마를 테마 라이브러리 폴더 외부에 붙여 넣고 원하는 변경 사항에 따라 복사된 테마를 편집합니다.

테마를 복사하려면 다음 단계를 수행하십시오.

테마를 사용자 지정한 후 양식이나 대화형 커뮤니케이션에 적용합니다.

다른 적응형 양식 사용 사례에 미치는 영향 impact-on-other-adaptive-form-use-cases

CSS 생성 시퀀스 css-generation-sequence

CSS 보기를 선택하면 테마 편집기가 모든 스타일 정보를 수집하고 CSS를 빌드합니다. 다음 순서로 정보를 수집합니다.

예를 들어, 텍스트 상자의 배경색은 기본 클라이언트 라이브러리에 파란색으로 표시됩니다. 사이드바의 속성을 사용하여 분홍색으로 변경합니다. CSS를 생성하면 텍스트 상자의 배경색이 분홍색으로 표시됩니다. 속성을 사용하여 배경색을 변경한 후 다른 작성자는 CSS 무시 옵션을 사용하여 배경색 텍스트 상자를 흰색으로 변경합니다. CSS를 생성하면 생성된 CSS에 배경색이 흰색으로 표시됩니다.

디버깅 스타일 debugging-styles

테마 편집기에서 구성 요소의 스타일을 지정하면 CSS가 생성됩니다. 일반 구성 요소의 스타일을 지정할 때 여기에 포함된 여러 구성 요소도 스타일이 지정됩니다. 예를 들어 필드 스타일을 지정하면 텍스트 상자 및 필드의 레이블도 스타일이 지정됩니다. 필드 내에서 텍스트 상자의 스타일을 지정하면 자체 CSS가 됩니다. 필드 및 구성 요소에 대해 생성된 CSS를 디버깅하려면 테마 편집기에서 CSS를 볼 수 있는 옵션을 제공합니다.

다음 옵션을 사용하여 생성된 CSS를 볼 수 있습니다.

문제 해결, 권장 사항 및 우수 사례 troubleshooting-recommendations-and-best-practices