소개

이번 강좌에서는 [Simple website] 스타터 킷에서 제공하는 2개의 매크로 이외에 새로운 매크로를 만들어서 등록하는 방법에 대해서 소개하고자 합니다.

매크로를 만들어서 등록하는 방법은 크게 3가지를 사용합니다.

첫 번째는 XSLT를 사용하는 것이고 두 번째는 ASP.NET의 웹 사용자 정의 컨트롤(ASCX 파일)을 사용할 수 있으며 마지막으로 .NET의 사용자 지정 컨트롤(DLL 파일)을 통하여 특정 단위 모듈을 생성해 낼 수 있습니다.

이 중에서 가장 쉬운 부분인 웹 사용자 정의 컨트롤을 사용하여 Umbraco 매크로를 만드는 방법을 진행하기 하겠습니다.

 

절차

Step 1: Umbraco에 매크로 정의 등록

1. [백오피스]-[Developer] 섹션-[매크로]로 이동하면 아래 그림과 같이 기본으로 2개 정도의 매크로가 추가된 모습을 볼 수 있습니다.

062411_1501_20Mac1.png

 

2. 새로운 매크로를 만들려면 [매크로]에 마우스 오른쪽 버튼을 클릭하여 아래 그림과 같이 [MyMacro]란 이름으로 매크로를 생성합니다.

062411_1501_20Mac2.png

 

3. [MyMacro]란 이름의 매크로 생성을 위한 [Macro Properties] 탭을 보여줍니다. 아래와 같이 [Use XSLT file], [or .NET User Control], [or .NET Custom Control], [or Script file] 식으로 Umbraco에서 사용하는 매크로를 정의할 수 있습니다. 일단은 [저장] 아이콘을 눌러서 현재 상태를 저장합니다. 뒤에서의 단계가 끝나고 다시 이곳으로 돌아와서 생성한 매크로를 등록하도록 하겠습니다.

062411_1501_20Mac3.png

 

Step 2: 웹 사용자 정의 컨트롤(Web User Control : ASCX 파일)을 사용하여 매크로 생성

(본 단계는 Visual Studio 2010 및 ASP.NET 웹 폼에 대한 이해를 선수 조건으로 합니다. )

1. Visual Studio 2010을 열고, [파일]-[새 프로젝트]-[Visual C#]-[웹]-[ASP.NET 웹 응용 프로그램]을 선택 후 프로젝트 이름으로 [MyMacro]를 입력한 후 [확인] 버튼을 클릭하여 Umbraco 매크로 생성을 위한 프로젝트를 생성합니다.

062411_1501_20Mac4.png

 

2. 아래 그림과 같이 프로젝트 생성시 부수적으로 생성되는 파일들을 모두 선택 후 마우스 오른쪽 버튼을 클릭하여 [삭제] 메뉴를 클릭하여 삭제합니다.

062411_1501_20Mac5.png

 

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

062411_1501_20Mac6.png

 

4. [MyMacro.ascx] 파일의 [소스] 보기에서 아래와 같이 3개의 컨트롤을 기본값으로 등록합니다.

062411_1501_20Mac7.png

 

5. 아래 그림과 같이 [MyMacro.ascx] 파일과 MyMacro.ascx.cs] 파일의 소스를 구성합니다. [TextBox1]에 문자열을 입력 후 [Button1] 버튼을 클릭하면 [Label1] 레이블에 [TextBox1]의 입력 값을 출력하는 초 간단 예제입니다.

062411_1501_20Mac8.png

 

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

062411_1501_20Mac9.png

 

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

062411_1501_20Mac10.png

 

8. [MyMacro] 프로젝트 소스에서 아래 그림처럼 [MyMacro.ascx] 파일에 마우스 오른쪽 버튼을 클릭하여 [복사] 메뉴를 클릭 후 이를 Umbraco 소스가 있는 곳으로 가져갑니다.

062411_1501_20Mac11.png

 

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

062411_1501_20Mac12.png

 

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

062411_1501_20Mac13.png

 

11. 위에서 복사한 2개의 파일을 Umbraco CMS 소스의 [bin] 폴더에 붙여넣기를 합니다.

062411_1501_20Mac14.png

 

Step 3: Umbraco CMS에 매크로 등록

1. Step 2에서 생성한 웹 사용자 정의 컨트롤은 아래 그림과 같이 Umbraco 매크로 관리 페이지의 [.NET User Control] 항목에서 선택할 수 있도록 드롭다운리스트에 등록되어 출력됩니다.

062411_1501_20Mac15.png

 

2. [MyMacro.ascx] 파일을 등록한 후 [저장] 아이콘을 클릭하여 Umbraco에 새롭게 만든 매크로를 반영합니다.

062411_1501_20Mac16.png

 

3. [템플릿] 편집 페이지로 이동한 후 [Textpage]와 같은 페이지의 하단 영역에 앞서 생성한 매크로를 등록하는 화면은 아래와 같습니다. [MyMacro]란 이름의 매크로가 등록되어 적용할 수 있음을 확인할 수 있습니다.

062411_1501_20Mac17.png

 

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

062411_1501_20Mac18.png

 

 

마무리

상당히 긴 단계를 통해서 나만의 매크로를 만들어 사용하는 방법을 보여드렸습니다.

비록, XSLT 및 DLL 파일로 만들어서 사용하는 방법에 대해서는 설명하지 않았지만, 이 2가지 방법이 익숙한 독자라면 해당 방법도 사용해 보신 후 제가 이 강좌를 작성하는 것처럼, 아티클로 작성해서 올려주면 감사하겠습니다.

 

 

끝.





관련글



관련 동영상 참고 자료

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




profile

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