설명서AEMAEM 튜토리얼AEM as a Cloud Service 튜토리얼

AEM 스타일 시스템을 사용하여 컨텐츠 속도 가속화

Last update: Thu Jan 25 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

이 문서에서는 AEM 스타일 시스템을 사용하여 조직의 디자이너, 콘텐츠 작성자 및 개발자가 고객이 기대하는 속도와 규모로 경험을 만들고 제공할 수 있는 권한을 부여하는 방법을 알아봅니다.

개요

AEM 스타일 시스템에는 다음과 같은 네 가지 주요 이점이 있습니다.

  • 템플릿 작성자는 구성 요소 또는 페이지의 콘텐츠 정책에 스타일 클래스를 정의할 수 있습니다
  • 콘텐츠 작성자는 전체 페이지에 적용할 스타일을 선택하거나 페이지에서 구성 요소를 편집할 때 선택할 수 있습니다
  • 구성 요소 및 템플릿은 작성자가 대체 시각적 변형을 렌더링할 수 있도록 지원하여 보다 유연하게 만들어집니다
  • 맞춤형 구성 요소 및/또는 구성 요소 변형을 제공하기 위한 복잡한 대화 상자를 개발할 필요성이 줄어들거나 완전히 제거됩니다

초기 설정 및 사용

5단계 설정은 표준 구성 요소 개발 워크플로와 매우 유사합니다.

리더십
디자이너
개발자/아키텍트
템플릿 작성자
콘텐츠 작성자
해당 구성 요소에 대한 콘텐츠 및 목표 결정
콘텐츠의 시각적 및 경험적 표현 결정
경험을 지원하기 위한 CSS 및 JS 개발. 사용할 클래스 이름 정의 및 제공
개발자가 정의한 CSS 클래스 이름을 추가하여 스타일이 지정된 구성 요소에 대한 템플릿 정책을 구성합니다. 각 스타일에 대해 사용자에게 친숙한 이름을 활용해야 합니다.
페이지를 작성하는 동안 에서는 필요에 따라 스타일을 적용하여 원하는 모양과 느낌을 얻을 수 있습니다

이것이 초기 설정이지만 많은 고객이 이 프로세스를 간소화하여 추가적인 민첩성을 달성했습니다. 예를 들어 CSS를 DAM에 업로드하여 배포 없이 스타일을 업데이트할 수 있습니다. 다른 고객에게는 배포나 개발 없이 활용할 수 있는 구성 요소와 스타일을 개발할 수 있는 모든 기능을 갖춘 유틸리티 클래스 세트가 있습니다.

스타일 시스템은 다음과 같은 몇 가지 유형으로 제공됩니다.

  1. 레이아웃 스타일

    • 디자인 및 레이아웃에 대한 다면적인 변경 사항

    • 잘 정의되어 있고 식별 가능한 렌디션에 사용됨

  2. 스타일 표시

    • 스타일의 기본 특성을 변경하지 않는 작은 변형

    • 예를 들어 색상 구성표, 글꼴, 이미지 방향 등을 변경할 수 있습니다.

  3. 정보 스타일

    • 필드 표시/숨기기
NOTE
이러한 기능에 대한 데모 버전을 보려면 다음을 시청하는 것이 좋습니다. 고객 성공 웨비나 윌 브리즈번과 조셉 반 버커크와 함께.

모범 사례

  • 기본 스타일을 먼저 솔리드화

    • 스타일 시스템을 적용하기 전에 페이지에 드롭할 때 구성 요소의 레이아웃 및 표시
    • 가장 많이 사용되는 렌디션이어야 합니다.

  • 가능하면 효과가 있는 스타일 옵션만 표시하십시오

    • 비효과적 조합이 노출되면 부정적인 영향을 주지 않는지 확인하십시오
    • 예: 이미지 위치를 지정하는 레이아웃 스타일에 이미지 위치를 제어하는 비효율적인 표시 스타일이 동반됩니다

  • 결합된 표시 스타일 위에 레이아웃 스타일 선택

    • 품질을 확인해야 하는 순열의 수를 줄입니다.
    • 브랜드 표준을 준수하는지 확인합니다.
    • 콘텐츠 작성자를 위한 작성 간소화
    • 일관된 사이트 브랜드 정체성을 만드는 데 도움이 됩니다.

  • 결합된 스타일을 사용하여 보수적으로 만들기

    • 전체 및 범주 내

  • 결합된 스타일을 철저히 테스트하기 위해 적절한 시간 할당

    • 바람직하지 않은 영향을 방지하는 데 도움이 됩니다.

  • 스타일 옵션 및 순열의 수 최소화

    • 옵션이 너무 많으면 모양과 느낌에 대한 브랜드 일관성이 결여될 수 있습니다
    • 원하는 효과를 얻기 위해 조합이 필요한 콘텐츠 작성자에게 혼란을 줄 수 있습니다
    • 품질을 확인해야 하는 순열 증가

  • 비즈니스 사용자에게 친숙한 스타일 레이블 및 카테고리 사용

    • "기본" 및 "보조" 대신 "파란색" 및 "빨간색"
    • "변형 A" 및 "변형 B" 대신 "Card" 및 "Hero"
    • 이는 일부 고객의 경우 더 일반적일 수 있습니다. 디자인 팀, 비즈니스 팀 및 콘텐츠 팀은 기본 및 보조 색상 또는 테스트하는 변형에 대해 매우 익숙합니다. 그러나 유연성과 향후 변화에 대한 가능성을 위해서는 특정 용어를 사용하는 것이 더 효율적일 수 있습니다.

핵심 사항

스타일 시스템은 복잡한 대화 상자의 필요성을 줄이지만 대화 상자를 대체할 수는 없습니다. 이러한 구성 요소는 작업을 단순화하는 데 도움이 되지만 구성 요소 속성이나 대화 상자에 스타일 시스템을 만드는 대신 해당 구성 요소 속성을 사용하려는 경우가 있을 수 있습니다.

개발 관점에서 프로세스를 간소화할 수 있습니다. 하나의 스타일 시스템으로 동일한 콘텐츠를 여러 번 볼 수 있습니다. 마찬가지로 작성 측면에서는 작성자 및 작성자가 팰리스에서 사용할 구성 요소를 기억해야 하는 대신 작성 속도를 향상시킬 수 있습니다.

모든 것이 깨끗하다. 핵심 구성 요소 내의 HTML은 매우 장황합니다. CSS 수준에서 이 모든 작업을 수행하면 구성 요소 빌드가 더 빨라지고 코드도 더 깔끔해집니다.

마지막으로, 스타일 시스템의 사용은 과학보다 예술이다. 앞에서 설명한 대로 여러 가지 우수 사례가 있지만 조직의 설정을 사용자 지정하는 방법을 유연하게 사용할 수 있습니다.

자세한 내용은 다음을 참조하십시오. 고객 성공 웨비나 윌 브리즈번과 조셉 반 버커크와 함께.

에서 전략 및 사고 리더십에 대해 자세히 알아보십시오 고객 성공 허브.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69