사이트코어 SXA 사이트 - 페이지 디자인 및 부분 디자인

사이트코어 SXA의 큰 장점중의 하나는 프리젠테이션 레이어를 분리하여 웹사이트/페이지 디자인을 재사용할 수 있도록 구분하였다. 그 뿐만 아니라, 디자인 레이어를 Page Design과 Partial Design으로 구분하여 Partial Design 아이템이 Page Design에 상속되는 구조로 Partial Design의 상속여부에따라 Page Design이 다양하게 변경될수가 있다.

아래의 사진처럼 SXA 사이트 루트에 Presentation 노드가 있으며, 그 안에는 사이트/페이지 스타일 및 렌더링 아이템 설정과 관련된 아이템이 존재한다. Page Design과 Partial Design 노드를 오픈하면 디자인을 구성하는 아이템이 포함되어있다.

디자인 아이템은 웹페이지 아이템처럼 컴포넌트를 추가하고 페이지 형식으로 디자인 할 수 있으며 아래의 그림으로 디자인 스트럭쳐를 좀 더 쉽게 이해할수 있다.

사진에서 보듯이 Partial Design은 페이지 형식으로 컴포넌트를 추가하여 고정 컨텐츠 및 Placeholder를 구성할여 Page Design에 상속을 시킨다. 페이지 디자인에서도 같은 형식으로 컴포넌트를 추가여 페이지 디자인 레벨의 고정 컨턴츠를 정의 할수 있는며 이는 본 웹페이지 아이템으로 상속이 된다. Page Design은 하나 이상의 Partial Design을 상속할수 있지만 웹페이지 아이템은 오직 하나만의 Page Design을 상속할수 있다.

Page Design 아이템에서 각각 SXA 사이트 웹페이지마다의 디자인을 정의할수 있으며, 또는 Experience Editor의 Experience Accelerator 탭의 "Site Page Designs" 메뉴에서 페이지 디자인을 정의 할수가 있다.

사이트코어 SXA 구조

2020년도 첫 포스트는 SXA로 시작을 해보자. 사이트코어 플랫폼에서는 새로운 웹사이트를 쉽게 생성하고 관리하는 SXA의 비중이 점점(?) 중요해지고 있다. 이는 최근 업데이트 및 차후 업그레이드 될 플랫폼의 로드맵을 보면 SXA는 꾸준히 업그레이되고 있으며, Sitecore 9.3부터는 CLI를 통하여 새로운 사이트 생성 및 관리를 할 수 있도록 아주 진보(?)적이다.

그래서 필자는 이번 포스트에서 Habitat을 기준으로 SXA 사이트 생성 및 컨텐츠, Theme 그리고 템플릿 Structure에 대하여 설명하고자 한다.

Tenant:

SXA는 Tenant 아이템을 생성하고 그 하위 아이템으로 Site 및 Tenant Folder를 생성할 수 있다. Tenant 아이템 아래에 추가적으로 Tenant Folder를 생성하면 유저는 세부적으로 웹사이트의 카테고리를 구분하여 Multiple 웹사이트를 관리할 수 있다. 아래는 Multiple Tenant를 생성하였고, 각각 Tenant에 Global 사이트를 생성하고 해당 Tenant안의 많은 웹사이트를 Standardize 할 수 있도록 계획을 세웠다. 글로벌 사이트를 생성하는 것은 Option으로써, 만약 Tenant안에 소수의 웹사이트가 존재한다면, 굳이 글로버 사이트를 생성할 필요은 없으며, 사이트들 중 하나의 웹사이트가 표준이 될 수도 있다. 이는 개발자 및 설계자의 재량으로써 비지니스의 컨셉 및 플랜에 따라 언제든지 바꿔질 수 있다.

Template:

Template 스트럭쳐는 쉽게 생각할 수 있지만 많은 수의 및 다양한 옵션을 요구하는 웹사이트에서는 아주 중요하다고 할 수 있다. 기본적으로 SXA Template은 Tenant 아래 하나의 사이트를 생성함과 동시에 만들어 지는데 템플릿은 "template/{tenant name}"에 존재하며, 해당 Tenant에서 사이트를 생성할 때 마다 모든 사이트는 Tenant 템플릿을 사용되도록 세팅이 되어있다. SXA의 장점중의 하나로 웹사이트는 Page Design 및 Partial Design으로 쉽게 디자인을 변경하고 추가할 수 있도록 잘 짜여져 있지만, 어떤 특정 사이트를 개발하고 그 사이트가 템플릿에서 새로운 필드를 필요로 한다면 필드는 Tenant 템플릿에 추가되어야 한다.

새로운 필드는 컴포넌트와 함께 연동 될 수 있으며, 만약 많은 웹사이트가 Tenant 템플릿을 사용 중이라면 분명히 통합하는 과정에서 해당 필드 및 템플릿 업데이트가 다른 사이트에는 문제가 되지 않는지 짚고 넘어가야 한다. 이런 부분을 해소하기 위하여 아래처럼 Tenant 폴더에 Global 템플릿을 기본 템플릿으로 설정하고 특정한 사이트만의 템플릿을 만들어 Global 템플릿에 상속되도록 설정할 수가 있다.

모든 페이지 및 웹사이트가 하나의 템플릿에서 Page Design과 Partial Design에 의존을 하는지 아니면, 사이트만의 템플릿과 함께 Page Design 및 Partial Design이 연동되는지는 개발자 및 설개자의 재량이다. 만약 Sitecore 사용자가 사이트 특정의 Workflow를 사용할 계획이 있다면 사이트 특정 템플릿을 만드는것이 하나의 장점일뿐더러 차후 웹사이트만의 퍼브리슁을 관리하고 매니지하는 부분에 있어서는 좋은 옵션이라고도 볼 수 있다.

Theme:

SXA Theme은 SASS를 통하여 CSS를 생성하고 사이트코어에 업로드 된 CSS는 플랫폼 차체 프로세서를 통하여 Optimize/minify 된 CSS 파일을 생성한다. 사이트 Theme에는 사이트를 생성할 때 선택되어진 모듈/컨포넌트의 SASS/CSS를 포함하고 있는데 이 모든 CSS는 통합되어지고 SXA 사이트에서는 "optimized-min.css"만 불러들임으로써 스타일 및 다지인을 렌더링 할 수 있다. SXA 사이트를 생성할때 사이트만의 Theme를 새로 생성할 수 있으나 이미 똑같은 디자인 및 theme이 존재하다면 굳이 새로운 사이트 Theme를 생성할 필요는 없다. 아래처럼, 필요자는 몇 개의 Theme을 정하고 Theme이 재사용 되어지도록 리스트 하였다. Theme의 이름은 사이트 이름 및 Tenant 이름과 반드시 매치될 필요는 없다.

Media:

SXA 사이트 컨텐츠 트리는 웹 페이지 아이템뿐만 아니라 사이트 세팅, 컴포넌트 로컬 데이타소스의 Data폴더 및 디자인을 위한 프리젠테이션 등 하나의 패키지형식으로 사이트 아이템이 구성되어져있다. 여기서 추가적으로 Media 폴더가 있는데 폴더 하위에는 사이트 이름의 폴더와 "Shared" 라는 폴더가 기본으로 존재한다. 만약, 이미지 및 Digital Assets을 Tenant안의 다른 모든 사이트와 공유를 하고 싶다면 "shared" 폴더에 이미지 및 디지털 파일을 저장하고 그 Digital Assets이 오직 해당 사이트에서만 사용되어진다면 사이트 폴더에 저장하면 된다. 해당 Media 폴더에 업로드된 아이템은 사이트코어의 Media Library에 동등한 사이트 경로 "/sitecore/media library/Project/{tenant 이름}/{사이트 이름}/{파일 이름}" 에 저장이 되며, 사이트 내의 이미지들은 자동으로 매핑이 된다.

이번 포스트에서는 SXA의 세부(?) Structure에 대하여 알아봤으므로 다음에는 어떻게 Page Design 및 Partial Design을 페이지에 적용시키는지 알아보도록 하자.

Sitecore Symposium 2019 올랜도 - 후기

사이트코어 심포지엄 2019 (Sitecore Symposium 2019)에서의 메인 Keynote는 Sitecore SaaS (Software as a Service) 발표이다. 공개적으로 어떻게 SaaS의 아키텍쳐 및 SaaS가 Microsoft Azure의 기준으로 개발되는지 아니면 AWS에서도 똑같은 기준으로 서포트를 하고 이용할 수 있는지는 발표되어지 않았다. 아래는 이번 Symposium에서의 Keynote 및 기준으로 리스트를 만들었다.

Sitecore 9.3 Winter 2019 Release

• ContentHub 3.3 새로운 버전 출시 및 CMP (Content Marketing Platform) 은 Salesforce Marketing Cloud와 연동되어 쉽게 마케팅 컨텐츠를 관리하고 매니지 할수있다.
• 3rd Party 서치엔진인 Coveo와 부분적으로 연동하기 시작한다.
• Horizon이라는 새로운 에디터 인터페이스를 적용한다. 이는 기존의 Content Editor와 Experience Editor의 구분없이 한 UI에서 컨테츠를 관리하며 디자인 뷰를 제공한다.
  
  
• SXA (Sitecore Experience Accelerator) 9.3 은 Front-End 개발 Workflow를 강화하는 동시에 추가적으로 새로운 2개의 Search Facet Filter를 추가한다.
• 기존 SXA Theme은 Sitecore의 UI로만 제공되었으나, SXA 9.3에서부터 SXA CLI를 이용하여 Site Theme을 생성할 수가 있다. 
• SXA 9.3는 Scriban 이라는 Text Templating Engine을 Rendering Variants를 적용하는데 이용할 수 있도록 한다.
  
  
• Auto Personalization이라는 새로운 옵션을 적용하여 개별적인 아이템 Personalization 설정없이 Sitecore AI가 컨테츠를 체크하고 자동으로 적용을 시킨다.
  
  

Summer 2020

• Sitecore SaaS 릴리즈 
• ContentHub – DAM (Digital Asset Management)에 Video AI 적용시키며 Open API도 제공한다.
• Experience Platform에 Container (예, Dockers)를 추가하고 쉽게 Instance 및 설정을 이미지화 할수있다. 이는 SaaS 이용과 동시에 큰 변화라 예상한다.
• 새로운 개발 및 컨텐츠 에디터의 환경 변화가 있을꺼라 예상한다.

내년 Sitecore Symposium 2020은 시카고에서 10월 26일부터 10월 29일까지 진행되며, Sitecore 9.3의 Update 버전과 동시에 SaaS대한 많은 설명이 있을거라 예상한다.

SXA에서 새로운 사이트를 생성하고 스타일 업데이트하기

이번 포스트에서 Sitecore Experience Accelerator (SXA)에 대하여 소개하고 Creative Exchange Live를 통하여 웹사이트 Theme을 로컬 컴퓨터에서 수정하도록 하겠다.
필자는 "My Tenant"라는 영역에 "New Site"라는 SXA 사이트를 생성하였다. 아래의 스크린샷처럼 새로운 Theme 생성을 선택하고 사이트를 생성하면 새로운 Theme이 Media Library에 생성이 된다.

SXA Theme은 SASS, CSS, Javascript, Images 그리고 Fonts로 구성되어져 있으며, 새로 생성된 Theme은 SXA의 "Basic2" theme으로부터 복사 되어진 것이다. 이제는 Node.js 을 설치하여 Gulp를 사용하도록 하겠다. Gulp는 프론트엔드 개발자를 위한 Javascript 툴킷으로써 리얼타임 스트리밍 기능은 소스파일을 쉽게 수정하고 개발할 수 있도록 도와준다.

필자는 이미 Node.js 를 설치하였으므로 Creative Exchange를 통하여 새로 생성한 Theme을 내려받고 Visual Code에서 수정하도록 하겠다.

1. 새로 생성한 Theme을 내려받기 전 "Site -> Presentation -> Page Designs"으로 이동 후 기본 Theme을 설정한다.
   
   
   
2. 사용자가 Gulp로 Remote 엑세스할 수 있다록 "\App_Config\Include\z.Feature.Overrides\z.SPE.Sync.Enabler.Gulp.config.disabled" 파일 이름의 ".disabled" 지우고 "z.SPE.Sync.Enabler.Gulp.config" 이름으로 변경한다.
   
3. 사용자자의 Account가 Powershell API를 사용할수 있도록 아래의 세팅을 Patch를 한다.
   
   

   <configuration>
     <sitecore>
       <powershell>
         <services>
           <restfulv2>
             <authorization>
               <add Permission="Allow" IdentityType="User" Identity="sitecore\YourUserName" />
             </authorization>
           </restfulv2>
       </powershell>
     </sitecore>
   </configuration>
   

4. Content Editor에서 새로 생성한 사이트를 클릭 후, "Home" 탭에서 "Export" 버턴을 누른다.
   
   
   
   
5. 아래의 세팅처럼 필자는 패키지를 서버로 저장하고 추후 패키지를 다시 "Import" 할 수있다록 "Agent" 모드를 사용하였다.
1. 패키지의 기본 저장경로는 파일 시스템의 "/App_Data/packages/CreativeExchange" 이다.
2. Agent Mode: 사이트 및 페이지의 모든 프리뷰 코드를 제공하며 Theme을 Import하는 필수 파일들이 포함되어있다.
   End-User Mode: 사이트 및 페이지의 모든 프리뷰 코드를 제공하며 Theme을 Import하는 필수 파일들이 포함되어 있지 않다.
   
   
   
6. Visual Code에서 "/App_Data/packages/CreativeExchange/FileStorage/{Site Name}" 경로를 열어 Gulp를 사용하도록 하자.
   
7. 먼저 경로의 "{Site Name}/{Site Theme Name}/gulp/config.js" 파일을 열어 "Server Options"의 "server"를 CMS URL로 변경한다.
   예) server: 'http://sc92u0sc.dev.local',
   
8. "{Site Theme Name}"의 경로에서 Visual Code 터미널을 열어준다.
   
9. "npm install" 커맨드를 통하여 Gulp 커맨드가 사용되어질수있는 환경을 생성한다.
   *Node Framework을 정상적으로 설치를 하였다면 아래처럼 Gulp 유틸이 설치되는것을 볼수있다.
   
   
   
   
10. 설치가 완료되면 "gulp" 커맨드를 실행하고 Access가 주어진 Username과 Password를 입력 후, Gulp Watch가 실행되는지 확인한다.
    
    
    
    
    
    
11. 새로 생성한 사이트로 이동하여 Home 페이지를 열어 기본적인 페이지를 생성한다.
    
12. 필자는 "Home" 아이템에서 Accordion 컴포넌트를 추가하였다. Accordion 스타일은 Theme의 SXA "component-accordion.css"에서 지정되는데 Creative Exchange Live를 통하여 SASS 파일을 수정하고 Live 업데이트 과정을 보도록 하자.

필자는 Gulp를 통하여 Creative Exchange Live를 컨넥하고 SASS Pre-Processor를 이용하여 CSS file을 생성하였다. 새로운 CSS 파일이 생성되고 업로드되면 Sitecore SXA는 Theme 안의 CSS 파일들을 모아 Optimized CSS 파일을 생성하여 페이지 레이아웃에 적용한다.