[Umbraco 강좌] 12. 템플릿(Templates)과 마스터페이지(MasterPages)

아티클
07/07/2011

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

Umbraco CMS는 ASP.NET Web Forms 기반으로 작성된 솔루션이기에 ASP.NET 고유의 기능을 그대로 적용할 수 있습니다. 이번 시간의 ASP.NET에서의 마스터페이지(MasterPages) 기능을 Umbraco에서 템플릿(Templates)이란 이름으로 사용하는 방법에 대하여 단계별로 살펴보도록 하겠습니다.

간단한 용어정의부터 먼저 진행하면 아래와 같습니다. 그런데, 써놓고도 어렵네요. 그러면, 방법 없습니다. 한번 따라 해보면 자연스레 그 의미를 터득할 것입니다.

템플릿(마스터 페이지) : 웹 사이트 레이아웃을 담고 있는 페이지 구조
Umbraco 태그 : 미리 정의된 특정 내용을 출력하는 기능
문서 타입(Document Type) : 제목과 내용 등 특정 페이지에서 사용할 문서의 구조

절차

Step 1: 템플릿(Templates) 만들기

1. 아래 그림은 Umbraco CMS를 사용한 메인 페이지의 모습입니다. 메인 페이지 및 상단 메뉴에서 제공되는 페이지는 지금까지는 동일한 레이아웃을 사용하여 제작이 되었습니다. 이러한 레이아웃을 나만의 레이아웃으로 변경해 보도록 하겠습니다.

2. Umbraco CMS에서의 기본 레이아웃인 마스터 페이지 즉, 템플릿은 [백오피스]-[Settings]-[템플릿]에서 정의합니다. 아래 그림은 [Simple Website]의 기본값인 [Starterkit Master] 템플릿을 보여줍니다.

3. [백오피스]-[Settings]-[Templates]에 마우스 오른쪽 버튼 클릭-[생성(Create)] 버튼을 클릭합니다.

4. [생성(Create)]창에서 Name 텍스트박스의 값을 "MyTemplate"으로 설정 후 [생성(Create)] 버튼을 클릭합니다.

5. 생성된 Templates 항목을 아래 그림과 같이 살펴볼 수 있습니다. ASP.NET의 기본 마스터 페이지의 구조를 가집니다.

Step 2: 마크업 정의

1. [Edit template] 화면에 아래 그림과 같이 [컨텐츠 범위 삽입] 아이콘을 클릭합니다.

2. [ContentPlaceHolder]의 부모 격인 [ContentPlaceHolderDetault]를 선택 후 [삽입(Insert)] 버튼을 클릭합니다.

3. 아래 그림과 같이 추가적인 태그(상단과 하단 영역)을 입력한 후 그 사이에 마우스 캐럿을 두고 [컨텐츠 범위 PlaceHolder 삽입] 아이콘을 클릭합니다.

4. 아래 그림은 cphMain이라는 이름으로 ContentPlaceHolder를 삽입하는 모습입니다.

5. 현재까지의 내용이 완성되었을 때의 마크업 모습을 나타냅니다.

Step 3: 마스터 기반의 템플릿 생성(중첩된 마스터 페이지)

1. [백오피스]-[Settings]-[Templates] 확장-[MyTemplate] 템플릿에 마우스 오른쪽 버튼 클릭하여 [생성] 버튼을 클릭합니다.

2. MyPage란 이름으로 마스터페이지를 생성합니다.

3. 템플릿(마스터 페이지)에 Umbraco에서 제공하는 추가적인 기능 중 하나인 Umbraco 태그를 삽입하도록 하겠습니다. 이에 대한 추가적인 설명은 다음 강좌에서 다루도록 하겠습니다. 아래 그림 처럼 [Umbraco 페이지 필드 삽입] 아이콘을 클릭합니다.

4. [Umbraco 페이지 필드 삽입] 화면에서 [필드 선택] 항목 중 [bodyText] 항목을 선택합니다. 나머지는 기본값으로 두고 [삽입] 버튼을 클릭합니다.

5. Umbraco 태그 적용 후 추가적으로 pageName 항목도 하나 더 적용한 후 [저장] 아이콘을 클릭합니다. 간단히 설명하면 pageName은 현재 페이지의 제목을 출력하고, bodyText는 현재 페이지의 내용(HTML)을 출력하는 영역을 지정하는 것입니다.

Step 4: 특정 페이지에 새롭게 생성된 템플릿을 적용

1. [Settings] 섹션의 [문서 타입]에서 현재 웹 사이트에서 기본으로 사용하고 있는 Textpage를 선택합니다. Textpage 문서 타입의 속성 중에서 [Allowed templates] 항목에 추가로 지금 생성한 [MyPage] 템플릿을 사용할 수 있도록 체크 후 [저장] 아이콘을 클릭하여 문서 타입의 속성을 변경합니다.

2. [Content] 섹션-[시작하기] 페이지에만 앞서 만든 간단한 레이아웃을 적용하고자 합니다. [속성] 탭에서 [템플릿] 항목을 [Textpage]에서 [MyPage]로 변경한 후 페이지를 저장합니다.

3. 시작 페이지를 [미리보기] 아이콘을 클릭하여 실행하면 아래 그림과 같이 시작하기 페이지만 MyPage템플릿에서 정의한대로 출력됨을 알 수 있습니다.

마무리

이번 강좌가 제가 진행한 강좌 중에서 가장 단계가 많았던 강좌로 보입니다.

CMS 시스템이다 보니, 웹 페이지의 레이아웃을 템플릿이란 단어로 미리 정의한 후 이를 특정 페이지에 적용하는 절차를 설명 드렸습니다.

아직 더 설명 드려야 할 내용이 Umbraco 태그, 문서 타입 등 입니다. 일단 간단히 하나의 레이아웃을 만드는 현재 강좌를 이해했다면 다음 강좌에 이루어지는 몇 개의 강좌를 통해서 그 의미를 더욱 확실히 다지기 바랍니다.

끝.

관련글

다음을 통해 공유

[Umbraco 강좌] 12. 템플릿(Templates)과 마스터페이지(MasterPages)

추가 리소스