소개

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

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

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

 

절차

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

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

062211_2016_12Templat1.png

 

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

062211_2016_12Templat2.png

 

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

062211_2016_12Templat3.png

 

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

062211_2016_12Templat4.png

 

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

062211_2016_12Templat5.png

 

Step 2: 마크업 정의

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

062211_2016_12Templat6.png

 

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

062211_2016_12Templat7.png

 

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

062211_2016_12Templat8.png

 

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

062211_2016_12Templat9.png

 

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

062211_2016_12Templat10.png

 

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

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

062211_2016_12Templat11.png

 

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

062211_2016_12Templat12.png

 

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

062211_2016_12Templat13.png

 

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

062211_2016_12Templat14.png

 

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

062211_2016_12Templat15.png

 

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

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

062211_2016_12Templat16.png

 

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

062211_2016_12Templat17.png

 

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

062211_2016_12Templat18.png

 

 

마무리

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

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

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

 

끝.




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영