소개
이번 강좌에서는 Orchard CMS의 UI 부분을 담당하고 있는 테마(Theme)에 대한 내용을 다루고자 합니다. 웹 페이지는 HTML과 CSS 그리고 관련된 리소스인 Image로 이루어집니다. 이러한 3가지의 조합을 Orchard에서 묶어서 관리해주는 개념이 바로 테마(스타일)입니다.
기본적으로 제공하는 테마를 편집해서 사용해도 무관하고, 온라인 갤러리에서 추가적으로 다운로드 받아서 적용해줄 수도 있고, 나만의 테마 자체를 새롭게 제작해서 Orchard에 적용할 수도 있습니다.
자, 그럼. 테마를 갤러리 사이트에서 다운로드 받아서 적용하는 일련의 단계를 살펴보도록 하겠습니다.
따라하기
Step 1: Contoso라는 이름의 테마 설치 및 적용
1. Orchard 사이트를 열고, 관리자 권한으로 대시보드에 로그인한 후, [테마] 메뉴를 선택합니다. 테마 메뉴를 선택하면 현재 Orchard 시스템에 설치되어져 있는 기본 테마인 [The Theme Machine]이 리스트로 출력됩니다.
설치된 테마는 기본적으로 테마를 적용했을 때 보여지는 레이아웃 및 스타일에 대한 미리보기를 할 수 있는 이미지와 해당 테마의 이름과 버전 및 추가적인 정보가 보여집니다.
2. 만약, 기본적으로 제공되는 테마가 아닌 추가적인 테마를 적용하고 싶다면, [테마] 메뉴의 [갤러리] 탭을 선택 한 후 나타나는 리스트에서 원하는 테마를 살펴본 후 적용하거나 아래 그림과 같이 검색어를 입력할 수 있는 텍스트박스에 검색어를 입력 후 [검색] 버튼을 누르면 해당 단어로 시작하는 테마명을 검색할 수 있습니다.
3. 온라인 갤러리에서 제공하는 테마를 설치하는 방법은 간단합니다. 검색 후 마음에 드는 스타일의 테마가 있다면, 해당 테마를 [설치] 버튼을 클릭하여 바로 설치하거나, 나중에 따로 설치할 수 있도록 로컬에 다운로드 받을 수 있는 [다운로드] 링크를 활용할 수도 있습니다.
필자는 위 그림처럼, Contoso 테마를 검색 후 [설치] 링크를 클릭하여 테마를 설치하는 화면입니다. 설치 후에는 해당 테마를 반드시 활성화시켜야 사용할 수 있습니다.
4. Contoso와 같은 추가 테마를 설치하였다면, Orchard 소스의 Themes 폴더에 현재까지 추가한 테마가 폴더별로 저장됨을 아래 그림에서 확인할 수 있습니다. 필자는 TheThemeMachine 외에 Contoso 폴더가 추가되었습니다.
5. 테마가 설치 후 [테마]의 [설치됨] 탭을 선택하면 아래 그림과 같이 [New] 표시가 된 사용가능한 테마 리스트가 출력됩니다. 만약, 이 테마로 Orchard 테마를 적용하려면, [현재 설정] 버튼을 눌러서 바로 적용하거나, [미리보기] 버튼을 눌러서 해당 테마를 적용했을 때의 모습을 살펴볼 수 있습니다.
6. [미리보기] 화면에서는 아래 그림과 같이 현재 Orchard CMS에 설치되어져 있는 테마의 종류가 모두 표시되고 이 중 하나를 선택하면 해당 테마를 적용했을 때의 사이트 모습을 미리보기 형태로 보여줍니다.
7. 미리보기로 살펴본 특정 테마가 마음에 들고 해당 테마를 적용하고자 한다면, 해당테마의 하단에 있는 [현재 설정] 버튼을 클릭하여 해당 테마를 사이트 전체에 적용시킵니다.
8. 새로운 테마가 적용된 후의 메인 페이지 모습입니다. Contoso 테마가 학습용이라서 워낙 간단하지만, 테마를 어떻게 작성하느냐에 따라서 동일한 사이트가 달리 보여질 수 있습니다. 이 부분에 대해서는 디자이너/퍼블리셔의 역할이 크게 작용할 듯 합니다.
Step 2: Classic 테마 다운로드 및 설치
1. 이번에는 동일하게 Orchard 갤러리 사이트에서 Classic 테마를 검색 후 [설치]가 아닌 테마 소스를 먼저 다운로드 받아서 설치하는 방법에 대해서 살펴보겠습니다. [다운로드] 설치 링크를 클릭하여 원하는 폴더에 저장하도록 하겠습니다.
2. 일단 테마 파일을 로컬 컴퓨터에 저장 후 [컴퓨터의 테마 설치] 메뉴를 클릭하여 다운받은 테마 소스를 선택 후 [설치] 메뉴를 사용하여 업로드와 동시에 설치를 진행할 수 있습니다.
3. 아래 그림은 새롭게 설치된 Classic 테마가 설치된 모습을 보여줍니다. 이 테마를 메인 페이지에 적용하려고 한다면, [활성화] 버튼을 클릭 후 [현재 설정] 버튼을 클릭하여 설정을 완료할 수 있습니다.
마무리
이번 시간에는 2가지 방법을 사용하여 테마를 적용하는 방법을 소개했습니다. 테마 소스는 HTML5와 CSS3를 사용하여 만들어진 레이아웃의 구조와 스타일을 가집니다. 물론, 하위 버전의 웹브라우저와 호환 가능하도록 설계되어있기에 테마를 제작하는 테마 제작자라면 HTML5 기반으로 작성해도 실제 적용했을 때 문제가 발생하지 않습니다.
앞으로 진행될 뒷부분의 강좌에서는 테마를 직접 제작하는 방법에 대한 설명을 하도록 하겠습니다.
끝.
참고 자료
관련글
본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)