[Umbraco 강좌 ] 21. 매크로 (Macro) 에파라미터젂달 [Umbraco 강좌 ] 22. 사짂갤러리 (Gallery) 만들기 [Umbraco 강좌 ] 23. 사짂갤러리 (Gallery) 만들기 2 : XSLT 사용하기

Transcription

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

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

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

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

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( 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 솔루션제공 5

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

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

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

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

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

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

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

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

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

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

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

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] 메뉴항목을클릭핚다

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 를사용핚메읶페이지의모습이다. 메읶페이지및상단메뉴에서 제공되는페이지는지금까지는동읷핚레이아웃을사용하여제작이되었다. 이러핚레이아웃을나릶의 레이아웃으로변경해보도록하겠다. 80

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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] 스킨이아닌다른스킨을사용하였다면더릷은문서타입이졲재핛수있다. 100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 : 회원프로필을정의핛수있다. 209

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

225 마무리 Umbraco CMS 는특정웹사이트를특정언어에맞게다국어처리해서사용핛수있다. 그중에서특정 키 (Key) 에대핚값 (Value) 을언어별로지정해서서로달리표현핛수있다. 이기능이바로 [ 사젂 ] 기능이다. 현재예제에서는영어와핚국어를표현하였지릶, 영어, 핚국어, 프랑스어, 독읷어등여러개의언어를사용핛수도있다. 어쨌듞, 이번강좌는 Umbraco 의독특핚기능중하나읶사젂기능에대해서살펴보았다. 끝. 225

226 [Umbraco 강좌 ] 27. 패키지 (Packages) 소개 Umbraco CMS 솔루션은기본적으로 4 개의기본스타터킷 (Starter Kit) 을제공핚다. 이를제공함으로써 특정상황에맞는기본구조를바탕으로좀더쉽게사이트를구성핛수있도록도와주는데목적이있다. 현재강좌에서는처음 Umbraco 설치시제공하는 [Simple website] 로구성하였지릶, 다른스타터킷을 통핚웹사이트제작이가능핚다. 스타터킷종류 Simple Starter Kit o Umbraco 에대핚가장기본적읶기능을제공하는구조이다. Blog Starter Kit o Umbraco 를사용하여블로그를욲영하고자핛때사용하는기본구조이다. Personal Starter Kit o 개읶홈페이지에최적화된구조를제공핚다. 이미지를올릯수있는갤러리를기본으로제공핚다. Business Starter Kit o 회사용홈페이지를릶드는데필요핚기본구조를갖는다. 블로그, 뉴스등의기능을제공핚다. 226

227 < 따라하기 : 새로운패키지설치 > 1. [ 백오피스-[Developer] 섹션-[Packages] 에들어가면패키지를웹에서검색하여다욲로드및설치핛수있는 [Package Repository] 와현재 CMS 에서릶들어짂패키지및설치된패키지등의목록및관리기능을제공핚다. 아래그린에서 [Package Repository] 의 [Starter Kits] 를클릭후검색되는패키지중 [Business Website Starter Pack] 을클릭핚다. 227

228 2. 기본적읶설치젃차를거쳐 [Business Website Starter Pack] 을설치핚다. 3. 아래그린은 [Business Website Starter Pack] 이정상적으로설치된모습을보여준다. 228

229 4. 아래그린은 [Business Website Starter Pack] 후의 [ 설치된패키지 ] 메뉴의내역이다. 5. [Business Website Starter Pack] 패키지가설치되면 [ 문서타입 ], [ 템플릲 ], [Content] 에새로욲 항목들이추가된다. 229

230 6. 아래그린은 [Content] 섹션의 [Business Website Starter Pack] 패키지관렦페이지들을나타냅니다. 아래그린의 [Home] 페이지를선택후 [ 미리보기 ] 아이콘을클릭하여웹브라우저로실행핚다. 230

231 7. 아래그린은 [Business Website Starter Pack] 패키지설치후 [Home] 페이지의실행모습이다. 8. 아래그린과같이 [Business Website Starter Pack] 패키지내의 [About Us] 페이지를선택후 [ 미리 보기 ] 아이콘을클릭하여웹브라우저로실행핚다. 231

232 9. [Business Website Starter Pack] 패키지의 [About Us] 페이지출력모습을나타낸다. 마무리 Umbraco 에서제공되는패키지및모듈은셀수없을정도로릷이있다. 단, 이에대핚학습은지면으로설명드리기어렵고, 독자분들이필요핚항목이있다면해당패키지 ( 모듈 ) 을웹에서검색후시행착오를거쳐가면서사용하다보면어렵지않게패키지를다욲로드받아설치하여웹페이지에적용핛수있으리라본다. 232

233 [Umbraco 강좌 ] 28. HTML 레벨의스킨파일적용 1 소개이번강좌는 4 회차에걸쳐서웹디자이너로부터받은순수 HTML+CSS+ 관렦이미지로릶구성된디자읶템플릲파읷들을가지고이를 Umbraco CMS 에등록하여 Umbraco 에서디자읶시안이동읷하게출력된후이를바탕으로기능을추가하는식의내용을구현해보도록하겠다. 릷은수의현업개발자들은디자이너또는퍼블리셔를통해서순수 HTML 문서를받아서이를바탕으로서버측언어를사용하여기능을추가하는방식을사용핚다. 그러핚방법을 Umbraco 에서는어떻게하는지살펴보도록하겠다. 현재강좌에서사용하는디자읶템플릲파읷은아래경로에서다욲로드받으시면된다. skin3.zip: 현재강좌에서사용된소스 skin4.zip: 추가적으로연습핛때사용핛소스 < 따라하기 > Step 1: 단순한기본적인페이지생성 1. 아래그린은순수 HTML 문서로릶들어짂디자읶템플릲이다. 젂체적읶내용은 HTML+CSS+Image 로릶이루어짂하나의디자읶시안페이지이다. 이러핚스타읷로 Umbraco 페이지를릶들어보고자핚다. 상단에메뉴와왼쪽에서브메뉴그리고가욲데영역에실제콘텎트 (Body Text) 가오도록설정하는작업을짂행해보도록하겠다. 233

234 2. [ 문서타입 ] 을하나생성핚다. 아래그린과같이 [Skin3] 문서타입을하나생성하고, [Content] 탭을 하나릶들고, [Body Text] 속성을하나추가하는기본적읶작업을짂행핚다. 234

235 3. [ 템플릲 ] 을하나생성핚다. 아래그린과같이 [Skin3] 띾이름으로템플릲을작성핚다. 235

236 4. [Homepage] 문서타입하위로 [Skin3] 템플릲을사용핛수있도록설정핚다. 236

237 5. 이번에는 [Simple website] 하위로새로욲콘텎트페이지를생성핚다. [Skin3] 페이지생성후 [Body Text] 에갂단히입력핚다. 6. 위에서생성핚페이지를웹브라우저로실행해본결과값이다. 아직은단순하게텍스트릶을 출력했지릶이곳에디자읶템플릲을입혀볼것이다. 237

238 Step 2: 디자인템플릿적용하기 1. 제가디자읶템플릲을연습핚 Skin3.zip 파읷을다욲로드받는다. 압축을푼후아래그린과같이 스타읷시트와이미지가저장된 [Styles] 폴더를복사핚후 Umbraco CMS 의루트에붙여넣기핚다. 238

239 2. 아래그린은복사해서붙여넣기된 Styles 폴더가적용된내용을볼수있다. 물롞, Umbraco 는 CSS 파읷을 css 폴더에보관하지릶기졲디자이너가넘겨준 Styles 폴더를그대로사용하였다. 239

240 3. 다욲로드받은 Skin3 의 Views 폴더의 Layout.htm 문서의 HTML 소스를그대로복사해서 [Skin3] 템플릲에적용핚후아래그린과같이스타읷시트의경로릶을조젃핚다. 240

241 4. [Skin3] 템플릲이적용된 [Skin3] 페이지를실행시켜봅니다. 순수 HTML 로작업된디자읶템플릲이 Umbraco 템플릲을통해서그대로보여짂다. 241

242 Step 3: Umbraco 템플릿편집 1. [Skin3] 템플릲으로이동하여 id 가 content 읶영역의 HTML 태그로모두지우고, 아래그린과같이 [bodytext] Umbraco 태그를입력핚다. 242

243 2. [Skin3] 페이지로이동하여 [Content] 탭에서 [Body Text] 에들어갈내용을갂단히입력핚다. 243

244 3. [Skin3] 페이지를웹브라우저로실행핚다. 아래그린과같이메읶영역이 [Body Text] 로찿워져서 출력됨을알수있다. 이처럼, 기본디자읶템플릲을바탕으로원하는부분의내용을동적으로 변경하려고핚다면해당부분을 Umbraco 태그 ( 필드 ) 로설정하면된다. 마무리 Umbraco 에서기본으로제공하는것보다는현업에서필요핚대로디자읶된디자읶템플릲을사용하는 것이훨씬유용핛지도모릅니다. 244

245 [Umbraco 강좌 ] 29. HTML 레벨의스킨파일적용 2 : 상단메뉴 소개 이번강좌에서는 Umbraco 에디자읶템플릲을적용하는두번째시갂이다. 상단메뉴를고정텍스트가 아닌 Umbraco 의페이지의메뉴값이출력되도록설정해보도록하겠다. < 따라하기 > 1. 지난시갂까지작성핚소스를실행시켰을때, 아래그린과같이메뉴는동적으로 HTML 로설정된 값이출력된다. 245

246 2. Umbraco [ 백오피스 ] 로돌아와서 [Skin3] 템플릲을열고아래메뉴영역을찾는다. 이곳의메뉴를 Umbraco 에서릶들어짂페이지의제목리스트로출력되도록설정하면된다. 246

247 3. 아래그린과같이 Umbraco 매크로중아무거나하나를메뉴 li 태그아래에등록핚다. 다음단계에서 나오는소스를그대로사용해도무관핚다. 247

248 4. 아래코드는 Umbraco 템플릲에 Umbraco 매크로중 Razor 문법을사용핛수있는구문으로묶고 이곳에서상단메뉴를출력하는코드를입력핚소스이다. 위소스는아래와같다. 248

249 5. 위에서메뉴를출력하는코드를템플릲에서작성후 [Skin3] 페이지를웹브라우저로실행핚결과값은 아래그린과같다. Home 메뉴를제외핚젂체적읶메뉴가정상적으로출력됨을알수있다. 여기서 메뉴의디자읶이라던가위치등의정보는이제 Skin3 에서사용되는 Site.css 를편집해서사용하면된다. 6. 웹브라우저의소스보기메뉴를사용하여소스보기를하면아래처럼 Umbraco 템플릲에서지정핚 249

250 Razor 구문이있던자리에 li 태그리스트가출력되어메뉴리스트가출력됨을확읶핛수있다. 마무리웹개발홖경중어떠핚솔루션도모듞이들의입맛에맞는솔루션은없다. 이는상용이듞오픈소스이듞상관없이말이다. 다릶, 대부분의 CMS 솔루션은기본베이스는제공해주고그위에올라가는모듞기능및 UI 는해당솔루션을사용하는개발자및디자이너에게그읷을위임핚다. 250

251 [Umbraco 강좌 ] 30. HTML 레벨의스킨파일적용 3 : 서브메뉴와사이트 맵 소개 이번강좌에서는디자읶시안을적용핚 Umbraco 패스 (Bread crumb) 기능을추가하는방법에대핚설명이다. 의좌측메뉴부분읶서브메뉴와사이트맵 < 따라하기 > 1. 아래그린은 29 회차강좌까지의 Skin3 페이지를실행핚결과이다. 상단에메뉴가정상적으로 적용되어출력됨을확읶핛수있다. 이번강좌에서는아래 2 개의영역읶서브메뉴영역과 Message 영역에사이트맵패스를출력하는기능을꾸며보도록하겠다. 251

252 2. [Skin3] 문서타입하위로 [Skin3] 문서타입을사용하도록 [ 자식노드타입허용 ] 옵션을준다. 252

253 3. [Skin3] 콘텎트페이지하위로 Sub1 과 Sub2 로 2 개의새로욲페이지를생성핚다. 이때 [ 선택문서 유형은 ] 반드시 [Skin3] 문서타입으로설정핚다. 4. 아래그린과같이 [Skin3] 페이지하위로 [Sub1] 과 [Sub2] 릶들어짂모습이다. 내용은갂단하게 입력핚다. 253

254 5. [Skin3] 템플릲을열고왼쪽메뉴의타이틀하단에아래그린과같이 [Umbraco 매크로 ] 를사용하여 2 nd Level Navigation 을삽입핚다. 위코드의읷부는아래와같다. 254

255 6. 웹브라우저를열고 [Skin3], [Sub1], [Sub2] 페이지를실행시켜보면아래와같이 3 개페이지공통으로 서브메뉴가출력된다. 255

256 7. 이번에는디자읶시안중 [messages] 영역에아래그린과같이또다른매크로읶 [Bread Crumb] 를 추가핚다. 위에서사용핚코드의읷부는아래와같다. 256

257 8. 사이트맵패스기능을추가핚후의실행모습이다. [Skin3], [Sub1], [Sub2] 페이지모두해당위치가정상적으로 Message 영역에출력됨을확읶핛수있다. 여기까지의단계를거치면서상단메뉴와왼쪽의서브메뉴그리고콘텎트상단에현재의위치를보여주는사이트맵패스기능까지모두구현을해보았다. 마무리 앞선강좌들에서다루었던 [ 문서타입 ], [ 템플릲 ], [ 페이지 ] 등을릶들고 [ 템플릲 ] 에 [Umbraco 페이지필드 ] 및 [Umbraco 매크로 ] 기능을사용하여 HTML 영역에새로욲기능을삽입하는과정을거치다보니 어느덧조금씩생동감있는사이트로변경되는듯핚다. 제가따로다뤄드리지않겠지릶, 더릷은페이지필드와매크로등의기능을사용하면릶들려고하는 어떤사이트가되었듞지모두 Umbraco CMS 로충분히구현핛수있으리라본다. 수릷은사이트가 Umbraco CMS 로구축된이유가이런여러가지장점을모두갖추어서그렇지않을까 핚다. 257

258 [Umbraco 강좌 ] 31. HTML 레벨의스킨파일적용 4 : 서브타이틀 소개 이번강좌에서는탑메뉴와서브메뉴갂에왼쪽영역상단에동읷핚타이틀을보여주고자핛때 사용하는서브타이틀을입력하는기능에대핚소개이다. < 따라하기 > 1. 현재까지디자읶시안페이지를바탕으로아래 3 개의기능을구현을하였다. 상단메뉴, 서브메뉴, 사이트맵패스기능이그것이다. 이번에는아래화살표로표시되는부분에대핚타이틀이동적으로 페이지별로변경되도록설정해보도록하겠다. 258

259 2. [Skin3] 문서타입은현재는메읶콘텎트영역에데이터가출력될하나의속성릶을가지고있다. 이곳에서브타이틀을입력핛수있도록하나의속성을더추가하도록하겠다. 아래그린과같이 [Left Title] 이띾이름으로속성을하나더추가하도록하겠다. 259

260 3. [Left Title] 속성이추가된 [Skin3] 문서타입을사용하는 [Skin3] 페이지를보면하단에 [Left Title] 을 입력하는텍스트박스가하나더나타난다. 이곳에적당핚서브타이틀을입력하면된다. 260

261 4. 서브타이틀이출력될위치를잡고이곳에 [Umbraco 페이지필드 ] 읶 [lefttitle] 을추가핚다. 위에서사용된소스의읷부분은아래와같다. 261

262 5. [Skin3] 페이지를웹브라우저로실행하면아래그린처럼 [Skin 3 제목 ] 식으로왼쪽상단에서브 타이틀이정상적으로출력된다. 262

263 6. 단, 여기서 [Sub1] 과 [Sub2] 페이지를실행하면 [Left Title] 속성을입력하지않아서아래그린과같이부모에정의된 [Left Title] 속성이상속되지않는다. 릶약, 자식메뉴에서속성을입력하지않았을때에는부모메뉴에서정의된속성값이출력되고자핚다면그때에는 [Umbraco 페이지필드 ] 삽입시 [Recursive] 속성을체크하며된다. 263

264 7. 아래그린은 [Left Title] 속성을부여핛때옵션으로 [Recursive] 체크박스를체크하는모습을나타낸다. 위동작의결과값으로릶들어지는템플릲코드의읷부는아래와같다. 264

265 8. 아래그린은최종적으로웹브라우저로 [Skin3], [Sub1], [Sub2] 페이지를모두테스트하고, 각각의 페이지모두부모페이지읶 [Skin3] 페이지에서정의핚서브타이틀이적용되어서출력되는모습을 보여준다. 265

266 [Umbraco 강좌 ] 32. 배포 : Umbraco CMS 를원격서버에서실행 소개 이번강좌에서는지금까지로컬컴퓨터에서작업핚소스를그대로원격서버로업로드해서욲영하는 방법에대해서설명드리고자핚다. 제홖경은아래와같다. 로컬컴퓨터 C:\Users\Umbraco\Documents\My Web Sites\Umbraco CMS 원격서버 순서 - 로컬에있는 Umbraco CMS 폴더의모듞소스를그대로원격서버로 FTP 로젂송 - 원격서버에서 Umbraco 소스폴더를 ASP.NET 4.0 웹사이트 ( 또는응용프로그램 ) 로설정 - SQL Server CE / WebMatrix 관렦필수구성요소설치 266

267 < 따라하기 > 1. 지금까지 30 여회에걸쳐서작업이짂행된소스는필자의로컬컴퓨터의아래경로에있다. 2. 이를로컬에서실행시킬때에는 1 회차부터계속해서 Microsoft WebMatrix 를사용하여짂행이 되어왔다. 267

268 3. 아래그린은로컬에서실행핚 Umbraco CMS 메읶페이지의모습이다. 268

269 4. 또핚, 로컬에서실행핚 [Skin3] 페이지의모습도아래와같이살펴볼수있다. 5. 아래경로는로컬소스를그대로원격서버로업로드후이를실행핚모습을나타냅니다. 로컬에서잘 돌아가는사이트그대로원격서버에서도잘실행됨을확읶핛수있다. 269

270 필자는로컬컴퓨터의소스를 FTP 를사용하여원격서버로업로드후업로드된 Umbraco CMS 폴더를 ASP.NET 4.0 웹응용프로그램으로설정하였다. 이부분은따로테스트가어려우므로아래에제시핚 경로에서실행내역을확읶하기바띾다. 원격서버의테스트주소 : 6. 원격서버에서실행되는 [Skin3] 페이지의모습이다. 270

271 7. 아래그린은왼쪽은 localhost 에서오른쪽은원격서버에서실행되는 [ 시작하기 ] 페이지의모습을 나타낸다. 271