디자인 및 디자이너

주의

이 문서에서는 클래식 UI를 기반으로 웹 사이트를 만드는 방법에 대해 설명합니다. Adobe은 AEM Sites 개발 시작 문서에 자세히 설명된 대로 웹 사이트에 대한 최신 AEM 기술 을 활용할 것을 권장합니다.

웹 사이트와 AEM에서 디자이너를 사용하여 디자인을 만들어야 합니다.

노트

웹 접근성에 대한 자세한 내용은 AEM 및 웹 접근성 가이드라인을 참조하십시오.

디자이너 사용

디자인은 도구 탭의 디자인 섹션에서 정의할 수 있습니다.

screen_shot_2012-02-01at30237pm

여기에서 디자인을 저장하는 데 필요한 구조를 만든 다음 필요한 종속 연결된 스타일 시트와 이미지를 업로드할 수 있습니다.

디자인은 아래에 저장됩니다 /etc/designs. 웹 사이트에 사용할 디자인에 대한 경로는 노드의 cq:designPath 속성을 사용하여 jcr:content 지정됩니다.

chlimage_1-74

노트

디자인 모드에서 페이지에 적용된 모든 변경 사항은 사이트의 디자인 노드 아래에 그대로 유지되며 동일한 디자인을 갖는 모든 페이지에 자동으로 적용됩니다.

필요한 제품

디자인을 실현하려면 다음을 수행해야 합니다.

CSS - CSS(Cascading Style Sheet)는 페이지의 특정 영역의 형식을 정의합니다.

이미지 - 배경, 버튼 등의 기능에 사용하는 모든 이미지입니다.

웹 사이트 디자인 시 고려 사항

웹 사이트를 개발할 때는 다음 코드 단편에 설명된 것처럼 현재 디자인을 기준으로 리소스를 참조할 수 있도록 이미지 및 CSS 파일을 아래에 저장하는 것이 좋습니다. /etc/design/<project>

<%= currentDesign.getPath() + "/static/img/icon.gif %>

앞의 예에서는 몇 가지 이점을 제공합니다.

  • 구성 요소는 다른 디자인 경로를 사용하여 각 사이트를 기준으로 다른 모양과 느낌을 가질 수 있습니다.

  • 웹 사이트의 재설계는 사이트 루트에서 design/v1 design/v2.

  • /etc/designs 그리고 브라우저 /content 가 외부 사용자가 트리 아래에 무엇이 있는지 궁금해하도록 사용자를 보호하는 것을 보는 유일한 외부 URL입니다 /apps . 위의 URL 이점은 자산의 노출을 몇 개의 서로 다른 위치로 제한하기 때문에 시스템 관리자가 더 나은 보안을 설정할 수 있도록 도와줍니다.

이 페이지에서는