소개
Orchard는 눈에 보여지는 모든 부분에 대한 레이아웃 및 스타일을 모두 CMS 엔진 차원에서 쉽게 변경할 수 있도록 기능을 제공합니다. 이 때 내가 원하는 특정 부분에 대한 파일이 어디인지를 알려주어 WebMatrix와 같은 에디터를 사용하여 편집하여 그 부분만 웹에서 바로 변경될 수 있도록 할 수 있는 아주 유용한 도구인 Designer Tool을 제공합니다.
이번 시간에는 이 도구를 사용하여 특정 UI 조각을 편집해 보도록 하겠습니다.
따라하기
Step 1: Designer Tools 모듈 설치 및 적용
1. Orchard의 기본 디자인 단위는 테마(Theme)입니다. 해당 테마에 들어가는 수많은 페이지/위젯/필드/Content Type 등에 대한 내용을 편집기에서 바로 수정해서 저장만하면 바로 웹에 저장되는 구조를 가지고 있습니다.
2. 내가 원하는 부분만 빨리 변경하고 싶을 경우 현재 이 위치에 해당하는 물리적인 소스 파일명을 알고자할 때 Orchard는 Designer Tools란 이름의 모듈을 제공합니다. 이를 설치하기 위해서 아래 그림과 같이 검색 후 [Designer Tools] 모듈을 설치하고 활성화시킵니다.
3. [Designer Tools] 설치 후 활성화되는 특성은 [Shape Tracing]과 [Url Alternates] 기능입니다.
4. Designer Tools 모듈 관련해서 2개의 특성이 활성화되면 메인 페이지에서 바로 UI의 원하는 부분을 편집하기 위한 접근이 가능합니다.
5. Designer Tools 설치 완료 후 메인 페이지로 돌아오면 아래 그림과 같이 오른쪽 하단에 조그마한 아이콘이 생깁니다. Fire Bug 등의 툴과 비슷한 아이콘이 생성되면 디자이너 도구 설치가 완료된 것입니다.
Step 2: Shape Tracing 기능으로 내가 원하는 UI 변경하기
1. Designer Tools를 설치하고난 후 메인 페이지의 오른쪽 하단에 생성된 [Shape Tracing] 기능 아이콘을 클릭하면 아래 그림과 같이 왼쪽 영역에는 각각의 영역(Zone)을 카테고리로 보여주고 오른쪽 영역에는 5개 정도의 정보를 볼 수 있는 탭이 생성됩니다.
2. [Shape Tracing] 기능이 오픈된 상태에서 마우스 커서를 UI의 원하는 부분에 가져다대면 아래 그림처럼 하이라이트되면서 하단 영역에 Zone과 해당 영역을 처리하는 물리적인 파일의 위치를 알려줍니다.
3. 만약, 아래 그림과 같이 [Event] 메뉴의 Date 필드가 출력되는 부분에 대한 디자인을 변경하고자 한다면, 이 영역에 해당하는 물리적인 파일로 이동 또는 논리적인 파일이라면 물리적인 파일로 생성해서 해당 부분의 UI를 변경할 수 있습니다. [Shape Tracing] 기능을 켜고 Date 필드를 선택하면 Content-Fields_Contrib_DateTime 항목이 선택이 되고, 오른쪽 영역의 [Shape] 탭 중 Alternate(2) 항목에 2개의 [Create] 버튼이 생성됩니다. 필자는 아래 그림과 같이 2번째 [Create] 버튼을 클릭하여 Date 필드에 대한 물리적인 출력 파일을 하나 생성하였습니다.
4. 위와 같이 설정 후 WebMatrix를 열고, TheThemeMachine-Views 폴더로 이동해보면 원래는 없었던 파일인 Fields_Contrib_DateTime-url-orchard-seminar.cshtml이 생성되었습니다. 이 파일명은 저와 여러분들과는 달리 표현될 수도 있다는 점 참고하시기 바랍니다.
5. 새롭게 생성된 cshtml 파일에 아래 그림처럼 2가지 정도를 변경해 보았습니다. 날짜 필드에 볼드체를 주고 시간 필드에 언더라인을 주었습니다. 소스 변경 후 저장 후 메인페이지로 이동합니다.
<b>@Model.Model.Date</b>
<u>@Model.Model.Timt</u>
6. 메인 페이지로 이동 후 [Event] 메뉴로 돌아오면 아래 그림처럼 날짜 부분은 볼드체로 시간 부분은 밑줄이 적용된 것을 알 수 있습니다.
7. 하나를 더 변경해 보도록 하겠습니다. [Shape Tracing]을 사용하여 아래 그림의 Location 필드 부분을 마우스 커서로 선택합니다. 하단 영역에 Fields_Common_Text가 선택되고 [Shape] 탭의 Alternates에서 필자는 3번째 [Create] 버튼을 클릭하였습니다. 여러가지 Alternates는 잘 살펴보시면 현재 페이지만 적용할 것인지 전체 웹사이트에서 Location 필드는 무조건 다 적용할 것인지의 범위를 결정지을 수 있는 파일을 여러 개 생성할 수 있다는 의미입니다. 혹시나 이 부분을 눈으로만 학습하시는 분들은 이해하기가 굉장히 어려운 부분이 될 수도 있습니다^^
8. 역시나 마찬가지로 WebMatrix로 이동 후 Views 폴더를 열어보면 새로운 cshtml 페이지가 생성되었고, 이 소스 중 한 부분만 밑줄 태그를 적용해 보았습니다.
9. 해당 페이지로 이동 후 페이지를 새로고침하면 아래와 같이 값이 출력되는 영역이 밑줄로 설정되었음을 알 수 있습니다.
마무리
위에서 제시한 2개의 Step을 통해서 [Shape Tracing] 메뉴를 활성화한 후 원하는 어느 부분이건 해당 부분에 대한 물리적인 파일로 직접 찾아들어가던가 아니면 새롭게 해당 페이지를 생성해서 해당 페이지를 원하는 모양대로 편집해서 메인 페이지에 보여질 수 있도록 설정할 수 있습니다. 필자는 단 2개의 영역만을 바꾸어봤지만, 모든 영역을 다 바꿀 수 있다고 보시면 됩니다. 어쨌든, 다른 CMS 도구와 달리 Orchard는 [Shape Tracing]이라는 Designer Tools 모듈을 제공하여 사용자가 원할 때 언제든지 UI를 변경할 수 있는 기반 시스템을 제공합니다. 이 부분은 제가 사용해본 다른 CMS 솔루션과 비교해서 상당히 좋은 도구임에는 틀림이 없습니다.
어쨌든, [Shape Tracing]의 모든 기능을 설명하기에는 지면으로 역부족이니 여러분들이 [시행착오]를 거치면서 위 도구의 사용법을 좀 더 알아가 보시기 바랍니다…
끝.
참고 자료
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)