이 문서에서는 AEM 스타일 시스템을 사용하여 조직의 디자이너, 컨텐츠 작성자 및 개발자가 고객이 기대하는 속도와 규모에 맞게 경험을 만들고 게재하는 방법을 알아봅니다.
AEM 스타일 시스템의 4가지 주요 이점은 다음과 같습니다.
5단계 설정은 표준 구성 요소 개발 워크플로우와 매우 유사합니다.
리더십 | 디자이너 | 개발자 / 아키텍트 | 템플릿 작성자 | 콘텐츠 작성자 |
---|---|---|---|---|
해당 구성 요소에 대한 컨텐츠 및 목표를 결정합니다 | 컨텐츠의 시각적 및 경험적 표현 결정 | 경험을 지원하도록 CSS 및 JS를 개발합니다. 사용할 클래스 이름을 정의하고 제공합니다. | 개발자가 정의한 CSS 클래스 이름을 추가하여 스타일이 지정된 구성 요소에 대한 템플릿 정책을 구성합니다. 사용자에게 친숙한 이름은 각 스타일에 대해 활용해야 합니다. | 페이지를 작성하는 동안 필요에 따라 스타일을 적용하여 원하는 모양과 느낌을 얻을 수 있습니다 |
이것이 초기 설정인 반면, 많은 Adobe 고객은 CSS를 DAM에 업로드하는 것과 같이 이 프로세스를 간소화하여 추가로 민첩성을 구현했습니다. 이러한 과정을 통해 배포하지 않고도 스타일을 업데이트할 수 있습니다. 다른 고객은 배포 또는 개발 없이 활용할 수 있는 구성 요소와 스타일을 개발할 수 있는 모든 기능을 갖춘 유틸리티 클래스 세트를 제공합니다.
스타일 시스템은 다음과 같은 몇 가지 다른 방식으로 제공됩니다.
레이아웃 스타일
디자인 및 레이아웃에 대한 다면적 변경 사항
잘 정의되고 식별 가능한 표현물에 사용됩니다.
표시 스타일
스타일의 기본 특성을 변경하지 않는 사소한 변형
예를 들어 색상 구성표, 글꼴, 이미지 방향 등을 변경할 수 있습니다.
정보 스타일
이러한 기능을 시연하려면 Adobe에서 제공하는 고객 성공 웨비나 윌 브리즈번과 조셉 반 부시커크와 함께.
스타일 시스템을 사용하면 복잡한 대화 상자가 필요하지 않지만 대화 상자가 대체되지 않습니다. 이러한 구성 요소는 작업을 단순화하는 데 도움이 되지만, 스타일 시스템을 만들지 않고 구성 요소 속성 또는 대화 상자를 사용하려는 경우가 있을 수 있습니다.
개발 관점에서 프로세스를 간소화할 수 있습니다. 하나의 스타일 시스템을 사용하여 동일한 컨텐츠의 여러 모양을 만들 수 있습니다. 마찬가지로 작성자 및 작성자가 어느 궁전에서 사용할 구성 요소를 기억해야 하는 것이 아니라 작성 관점에서 작성 속도를 더 빠르게 할 수 있습니다.
모든 것이 단순하다. 코어 구성 요소 내의 HTML은 매우 자세히 표시됩니다. CSS 수준에서 이 모든 작업을 수행하면 구성 요소가 더 빨리 빌드되고 코드도 더 깨끗해집니다.
마지막으로, 스타일 시스템의 사용은 과학보다 더 예술적입니다. 설명한 대로 여러 가지 우수 사례가 있지만, 조직의 설정을 사용자 지정하는 방법에 대해서는 유연합니다.
자세한 내용은 고객 성공 웨비나 윌 브리즈번과 조셉 반 부시커크와 함께.
Adobe Analytics Mobile Apps에서 전략 및 사고 리더십에 대해 자세히 알아보십시오 고객 성공 허브.