본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)
소개
웹 사이트는 웹 페이지의 집합으로 이루어집니다. 각각의 하나의 웹 페이지는 HTML의 조각들의 집합으로 이루어집니다. Orchard에서는 이와 같이 앞서 살펴본 Page와 같이 특정 영역(Zone)에 단위 HTML 조각을 입력할 수 있습니다. 이때 이 단위 조각의 HTML을 Orchard에서는 위젯(Widgets)으로 표현합니다.
레이어(Layer), 존(Zone) 그리고 위젯(Widget)
Orchard CMS는 하나의 페이지(Pages) 내에 레이어와 존과 위젯으로 이루어져 있습니다. 이러한 페이지가 모여서 하나의 사이트를 이룹니다.
- 레이어 : 레이어는 하나의 페이지 전체에 대한 레이아웃을 나타냅니다. 이는 기본적으로 스킨(Skin)에 영향을 많이 받습니다.
- 존 : 존은 하나의 영역입니다. Header 영역, Footer 영역 식으로 어떠한 콘텐츠(Widgets)가 표현될 위치입니다.
- 위젯 : 위젯은 특정한 레이어의 특정 존에 들어갈 HTML 조각을 나타냅니다. 실제로 중요한 콘텐츠를 담고 있습니다.
따라하기
1. Orchard CMS를 실행 후, 최고 관리자 권한으로 대시보드로 로그인한 후 왼쪽 메뉴를 보면 [Widgets] 메뉴를 볼 수 있습니다. Widgets 메뉴를 클릭하면 아래 그림과 같이 어찌보면 복잡해 보일 수 있는 Layer와 Zone에 대한 설정 화면이 나타납니다.
2. Widgets 등록 화면을 보면, 첫번째로 Layer를 선택해야합니다. 기본적으로 제공하고 있는 레이어의 종류는 아래 그림과 같습니다.
레이어의 종류
- Default : 모든 페이지에 기본적으로 적용되는 레이아웃 구조입니다.
- Authenticated : 인증된 사용자에게만 특별한 구조로 보여줄 때 사용합니다.
- Anomymous : 인증되지 않은 사용자에게만 보여지는 레이아웃을 만들 때 사용합니다.
- Disiabled : 비활성화된 페이지를 보여줄 때 사용합니다.
- TheHomepage : 메인 페이지인 홈페이지에서만 보여줄 레이아웃을 지정합니다.
3. Widget을 등록하기전에 선택해야하는 2가지인 레이어와 영역(Zone)이 있는데, 레이어에 따라서 표시되는 Zone이 조금씩 다를 수 있습니다. 각각의 레이어가 제공하는 Zone은 그 이름만 봐서도 충분히 이해가 가기 쉽게 만들어져 있고, 오른쪽에 샘플 이미지를 두어서 어느 Zone이 어디부분에 위치하는지 쉽게 알 수도 있도록 Orchard 테마(Themes)가 만들어져 있습니다. 아래 그림처럼, 메인 홈페이지(TheHomepage)의 Featured Zone(메인 콘텐츠 바로 위… 아래 그림의 오른쪽 하단의 Yellow 영역…)에 특정 HTML 코드를 삽입하고자할 때에는 Featured Zone 옆에 있는 [Add] 버튼을 클릭합니다.
4. Widget 선택 화면에서는 Orchard 기본 위젯인 4가지의 위젯이 제공됩니다. 그중에서 단연코 가장 많이 사용되는 위젯은 HTML 코드 조각을 삽입할 수 있는 [Html Widget]입니다. 이를 사용하여 내가 원하는 페이지의 원하는 레이어에 원하는 영역에 원하는 HTML을 삽입할수 있는 것입니다.
5. 앞서 [Html Widget]을 선택하면 [Add Widget] 메뉴가 나타납니다. 위젯을 등록할 위치 및 내용(HTML 조각)을 입력하는 화면이 나타납니다.
위젯 등록의 기본은 이렇습니다.
Orchard CMS의 하나의 페이지(Pages)에 사용되는 레이아웃(Layer)의 특정 영역(Zone)에 위젯(Widget)으로 HTML을 삽입하면 해당 위치에 필요한 HTML이 출판되는 형태입니다. Title 입력시에는 제목과 내용(HTML)이 함께 표시됩니다.
DotNetNuke와 같은 CMS에서는 위젯의 다른 표현 방법으로 컨테이너(Container)내의 HTML 모듈(Module)이라고도 표현하기도 합니다.
6. [Html Widget] 입력시 [Body] 항목에는 위지윅 에디터를 사용하여 아래와 같이 이미지를 첨부할 수 있는 메뉴 등도 제공합니다.
7. 이미지 첨부 메뉴를 선택시 웹 상의 이미지라던가 따로 로컬 컴퓨터에 있는 이미지를 Orchard CMS로 업로드 한 후 삽입하는 방법 중 하나를 사용할 수 있습니다.
위 그림은 이미지 추가 메뉴의 [Browse Media] 탭에서 이미지 관리 폴더를 원하는 이름으로 하나 만들고 이곳에 [찾아보기] 버튼을 눌러서 로컬 컴퓨터의 이미지를 업로드하는 모습을 보여드립니다. 업로드 후 [Insert] 버튼을 클릭하면 이미지가 등록됩니다.
8. 이미지 업로드 후 [Insert] 버튼을 눌러 이미지를 [Body] 영역에 포함한 모습입니다. 기타 추가적인 다른 내용을 입력 후 [Save] 버튼을 클릭하면, [Html Widget]이 정상적으로 저장 후 웹 페이지에 출력됩니다. 참고로, 아래 그림은 제가 과수원에서 경운기를 끌고 있는 모습을 조카가 찍어준 연출(?) 사진입니다. Orchard가 과수원이라는 의미로 찍어보았습니다…
9. [Html Widget]이 추가된 후 Widgets 메뉴의 레이어(Layer)를 살펴보면 아래 그림과 같이 [Html Widget]이 Featured 영역(Zone)에 추가된 것을 알 수 있습니다. 위젯 등록 후 필요가 없거나 할 경우에는 [Remove] 링크 버튼을 클릭하여 삭제할 수도 있습니다.
또한, 하나의 영역에는 한개 이상의 서로 다른 위젯을 맘껏 등록할 수 있고 이에 대한 순서를 변경할 수도 있습니다. 보여지는 순서를 변경하고할 때에는 위 그림의 등록된 [Html Widget]의 왼쪽 부분에 보이는 위로/아래로(▲/▼) 화살표 링크를 클릭하면 됩니다.
10. 모든 위젯 등록절차를 마친 후 메인페이지로 돌아왔을 때의 모습입니다. 메인 페이지에 제가 입력한 [Html Widget]이 정상적으로 출력됨을 알 수 있습니다. 이처럼, Orchard와 같은 CMS는 HTML 소스를 건드리지 않고, 웹에서 모든 콘텐츠를 동적으로 원하는 위치에 삽입하는 방법을 사용할 수 있습니다.
마무리
이번 시간에 살펴본 위젯 기능은 Orchard에서 페이지(Page)와 함께 제일 많이 사용하는 기능 중 하나입니다. 그도 그럴수밖에 없는 것은 어차피 웹 페이지는 하나의 페이지(URL을 포함한…)와 그 안에 들어가는 콘텐츠(HTML 조각들…)로 이루어져 있습니다. 이러한 내용을 담당하고 있는 페이지와 위젯을 자유자재로 사용한다면, 웹 기반 CMS에 대한 내용의 반을 이해한다고 보셔도 좋습니다.
제가 제시하고 보여드리는 부분이외에 본인들이 생각하는 페이지와 내용이 있다면, 현재 연습중인 소스에 반영을 해보시기 바랍니다.
이번 강좌는 여기까지 진행하도록 하겠습니다.
끝.
관련글