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

이 문서에서는 AEM 스타일 시스템을 사용하여 조직의 디자이너, 컨텐츠 작성자 및 개발자가 고객이 기대하는 속도와 규모에 맞게 경험을 만들고 게재하는 방법을 알아봅니다.

개요

AEM 스타일 시스템의 4가지 주요 이점은 다음과 같습니다.

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

초기 설정 및 사용

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

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

이것이 초기 설정인 반면, 많은 Adobe 고객은 CSS를 DAM에 업로드하는 것과 같이 이 프로세스를 간소화하여 추가로 민첩성을 구현했습니다. 이러한 과정을 통해 배포하지 않고도 스타일을 업데이트할 수 있습니다. 다른 고객은 배포 또는 개발 없이 활용할 수 있는 구성 요소와 스타일을 개발할 수 있는 모든 기능을 갖춘 유틸리티 클래스 세트를 제공합니다.

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

  1. 레이아웃 스타일

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

    • 잘 정의되고 식별 가능한 표현물에 사용됩니다.

  2. 표시 스타일

    • 스타일의 기본 특성을 변경하지 않는 사소한 변형

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

  3. 정보 스타일

    • 필드 표시/숨기기
노트

이러한 기능을 시연하려면 Adobe에서 제공하는 고객 성공 웨비나 윌 브리즈번과 조셉 반 부시커크와 함께.

우수 사례

  • 먼저 기본 스타일 솔리드화
    • 스타일 시스템을 적용하기 전에 페이지에 드롭될 때 구성 요소의 레이아웃 및 표시
    • 가장 많이 사용되는 표현물이어야 합니다
  • 가능한 경우 효과가 있는 스타일 옵션만 표시하려고 합니다
    • 비효율적인 조합이 노출되는 경우 부정적인 영향을 주지 않도록 하십시오
    • 예: 이미지 위치를 지시하고 이미지 위치를 제어하는 비효율적인 디스플레이 스타일이 포함된 레이아웃 스타일입니다
  • 결합된 표시 스타일을 통해 레이아웃 스타일 선택
    • 품질을 검사해야 하는 순열 수를 줄입니다.
    • 브랜드 표준이
    • 컨텐츠 작성자를 위한 작성 간소화
    • 일관된 사이트 브랜드 이미지를 만드는 데 도움이 됩니다.
  • 결합된 스타일로 유지
    • 카테고리 및 카테고리 내 모두
  • 결합된 스타일을 철저하게 테스트할 적절한 시간을 할당합니다
    • 바람직하지 않은 효과를 방지할 수 있습니다.
  • 스타일 옵션 및 순열 수를 최소화합니다
    • 너무 많은 옵션을 사용하면 모양과 느낌에 대한 브랜드 일관성이 없을 수 있습니다
    • 원하는 효과를 얻기 위해 필요한 조합을 사용하는 콘텐츠 작성자에게 혼동을 줄 수 있습니다
    • 품질을 검사해야 하는 순열을 증가시킵니다
  • 비즈니스 사용자에게 친숙한 스타일 레이블 및 카테고리 사용
    • "Primary" 및 "Secondary" 대신 "Blue" 및 "Red"
    • "변형 A" 및 "변형 B" 대신 "카드" 및 "대표"
    • 이는 일부 고객에 대해 일반화된 것일 수 있습니다. 디자인 팀, 비즈니스 팀 및 컨텐츠 팀은 기본 및 2차 색상이 무엇인지 또는 테스트 중인 변형을 잘 알고 있습니다. 그러나 유연성과 향후 변경 가능성을 위해 특정 용어를 사용하는 것이 더 효율적일 수 있습니다.

주요 이점

스타일 시스템을 사용하면 복잡한 대화 상자가 필요하지 않지만 대화 상자가 대체되지 않습니다. 이러한 구성 요소는 작업을 단순화하는 데 도움이 되지만, 스타일 시스템을 만들지 않고 구성 요소 속성 또는 대화 상자를 사용하려는 경우가 있을 수 있습니다.

개발 관점에서 프로세스를 간소화할 수 있습니다. 하나의 스타일 시스템을 사용하여 동일한 컨텐츠의 여러 모양을 만들 수 있습니다. 마찬가지로 작성자 및 작성자가 어느 궁전에서 사용할 구성 요소를 기억해야 하는 것이 아니라 작성 관점에서 작성 속도를 더 빠르게 할 수 있습니다.

모든 것이 단순하다. 코어 구성 요소 내의 HTML은 매우 자세히 표시됩니다. CSS 수준에서 이 모든 작업을 수행하면 구성 요소가 더 빨리 빌드되고 코드도 더 깨끗해집니다.

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

자세한 내용은 고객 성공 웨비나 윌 브리즈번과 조셉 반 부시커크와 함께.

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

이 페이지에서는