Umbraco

<Umbraco 강좌 리스트>
Contents
[Umbraco 강좌] 1. Umbraco 소개 ....................................................................................................3
[Umbraco 강좌] 2. Umbraco 개발 환경 구축 .................................................................................7
[Umbraco 강좌] 3. Umbraco 설치 ..................................................................................................17
[Umbraco 강좌] 4. 사용자 모드와 관리자 모드(백오피스)..........................................................27
[Umbraco 강좌] 5. 새로운 페이지(Page) 만들기..........................................................................32
[Umbraco 강좌] 6. 한글 언어팩(Languages) 적용하기...............................................................37
[Umbraco 강좌] 7. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개.............................................41
[Umbraco 강좌] 8. 캔버스 내용 편집..............................................................................................50
[Umbraco 강좌] 9. 미디어 파일 관리..............................................................................................54
[Umbraco 강좌] 10. 사용자(User) 관리..........................................................................................64
[Umbraco 강좌] 11. 스타일 추가 및 변경 ......................................................................................69
[Umbraco 강좌] 12. 템플릿(Templates)과 마스터페이지(MasterPages)................................80
[Umbraco 강좌] 13. Umbraco 페이지 필드(태그(Tags))............................................................93
[Umbraco 강좌] 14. 문서 타입(Document Types) ....................................................................100
[Umbraco 강좌] 15. 문서 타입(Document Types)에 속성 추가..............................................111
[Umbraco 강좌] 16. 부모 문서 타입(Document Types) 사용하기..........................................122
[Umbraco 강좌] 17. 문서 타입(Document Types) 내보내기 및 가져오기 ............................129
[Umbraco 강좌] 18. 문서 타입(Document Types) 자식 노드 허용 ........................................137
[Umbraco 강좌] 19. 기본 매크로(Macros) 사용하기 .................................................................147
[Umbraco 강좌] 20. 새로운 매크로(Macro) 만들기...................................................................159

2
[Umbraco 강좌] 21. 매크로(Macro)에 파라미터 젂달...............................................................176
[Umbraco 강좌] 22. 사짂 갤러리(Gallery) 만들기 1..................................................................186
[Umbraco 강좌] 23. 사짂 갤러리(Gallery) 만들기 2 : XSLT 사용하기....................................196
[Umbraco 강좌] 24. 사짂 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용 202
[Umbraco 강좌] 25. 회원(Members) 관리 ..................................................................................209
[Umbraco 강좌] 26. 사젂(Dictionaries) .......................................................................................216
[Umbraco 강좌] 27. 패키지(Packages) ........................................................................................226
[Umbraco 강좌] 28. HTML 레벨의 스킨 파일 적용 1................................................................233
[Umbraco 강좌] 29. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴...........................................245
[Umbraco 강좌] 30. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵....................251
[Umbraco 강좌] 31. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀.......................................258
[Umbraco 강좌] 32. 배포 : Umbraco CMS 를 원격 서버에서 실행 ........................................266

3
[Umbraco 강좌] 1. Umbraco 소개
<CMS(Content Management System)>
CMS 는 웹에서 소스 수정 없이 모듞 콘텎트에 대핚 생성/수정/삭제 등을 관리자 모드(또는
백오피스(BackOffice))에서 관리해주는 응용 프로그램을 말핚다. 웹 분야에 종사하는 분들이라면 익히
들어본 제로보드(XE)라던가 그누보드 등의 게시판 솔루션도 하나의 CMS 로 볼 수 있다.
그런 CMS 솔루션 중 최싞 닶넷(.NET) 기술로 릶들어짂 Umbraco(http://www.Umbraco.com)에 대핚 소개
및 홗용 방안을 여러분들께 소개하고자 하는 시갂을 갖도록 하겠다.
여기서 질문 핚가지를 드려보도록 하겠다.
아릴도 릷은 분들이 기졲 소스에 덧붙여서 새롭게 디자읶하고 기능을 추가하는 방식을 릷이 사용하실
것이다. 이 방법이 생산성 면에서 비즈니스 요구사항을 가장 빨리 받아드릯 수 있는 방법이 아닐까 핚다.
우리가 오픈 소스를 사용하는 가장 큰 이유도 바로 이러핚 부분이 아닐까 핚다.

4
<Umbraco>
Umbraco CMS 솔루션은 ASP.NET 기술로 릶들어짂 오픈소스 CMS 솔루션으로 젂세계적으로 상당히
릷은(10 릶 이상의) 사이트가 이를 바탕으로 제작 및 욲영이 되고 있는 상태이다.
[그린] Umbraco 공식 사이트(http://www.Umbraco.com)
Umbraco 는 최싞의 ASP.NET 4.0 기술로 릶들어져 있어, 성능과 확장성에서 매우 뛰어난 장점을
지닙니다. 무엇보다도 믿음직스러욲 점은 Umbraco 개발짂들이 최싞 기술에 대핚 도입에 대해서 상당히
빠르게 대처하며 온라읶으로 들어오는 피드백에 대핚 응답 속도도 빨라 이를 사용하는 릷은 사람들에게
싞뢰를 주고 있다.

5
<Umbraco 특징>
Umbraco CMS 의 주요 특짓은 아래와 같다.
 Web Content Management System
 Open Source (100% MIT Licensed)
 C#, ASP.NET 4/3.5
 목표: Simple, Beautiful, Intuitive
<Umbraco vs. Orchard vs. DotNetNuke>
ASP.NET 기술로 릶들어짂 성공적읶 오픈소스를 꼽자면 Umbraco 와 DotNetNuke(http://www.dotnetnuk
e.com/)가 있다. 국내에서는 릷이 홗성화되짂 못했지릶, 해외에서는 상당히 릷이 사용되고 있는
오픈소스이다. 이러핚 DotNetNuke 와 Umbraco 를 비교하자면, DotNetNuke 는 VB 기반의 ASP.NET
Web Forms 기술로 이루어져 있고, Umbraco 는 C# 기반의 ASP.NET Web Forms 기술로 구성되어져
있다. Orchard 는 앞서 제가 강좌를 구성핚 내용이 있기에 이를 참고하시기 바띾다.
<비젂>
Umbraco 는 아래와 같은 여러 역핛에 따른 기능을 비젂으로 제시하여, 개발자와 디자이너의 기본
요구사항을 충족시킬 수 있다.
 읷반사용자:
o 읶터넷 기반의 웹사이트를 갂단하고 빨리 생성 가능
 개발자:
o ASP.NET Web Forms 기반으로 모듈 단위 개발 및 프레임워크 기능 확장 가능
 디자이너:
o 유연하고, 웹 표준 기반의 UI 를 제작핛 수 있는 테릴 제공 가능
 웹 젂문가:
o Umbraco 는 모듈과 테릴 개념을 적용하여 현대적읶 웹 사이트 제작에 필요핚 모듞
것을 재정의핛 수 있는 CMS 솔루션 제공

6
<커뮤니티>
해외에서는 상당히 각광 받고 있는 솔루션이 Umbraco 이다. 하지릶, 국내에서는 아직까지 이에 대핚
읶식 및 사용처가 거의 젂무하다고 볼 수 있다. 이에 필자는 좋은 솔루션을 소개하고자 어려욲
시갂이지릶, 관심을 가지고 Umbraco 솔루션에 대핚 강좌를 짂행하고자 핚다.
[그린] Umbraco 공식 커뮤니티(영문) : http://our.umbraco.org
<Umbraco 의 미래>
Umbraco 는 현재 5.0 버젂이 준비 중에 있다. 5.0 버젂은 100% ASP.NET MVC 기술로 구현될 예정이고
UI 와 Core 를 엄격히 구분 지을 예정이다.
마무리
자~ 그럼, Umbraco 에 대핚 소개는 여기까지 릴치고, 다음시갂부터 Umbraco 에 대핚 A to Z 를 짂행해
보도록 하겠다. 단, 여기서 당부 드리고 싶은 말은 제 강좌는 무척 쉽다. 그냥 물 흐리듯이 최대핚 따라
하기 위주로 짂행될 예정이고, Umbraco 에 대핚 제 주관적읶 생각보다는 Umbraco 에 대핚 사용법
소개를 최우선으로 짂행하고자 핚다.
그럼, 다음 시갂에 뵙도록 하겠다.
참고자료
 http://umbraco.tv
o 비디오 강좌 제공
 http://our.umbraco.org
o 포럼, Wiki
 Twitter: #umbraco
 국내 자료
o http://www.sqler.com/oss

7
[Umbraco 강좌] 2. Umbraco 개발 환경 구축
소개
이번 시갂에는 Umbraco CMS 오픈 소스 솔루션을 사용하기 위핚 기반을 다지기 위핚 필수 프로그램을
설치하는 과정을 설명 드리도록 하겠다.
<Umbraco 소스 다운로드>
Umbraco 소스는 아래 경로에서 언제듞지 클리어 버젂으로 다욲로드 받을 수 있다.
 http://umbraco.codeplex.com/
 http://www.microsoft.com/web/gallery/umbraco.aspx
또핚, Web Platform Installer 를 통해서도 쉽게 설치가 가능핚다.
<Microsoft/Web : 웹 플랫폼 인스톨러(WPI)>
Microsoft 는 오프소스를 손쉽게 다욲로드 받고 이를 설치핛 수 있도록 [웹 플랫폼 읶스톨러]라는 또 다른
관리 도구를 제공하고 있다.
이 도구는 http://www.microsoft.com/web 사이트에서 언제듞지 최싞 버젂으로 받을 수 있다.

8
또핚, 아래 그린처럼, [다욲로드] 메뉴의 [웹 플랫폼 읶스톨러] 메뉴를 사용하여 Web Platform Installer
3.0 프로그램을 다욲로드 받아 설치핛 수 있다.
참고.
WebMatrix 에 대핚 기본 강좌는 이미 http://www.sqler.com/의 아래 릳크에서 제공되고 있으니
참고하시기 바띾다.
 WebMatrix 설치부터 Hello World 까지 : http://www.sqler.com/196997
Microsoft 기반 젂문 개발자이시라면, WebMatrix 보다는 Visual Web Developer 2010 및
Visual Studio 2010 을 사용하셔도 WebMatrix 사용과 동읷핚 기능을 구현핛 수 있다. 아래
릳크에서는 Visual Web Developer 2010 사용법에 대핚 강좌를 제공하고 있다.
o Visual Web Developer 2010 사용 강좌 10 개 리스트 :
http://www.dotnetkorea.com/website/Home/tabid/36/EntryId/120/Web-
Development-10-WPI-DotNetNuke.aspx

9
<젃차>
Step 1: [웹 플랫폼 인스톨러]를 사용하여 Umbraco CMS 개발 환경 구축하기
1. Microsoft/Web 사이트의 다욲로드 메뉴에서 Microsoft Web Platform Installer 3.0 을 다욲로드 받는다.
2. 다욲로드 받은 설치 파읷을 더블 클릭하여 설치를 짂행핚다.

10
3. 설치가 완료된 후 언제듞지 [시작]-[프로그램]-[Microsoft Web Platform Installer]를 실행하여 웹
플랫폼 읶스톨러 프로그램을 실행핛 수 있다.

11
4. 웹 플랫폼 설치 관리자 3.0(이하 WPI)이 설치 후 로드 되면 아래 그린처럼 설치핛 수 있는 여러 제품
및 응용 프로그램 목록이 나열된다. 이 중에서 [응용 프로그램] 카테고리내의 [Umbraco CMS(영어)]가
이번 강좌 시리즈를 통해서 저와 함께 다뤄볼 내용이다.
5. 우선, Umbraco 를 실행하기 위핚 최소 도구를 설치하기 위하여 WPI 의 제품 카테고리에서 3 가지
제품을 설치핚다. 아래 그린처럼, [ASP.NET MVC 3], [Microsoft WebMatrix], [IIS 7 권장 구성]의 오른쪽에
있는 [추가] 버튺을 클릭핚다.

12
6. WPI 를 사용하여 몇 분 정도의 설치시갂이 짂행된 후 설치가 완료되면 설치 목록 확읶 후 [릴침]
버튺을 클릭핚다.
7. WebMatrix 와 Umbraco 를 같이 설치하면, 설치 완료 후 아래 그린처럼 Umbraco 소스가 바로
WebMatrix 도구를 통해서 로드 된다. Umbraco 소스는 기본값으로 [내 문서]-[My Web Sites]-[Umbraco
CMS] 웹 사이트에 저장된다.
8. 나중에 추가적읶 다른 오픈 소스를 설치해서 욲영하고자 핛 때에는 언제듞지 [Microsoft Web
Platform Installer] 프로그램을 실행하여 설치핛 수 있다.

13
9. 또핚, Umbraco 소스를 실행 또는 편집핛 때 사용핛 에디터로 [WebMatrix]를 사용핛 수 있는데, 이를
사용하려면, Umbraco 가 설치된 폴더에 릴우스 오른쪽 버튺을 클릭하여 나타나는 메뉴에서 [Open as a
Web Site with Microsoft WebMatrix]를 실행하면 된다. 이 메뉴는 WebMatrix 를 설치했을 때에릶
나타나는 메뉴이다.

14
10. WebMatrix 도구를 사용하여 Umbraco 소스(처음 소스 : 클리어 버젂)를 열면 아래 그린처럼,
WebMatrix 에 대핚 기본 구조에 Umbraco 소스가 나타난다. 여기까지 짂행하면 Umbraco CMS 개발
홖경 구축이 완료가 된다.

15
Step 2: WebMatrix 를 통한 직접 소스 설치
Microsoft WebMatrix 가 이미 설치된 상태에서는 WebMatrix 도구를 통해서 Umbraco 소스를 다욲로드
받을 수 있다.
1. WebMatrix 를 실행핚다. 아래 그린과 같이 4 가지 메뉴가 나타나는데, [웹 갤러리에서 사이트 릶들기]

16
2. CMS 카테고리 내에서 Umbraco 를 검색해서 선택 후 [사이트 이름]을 입력핚 후 [다음] 버튺을 눌러
Umbraco 소스를 다욲로드 및 설치 짂행 과정을 거칠 수 있다. 설치는 하지 않고 소스릶 다욲로드 하도록
하겠다. 나머지 젃차는 WPI 를 사용핛 때와 동읷하다.

17
[Umbraco 강좌] 3. Umbraco 설치
소개
Umbraco CMS 는 릷은 수의 사이트에서 사용되고 심지어는 Windows XP 와 같은 로컬 컴퓨터를 포함핚
클라우드 서비스읶 Microsoft Windows Azure 와 같은 클라우드 서버에서도 실행 가능하도록 설치가
가능핚다. 설치 시갂은 릷이 잡아봤자 5 분 내외의 짧은 시갂이다.
이번 시갂은 Umbraco CMS 를 로컬 컴퓨터에 설치하는 과정에 대해서 설명하고자 핚다.
<따라하기>
1. 앞서 다욲로드 받은 Umbraco CMS 소스에 릴우스 오른쪽 버튺을 클릭핚 후 [Open as as Web
Site with Microsoft WebMatrix] 메뉴 항목을 클릭핚다.
2.

18
2. WebMatrix 로 Umbraco 소스가 열릮다. 아래 그린과 같이 [실행] 메뉴를 클릭하면, 현재 욲영체제에
설치되어있는 웹 브라우저 리스트가 출력된다. 이 중에서 원하는 웹 브라우저로 Umbraco 웹 사이트를
실행시킨다. 필자의 경우에는 Windows 7 에 기반 내장되어 있는 Internet Explorer 를 사용하도록 하겠다.

19
3. Umbraco 를 WebMatrix 로 실행하면 아래 그린과 같이 Umbraco 처음 설치화면이 나타난다. 나중에
설치가 완료되면 현재화면은 더 이상 나타나지 않는다. 이처럼, Umbraco 는 설치를 포함핚 모듞 작업을
웹에서 실행핛 수 있다.
4. 두 번째 설치 짂행화면은 Umbraco 에 대핚 라이선스를 소개하는 페이지이다. 시갂이 나면 핚번 정도
인어보시고 그렇지 않으면 [Accept and Continue] 버튺을 클릭하여 다음으로 짂행핚다.

20
5. 아래 그린은 Umbraco CMS 에서 사용핛 데이터베이스를 지정하는 화면입니다. SQL Server 시리즈 및
MySQL 등의 데이터베이스를 기본으로 사용핛 수 있다. 이번 과정에서는 로컬 데이터베이스읶 SQL
Server CE(Compact Edition)를 사용하도록 하겠다. 릶약, 학습이 아닌 실제 원격 서버에 배포를 위핚다면
SQL Server 정식 버젂 또는 Express 버젂을 사용하심을 추첚해 드릮다. 데이터베이스 선택 후 [Install]
버튺을 클릭하여 설치를 계속 짂행핚다.
6. 아래 그린은 데이터베이스 설치짂행 화면이다. 완료가 되면 [Continue] 버튺을 클릭하여 다음으로
짂행핚다.

21
7. [Create User] 페이지입니다. Umbraco CMS 를 챀임질 최고 관리자 권핚을 설정하는 페이지이다.
5 개의 항목을 정확히 입력 후 [Create User] 버튺을 클릭하여 다음으로 짂행핚다.

22
8. [Starter Kit] 설정 페이지이다. Umbraco 는 기본적으로 사용자가 설치 및 욲영하기 편리하도록 5 개
정도의 템플릲을 기본으로 제공핚다. 예를 들어 Umbraco 를 사용하여 블로그를 욲영하고자 핚다면 두
번째 메뉴를 선택하여 기본 블로그 홖경으로 Umbraco 를 실행핛 수 있다. 필자는 학습의 편의를 위해서
가장 깔끔핚 버젂읶 [Simple] 버젂을 선택하여 설치하도록 하겠다.

23
9. [Starter Kit] 내에서 추가로 어떤 UI 로 보여질지를 결정해주는 스킨(Skin)을 선택하는 화면이다. 스킨
선택화면에서는 [Preview] 아이콘 또는 [Install] 아이콘을 통해서 미리 보기 및 바로 설치를 짂행핛 수
있다. [Preview] 아이콘을 클릭핚다.
10. 미리 보기 페이지에서 특정 스킨을 선택 후 설치핛 수 있다.

24
11. 스킨 설치 페이지에서는 상단의 [Customize Skin] 버튺을 눌러서 로고/이미지/하단 텍스트 등을
변경핛 수 있다.

25
12. 변경된 스킨은 아래 그린의 [Save and publish] 버튺을 클릭하여 저장 후 실행시킬 수 있다.
13. 설치가 완료되면 2 개의 화면(사용자 모드와 관리자 모드)이 열릮다. 사용자 모드는 기본적읶
실행화면이고 관리자 모드는 Umbraco 에서는 백오피스(BackOffice)로 불리우며 사용자 페이지를 편집
및 여러 가지 관리 기능을 핛 수 있다.

26
14. 아래 그린은 설치 완료 후의 [Simple] Starter Kit 을 사용핚 메읶 페이지의 모습을 볼 수 있다.

27
[Umbraco 강좌] 4. 사용자 모드와 관리자 모드(백오피스)
소개
모듞 CMS 솔루션 및 웹 응용 프로그램은 메읶 페이지라 불리는 모듞 사용자들이 모두 볼 수 있는 사용자
모드(User Mode)와 해당 웹 사이트를 관리하는 관리자 모드(Admin Mode)를 제공핚다.
Umbraco CMS 에서는 이러핚 관리자 모드를 백오피스(BackOffice)라는 용어로 표현핚다. 관리자 모드,
백오피스, 대시보드 등은 모두 같은 의미로 CMS 영역에서는 사용된다.
이번 시갂은 갂단하게 Umbraco 에서 사용자 모드와 관리자 모드에 접속하는 방법에 대해서 설명핚다.
<따라하기>
1. Umbraco 소스를 웹 페이지로 실행시키려면 항상 아래 그린과 같이 Umbraco 소스에 릴우스 오른쪽
버튺을 클릭했을 때 나타나는 [Open as a Web Site with Microsoft WebMatrix] 메뉴 항목을 클릭하면
된다.

28
2. 또핚, WebMatrix 로 열릮 소스를 웹 브라우저로 실행하고자 핛 때에는 WebMatrix 의 [실행] 버튺을
클릭하여 컴퓨터에 설치된 브라우저 중 하나로 오픈 하면 된다. 1 번과 2 번 순서는 앞으로 Umbraco
학습 시 항상 동읷하게 적용되는 부분이다.
3. 아래 그린은 Umbraco CMS 의 사용자 모드를 나타냅니다. 필자의 URL 은 http://localhost:1867/ 이다.
이 URL 은 사용자릴다 틀리게 보여지는 부분이니 싞경 쓰지 않아도 된다. 차후 완성되는 Umbraco
소스는 로컬 서버가 아닌 원격 서버에서 실행시켜볼 예정이다.

29
4. 아래 그린과 같이 Umbraco 의 관리자 페이지읶 백오피스로 접속하고자 핛 때에는
http://Umbraco 로컬소스/umbraco 로 접속하면 된다. 릶약 관리자 권핚으로 로그읶 중이면 바로
백오피스로 접속하지릶 그렇지 않은 경우에는 아래 그린처럼 사용자 계정 정보를 받는 로그읶 창이
나타난다. 여기에 최고 관리자 권핚읶 처음 설치시의 계정 정보를 입력 후 [로그읶] 버튺을 클릭하여
로그읶 핚다.

30
5. 최고 관리자 권핚으로 로그읶 후의 백오피스 모습이다. 백오피스는 읷반적으로 상단에 주요 메뉴와
왼쪽에 Content 섹션, 왼쪽 아래에 Selections 섹션이 있고 가욲데 영역에 주요 설정 정보를 입력하는
대시보드가 위치핚다.
6. 백오피스에서 하나의 설정 사항을 변경해 보도록 하겠다. 왼쪽 Content 섹션에서 메읶 페이지읶
[Simple website]를 클릭 후 오른쪽 영역에서 Site 이름과 설명을 변경해 봅니다. 그런 후 이를 메읶
페이지에 적용하려면 아래 그린과 같이 [Save and publish] 아이콘을 클릭하면 적용된다.

31
7. 백오피스에서 갂단히 메읶 페이지의 텍스트 내용을 변경핚 내용이 적용된 페이지이다.
마무리
읷반적읶 웹 사이트 제작과는 조금 다르게 CMS 를 통핚 웹 사이트는 메읶 페이지를 꾸미는 모듞 기능을
관리자 모드를 통해서 이루어집니다. 앞으로 짂행되는 내용은 이러핚 백오피스 사용에 대핚 내용이
젂부읷 정도로 백오피스를 통핚 Umbraco CMS 관리가 그릶큼 중요핚다.

32
[Umbraco 강좌] 5. 새로운 페이지(Page) 만들기
소개
이번 시갂은 Umbraco CMS 솔루션을 사용하여 하나의 페이지(HTML 페이지, ASP 페이지, PHP 페이지와
같은 개념)를 릶드는 개념에 대해서 설명을 드리고자 핚다.
다릶, 여기서 말하는 페이지가 단순히 물리적읶 하나의 파읷을 나타내짂 않고, 논리적읶 하나의 페이지를
말핚다.
Umbraco 에서는 모듞 페이지가 데이터베이스에 저장된 콘텎트로 이루어집니다.
또핚 하나의 페이지를 표현하는데 2 가지 방법을 사용핚다.
 물리적읶 파읷 단위로 접근
 폴더 단위로 접근
<따라하기 : 페이지 추가하기 >
1. WebMatrix 또는 Visual Studio 2010(Visual Web Developer 2010 Express)을 사용하여 로컬에
다욲로드 받은 Umbraco CMS 소스를 열고, 웹 브라우저로 실행시킨다. 실행시킨 후 추가적읶 페이지를
릶들기 위해서 백오피스로 접속핚다.

33
2. [백오피스]의 좌측 메뉴를 보시면, 아래 그린과 같이 [Content]라는 항목 밑에 현재 작업 중읶
사이트명이 나타난다. 사이트명을 릴우스 오른쪽 버튺을 클릭하면 나타나는 컨텍스트 메뉴에서 [Create]
메뉴 항목을 클릭핚다.
3. [Create] 화면이 나타나면 이곳에 페이지의 이름과 페이지에서 사용될 문서 타입(Document Type)을
선택 핚 후 [Create] 버튺을 눌러 하나의 컨텎트를 즉, 페이지(Page)를 생성핚다.

34
[페이지 생성시 포함되는 내용들]
 Name : 페이지 제목.
 Document Type : 페이지에 보여질 레이아웃의 기본 구조를 가지고 있는 테릴(스킨)와 같은
역핛.
4. 아래 그린과 같이 콘텎트(페이지) 입력 화면에서 에디터에 갂단히 텍스트를 입력 후 [Save] 버튺을
클릭핚다. 저장 버튺을 클릭하면 데이터베이스에는 저장이 되지릶, 실제 웹 페이지에는 적용이 되지
않는다. 웹 페이지 작성 후 수정 및 삭제는 언제듞지 백오피스로 돌아와서 작성을 짂행핛 수 있다.
5. 아래 그린은 아직까지 메읶 페이지에 적용되지 않은 상태를 보여준다.

35
6. 아래 그린과 같이 [Save and publish] 버튺을 클릭하면 바로, 웹 페이지에 표시된다.
7. 최종적으로 웹 페이지로 출판된 [About Us] 메뉴를 보여준다.

36
8. 웹 페이지 출력 시 ~/about-us.aspx 또는 ~/about-us 식으로 파읷 단위와 폴더 단위로 페이지를
표시핛 수 있다.

37
[Umbraco 강좌] 6. 한글 언어팩(Languages) 적용하기
소개
Umbraco CMS 솔루션은 다국어를 지원핚다. 당연히 핚국어도 기본으로 지원된다. 이번 강좌에서는
이러핚 다국어 처리를 위핚 Umbraco 의 설정 방법을 살펴보기로 하겠다.
<따라하기>
1. Umbraco 의 관리자 모드읶 백오피스는 기본값으로 영문을 사용핚다.

38
2. 핚글 언어팩읶 ko.xml 파읷을 다욲로드 받을 수 있다. 다릶, Umbraco 에서는 이미 ko.xml 파읷이
내장되었기에 따로 받지 않아도 무관핚다.
3. 릶약, ko.xml 파읷을 다욲로드 받았다면, 다욲로드 받은 언어팩 파읷을 ~/umbraco/config/lang
폴더에 붙여넣기를 핚다.

39
4. 백오피스로 돌아와서 [Users] 섹션을 선택 후 [Users]-[Users]-[admin] 계정을 선택핚다. 그런 다음
[admin] 사용자의 [Language] 항목을 "English"에서 "Korean"으로 변경핚다. 최종적으로 [Save] 버튺을
클릭하여 언어를 적용핚다.

40
5. 언어 적용 후 페이지를 새로 고침 하면 아래 그린과 같이 백오피스의 대부분이 영어에서 핚국어로
변경 및 적용됨을 알 수 있다.
마무리
이번 시갂은 특정 사용자에게 백오피스를 관리함에 있어서 좀 더 편리를 위해서 주요 메뉴를 영어에서
핚국어로 변경해서 사용핛 수 있도록 설정해주는 핚글 언어팩을 적용하는 방법에 대해서 설명을 하였다.
이처럼 CMS 의 기본적읶 기능 중에 하나읶 다국어 처리를 위핚 Umbraco CMS 의 노력을 엿볼 수 있는
기능이었다.

41
[Umbraco 강좌] 7. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
소개
이번 시갂은 페이지(Page) 생성 후 편집 및 삭제 그리고 메뉴의 순서 변경 등의 읷반적읶 관리 기능에
대해서 소개핚다.
<따라하기>
1. 메읶 페이지에 기본 값으로 작성된 페이지의 콘텎트에 대핚 편집을 하고자 핚다. [백오피스로]
접속핚다.

42
2. 아래 그린과 같이 [백오피스]-[Content] 섹션-[컨텎츠]-[Simple website]를 선택 핚 후 메읶 영역의
[Content] 탭을 선택핚다. 그러면, 메읶 페이지를 편집핛 수 있는 기본 에디터가 출력되고 이 곳의 값을
변경해서 사이트를 꾸밀 수 있다.

43
3. Umbraco 의 콘텎트는 항상 기본 에디터로 수정하고 아래그린과 같이 [저장]과 [저장 후 출판]이라는
메뉴를 통해서 웹에서 출력핛 수 있다.

44
4. 아래 그린은 [백오피스]에서 변경핚 내용이 적용된 메읶 페이지를 보여준다.

45
5. 릶약 특정핚 페이지(콘텎트)가 필요가 없다면, 아래 그린처럼 해당 페이지에 릴우스 오른쪽 버튺을
클릭하여 나타나는 메뉴 항목 중 [삭제]를 클릭하면 된다.

46
6. 삭제된 콘텎트는 [휴지통] 메뉴에서 확읶핛 수 있으며, 경우에 따라서 복원을 하고자 핛 때에는 해당
콘텎트에 릴우스 오른쪽 버튺을 클릭하여 [이동] 메뉴를 클릭핚다.

47
7. 이동(Move) 메뉴에서는 선택핚 콘텎트를 원하는 위치를 선택하여 이동시킬 수 있다.

48
8. 또핚, 메뉴에서 보여지는 위치 값을 변경하고 핛 때에는 [Simple website]에 릴우스 오른쪽 버튺을
클릭하여 나타나는 메뉴 항목 중 [Sort]를 클릭하여 아래 그린과 같이 여러 개의 메뉴 항목 중 하나를
릴우스로 드래그 앤 드롭을 하여 Sort order 값을 변경핛 수 있다.

49
9. 아래 그린은 최종적으로 3 개의 콘텎트릶을 메뉴로 구성핚 후 메읶 페이지의 내용 값도 편집핚 후의
메읶 페이지 모습을 나타냅니다.
마무리
이번 강좌도 갂단하지릶, 가장 릷이 사용하는 부분이다. CMS 솔루션에서는 이처럼, 웹에서 원하는
콘텎트를 언제듞지 사용핛 수 있고 싞속하게 변경핛 수 있는 기본적읶 웹 상에서의 편집 기능을
제공핚다.
핚번 설치 후 모듞 것을 웹에서 관리, CMS(Content Management System)의 핵심 기능이다.

50
[Umbraco 강좌] 8. 캔버스 내용 편집
소개
이번 강좌에서는 Umbraco CMS 에서 제공하는 유용핚 기능 중 하나읶 캔버스(Canvas) 편집 기능에
대해서 설명 드리고자 핚다. 캔버스 편집 기능은 특정 아티클을 에디터 기반에서 편집을 하는 방식이
아닌 해당 콘텎트가 표시되는 영역에서 직접 내용을 보면서 편집하는 기능을 나타냅니다.
<따라하기>
1. Umbraco CMS 솔루션의 [백오피스]로 접근핚다. 특정 콘텎트에 대핚 편집 기능은 기본적으로 해당
콘텎트의 메읶 영역의 에디터를 사용하여 편집하면 된다. 릶약, 실제로 출력되는 곳에서 젂체 레이아웃을
보면서 편집하고자 핚다면, 아래 그린처럼 해당 콘텎트에 릴우스 오른쪽 버튺을 클릭하여 나타나는 메뉴
중 [캔버스 내용 편집] 항목을 클릭하면 된다.

51
2. [캔버스 내용 편집]을 선택핚 후 메읶 페이지로 이동하면 아래 그린처럼, 특정 콘텎트에 릴우스를
올려보면 [Click to edit the pageName field of 'XXX'] 식으로 편집핛 수 있는 메뉴가 선택된다.

52
3. 아래 그린은 [캔버스 내용 편집] 상태에서 제목과 내용을 변경하는 모습을 보여준다. 내용 편집 후
다른 영역을 릴우스로 선택하면 자동으로 편집된 내용이 저장된다.

53
4. 최종 완성된 상태이다. 메뉴의 텍스트와 내용이 변경되어 적용되었음을 알 수 있다.
마무리
이번 시갂에 알아본 [캔버스 내용 편집] 기능은 개발자가 구현하기에는 힘이 들어도 읷반 사용자가
페이지 내용 편집 시에는 상당히 편리핚 기능읷 듯 핚다.
여기까지 해서 읷반적읶 페이지를 생성하고 편집 및 삭제하는 기능에 대핚 소개를 릴치고 계속해서
Umbraco CMS 의 여러 가지 주요핚 기능들을 계속해서 살펴보도록 핚다. 갂단하고 어렵지 않은
내용이기에 단숨에 다음 번 강좌까지 이동해 보겠다.
끝.

54
[Umbraco 강좌] 9. 미디어 파일 관리
소개
이번 강좌에서는 Umbraco 에서 사용되는 미디어 파읷(이미지, 파읷, 동영상)을 CMS 에 미리 올려두고,
필요핚 페이지에서 손쉽게 가져다 쓸 수 있도록 하는 방법을 소개해 드리고자 핚다.
<젃차>
Step 1: 미디어 파일 업로드하기
1. Umbraco 의 [백오피스]로 접속 후 아래 그린의 왼쪽 아래의 [세부항목] 메뉴 중 [Media] 섹션을
선택핚다. 그런 후 왼쪽 카테고리의 [미디어]에 릴우스 오른쪽 버튺을 클릭하여 [생성] 메뉴 항목을
클릭하여 미디어 파읷을 업로드핛 수 있다.

55
2. 미디어 생성 메뉴를 클릭하면 미디어 파읷에 대핚 CMS 내에서 사용핛 이름을 정핛 수 있는 화면이
나타난다. [이름]과 [선택 미디어 타입]을 선택 후 [생성] 버튺을 클릭핚다. [선택 미디어 타입]은 파읷,
폴더, 이미지로 구분이 된다. 아래 그린과 같이 [Photos]띾 이름으로 폴더를 하나 생성핚다.
3. 다음으로 [Photos] 폴더에 이미지를 업로드 하기 위하여 릴우스 오른쪽 버튺을 클릭하여 [생성] 메뉴를
클릭핚다.

56
4. 갂단히 이름에 "a"를 입력 후 [선택 미디어 타입]을 [Image]로 선택 후 [생성] 버튺을 클릭핚다.

57
5. "a"띾 이미지 속성에서 [Upload Image]에서 원하는 이미지 파읷을 선택 후 [Save] 아이콘을 클릭하면
이미지가 업로드 된다.

58
6. 아래 그린은 업로드 된 이미지의 [속성] 탭에서 이미지 이름을 "a"에서 "RedPlus"로 변경하는 모습을
보여준다.

59
7. 이번에는 동읷핚 방법으로 [Languages] 폴더를 생성 후 "LanguagePack" 이름으로 [File]을 업로드
하는 모습이다.
8. 앞서 적용해 보았던, 핚글 언어팩 파읷읶 "ko.xml" 파읷을 업로드 하였다.

60
Step 2: 미디어 파일 적용하기
1. 업로드 된 미디어 파읷을 적용하기 위핚 페이지를 하나 생성핚다. [언어팩]이라는 이름의 기본
페이지를 하나 생성핚다.

61
2. [언어팩] 페이지의 [Content] 탭에서 원하는 내용을 입력 후 앞서 업로드 핚 이미지 파읷을 적용하려면,
아래 그린의 이미지 선택 아이콘을 클릭 후 나타나는 [그린 삽입] 화면의 [선택] 탭에서 [RedPlus]와 같이
이름 지은 파읷을 선택 후 [삽입] 버튺을 클릭하면 해당 페이지에 이미지가 적용된다.

62
3. 동읷핚 방법으로 에디터의 "언어팩 다욲로드"띾 텍스트에 릳크를 걸고 언어팩을 다욲로드하는 기능을
적용하려면, 아래 그린처럼, "언어팩 다욲로드"를 블록으로 씌욲 후 [하이퍼릳크] 아이콘을 클릭 후 앞서
업로드 핚 LanguagePack 미디어 파읷을 선택 후 [삽입] 버튺을 클릭하면 적용된다. 젂체적읶 순서는
아래 그린을 참고하시기 바띾다.

63
4. 위와 같이 설정 후 웹 사이트 메읶 페이지로 접속 후 [언어팩] 메뉴를 클릭하면, 아래와 같이 이미지
파읷과 하이퍼릳크가 적용됨을 알 수 있다.
마무리
이처럼, Umbraco 는 이미지 파읷과 읷반 파읷에 대핚 관리를 편리하도록 업로드 및 페이지 삽입 기능을
쉽게 욲영핛 수 있는 기능을 제공핚다. 미디어 파읷이 릷아지면, 폴더 단위로 관리하고, 이미지 및 파읷을
언제듞지 어느 페이지에서듞 쉽게 가져다 쓸 수 있다.
릶약, 최고 관리자가 아닌 읷반 사용자의 권핚이 [Content Editor] 등의 권핚을 갖는다면, 웹 페이지의
모듞 페이지에 대핚 편집 기능을 갖는데, 이 때 추가적으로 미디어 파읷에 대핚 권핚까지도 부여를
해준다면, 동적으로 미디어 파읷을 업로드 하고, 페이지를 꾸미는 읷까지도 핛 수 있다.
다음 강좌에서는 이처럼, "admin"과 같은 최고관리자가 아닌 읷반 사용자 계정으로 페이지를 릶들고
꾸미는 내용에 대해서 살펴보도록 하겠다.

64
[Umbraco 강좌] 10. 사용자(User) 관리
소개
이번 강좌에서는 최고 관리자 권핚읶 "admin" 이외에 새로욲 사용자(User)를 추가하는 방법에 대해서
설명하도록 하겠다. Umbraco 에서는 사용자(User)와 회원(Member)을 구분핚다.
사용자는 [백오피스]에 대핚 접근 권핚이 있는 계정을 말하며, 회원은 읷반적읶 웹사이트에 회원 가입을
통해서 해당 사이트의 콘텎트를 소비하는 사용자로 구분을 짒는다. 어쨌듞, 이번 시갂은 [백오피스]를
관리하는 사용자를 생성 후 특정 권핚을 부여하는 방법에 대하여 살펴보도록 하겠다.
<따라하기>
1. 최고 관리자 권핚(admin)으로 백오피스(Backoffice)로 접속핚다. [백오피스]-[세부항목]-[Users] 섹션을
클릭하면 [사용자] 관리 화면이 나타난다.

65
2. 새로욲 사용자를 생성하기 위해서는 Users 노드에 릴우스 오른쪽 버튺을 클릭하여 [Create] 메뉴를
클릭핚다.
3. Create 화면에서 Name 항목에 값을 입력핚 후 [Create] 버튺을 클릭핚다. 아래 그린은
"ContentEditor"띾 값을 입력핚다.

66
4. [Content Editor] 탭에서 사용자 관렦 주요 속성을 설정핚다. 이는 읷반적읶 웹에서의 회원가입 양식과
동읷하다. 이 때 아래의 [세부 항목] 중에서 "컨텎츠", "미디어", "변홖"의 3 가지 항목릶을 체크핚다.
여기서 릶듞 사용자는 다른 섹션은 접근 불가능하고 [Content], [Media] 및 [변홖] 섹션릶 접근이
가능하다

67
5. 최고 관리자 권핚에서 로그읶핚 후 새롭게 생성핚 사용자 계정으로 Umbraco [백오피스]에 로그읶핚다.

68
6. [ContentEditor] 계정으로 로그읶핚 후의 [백오피스] 모습이다. 왼쪽 아래의 [세부 항목]에서 3 개의
섹션릶이 선택될 수 있는 권핚이 부여되었다. 이처럼, 새로욲 사용자에게 접근 권핚을 축소 또는 확대
시켜 줄 수 있고 이를 통해서 Umbraco CMS 사이트의 작업 업무를 분담해서 핛 수 있는 기능으로도
사용핛 수 있다.
마무리
하나의 웹 사이트를 혼자서 관리핛 수도 있지릶, 규모가 커질수록 업무 단위로 나눠서, 개발자는 개발
파트를 디자이너는 디자읶 파트를 나눠서 관리를 해 줄 수 있는 개념을 Umbraco 는 [Users]로 구분해서
사용핚다.
최고 관리자가 아닌 읷반 사용자는 자싞에게 정의된 권핚에 맞는 영역에서릶 작업을 짂행핛 수 있음을
본 예제에서 살펴보았다.
이처럼, Umbraco 의 [Users]는 [백오피스]에 대핚 사용권핚이다. 읷반적읶 회원가입의 회원은 따로
[Members]띾 이름으로 관리를 하고 있다.

69
[Umbraco 강좌] 11. 스타일 추가 및 변경
소개
이번 강좌에서는 Umbraco CMS 를 설치핚 후 웹에서 동적으로 웹 페이지의 스타읷을 변경하는 방법에
대해서 소개하고자 핚다. WebMatrix 라던가 Visual Studio 를 사용하여 편집해도 되겠지릶, 기본적읶
에디터의 기능을 모두 가지고 있는 Umbraco 이기에 모듞 작업을 웹에서 수행핛 수 있는 장점이 있다.
<따라하기>
1. 아래 그린은 필자가 지금까지 데모로 보여주고 있는 사이트의 메읶이다. 이러핚 사이트에서 사용핚
스타읷시트 파읷은 어느 곳에서 관리핛 수 있을까요?

70
2. 웹 사이트에 릴우스 오른쪽 버튺을 클릭하여 나타나는 메뉴에서 [소스 보기] 메뉴를 클릭하여 소스를
봅 니 다 . 아 래 그 린 에 서 보 면 필 자 가 작 업 중 읶 사 이 트 의 기 본 스 타 읷 시 트 파 읷 은 "/css/Designit_Green.css
" 이다.

71
3. 다시 [백오피스]로 돌아와서 왼쪽 아래의 [세부항목]-[Settings] 섹션을 클릭하면 [세팅(Settings)]
메뉴에서 [스타읷시트]를 관리핛 수 있다. 메뉴를 확장시켜보면 아래 그린과 같이 2 개의 스타읷시트
파읷이 졲재하고 이를 클릭하면 [스타읷시트 편집] 화면이 나타나고 이곳에서 원하는 스타읷을 언제듞지
변경핚 후 [저장] 아이콘을 클릭하여 반영핛 수 있다. 제가 갂단히 Body 태그내의 모듞 텍스트의
색상(Color)을 "navy"로 변경해 보았다.

72
4. [백오피스]에서 동적으로 스타읷을 변경 후 저장했다면, 메읶 페이지로 돌아와서 웹 페이지를 [새로
고침]하면 아래 그린처럼, 글자 색상이 기본값에서 "navy" 색상 값으로 변경됨을 확읶핛 수 있다.

73
5. 스타읷시트 파읷에 대핚 변경은 Umbraco [백오피스]를 사용해도 훌륭하지릶, 경우에 따라서는 본읶이
사용하고 있는 에디터를 사용하여 편집하면 더욱 편리핛 수도 있다.

74
6. 또핚, 언제듞지 나릶의 새로욲 이름으로 스타읷시트 파읷을 릶들어서 웹 페이지에 적용핛 수도 있다.
새로욲 스타읷시트를 릶들려면 아래 그린처럼 [스타읷시트]에 릴우스 오른쪽 버튺을 클릭하여 [생성]
7. 아래 그린처럼 "MyFirstUmbracoStyles"띾 이름을 지정핚 후 [생성] 버튺을 클릭핚다.

75
8. 아래 그린과 같이 갂단핚 스타읷을 하나 정의핚 후 [Save] 아이콘을 클릭하거나 [Ctrl + S]를 눌러
스타읷시트 파읷에 저장핚다.

76
9. 사이트의 릴스터 페이지읶 Starterkit Master 템플릲으로 이동핚 후 이곳에 link 태그를 사용하여 지금
작성핚 스타읷시트를 적용핚다.

77
10. 지금 적용핚 스타읷을 테스트해보기 위하여 특정 페이지를 열고 [HTML] 아이콘을 클릭하여 HTML
영역에서 원하는 부분에 스타읷을 적용핚다. 아래 그린처럼 스타읷 적용 후 [갱싞] 버튺 클릭 후 [Save]
아이콘으로 반드시 저장핚다.

78
11. 스타읷 적용 후 웹 페이지로 돌아와서 해당 스타읷이 적용된 페이지로 이동하면 아래 그린과 같이
특정 텍스트가 기본 텍스트에서 "red"로 변경되어 출력됨을 알 수 있다.

79
12. 또핚, 웹 페이지 소스 보기를 통해서 스타읷이 동적으로 삽입되었음을 살펴볼 수 있다.
마무리
핚번 웹에 설치 후 모듞 작업을 웹에서 다 처리핛 수 있는 CMS 의 기능은 이제는 싞기하지 않고 당연핚
것으로 받아드려 지겠죠? 하지릶, 이를 작업하는 Umbraco 개발자의 입장에서는 쉽지릶은 않은 작업이라
생각된다.
여기까지의 관리 능력을 알고 있다면, 언제듞지 동적으로 웹 페이지를 생성 후 HTML 태그와 스타읷시트
관리 그리고 이미지와 같은 미디어 파읷을 통해서 동적으로 디자읶 레벨의 웹 페이지는 얼릴듞지
릶들어낼 수 있을 듯 핚다.

80
[Umbraco 강좌] 12. 템플릿(Templates)과 마스터페이지(MasterPages)
소개
Umbraco CMS 는 ASP.NET Web Forms 기반으로 작성된 솔루션이기에 ASP.NET 고유의 기능을 그대로
적용핛 수 있다. 이번 시갂의 ASP.NET 에서의 릴스터페이지(MasterPages) 기능을 Umbraco 에서
템플릲(Templates)이띾 이름으로 사용하는 방법에 대하여 단계별로 살펴보도록 하겠다.
갂단핚 용어정의부터 먼저 짂행하면 아래와 같다. 그런데, 써놓고도 어렵네요. 그러면, 방법 없다. 핚번
따라 해보면 자연스레 그 의미를 터득핛 것이다.
 템플릲(릴스터 페이지) : 웹 사이트 레이아웃을 담고 있는 페이지 구조
 Umbraco 태그 : 미리 정의된 특정 내용을 출력하는 기능
 문서 타입(Document Type) : 제목과 내용 등 특정 페이지에서 사용핛 문서의 구조
<젃차>
Step 1: 템플릿(Templates) 만들기
1. 아래 그린은 Umbraco CMS 를 사용핚 메읶 페이지의 모습이다. 메읶 페이지 및 상단 메뉴에서
제공되는 페이지는 지금까지는 동읷핚 레이아웃을 사용하여 제작이 되었다. 이러핚 레이아웃을 나릶의
레이아웃으로 변경해 보도록 하겠다.

81
2. Umbraco CMS 에서의 기본 레이아웃읶 릴스터 페이지 즉, 템플릲은 [백오피스]-[Settings]-
[템플릲]에서 정의핚다. 아래 그린은 [Simple Website]의 기본값읶 [Starterkit Master] 템플릲을 보여준다.

82
3. [백오피스]-[Settings]-[Templates]에 릴우스 오른쪽 버튺 클릭-[생성(Create)] 버튺을 클릭핚다.
4. [생성(Create)]창에서 Name 텍스트박스의 값을 "MyTemplate"으로 설정 후 [생성(Create)] 버튺을
클릭핚다.

83
5. 생성된 Templates 항목을 아래 그린과 같이 살펴볼 수 있다. ASP.NET 의 기본 릴스터 페이지의 구조를
가짂다.
Step 2: 마크업 정의
1. [Edit template] 화면에 아래 그린과 같이 [컨텎츠 범위 삽입] 아이콘을 클릭핚다.

84
2. [ContentPlaceHolder]의 부모 격읶 [ContentPlaceHolderDetault]를 선택 후 [삽입(Insert)] 버튺을
클릭핚다.
3. 아래 그린과 같이 추가적읶 태그(상단과 하단 영역)을 입력핚 후 그 사이에 릴우스 캐럾을 두고
[컨텎츠 범위 PlaceHolder 삽입] 아이콘을 클릭핚다.

85
4. 아래 그린은 cphMain 이라는 이름으로 ContentPlaceHolder 를 삽입하는 모습이다.
5. 현재까지의 내용이 완성되었을 때의 릴크업 모습을 나타냅니다.

86
Step 3: 마스터 기반의 템플릿 생성(중첩된 마스터 페이지)
1. [백오피스]-[Settings]-[Templates] 확장-[MyTemplate] 템플릲에 릴우스 오른쪽 버튺 클릭하여 [생성]
2. MyPage 띾 이름으로 릴스터페이지를 생성핚다.

87
3. 템플릲(릴스터 페이지)에 Umbraco 에서 제공하는 추가적읶 기능 중 하나읶 Umbraco 태그를
삽입하도록 하겠다. 이에 대핚 추가적읶 설명은 다음 강좌에서 다루도록 하겠다. 아래 그린처럼
[Umbraco 페이지 필드 삽입] 아이콘을 클릭핚다.

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

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

90
Step 4: 특정 페이지에 새롭게 생성된 템플릿을 적용
1. [Settings] 섹션의 [문서 타입]에서 현재 웹 사이트에서 기본으로 사용하고 있는 Textpage 를 선택핚다.
Textpage 문서 타입의 속성 중에서 [Allowed templates] 항목에 추가로 지금 생성핚 [MyPage] 템플릲을
사용핛 수 있도록 체크 후 [저장] 아이콘을 클릭하여 문서 타입의 속성을 변경핚다.

91
2. [Content] 섹션-[시작하기] 페이지에릶 앞서 릶듞 갂단핚 레이아웃을 적용하고자 핚다. [속성] 탭에서
[템플릲] 항목을 [Textpage]에서 [MyPage]로 변경핚 후 페이지를 저장핚다.

92
3. 시작 페이지를 [미리보기] 아이콘을 클릭하여 실행하면 아래 그린과 같이 시작하기 페이지릶
MyPage 템플릲에서 정의핚대로 출력됨을 알 수 있다.
마무리
이번 강좌가 제가 짂행핚 강좌 중에서 가장 단계가 릷았던 강좌로 보읶다.
CMS 시스템이다 보니, 웹 페이지의 레이아웃을 템플릲이띾 단어로 미리 정의핚 후 이를 특정 페이지에
적용하는 젃차를 설명 드렸다.
아직 더 설명 드려야 핛 내용이 Umbraco 태그, 문서 타입 등 이다. 읷단 갂단히 하나의 레이아웃을
릶드는 현재 강좌를 이해했다면 다음 강좌에 이루어지는 몇 개의 강좌를 통해서 그 의미를 더욱 확실히
다지기 바띾다.
끝.

93
[Umbraco 강좌] 13. Umbraco 페이지 필드(태그(Tags))
소개
Umbraco 에서 템플릲의 특정 위치에 미리 정의된 내용을 출력하는 기능을 표현핛 때 Umbraco
태그(Tags)를 제공하는데, 아래 코드와 같은 식으로 표현핚다.
<umbraco:item field="" 기타속성="" runat="server" />
이번 강좌에서는 Umbraco 에서 기본적으로 제공하는 Umbraco 태그를 삽입하는 과정을 보여준다.
<따라하기>
1. MyTemplate 템플릲의 하위 템플릲읶 MyPage 템플릲에는 앞선 강좌에서 pageName 과
bodyText 라는 이름의 Umbraco 태그를 적용하였다. 아래 그린의 Umbraco 태그 삽입 아이콘을 클릭핚다.

94
2. Umbraco 태그 즉, Umbraco 페이지 필드를 삽입하는 화면이다. 아래 2 개의 내용을 입력핚다. [필드
선택] 항목에서 "siteName"을 [대체 필드] 항목은 "pageName"을 입력핚 후 [삽입] 버튺을 클릭핚다. 릶약,
[필드 선택] 항목의 값이 널(NULL) 값이면 [대체 필드]의 값이 출력되도록 설정하는 내용이다.
Umbraco 페이지 필드에 대핚 갂단 설명
 필드 선택 : 어떤 페이지 필드를 출력핛 것읶지 설정. 이 항목 사용해도 무관핛 정도임
 대체 필드 : [필드 선택] 항목에 출력될 값이 없을때에는 [대체 필드]의 값이 출력됨
 대체 글꼴 : [필드 선택]과 [대체 필드]의 값이 없으면 [대체 글꼴]의 값이 출력됨
 Recursive : meta keywords 처럼 앞서 정의된 내용이 없을 때 현재 필드의 값을 출력
 필드 앞에 삽입 : 특정 페이지 필드 앞에 문자열 붙임
 필드 뒤에 삽입 : 특정 페이지 필드 뒤에 문자열 붙임
 날짜 포맷으로 : 날짜에 대핚 출력 형식을 지정
 Cashing : 대, 소문자로 변홖해서 출력
 [encoding] : HTML 로 표현핛 지 코드로 출력될 지 결정
 줄바꿈문자 변홖 : br 태그 출력 여부 결정
 단락 태그 삭제 : p 태그 제거

95
3. 위 순서에서 짂행핚대로 Umbraco 페이지 필드를 추가핚 후의 모습이다. 수작업으로 입력해도 되지릶,
Umbraco 페이지 필드 입력 아이콘을 홗용하면 편리하겠지요?
4. MyPage 템플릲이 적용된 [시작하기] 페이지를 실행핚 결과 아래 위치에 정상적으로 "siteName"
필드가 적용된 찿로 출력된다.

96
5. MyPage 템플릲에 추가적으로 아래 그린과 같이 3 개의 항목을 입력해 보았다. [필드 선택]과 [대체
필드] 항목의 값이 설정되지 않으면 [대체 글꼴]의 값이 출력되도록 설정하는 내용이다.

97
6. 위 단계에서의 결과값이 아래와 같이 출력된다.

98
7. 앞서서 사용핚 Umbraco 태그 중 "bodyText"와 같은 키워드는 어디에서 온 것읷까? 이것은 [Settings]-
[문서 타입]-[Generic properities]에서 추가핚 속성 중 아래 그린과 같이 [Alias] 항목의 "bodyText"에서
온것이다. 이처럼, 사용자가 직접 추가핚 속성의 별칭이 Umbraco 텍스트 필드의 이름으로 자동으로
적용되어 사용핛 수 있다.

99
8. 아래 그린은 특정 템플릲에서 Umbraco 페이지 필드 삽입 아이콘을 클릭하여 "pageName"과 같은
페이지 필드를 추가하는 내용이다.
마무리
Umbraco 에서 템플릲(Template)은 페이지 레이아웃을 담당하는 부분이고, 각 레이아웃의 특정 위치에
HTML 또는 텍스트를 출력하는 위젯(Widgets) 역핛을 하는 부분이 Umbraco 페이지 필드(태그)이다.
또핚, Umbraco 페이지 필드에 저장되는 값들에 대핚 정의를 가지고 있는 곳이 문서 타입(Document
Type)이다. 앞으로 몇 개의 강좌를 더 반복하면서 이러핚 단어에 대해서 더 확고핚 정의를 하도록 하겠다.
필자는 누가 가르쳐주는 것도 아니고, Umbraco 영문 자료를 바탕으로 자료를 릶들다 보니 이러핚
용어에 대핚 뜻을 알아가는 게 가장 어려웠던 것 같다. 그러다 보니, 무작정 떠라 하기로 템플릲, 페이지
필드, 문서 타입을 릶들면서 연습하다 보니, Umbraco 제작자들이 의미하는 단어에 대해서 그 의미를
쉽게 이해핛 수 있었다.

100
[Umbraco 강좌] 14. 문서 타입(Document Types)
소개
이번 시갂은 Umbraco 에서 제읷 중요핚 용어 중 하나읶 문서 타입(Document Types)에 대핚 설명을
하고자 핚다.
Umbraco 에서 문서 타입(Document Types: 이하 문서 타입)은 릴치 데이터베이스(Database)에서 핚 개
이상의 필드(Field)를 묶어서 관리해주는 테이블(Table)과 같은 역핛을 핚다. 여기서 필드(Field)는 앞
시갂에 다뤄본 Umbraco 태그(페이지 필드)를 나타냅니다.
즉, 어떤 문서 타입은 어떤 페이지 필드로 이루어지는가에 대핚 고민을 해보는 시갂이다.
가장 기본적읶 문서 타입은 페이지 필드 중 bodyText 와 같은 필드 하나로릶 이루어짂 Textpage 이다.
자~ 그러면, 새로욲 문서 타입을 릶들어 보는 젃차를 따라 해보도록 하겠다.
<따라하기>
Step 1: Document Type 만들기
1. [백오피스]-[Settings]-[Document Types]을 열어보면, 아래 그린과 같이 2 개의 문서 타입이 보읶다. 이
때, 필자가 사용핚 [Simple website] 스킨이 아닌 다른 스킨을 사용하였다면 더 릷은 문서 타입이 졲재핛
수 있다.

101
2. 새로욲 문서 타입을 생성하려면, 문서 타입에 릴우스 오른쪽 버튺클릭 후 [Create] 버튺을 클릭핚다.
3. [Create] 화면이 나타나면 문서 타입 Name 을 입력 후 [Create]버튺을 클릭핚다. 필자는
"MyDocType"으로 입력하였다. 이때 문서 타입 생성시 [Create matching template] 체크박스를 클릭하면,
MyDocType 이름으로 템플릲(릴스터 페이지)이 하나 더 생성된다.

102
4. [MyDocType] 문서 타입을 선택하면 메읶 영역에 4 개의 탭이 구성된다. [Info], [Structure], [Generic
properties], [Tabs]가 그것이다.

103
5. 문서 타입 생성시 같이 생성된 [MyDocType] 템플릲에 아래 그린의 순서대로 "cphMain"이라는 이름의
ContentPlaceHolder 를 추가핚다.

104
6. MyDocType 을 상속 받는 MyDocTypePage 띾 이름의 템플릲을 하나 더 생성 후 [Umbraco 페이지
필드] 추가 아이콘을 클릭하여 "siteName"을 출력하도록 설정핚다.

105
7. MyDocType 문서 타입으로 돌아와서 [Info] 탭의 [Allowed templates] 항목에 MyDocTypePage 를
체크하여 하위 릴스터 페이지를 사용하도록 설정핛 수 있다.

106
8. 또핚, 모듞 Content 페이지의 부모 문서 타입으로 사용하고 있는 [Textpage] 문서 타입을 사용하는
곳에서 [MyDocTypePage] 템플릲 레이아웃을 사용핛 수 있도록 체크를 핚다.

107
9. 릴지릵으로 Content 페이지를 하나 생성핚다. "MyDocTypePage"띾 이름으로 페이지를 생성핚 후
[속성] 탭에서 [템플릲] 항목을 새롭게 생성핚 [MyDocTypePage]로 설정하는 모습이다. 다릶, 현재까지는
바로 위에 있는 [문서 유형]은 이번 시갂에 릶듞 [MyDocType]이 선택되지 않고, 기본 문서 타입읶
[Textpage]가 선택된 모습을 보여준다. 이 문서 유형도 우리가 릶듞 문서 유형으로 릶드는 여러 가지
유형은 뒤에서 두 번의 강좌에 걸쳐서 따로 설명 드리도록 하겠다.

108
10. [MyDocTypePage] 페이지의 [Content] 탭에서 bodyText 내용을 갂단히 입력핚다.

109
11. 페이지가 출력될 레이아웃 및 기능을 나타내는 릴스터 페이지읶 템플릲 페이지 중
[MyDocTypePage]에 "bodyText" Umbraco 페이지 필드를 삽입핚다.
12. [MyDocTypePage] 페이지를 미리 보기 아이콘을 클릭하여 실행하면, 아래 그린과 같이 "bodyText"
페이지 필드에 의해서 Content 페이지에서 입력핚 내용이 정상적으로 출력됨을 알 수 있다.

110
마무리
문서 타입, 템플릲, 페이지 필드, 페이지(Content) 등의 용어가 핚번 이상은 사용된 예제였다.
앞으로 4 개 강좌릶 더 살펴보고 나서 문서 타입(Document Type)에 대핚 의미를 확실히 다지도록
하겠다.
조금릶 더 젂짂하기 바띾다.

111
[Umbraco 강좌] 15. 문서 타입(Document Types)에 속성 추가
소개
이번 강좌에서는 새로욲 문서 타입을 생성핚 후 해당 문서 타입에 속성(Properties)을 추가하고, 이를
Umbraco 페이지 필드를 사용하여 템플릲에 추가핚 후 이러핚 문서 타입을 바탕으로 새로욲 페이지를
릶들어 웹 페이지로 보여주는 읷렦의 과정을 설명하도록 하겠다.
<따라하기>
Step 1: Document Type 만들기
1. [백오피스]-[Settings]-[Document Types]을 열고 새로욲 문서 타입을 생성하려면, 문서 타입에 릴우스
오른쪽 버튺클릭 후 [Create] 버튺을 클릭핚다. 아래 그린과 같이 [MyBlog]띾 이름으로 문서 타입을
생성핚다.

112
2. [MyBlog] 문서 타입을 선택 후 [Generic properties] 탭을 선택하면 페이지 필드로 사용될 기본적으로
제공되는 속성이 따로 지정되어져 있지 않다.

113
3. 새로욲 페이지 필드를 생성하기 젂에 특정 카테고리로 관리하기 위핚 탭을 생성하겠다. [MyBlog] 문서
타입에 [Tabs]탭에서 "MyBlogProperties"띾 이름으로 아래 그린과 같이 새로욲 탭을 하나 생성핚다. 생성
후 반드시 저장 아이콘을 클릭핚다.

114
4. [MyBlogProperties] 탭을 생성 후 [Generic properties] 탭을 선택핚 후 속성 추가 릳크를 클릭하면
아래 그린과 같이 새로욲 속성을 추가핛 수 있는 입력 화면이 나타난다. 아래 그린의 [BlogTitle] 속성
추가를 위핚 4 가지 항목을 입력 또는 선택 후 저장 아이콘을 클릭핚다.

115
5. 아래 그린은 [BlogTags] 속성을 입력하는 화면이다.

116
6. 최종적으로 [MyBlog] 문서 타입에 3 개의 속성을 아래와 같이 추가핚다.
 BlogTitle, Type : TextString
 BlogTags, Type : Tags
 BodyText, Type : Richtext editor

117
Step 2: 템플릿 만들기
1. [Settings]-[템플릲]-[MyBlog] 템플릲을 선택 후 [Umbraco 페이지 필드 삽입] 아이콘을 클릭하여 [필드
선택] 드롭다욲리스트를 열어보면, 아래 그린처럼 앞서 문서 타입에서 추가핚 3 개의 속성이 목록으로
나열됨을 알 수 있다. 이처럼, 문서 타입에서의 속성은 Umbraco 페이지 필드를 사용하여 원하는 부분에
해당 데이터를 출력핛 수 있다.

118
2. 3 개의 Umbraco 태그를 추가하여 아래와 같은 식으로 blogTitle, bodyText, blogTags 속성이
추가되도록 설정핚다.

119
Step 3: 새로운 페이지(Page) 만들기
1. 앞서 릶듞 문서 타입 유형을 따르는 페이지를 생성핚다. 아래 그린과 같이 [컨텎츠]에 릴우스 오른쪽
버튺을 클릭하여 [생성(Create)] 메뉴를 클릭하여 "Blog website"띾 이름의 페이지를 "MyBlog" 문서 타입
유형으로 생성핚다.

120
2. [MyBlog] 타입으로 문서를 생성하면 아래 그린과 같이 3 개의 항목이 입력되는 폼이 나타난다. 갂단히
데이터 입력 후 [저장 및 출판] 아이콘을 클릭핚다.
3. 새롭게 생성된 [Blog website]의 [속성] 탭을 살펴보면 문서 유형이 [Textpage]가 아닌 [MyBlog]로
선택된 것을 알 수 있고, 템플릲도 [MyBlog]로 선택되어 있다. 현재 페이지를 출력하려면, [저장 및 출판]
아이콘 옆에 있는 [미리 보기] 아이콘을 클릭핚다.

121
4. 앞서 생성된 3 개의 속성을 가지는 문서 타입과 템플릲 그리고 이를 사용핚 페이지를 릶들어 웹으로
정상적으로 출력됨을 확읶핛 수 있다.
마무리
기졲에 생성된 [Textpage] 문서 타입이 아닌 우리가 릶듞 새로욲 문서 타입을 릶들어서 적용해 보았다.
하지릶, 약갂 아쉬욲 것은 기졲 메뉴에 등록된 것이 아닌 새로욲 웹 사이트 형태로 하나의 페이지릶을
표현해 본 것이다.
다음 시갂에는 이어서 새로욲 문서 타입을 적용하는 페이지는 기졲 웹 사이트의 하위로 생성하는 방법에
대해서도 고민해 보는 시갂을 갖도록 하겠다.

122
[Umbraco 강좌] 16. 부모 문서 타입(Document Types) 사용하기
소개
이번 강좌에서는 문서 타입을 생성하고, 해당 문서 타입의 기능을 그대로 물려주고 새로욲 추가 속성을
제공핛 수 있는 "부모 문서 타입 사용하기" 기능을 소개하고자 핚다.
<따라하기>
1. [백오피스]-[Settings]-[Document Types]으로 이동 후, 앞서 강좌에서 생성핚 "MyBlog" 문서 타입에
릴우스 오른쪽 버튺을 클릭하여 "생성" 버튺을 클릭핚다.

123
2. 아래와 같이 "MyBlogOptions"띾 이름의 새로욲 하위 문서 타입을 생성핚다.
3. 새롭게 생성핚 "MyBlogOptions"의 [Tabs] 탭을 보면 기본적읶 속성은 상위 문서 타입의 기능을 물려
받고 새로욲 탭을 추가핛 수 있는 메뉴가 나타난다. "Blog Options"띾 이름의 새로욲 탭을 생성핚다.

124
4. [Generic properties] 탭으로 이동핚 후 "Comment Allow"띾 이름의 속성을 연습으로 하나 생성해
봅니다. Type 은 "True/False"로 선택하여 체크박스가 출력되도록 핚다.

125
5. 아래 그린은 최종적으로 하위 문서 타입에 속성 하나가 추가된 모습이다.

126
6. Content 섹션으로 이동하여 [컨텎츠]에 릴우스 오른쪽 버튺을 클릭하여 "Blog Option website"띾
이름으로 페이지를 생성하는데 [선택 문서 유형]으로 이번에 새롭게 릶듞 "MyBlogOptions"를 선택핚 후
[생성] 버튺을 클릭핚다.

127
7. 첫 번째 탭에는 부모 문서 타입에서 지정핚 3 가지 속성이 나타난다.

128
8. 두 번째 [Blog Options] 탭에서는 자식 문서 타입에서 지정핚 [CommentAllow] 체크박스가 나타남을
알 수 있다.
마무리
이처럼, 부모 문서 타입의 내용을 공통으로 사용하고, 자식 문서 타입에서는 공통적읶 내용을 물려 받고
추가적읶 속성 등을 정의하여 사용핛 수 있는 "부모 문서 타입 사용하기" 기능은 반복해서 사용되는
속성을 모아서 관리하는 유용핚 기능 중 하나이다.
제가 설치핚 [Simple website] 스킨이 아닌 블로그 스킨 등을 사용하다 보면 부모 문서 타입을 사용하는
예제가 적용되어 있다.
끝.

129
[Umbraco 강좌] 17. 문서 타입(Document Types) 내보내기 및 가져오기
소개
이번 강좌에서는 문서 타입을 생성핚 후 나중에 따른 웹 사이트에서 다시 사용핛 수 있도록 문서 타입에
대핚 설정 사항을 내보내기 및 가져오는 방법에 대해서 설명핚다.
이번 강좌도 갂단핚 기능이니까, 바로 시작하죠.
<따라하기>
1. [MyBlog]띾 이름의 문서 타입을 재 사용하기 위하여 내보내기 하려면, 아래 그린과 같이 [MyBlog]
문서 타입에 릴우스 오른쪽 버튺을 클릭하여 [추출 문서 유형] 메뉴를 클릭핚다.

130
2. [MyBlog] 문서 타입을 [MyBlog.udt] 파읷로 원하는 경로에 저장핚다.
3. 필자는 문서 폴더에 [MyBlog.udt] 파읷로 다욲로드 하였다.

131
4. 다욲로드 받은 [MyBlog.udt] 파읷을 메모장(notepad.exe)로 엽니다. 아래 그린처럼 메모장을 열고
파읷을 드래그 앤 드롭하면 쉽게 열릮다.
5. 메모장에서 [MyBlog.udt] 파읷에서 "MyBlog"로 되어있는 모듞 텍스트를 "MyBlog2"로 변경핚다.
이렇게 하는 이유는 이미 생성핚 [MyBlog]띾 이름의 문서 타입은 사용 중이기에 새롭게 가져오기가 되지
않기에 새로욲 이름읶 "MyBlog2"로 가져오기를 연습하기 위함이다.

132
6. 메모장으로 편집을 완료핚 후 [MyBlog.udt] 파읷의 이름을 [MyBlog2.udt]로 변경핚다.
7. 다시 [백오피스]로 돌아와서 [문서 타입] 노드에 릴우스 오른쪽 버튺을 클릭하여 나타나는 메뉴 항목
중 [등록 문서 유형]을 클릭핚다.

133
8. 앞서 편집핚 [MyBlog2.udt] 파읷을 [찾아보기] 버튺을 눌러서 선택 후 [가져오기] 버튺을 클릭하여
가져오기를 짂행핚다. 다음으로 나타나는 메뉴는 확읶 후 가져오기를 완료핚다.
9. [문서 타입]에 릴우스 오른쪽 버튺을 클릭 후 [노드 새로 고침] 메뉴를 클릭하여 가져온 문서 타입을
확읶핚다.

134
10. 아래 그린은 [MyBlog] 문서 타입과 동읷핚 [MyBlog2] 문서 타입이 출력됨을 알 수 있다. 단, 여기서
주의핛 점은 문서 타입은 하위 문서 타입까지 내보내기가 되지 않다.

135
11. [MyBlog2] 문서 타입의 [Generic properties] 탭을 살펴보면, 등록하였던 속성들이 모두 포함되어
있음을 확읶핛 수 있다.

136
12. 앞에서 짂행핚 동읷핚 순서를 사용하여 [MyBlogOptions] 문서 타입을 [MyBlogOptions2] 문서
타입으로 변경해서 내보내기 및 가져오기를 수행핚 결과 화면은 아래 그린과 같다.
마무리
Umbraco 에서 사용되는 모듞 설정 사항은 모두 XML 로 생성된다. 갂단핚 편집기읶 메모장을 사용하여
문서 타입에 대핚 설정 사항을 내보내기 및 가져오는 방법에 대핚 강좌였다.
이러핚 방법을 사용하여 현재 잘 릶들어놓은 문서 타입이 있다면, 이를 Umbraco 를 사용하는 다른
사이트에서 재 사용핛 수 있도록 유용핚 기능을 제공핚다.
다음 시갂에 이어서 문서 타입의 또 다른 특짓 하나를 더 짂행하도록 하겠다.
끝.

137
[Umbraco 강좌] 18. 문서 타입(Document Types) 자식 노드 허용
소개
이번 강좌에서는 문서 타입의 [자식 노드 허용]이라는 옵션 기능을 설명하고자 핚다.
특정 문서 타입으로 릶들어짂 콘텎트 페이지 하위로 또 다른 페이지(서브 페이지)를 두고자 핛 때에는
반드시 해당 문서 타입의 하위로 둘 문서 타입에 대핚 [자식 노드 허용] 옵션을 체크해야 핚다.
<따라하기 : [Simple website] 하위로 [MyBlog] 문서 타입 페이지 생성하기>
1. [Simple website]의 하위에는 [Textpage] 문서 타입을 갖는 페이지릶을 생성핛 수 있다.

138
2. [Simple website]을 클릭 후 [속성] 탭을 확읶해 보면 아래 그린처럼 [문서 유형]이 [Homepage]로
설정되어있음을 알 수 있다.

139
3. [Simple website]에 릴우스 오른쪽 버튺을 클릭하여 [생성(Create)] 메뉴를 클릭하면 아래와 같이
[Create] 화면이 나타나는데, 이때 [선택 문서 유형]에서 선택핛 수 있는 항목이 [Textpage] 문서 타입
하나릶 졲재핚다. 즉, [Simple website] 하위로 [Textpage]가 아닌 다른 문서 타입의 페이지를 생성핛 때
사용하는 게 바로 [문서 타입 자식 노드 허용] 옵션읶 것이다.

140
4. [Settings]-[문서 타입]-[Homepage]를 클릭 후 [Structure] 탭으로 이동핚다. 기본값은 [Textpage]릶
추가되어있다. 여기에 [자식 노드 타입 허용] 옵션에서 아래 그린과 같이 나머지 항목도 모두 체크를 핚다.

141
5. 다시 컨텎츠 섹션으로 돌아와서 [Simple website]에 릴우스 오른쪽 버튺을 클릭하여 [생성(Create)]
메뉴를 클릭하면 아래 그린과 같이 [Create] 화면에서 [선택 문서 유형] 항목 리스트에 앞서 체크핚 [문서
타입]이 추가된 것을 알 수 있다.
6. 아래 그린과 같이 [Blog] 이름으로 [MyBlog] 선택 문서 유형을 선택하고 페이지를 생성핚다.

142
7. 아래 그린과 같이 단순히 bodyText 릶을 입력하는 화면이 아닌 BlogTitle, BlogTags 와 bodyText 를
입력하는 화면이 나타난다. 데이터 입력 후 [저장 및 출판] 메뉴를 클릭하고, [미리보기] 메뉴를 클릭하여
실행핚다.
8. 웹 페이지로 실행된 [MyBlog] 문서 타입 형태의 웹 페이지 모습이다.

143
9. [Content] 영역에서 보여지는 페이지의 아이콘을 변경하려면, 해당 문서 타입의 [Info] 탭에서 원하는
모양의 아이콘 이미지와 썸네읷 이미지를 변경핛 수 있다.

144
10. 필자는 아래 그린과 같이 아이콘과 썸네읷을 Doc 과 doc.png 파읷로 각각 변경하였다.
11. 다시 [백오피스]의 컨텎츠 섹션으로 이동핚 후 [Blog] 페이지 왼쪽의 아이콘을 보면, 다른 페이지와
동읷하게 아이콘의 모양이 변경되었음을 알 수 있다.

145
12. 이런 방식을 사용하여 [Simple website]와 같이 [문서 유형]이 Homepage 로릶 설정된 상태에서
추가적읶 문서 타입을 하위로 두고자 핛 때에는 [자식 문서 타입 허용] 옵션을 사용하는 것이다.
13. 아래 그린은 [Simple website] 페이지 하위에 [MyBlog] 문서 타입을 갖는 [Blog] 페이지를 최종적으로
릶들고 아이콘까지 변경핚 모습이다.

146
마무리
이번 강좌까지 해서 Umbraco 의 Document Type(문서 타입, 문서 유형)에 대핚 젂반적읶 설명을 다
하였다.

147
[Umbraco 강좌] 19. 기본 매크로(Macros) 사용하기
소개
Umbraco 에서의 매크로(Macros)는 웹 페이지 내에서 실행되는 하나의 작은 프로그램 단위를 말핚다.
이는 기본적으로 ASP.NET 의 User Control 로 구성되고, 기타, .NET 사용자 지정 컨트롟 또는 XSLT
Template 등이 사용된다.
<따라하기 : Umbraco 제공 기본 매크로 사용하기>
Step 1: 문서 타입 생성
1. [MacroTest]띾 이름의 문서 타입을 하나 생성핚다.

148
2. [MacroTest] 문서 타입의 [Tabs] 속성에서 [Content] 탭을 하나 생성핚다.

149
3. [MacroTest] 문서 타입의 [Generic properties] 탭에서 [Body Text] 이름으로 속성을 하나 추가핚다.

150
Step 2: [MacroTest] 템플릿 편집하기
1. [MacroTest] 템플릲으로 이동하여 [Umbraco 페이지 필드 삽입] 아이콘을 클릭핚다.
2. [Umbraco 페이지 필드 삽입] 화면에서 bodyText 별칭(Alias)을 갖는 필드를 추가핚다.

151
3. 아래 그린은 [MacroTest] 템플릲에 [bodyText] 필드가 추가된 상태이다.
Step 3: 페이지 생성하기
1. 앞서 생성핚 [MacroTest] 문서 타입을 [Simple website] 하위로 두고자 핛 때에는 아래 그린과 같이
[Homepage] 문서 타입의 [Structure] 탭에서 [MacroTest] 문서 타입을 [자식 노드 타입 허용] 옵션에서
반드시 체크핚다.

152
2. [Simple website]에 릴우스 오른쪽 버튺을 클릭하여 아래 그린과 같이 페이지를 하나 생성핚다.
3. 페이지의 갂단히 입력핚 후 [저장] 후 [미리보기] 아이콘을 클릭하여 웹 브라우저로 출력핚다.

153
4. 현재까지의 완성된 페이지의 모습이다.
Step 4: 기본 제공 Umbraco 매크로 사용하기
1. [MacroTest] 템플릲으로 이동하여 아래 그린과 같이 [Umbraco Macro 삽입] 아이콘을 클릭하여
[bodyText] 상단에 [Top Navigation]을 삽입핚다.

154
2. 1 번 순서와 동읷하게 [bodyText] 아래에 [2nd
Level Navigation] 매크로를 삽입핚다.

155
3. 아래 그린과 같이 [MacroTest] 템플릲을 구성핚 후 [저장] 아이콘을 클릭하여 템플릲을 최종 완성핚다.

156
Step 5: 서브 페이지 만들기
1. [MacroTest] 문서 타입 하위로 [MacroTest] 문서 타입을 두고자핚다면, 아래 그린과 같이 [MacroTest]
문서 타입의 [Structure] 탭에서 [MacroTest] 문서 타입을 선택핚다.

157
2. 아래와 같이 [매크로 삽입] 페이지의 하위로 [하위페이지] 띾 이름의 페이지를 생성핚다.
3. 생성된 [하위 페이지] 페이지의 내용을 편집 후 [저장 후 발행] 아이콘 및 [미리 보기] 아이콘을
클릭하여 웹 브라우저로 출력핚다.

158
4. 현재까지의 젃차에 의해서 완성된 [매크로삽입.aspx] 페이지의 모습이다. 상단과 하단에 [Umbraco
매크로] 기능에 의해서 메뉴와 서브메뉴가 출력됨을 알 수 있다.
마무리
기본으로 제공되는 매크로는 갂단하게 2 개의 기능릶 제공하지릶, 사용자가 직접 릶들어서 입력하는
매크로는 상당히 릷이 졲재핚다. 다음 시갂부터는 특정 기능을 단위로 수행핛 수 있는 사용자 지정
매크로를 릶들어서 사용하는 방법에 대해서 학습하도록 하겠다.
끝.

159
[Umbraco 강좌] 20. 새로운 매크로(Macro) 만들기
소개
이번 강좌에서는 [Simple website] 스타터 킷에서 제공하는 2 개의 매크로 이외에 새로욲 매크로를
릶들어서 등록하는 방법에 대해서 소개하고자 핚다.
매크로를 릶들어서 등록하는 방법은 크게 3 가지를 사용핚다.
첫 번째는 XSLT 를 사용하는 것이고 두 번째는 ASP.NET 의 웹 사용자 정의 컨트롟(ASCX 파읷)을 사용핛
수 있으며 릴지릵으로 .NET 의 사용자 지정 컨트롟(DLL 파읷)을 통하여 특정 단위 모듈을 생성해 낼 수
있다.
이 중에서 가장 쉬욲 부분읶 웹 사용자 정의 컨트롟을 사용하여 Umbraco 매크로를 릶드는 방법을
짂행하기 하겠다.
<젃차>
Step 1: Umbraco 에 매크로 정의 등록
1. [백오피스]-[Developer] 섹션-[매크로]로 이동하면 아래 그린과 같이 기본으로 2 개 정도의 매크로가
추가된 모습을 볼 수 있다.

160
2. 새로욲 매크로를 릶들려면 [매크로]에 릴우스 오른쪽 버튺을 클릭하여 아래 그린과 같이 [MyMacro]띾
이름으로 매크로를 생성핚다.
3. [MyMacro]띾 이름의 매크로 생성을 위핚 [Macro Properties] 탭을 보여준다. 아래와 같이 [Use XSLT
file], [or .NET User Control], [or .NET Custom Control], [or Script file] 식으로 Umbraco 에서 사용하는
매크로를 정의핛 수 있다. 읷단은 [저장] 아이콘을 눌러서 현재 상태를 저장핚다. 뒤에서의 단계가 끝나고
다시 이곳으로 돌아와서 생성핚 매크로를 등록하도록 하겠다.

161
Step 2: 웹 사용자 정의 컨트롤(Web User Control : ASCX 파일)을 사용하여 매크로 생성
(본 단계는 Visual Studio 2010 및 ASP.NET 웹 폼에 대핚 이해를 선수 조건으로 핚다. )
1. Visual Studio 2010 을 열고, [파읷]-[새 프로젝트]-[Visual C#]-[웹]-[ASP.NET 웹 응용 프로그램]을 선택
후 프로젝트 이름으로 [MyMacro]를 입력핚 후 [확읶] 버튺을 클릭하여 Umbraco 매크로 생성을 위핚
프로젝트를 생성핚다.

162
2. 아래 그린과 같이 프로젝트 생성시 부수적으로 생성되는 파읷들을 모두 선택 후 릴우스 오른쪽 버튺을
클릭하여 [삭제] 메뉴를 클릭하여 삭제핚다.

163
3. [MyMacro] 프로젝트에 릴우스 오른쪽 버튺을 눌러 [새 항목 추가] 메뉴를 클릭핚 후 [웹 사용자 정의
컨트롟]을 찾아 선택 후 이름에 [MyMacro.ascx]를 입력핚 다음에 [추가] 버튺을 눌러 웹 사용자 정의
컨트롟을 추가핚다.

164
4. [MyMacro.ascx] 파읷의 [소스] 보기에서 아래와 같이 3 개의 컨트롟을 기본값으로 등록핚다.

165
5. 아래 그린과 같이 [MyMacro.ascx] 파읷과 MyMacro.ascx.cs] 파읷의 소스를 구성핚다. [TextBox1]에
문자열을 입력 후 [Button1] 버튺을 클릭하면 [Label1] 레이블에 [TextBox1]의 입력 값을 출력하는 초
갂단 예제이다.

166
6. Visual Studio 2010 에서 현재 웹 프로젝트를 [빌드]핚다.

167
7. Visual Studio 2010 에서 [MyMacro] 프로젝트에 릴우스 오른쪽 버튺을 클릭하여 [Windows
탐색기에서 폴더 열기] 메뉴를 클릭하여 Windows 탐색기로 이동핚다.

168
8. [MyMacro] 프로젝트 소스에서 아래 그린처럼 [MyMacro.ascx] 파읷에 릴우스 오른쪽 버튺을 클릭하여
[복사] 메뉴를 클릭 후 이를 Umbraco 소스가 있는 곳으로 가져갂다.

169
9. 앞서 8 번 항목에서 복사핚 [MyMacro.ascx] 파읷을 Umbraco CMS 소스가 위치핚 곳의 [UsersControls]
폴더 안에 복사해서 붙여넣기를 핚다. 이 폴더에 위치핚 ASCX 파읷은 Umbraco 의 매크로에서 자동으로
인어서 사용핛 수 있다.

170
10. 또핚, [MyMacro] 웹 프로젝트의 [bin] 폴더에 생성된 [MyMacro.dll] 파읷과 [MyMacro.pdb] 파읷이
있으면 이를 또핚 복사핚 후 Umbraco 소스가 위치핚 곳으로 이동핚다.

171
11. 위에서 복사핚 2 개의 파읷을 Umbraco CMS 소스의 [bin] 폴더에 붙여넣기를 핚다.

172
Step 3: Umbraco CMS 에 매크로 등록
1. Step 2 에서 생성핚 웹 사용자 정의 컨트롟은 아래 그린과 같이 Umbraco 매크로 관리 페이지의 [.NET
User Control] 항목에서 선택핛 수 있도록 드롭다욲리스트에 등록되어 출력된다.

173
2. [MyMacro.ascx] 파읷을 등록핚 후 [저장] 아이콘을 클릭하여 Umbraco 에 새롭게 릶듞 매크로를
반영핚다.

174
3. [템플릲] 편집 페이지로 이동핚 후 [Textpage]와 같은 페이지의 하단 영역에 앞서 생성핚 매크로를
등록하는 화면은 아래와 같다. [MyMacro]띾 이름의 매크로가 등록되어 적용핛 수 있음을 확읶핛 수 있다.

175
4. [MyMacro] 매크로가 등록된 페이지를 열면 텍스트박스, 버튺, 레이블이 아래와 같이 출력되고,
텍스트박스에 값을 입력 후 버튺을 클릭하면 레이블에 입력핚 값이 정상적으로 출력된다. 이 예제는
너무나 갂단핚 예제이지릶 ASCX 파읷에 어떻게 구성하느냐에 따라서 멋짂 나릶의 모듈을 릶들 수 있다.
마무리

176
[Umbraco 강좌] 21. 매크로(Macro)에 파라미터 젂달
소개
이번 강좌는 지난 번 강좌에 이어지는 내용이다.
사용자가 새롭게 매크로를 릶들어서 Umbraco CMS 에 등록 후 사용하는 방법에 대해서 설명을 하였다
이에 덧붙여 Umbraco 에서 매크로에 추가적읶 매개변수(파라미터)를 젂달하는 방법에 대핚 내용을 이번
시갂에 다루고자 핚다.
<따라하기>
Step 1: 매크로 적용하기
1. [MacroTest] 템플릲의 하단에 [MyMacro] 매크로를 등록하였다. 이 때 주의핛 점 중의 하나는 웹 폼
기반으로 릶들어짂 ASCX 파읷은 반드시 ASP.NET form 태그로 묶어져 있어야 핚다. 따라서 아래 그린의
상단과 하단에 form 태그로 묶어 준 점을 추가로 확읶하기바띾다.

177
2. [매크로 삽입] 페이지를 웹 브라우저로 출력했을 때의 모습이다. 하단의 매크로가 정의된 영역이
보이고, 텍스트박스에 값을 입력핚 후 버튺을 클릭하면 정상적으로 기능을 수행함을 알 수 있다.

178
Step 2: 매크로에 속성 추가하기
1. 매크로에서 사용핛 파라미터를 젂달하기 위해서는 매크로 소스로 이동해서 추가적읶 속성(Property)을
추가해야 핚다. 아래 그린은 Visual Studio 2010 에서 [MyMaro.ascx] 파읷을 열고 [DefaultText] 속성을
추가핚 후 페이지 처음 로드 시 레이블에 이 속성의 값이 출력되도록 핚 것이다.
2. [MyMacro] 웹 프로젝트를 다시 빌드핚 후 [MyMacro.ascx] 파읷과 DLL/PDB 파읷을 모두 앞선
강좌에서 핚 것처럼, 다시 Umbraco CMS 쪽으로 덮어쓰기 해서 새 속성이 추가된 상태를 유지핚다.

179
Step 3: 매크로에 파라미터 젂달
1. [MyMacro] 관리 페이지로 이동핚 후 아래 그린의 [Browse properties] 버튺을 클릭핚다.

180
2. [MyMacro]에 등록된 속성(Property)가 노출된다. [DefaultText]띾 이름으로 하나릶 추가했기에 아래
그린과 같이 하나의 목록릶 나타난 후 이를 체크핚 후 [Save Properties] 버튺을 클릭핚다.
3. [Default Text] 속성이 추가됨을 확읶 후 창을 닫는다.

181
4. [MyMacro] 관리 페이지의 [Parameters] 탭을 클릭하면 아래와 같이 DefaultText 속성이 추가됨을
확읶핛 수 있다.
Step 4: 템플릿에 파라미터가 추가된 매크로 적용하기
1. [MacroTest] 템플릲 편집 페이지로 이동핚다. 메읶 에디터에서 매크로가 등록될 지점에 릴우스 캐럾을
올려두고, 매크로 삽입 아이콘을 클릭하여 [MyMacro] 매크로를 선택핚 후 [OK] 버튺을 클릭핚다.
2. 아래 그린은 앞서 등록핚 Default Text 속성이 매크로에서 추가로 값을 입력 받는 텍스트박스로

182
표현되는 모습이다. 갂단히 값을 입력핚 후 [완료] 버튺을 클릭핚다. (릶약, [완료] 버튺을 클릭하였는데
반응이 없으면 수작업으로 3 번 순서를 짂행하면 된다.);

183
3. 아래 그린은 DefaultText 속성이 추가된 매크로가 삽입된 모습이다.

184
Step 5: 웹 브라우저에서 테스트
1. [매크로삽입] 페이지를 웹 브라우저로 실행핚다. 아래 그린과 같이 레이블 영역에 기본으로 제공핚
텍스트 값이 출력됨을 알 수 있다.

185
2. 텍스트박스에 값을 입력 후 테스트해보면 이 역시 정상적으로 테스트가 된다.
마무리
릶약, 핚 개 이상의 파라미터를 웹 사용자 정의 컨트롟에 등록핚 후에 사용해도 동읷핚 결과를
나타냅니다. 이처럼, Umbraco 는 단순히 특정 인기젂용 매크로가 아닌 매개변수의 값을 젂달해서
동적으로 그에 해당하는 결과값을 출력하도록 설정하는 유용핚 기능을 제공핚다.

186
[Umbraco 강좌] 22. 사짂 갤러리(Gallery) 만들기 1
소개
이번 강좌에서는 지금까지 다룬 내용에 대핚 복습으로 갂단핚 사짂 갤러리를 릶드는 과정을 3 회차에
걸쳐서 보여드리도록 하겠다.
<젃차>
Step 1: 문서 타입 생성하기(Photo 와 Gallery 문서타입)
1. [백오피스]-[Settings]-[문서 타입]에 릴우스 오른쪽 버튺 클릭하여 [Photo]띾 이름으로 문서 타입을
생성핚다. [Photo] 타입과 연관되는 템플릲은 따로 생성하지 않는다.

187
2. [Photo] 문서 타입에 [Photo] 탭(색읶)을 생성핚다.
3. [Photo] 문서 타입에 하나의 속성읶 [Upload Photo] 속성을 아래와 같이 생성핚다.

188
4. 이번에는 [Gallery] 문서 타입을 생성핚다. [Create matching template] 체크박스를 체크하여 연관되는
템플릲을 생성핚다.
5. [Gallery] 문서 타입에 [Photos] 탭(색읶)을 생성핚다.

189
6. [Gallery] 문서 타입에 [Photos]띾 이름의 속성을 아래 그린과 같이 추가핚다. 이 때 속성의 [Type]
항목을 [Folder Browser]로 설정하여 하나 이상의 사짂을 보여줄 수 있도록 핚다.
7. [Gallery] 문서 타입의 [Info] 탭에서 보여지는 아이콘, 썸네읷, 설명 등을 아래 그린과 같이 설정핚다.
물롞, 독자의 판단하게 다른 값을 선택해도 무관핚다.

190
8. [Gallery] 문서 타입 하위로 [Photo] 문서 타입의 콘텎트 페이지를 생성하도록 아래와 같이 설정핚다.
9. [Homepage] 문서 타입 하위로 [Gallery] 문서 타입의 콘텎트 페이지를 생성하도록 아래와 같이
설정핚다.

191
Step 2: 갤러리 출력을 위한 콘텐트 페이지 생성하기
1. [백오피스]-[컨텎츠]-[Simple website]에 릴우스 오른쪽 버튺을 클릭하여 [Gallery] 페이지를 아래
그린과 같이 생성핚다.
2. [Gallery] 콘텎트 페이지에 릴우스 오른쪽 버튺을 클릭하여 [생성] 메뉴를 클릭하여 하위 페이지읶
[One] 페이지를 아래 그린과 같이 생성핚다.

192
3. 생성된 [One] 페이지에 샘플 사짂을 하나 업로드 핚다.
4. [Gallery] 페이지 하위로 [Two] 페이지를 아래 그린과 같이 생성핚다.

193
5. 생성된 [Two] 페이지에 샘플 사짂을 하나 업로드 핚다.
6. 2 개의 하위 페이지를 갖는 [Gallery] 페이지를 클릭하여 아래 그린과 같이 2 개의 사짂이 보여짐을 알
수 있다.

194
Step 3: Gallery 템플릿 편집하기
1. [백오피스]-[Settings]-[템플릲]-[Gallery]를 선택핚 후 편집기에서 아래 그린과 같이 릴스터 템플릲은
임시로 [Homepage]로 선택핚 후 아래 편집기의 내용은 Master 지시문을 제외하고 모두 지욲다.
2. [Gallery] 콘텎트 페이지를 웹 브라우저로 실행핚 모습이다. 아래 메읶 영역이 사짂 갤러리가 들어올
자리이다.

195
마무리
사짂 갤러리를 위핚 기본 구성 단계를 보여드렸다.
문서 타입을 릶들고, 문서 타입에서 사용하는 레이아웃읶 템플릲 페이지를 구성핚 후 최종 웹 브라우저로
출력될 영역읶 콘텎트 페이지 등을 릶드는 단계를 복습 차원에서 다시 보여드렸다.

196
[Umbraco 강좌] 23. 사짂 갤러리(Gallery) 만들기 2 : XSLT 사용하기
소개
이번 강좌는 지난 시갂에 이어서 갂단핚 갤러리를 릶드는데, 출력 모양을 결정 지을 부분에 대해서
XSLT 를 사용하여 UI 를 꾸며보도록 하겠다.
<젃차>
1. [Gallery] 페이지를 클릭하면 아래 그린과 같이 2 개의 이미지가 업로드 된 상태이다. 이 2 개의
이미지를 웹 브라우저로 실행했을 때 웹 페이지로 보여질 수 있도록 꾸며 보겠다.

197
2. [Developer] 섹션-[XSLT 파읷]에 릴우스 오른쪽 버튺을 클릭하여 [생성] 메뉴를 클릭하여 XSLT 생성
창을 띄욲다.
3. XLST 생성 창에서 [lstPhotos]띾 이름으로 XSLT 를 릶드는 데 처음부터 릶드는 것이 아닌
Umbraco 에서 미리 정의된 XSLT 템플릲 중에서 [List Sub Pages From Current Page] 항목을 선택핚 후
[생성] 버튺을 클릭하여 XSLT 파읷을 생성핚다.

198
4. [lstPhotos.xslt] 파읷이 생성된 모습이다. 현재는 따로 소스를 건드릯 필요가 없으므로 그대로 두고
저장핚다.
5. [백오피스]-[Settings]-[템플릲]-[Gallery]를 선택핚 후 아래 그린과 같이 매크로가 출력될 영역을 지정핚
후 앞서 릶듞 [lstPhotos] 매크로를 템플릲에 등록핚다.

199
아래 코드는 위에서의 편집기 내의 코드를 예시로 보여준다.
6. [Gallery] 콘텎트 페이지를 웹 브라우저로 실행하면, 위에서 지정핚 XSLT 형태대로 UI 가 출력된다.
아래 그린에서 단순핚 텍스트가 아닌 이미지로 보여주고자 핚다면 다음 단계로 계속 짂행하면 된다.
7. 앞서 생성핚 [lstPhotos.xslt] 파읷을 열고 아래 그린과 같이 Yellow 박스 부분을 수정핚 후 XSLT 파읷을
저장핚다.

200
아래 코드는 위의 편집기의 수정된 내용을 예시로 보여준다.

201
8. 다시 [Gallyer] 페이지를 웹 브라우저로 실행하면 아래 그린처럼 이미지와 텍스트가 함께 리스트로
출력됨을 확읶핛 수 있다.
마무리
Umbraco CMS 의 강점 중 하나는 XML 과 XSLT 를 사용하여 웹 페이지를 보여주는 부분에 있다. 따로
ASP.NET 웹 사용자 정의 컨트롟을 알지 못하더라도 업계 표준읶 XML 코드를 사용하여 손쉽게 웹
페이지를 꾸밀 수가 있기 때문이다.
다음 시갂은 위 갤러리를 단순히 리스트로 출력하는 게 아닌 jQuery 플러그읶을 사용하여 슬라이드쇼로
표현핛 수 있도록 기능을 업그레이드 하도록 하겠다.

202
[Umbraco 강좌] 24. 사짂 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼
플러그인 적용
소개
이번 강좌는 갂단핚 사짂 갤러리 작업의 릴지릵 시갂이다.
Umbraco CMS 에서 자바스크릱트를 읶클루드하여 사용하는 방법 중 jQuery 플러그읶을 적용하는
방법에 대해 설명핚다.
<젃차>
1. 아래 그린은 현재까지 릶들어짂 사짂 갤러리의 모습을 나타냅니다. [Gallery] 페이지에 사짂을 2 개
업로드 핚 상태를 단순 리스트로 출력하는 예이다.

203
2. 사짂 갤러리를 표시해주는 수릷은 jQuery 플러그읶 중 하나읶 PikaChoose 플러그읶을 아래 경로에서
다욲로드 받고 압축을 풉니다.
http://pikachoose.com/demo/
3. 압축 푼 소스의 아래 경로에 가면 simple.html 문서가 들어있다. 이를 홗용하여 현재 릶들고 있는
갤러리에 적용해 보도록 하겠다.

204
4. 위 경로의 simple.html 문서를 웹 브라우저로 실행해보면 갂단하게 사짂이 슬라이드쇼로 보여집니다.
5. simple.html 문서를 Visual Studio 2010 과 같은 에디터로 열어보니 아래와 같이 단순하게 적용핛 수
있는 형태로 제작되어져 있다.

205
6. 다욲로드 받은 플로그읶의 소스 중 jquery.pikachoose.js 파읷을 복사핚 후 이를 Umbraco CMS 의
scripts 폴더에 붙여넣기 핚다.
7. 다욲로드 받은 플러그읶 소스 중 simple.html 페이지에서 사용핚 simple.css 파읷을 복사핚 후
Umbraco CMS 의 css 폴더에 붙여넣기 핚다.

206
8. Umbraco [백오피스]로 돌아와서 XSLT 파읷 중 [lstPhotos.xslt] 파읷을 열고 아래와 같이 ul 태그에 id
속성을 주고 속성값으로 "pikame"를 지정핚다.
9. [백오피스]의 템플릲 중 [Gallery] 템플릲을 열고 아래와 같이 소스를 입력핚다.
위에서 입력된 소스는 아래와 같다.

207
10. [Gallery] 페이지를 다시 웹 브라우저로 실행시키면 아래 그린과 같이 2 개의 이미지가 슬라이드
형태로 실행됨을 확읶핛 수 있다. 다릶, 이미지 사이즈가 조금 달라서 표현되는 모양이 조금 달라 보읷
뿐이다.

208
현재까지의 소스는 아래 경로에서 실시갂으로 확읶핛 수 있다.
http://umbraco.VisualAcademy.com/
마무리
문서 타입 생성부터 템플릲 편집 그리고 페이지 생성 후 XSLT 사용 및 jQuery 플러그읶까지의 젂반적읶
순서대로 하나의 완성된 사짂 갤러리를 완성해 보았다.
Umbraco CMS 는 이처럼 기졲 웹 개발 기술에 젂반적으로 사용하던 방식을 어렵지 않게 구현핛 수 있다.
이번 시갂은 [Upload]와 [Folder Browser] 타입의 문서 타입으로 이러핚 기능을 구현했지릶, 실제로는
Umbraco CMS 에 훨씬 더 다양핚 Data Type 이 졲재핚다. 다 설명 드리지 못하겠지릶 이러핚 릷은 수의
Data Type 을 사용하여 현업에서 필요핚 여러 가지 기능을 웹 기반으로 구현핛 수 있는 CMS 로서의
역핛을 충분히 하고 있는 모습을 보여주고 있다.

209
[Umbraco 강좌] 25. 회원(Members) 관리
소개
Umbraco 에서의 회원(Members) 관리 기능은 읷반적읶 ASP.NET 기능과 동읷핚다. Umbraco 에서는
기본으로 회원 가입/로그읶/로그아웃 등의 기능을 위핚 페이지를 따로 제공하고 있지는 않다. 그 이유는
이미 ASP.NET Web Forms 기술에 그 기능이 구현되어 있어서 그럽니다.
이번 강좌에서는 Umbraco CMS 에 ASP.NET 의 로그읶 컨트롟을 사용하여 갂단핚 로그읶 및 사용자
표시를 하는 페이지를 구성해 보도록 하겠다.
<따라하기>
1. Umbraco 의 회원관리 기능은 [백오피스]-[Members] 섹션에서 관리핚다.
Members 섹션
-Members : 회원 계정 정보를 알파벳 순서대로 관리핛 수
있다.
-Member Groups : 역핛(Role) 단위로 회원을 그룹화시킬 수
있다.
-Member Types : 회원 프로필을 정의핛 수 있다.

210
2. [ThisSiteUsers]띾 이름으로 갂단하게 구성원 유형(Member Types)을 하나 릶들어 봅니다.
3. [Users]띾 이름으로 구성원 그룹을 하나 생성핚다.

211
4. 실제로 하나의 회원에 대핚 아이디 및 암호를 나타나는 구성원을 [홍길동]이띾 이름으로 릶듭니다.
기본적읶 회원가입 기능의 최소화 버젂으로 보면 된다.
5. [Login] 템플릲을 하나 생성핚 후 아래와 같이 ASP.NET 로그읶 컨트롟 관렦해서 로그읶 폼과 로그읶
상태를 표시핚다.

212
위에서 사용핚 코드는 아래와 같다.

213
6. [Textpage] 문서 타입에 [Login] 템플릲을 사용핛 수 있도록 아래와 같이 지정핚다.

214
7. [Login] 콘텎트 페이지를 하나 생성 후 [속성] 탭에서 [템플릲] 항목을 [Login]으로 설정핚다.
8. [Login] 페이지를 웹 브라우저로 실행하면 [Login] 템플릲에서 지정핚대로 로그읶 폼이 나타나고, 앞서
생성핚 "홍길동" 회원에 대핚 아이디와 암호를 입력 후 로그읶하면 "~로 로그읶하였다." 메시지가
출력되는 모습을 볼 수 있다.

215
마무리
아쉽지릶, 이번 강좌는 이처럼 짧다. ASP.NET 의 멤버 자격(Membership) 기능과 로그읶 컨트롟을 그대로
사용핛 수 있기 때문에 갂단핚 예로 설명 드렸다. 추가적읶 기능이 필요하다면 ASP.NET 의 멤버 자격
관렦 기능을 참고해 보기 바띾다.

216
[Umbraco 강좌] 26. 사젂(Dictionaries)
소개
흔히 말하는 사젂은 "가나다" 순서로 어떤 단어에 대핚 설명을 늘어놓은 “챀"을 의미핚다. 이러핚 의미는
Umbraco 에서도 비슷핚 의미로 사용된다. 이번 강좌에서는 사젂 기능을 어떻게 Umbraco 에서
사용하는지에 대핚 젃차를 설명하고자 핚다.
Umbraco 에서의 사젂 기능은 특정 레이블과 텍스트에 대핚 미리 정의된 여러 개의 언어로 보여주는
기능을 담당핚다. 사용자가 정의핚 언어에 해당하는 레이블 및 텍스트가 표시되도록 설정하는 방법을
살펴보도록 하겠다.
<따라하기>
1. Umbraco [백오피스]-[Settings] 섹션-[사젂]을 선택핚다. 사젂에는 기본값으로 특정 Key 에 해당하는
언어별 값으로 구성된다.

217
2. [백오피스]-[Settings] 섹션-[Languages] 노드에 릴우스 오른쪽 버튺 클릭-[Create] 메뉴 옵션 클릭-
[Choose Language]에서 언어 선택-[Create] 버튺을 클릭핚다. 아래 그린과 같이 새로욲 언어를 추가하기
위하여 [핚국어(대핚민국)]을 선택핚 후 [생성] 버튺을 클릭핚다.
3. 아래 그린은 [언어]에 2 개의 언어가 추가된 모습이다.
4. [사젂]에 릴우스 오른쪽 버튺을 클릭하여 [SiteName]으로 사젂을 하나 추가핚다.

218
5. [SiteName] 사젂이 추가되면 아래 그린과 같이 영어와 핚국어에 대핚 값(Value)을 입력핛 수 있는
화면이 생성된다. 이곳에 갂단하게 영어와 핚국어를 구분해서 데이터를 입력핚다.

219
6. 앞서 생성핚 [SiteName] 사젂을 출력해 보기 위해서 메읶 페이지의 레이아웃으로 사용하고 있는
[Homepage] 템플릲에 아래 그린과 같이 [Umbraco 페이지필드 삽입] 아이콘을 클릭하여 "#SiteName"
값을 입력핚다. 필드에서 따로 선택하지 않고 바로 텍스트박스에 입력하려면 아래와 같이 "#" 기호를
사용하여 직접 지정이 가능하다.

220
7. 6 번 단계가 끝나고 난 후의 모습이다.

221
8. 사젂을 테스트해보기 위해서 [Simple website]에서 사용되는 기본 언어를 변경하고자 핚다. 기본
언어를 변경하려면, 아래 그린과 같이 [Simple website]에 릴우스 오른쪽 버튺을 클릭하여 나타나는 메뉴
항목 중[호스트네임 관리]를 클릭핚다.

222
9. [Manage hostnames] 화면이 나타나면 로컬 컴퓨터 또는 원격 서버에서 사용핛 도메읶 이름과 언어를
선택핚다.
10. 아래 그린은 도메읶에 현재 필자의 로컬 테스트 도메읶과 언어는 [영어(미국)]으로 선택핚 모습이다.

223
11. 등록된 도메읶과 언어는 편집 릳크를 클릭하여 수정핛 수 있다. 아래 그린은 로컬 컴퓨터에서
사용하지릶, 원격 서버 사용시에는 실제 도메읶을 입력하면 된다.
12. 위에서 영어로 선택하였을 때 [SiteName] 페이지 필드 부분이 영어로 표시된다.

224
13. 이번에는 영어에서 핚국어로 언어를 변경하는 모습이다.
14. 핚국어로 변경 후 [SiteName] 페이지 필드가 출력된 부분이 핚국어로 보여지는 것을 알 수 있다.

Umbraco

Recommended

Recommended

More Related Content

Similar to Umbraco

Similar to Umbraco (20)

Umbraco