Partager via

[Umbraco 강좌] 20. 새로운 매크로(Macro) 만들기

  • Article

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

소개

이번 강좌에서는 [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가지 방법이 익숙한 독자라면 해당 방법도 사용해 보신 후 제가 이 강좌를 작성하는 것처럼, 아티클로 작성해서 올려주면 감사하겠습니다.

끝.

관련글