페이지 템플릿 만들기 creating-page-templates

페이지를 만들 때 새 페이지를 만드는 기준으로 사용할 템플릿을 선택해야 합니다. 템플릿은 결과 페이지의 구조, 초기 콘텐츠 및 사용할 수 있는 구성 요소를 정의합니다.

템플릿 편집기 ​를 사용하면 템플릿을 만들고 유지 관리하는 작업은 더 이상 개발자 전용 작업이 아닙니다. 템플릿 작성자 ​라고 불리는 강력한 사용자 유형도 참여할 수 있습니다. 개발자는 여전히 환경을 설정하고 클라이언트 라이브러리를 생성하고 사용할 구성 요소를 생성해야 하지만, 이러한 기본 사항이 마련되면 템플릿 작성자 ​는 개발 프로젝트 없이도 템플릿을 생성하고 구성할 수 있습니다.

템플릿 콘솔 ​을 사용하여 템플릿 작성자는 다음과 같은 작업을 수행할 수 있습니다.

템플릿 편집기 ​를 사용하여 템플릿 작성자는 다음과 같은 작업을 수행할 수 있습니다.

이 문서에서는 템플릿 작성자 ​가 템플릿 콘솔 및 편집기를 사용하여 편집 가능한 템플릿을 만들고 관리하는 방법을 설명합니다.

편집 가능한 템플릿이 기술 수준에서 작동하는 방법에 대한 자세한 내용은 개발자 문서 페이지 템플릿을 참조하십시오.

시작하기에 앞서 before-you-start

시작하기 전에 템플릿을 만드는 데에는 협업이 필요하다는 것을 고려해야 합니다. 이러한 이유로 각 작업에 대해 역할이 지정됩니다. 이 사실은 실제로 템플릿을 사용하여 페이지 만드는 방법에는 영향을 주지 않지만, 페이지가 해당 템플릿과 관련되는 방식에는 영향을 줍니다.

역할 roles

템플릿 콘솔 및 템플릿 편집기 ​를 사용하여 새 템플릿을 만들려면 다음 역할 간의 공동 작업이 필요합니다.

폴더 작성과 같은 일부 작업의 특성으로 인해, 개발 환경이 필요하며, 이를 위해서는 지식과 경험이 필요합니다.

이 문서에 자세히 설명된 작업은 해당 작업을 수행하는 역할과 함께 나열됩니다.

템플릿 만들기 및 관리 creating-and-managing-templates

편집 가능한 템플릿을 만들 때 다음 작업을 수행하십시오.

템플릿 폴더 만들기 - 관리자 creating-a-template-folder-admin

프로젝트에 프로젝트 특정 템플릿을 포함하려면 템플릿 폴더를 만들어야 합니다. 이는 관리자 작업이며 페이지 템플릿 문서에 설명되어 있습니다.

새 템플릿 만들기 - 템플릿 작성자 creating-a-new-template-template-author

템플릿 속성 정의 - 템플릿 작성자 defining-template-properties-template-author

템플릿에는 다음 속성을 지정할 수 있습니다.

속성을 보거나 편집하려면:

템플릿 썸네일 이미지 template-thumbnail-image

템플릿 썸네일을 정의하려면:

템플릿 활성화 및 허용 - 템플릿 작성자 enabling-and-allowing-a-template-template-author

페이지를 작성할 때 템플릿을 사용하려면 다음 작업을 수행해야 합니다.

템플릿 활성화 - 템플릿 작성자 enabling-a-template-template-author

템플릿을 활성화하거나 비활성화하여 페이지 만들기 마법사에서 사용 또는 사용할 수 없게 만들 수 있습니다.

템플릿 허용 - 작성자 allowing-a-template-author

특정 페이지 분기에서 템플릿을 사용하거나 사용할 수 없게 지정할 수 있습니다.

템플릿 게시 - 템플릿 작성자 publishing-a-template-template-author

페이지가 렌더링될 때 템플릿이 참조되면 게시 환경에서 사용할 수 있도록 완전히 구성된 템플릿을 게시해야 합니다.

템플릿 편집 - 템플릿 작성자 editing-templates-template-authors

템플릿을 만들거나 편집할 때 다양한 측면을 정의할 수 있습니다. 템플릿 편집 작업은 페이지 작성과 유사합니다.

도구 모음의 모드 선택기를 사용하여 템플릿의 해당 측면을 선택하고 편집할 수 있습니다.

반면에 페이지 정보 메뉴의 페이지 정책 옵션을 사용하여 필요한 페이지 정책을 선택할 수 있습니다.

템플릿 속성 template-attributes

템플릿의 다음 속성을 편집할 수 있습니다.

구조 template-structure

구조에 추가된 구성 요소는 페이지 작성자가 결과 페이지에서 이동/제거할 수 없습니다. 페이지 작성자가 결과 페이지에 구성 요소를 추가 및 제거할 수 있게 하려면 템플릿에 단락 시스템을 추가해야 합니다.

구성 요소가 잠긴 경우 콘텐츠를 추가할 수 있지만 이 콘텐츠를 페이지 작성자는 편집할 수 없습니다. 구성 요소의 잠금을 해제하여 초기 콘텐츠를 정의할 수 있습니다.

초기 콘텐츠 template-initial-content

구성 요소 잠금이 해제된 경우, 템플릿에서 만든 결과 페이지에 복사할 초기 콘텐츠를 정의할 수 있습니다. 잠금이 해제된 이러한 구성 요소는 결과 페이지에서 편집할 수 있습니다.

레이아웃 template-layout

레이아웃으로 필요한 디바이스 형식에 대한 템플릿 레이아웃을 미리 정의할 수 있습니다. 템플릿 작성에 대한​ 레이아웃 모드는 페이지 작성에 대한 레이아웃 모드와 동일한 기능을 갖습니다.

페이지 정책 template-page-policies

페이지 정책은 사전 정의된 페이지 정책을 페이지에 연결할 수 있습니다. 이러한 페이지 정책은 다양한 디자인 구성을 정의합니다.

스타일 template-styles

스타일 시스템을 사용하여 템플릿 작성자는 페이지에서 구성 요소를 편집할 때 콘텐츠 작성자가 선택할 수 있도록 구성 요소의 콘텐츠 정책에 스타일 클래스를 정의할 수 있습니다. 이러한 스타일은 보다 유연하게 사용할 수 있도록 구성 요소를 시각적으로 변형한 대체물일 수 있습니다.

자세한 내용은 스타일 시스템 설명서를 참조하십시오.

템플릿 편집 - 구조 - 템플릿 작성자 editing-a-template-structure-template-author

구조 모드에서 템플릿에 대한 구성 요소 및 콘텐츠를 정의하고 템플릿 및 해당 구성 요소에 대한 정책을 정의합니다.

템플릿 편집기의 구조 모드에서 수행할 수 있는 몇 가지 작업과 도움이 되는 몇 가지 기능이 있습니다.

구성 요소 추가 add-components

템플릿에 구성 요소를 추가하기 위한 다음과 같은 몇 가지 메커니즘이 있습니다.

일단 추가된 각 구성 요소는 다음으로 표시됩니다.

구성 요소 작업 component-actions

구성 요소가 템플릿에 추가되면 구성 요소에 대해 작업을 수행합니다. 각 개별 인스턴스에는 사용 가능한 작업에 액세스할 수 있는 도구 모음이 있으며, 도구 모음은 구성 요소 유형에 따라 달라집니다.

또한 정책이 구성 요소와 연관된 경우 디자인 구성 아이콘을 사용할 수 있는 것처럼 수행되는 작업에 따라서도 달라집니다.

편집 및 구성 edit-and-configure

이러한 두 가지 작업을 사용하여 구성 요소에 콘텐츠를 추가할 수 있습니다.

구조를 나타내는 테두리 border-to-indicate-structure

구조 모드에서 작업할 경우 주황색 테두리는 현재 선택된 구성 요소를 나타냅니다. 또한 점선은 상위 구성 요소를 나타냅니다.

정책 및 속성(일반) policy-and-properties-general

콘텐츠(또는 디자인) 정책은 구성 요소의 디자인 속성을 정의합니다. 예: 사용 가능한 구성 요소 또는 최소/최대 크기. 이러한 속성은 템플릿(및 템플릿으로 만든 페이지)에 적용될 수 있습니다.

구성 요소에 대해 콘텐츠 정책을 만들거나 기존 콘텐츠 정책을 선택합니다.

이를 통해 디자인 세부 사항을 정의할 수 있습니다.

구성 창은 두 개로 나누어집니다.

사용 가능한 속성은 선택한 구성 요소에 따라 다릅니다. 예를 들어 텍스트 구성 요소의 경우 속성은 여러 다른 옵션 중에서 복사 및 붙여넣기 옵션, 서식 옵션 및 단락 스타일을 정의합니다.

정책 policy

콘텐츠(또는 디자인) 정책은 구성 요소의 디자인 속성을 정의합니다. 예: 사용 가능한 구성 요소 또는 최소/최대 크기. 이러한 속성은 템플릿(및 템플릿으로 만든 페이지)에 적용될 수 있습니다.

정책 ​에서 드롭다운을 통해 구성 요소에 적용할 기존 정책을 선택할 수 있습니다.

정책 선택 드롭다운 옆에 있는 추가 단추를 선택하여 새 정책을 추가할 수 있습니다. 정책 제목 필드에 새 제목을 지정합니다.

정책 선택 드롭다운 목록에서 선택한 기존 정책은 드롭다운 목록 옆에 있는 복사 단추를 사용하여 새 정책으로 복사할 수 있습니다. 정책 제목 필드에 새 제목을 지정합니다. 기본적으로 복사된 정책 제목은 X의 사본 ​으로 지정됩니다. 여기서 X는 복사된 정책의 제목입니다.

정책 설명 필드에서 정책에 대한 설명은 옵션입니다.

선택한 정책을 사용하는 다른 템플릿 섹션에서 정책 선택 드롭다운 목록에서 선택한 정책을 사용하는 다른 템플릿을 쉽게 확인할 수 있습니다.

속성 properties

속성 제목에서 구성 요소의 설정을 정의할 수 있습니다. 제목에는 다음과 같은 두 개의 탭이 있습니다.

기본 main

기본 탭에서는 구성 요소의 가장 중요한 설정이 정의됩니다.

예를 들어 이미지 구성 요소의 경우 지연 로드를 활성화하여 허용되는 폭을 정의할 수 있습니다.

설정이 여러 구성을 허용하는 경우 추가 단추를 선택하여 다른 구성을 추가합니다.

구성을 제거하려면 구성 오른쪽에 있는 삭제 단추를 선택합니다.

구성을 제거하려면 삭제 단추를 선택하십시오.

기능 features

기능 탭을 사용하여 구성 요소의 추가 기능을 활성화하거나 비활성화할 수 있습니다.

예를 들어 이미지 구성 요소의 경우 자르기 비율, 허용되는 이미지 방향 및 업로드가 허용되는지 여부를 정의할 수 있습니다.

정책 및 속성(레이아웃 컨테이너) policy-and-properties-layout-container

레이아웃 컨테이너의 정책 및 속성 설정은 일반적인 사용 방식과 유사하지만 일부 차이점이 있습니다.

이 구성 창은 창의 일반적인 사용 방식과 마찬가지로 두 개로 나누어집니다.

정책 policy-layout

콘텐츠(또는 디자인) 정책은 구성 요소의 디자인 속성을 정의합니다. 예: 사용 가능한 구성 요소 또는 최소/최대 크기. 이러한 속성은 템플릿(및 템플릿으로 만든 페이지)에 적용될 수 있습니다.

정책 아래에서 드롭다운을 통해 구성 요소에 적용할 기존 정책을 선택할 수 있습니다. 이는 창의 일반적인 사용 방식과 같습니다.

속성 properties-layout

속성 제목에서는 레이아웃 컨테이너에 사용할 수 있는 구성 요소를 선택하고 해당 설정을 정의할 수 있습니다. 제목에는 다음과 같은 세 개의 탭이 있습니다.

허용된 구성 요소 allowed-components

허용된 구성 요소 탭에서 레이아웃 컨테이너에 사용 가능한 구성 요소를 정의합니다.

기본 구성 요소 default-components

기본 구성 요소 탭에서는 작성자가 자산 브라우저에서 자산을 끌어 오면 AEM에서 연결할 구성 요소를 알 수 있도록, 지정된 미디어 유형과 자동으로 연결되는 구성 요소를 정의합니다. 드롭 영역이 있는 구성 요소만 이러한 구성에 사용할 수 있습니다.

완전히 새로운 구성 요소 및 MIME 유형 매핑을 추가하려면 매핑 추가 ​를 선택하십시오.

이미 매핑된 구성 요소에 MIME 형식을 추가하려면 목록에서 구성 요소를 선택하고 형식 추가 ​를 선택하십시오. MIME 유형을 제거하려면 삭제 아이콘을 클릭하십시오.

반응형 설정 responsive-settings

반응형 설정 탭에서 레이아웃 컨테이너의 최종 격자에 포함되는 열 수를 구성할 수 있습니다.

구성 요소 잠금 해제 및 잠금 unlock-and-lock-components

구성 요소를 잠금 해제/잠금 처리하여 초기 콘텐츠 모드에서 콘텐츠를 변경할 수 있는지 여부를 정의합니다.

구성 요소 잠금이 해제될 경우:

여기에는 초기 콘텐츠 모드 또는 결과 페이지에서 구성 요소를 추가할 수 있도록 컨테이너 구성 요소의 잠금을 해제하는 작업이 포함됩니다. 잠금을 해제하기 전에 컨테이너에 구성 요소/콘텐츠를 이미 추가한 경우, 구조 모드에서는 더 이상 표시되지 않지만 초기 콘텐츠 모드에서는 표시됩니다. 구조 모드 ​에서는 컨테이너 구성 요소 자체만 허용된 구성 요소 목록과 함께 표시됩니다.

공간을 절약하기 위해 레이아웃 컨테이너는 허용된 구성 요소 목록을 수용하도록 확장되지 않습니다. 대신, 컨테이너는 스크롤 가능한 목록이 됩니다.

구성 가능한 구성 요소는 정책 아이콘으로 표시되며, 이 아이콘을 탭하거나 클릭하여 해당 구성 요소의 정책 및 속성을 편집할 수 있습니다.

기존 페이지에 대한 관계 relationship-to-existing-pages

템플릿을 기준으로 페이지를 작성한 후 구조가 업데이트된 경우 이러한 페이지는 템플릿의 변경 사항을 반영합니다. 확인 대화 상자와 함께 이 사실을 알려 주는 경고가 도구 모음에 표시됩니다.

템플릿 편집 - 초기 콘텐츠 - 작성자 editing-a-template-initial-content-author

초기 콘텐츠 모드는 템플릿을 기반으로 페이지를 처음 만들 때 표시되는 콘텐츠를 정의하는 데 사용됩니다. 이후 초기 콘텐츠는 페이지 작성자가 편집할 수 있습니다.

구조 모드에서 생성된 모든 콘텐츠는 초기 콘텐츠 ​에 표시되지만, 잠금이 해제된 구성 요소만 선택하고 편집할 수 있습니다.

템플릿 편집 - 레이아웃 - 템플릿 작성자 editing-a-template-layout-template-author

디바이스 범위에 대한 템플릿 레이아웃을 정의할 수 있습니다. 템플릿에 대한 반응형 레이아웃은 페이지 작성의 경우와 마찬가지로 작동합니다.

템플릿 편집 - 페이지 정책 - 템플릿 작성자/개발자 editing-a-template-page-policy-template-author-developer

필요한 클라이언트측 라이브러리를 포함한 페이지 정책은 페이지 정보 메뉴의 페이지 정책 옵션에서 유지 관리됩니다.

페이지 정책 대화 상자에 액세스하려면:

페이지 정책 page-policies

템플릿 또는 결과 페이지에 콘텐츠 정책을 적용할 수 있습니다. 페이지의 기본 단락 시스템에 대한 콘텐츠 정책을 정의합니다.

페이지 속성 page-properties

페이지 속성을 사용하면 페이지 디자인 대화 상자에서 필수 클라이언트측 라이브러리를 정의할 수 있습니다. 이러한 클라이언트측 라이브러리에는 템플릿과 함께 로드될 스타일 시트 및 Javascript와 해당 템플릿으로 작성된 페이지가 포함되어 있습니다.

템플릿 편집 - 초기 페이지 속성 - 작성자 editing-a-template-initial-page-properties-author

초기 페이지 속성 옵션을 사용하여 결과 페이지를 생성할 때 사용할 초기 페이지 속성을 정의할 수 있습니다.

모범 사례 best-practices

템플릿을 만들 때 다음과 같은 사항을 고려해야 합니다.