템플릿이란?
프로그래밍에서 템플릿이란 자주 사용되는 기본 골격을 미리 제작해 놓은 파일들을 말합니다. 예를 들면, 여러분이 사이트에 웹폼(aspx)을 하나 추가할 경우, VS 도구에서 "웹폼(Webform)"을 선택하시고, 파일 명을 입력하여 기본적인 웹 폼을 만들지 않습니까? 그 "웹폼" 또한 템플릿입니다. 메모장에다가 맨땅 코딩을 하지 않는다면, 대부분 VS 도구를 이용해서 웹 폼, 웹 서비스, 클래스 등등을 생성하고 있을 것입니다. 그들 모두가 기본적인 코드를 담고있는 템플릿인 것이죠. 이미 알게 모르게 여러분은 아주 흔하게 템플릿을 사용하고 있었던 것입니다.
이러한 템플릿은 혼자서 개발하는 경우에도 유용하지만, 팀 개발을 하는 경우에는 그 효용성이 더욱 빛납니다.
사이트를 개발하기에 앞서 기본적인 사이트의 구조와 기본적인 공통 모듈들에 대한 참조, 웹 서비스 참조, CSS 파일이나 JS 파일들의 인클루드 등등을 구성할 것이고, 그를 통해서 개발을 시작하기 위한 개발 환경이 갖춰지곤 할 것입니다. 그렇게 기본적인 개발환경이 갖춰진 상태에서 새로운 개발자가 투입되거나 하면, 여러분들은 어떻게 하시곤 하셨나요?
전체 사이트 소스를 zip으로 압축해서 던져주면서, "자. 이게 사이트의 기본 골격이야 이걸로 웹 사이트 잡고 작업 해. 네가 해야할 작업은 그 안에 Board라는 폴더 만들고 게시판을 만들면 돼"와 같이 하셨었나요?
수많은 페이지를 개발해야 하는 개발자들은 유사한 디자인의 페이지를 만들기 위해 기존 파일을 카피해서 붙이는 일명 Copy & Paste 신공이란 것을 주로 사용해 왔을 것입니다. 이미 숱하게들 경험하셨으리라 생각합니다. 해서, 이러한 경험이 지나치게 많으신 어떤 분들은 아예 기본적인 골격을 갖춘 페이지를 자기가 별도로 하나 만들어두고, 그로부터 소스를 카피해다가 페이지를 만드신 분들도 있었을 것입니다(기존 파일에서 복사해 오는 것과 별 차이도 없지만 -_-).
아마 그 분들은 이번 강좌를 보면서 "오옷!! 이런 방법이!", "젠장 이런 방법이 있었을 줄이야!" 라고 외침과 동시에, 박수를 치며 좋아하지 않을까 싶네요 ^^; (지나친 과장법으로 한국온라인강좌표현관리위원회로부터 경고를 받을 것으로 예상되는 대목이긴 합니다)
VS 2005는 특정 항목(웹폼과 같은)에 대한 템플릿을 쉽게 만드는 방법 뿐만 아니라 프로젝트 전체에 대한 템플릿을 쉽게 만들 수 있는 방법을 제공합니다. 기존 VS.NET 2003에서는 이러한 작업을 하기 위해서 다소 피곤한 노가다를 했어야 했는데요(나만의 웹폼 템플릿 만들기 강좌 참고). VS 2005 에서는 완전하게 자동화되어 있어 누구나 쉽게 템플릿을 구성할 수가 있게 되었습니다.
VS 2005로 프로젝트 템플릿 만들기
그렇다면, 기대감을 가지고 우선 프로젝트 템플릿을 만드는 것부터 시작을 해보도록 하겠습니다. 프로젝트 템플릿을 만드는 방법과 아이템 템플릿을 만드는 방법 모두를 알고나면 여러분은 이제 템플릿을 만들지 않고는 프로젝트를 시작조차 하지 않을런지도 모릅니다. 하하.
템플릿을 만든다고는 하지만, 이를 위해 별도의 설정을 하는 것은 없습니다. 그냥, VS 2005를 실행하여 새로운 웹 사이트를 만들고, 혼자서 작업하듯이 사이트의 골격을 만들어주시면 됩니다. 예를 들면, 저는 다음과 같이 TaeyoTemplate라는 이름의 웹 사이트를 구성해 보았습니다(기본 경로 그대로 C:\WebSites\ 하위로 만들었답니다).
Common.js 파일은 그냥 껍데기일뿐, 현재는 안에 코드는 전혀 없구요(골격입니다. 골격). CSS 파일도 마찬가지 입니다(실은 CSS의 경우는 약간의 코드가 들어있긴 합니다만 ^^).
웹 페이지들을 전반적으로 관리하기 위해서 부모 페이지인 PageBase를 추가적으로 App_Code 폴더에 추가해 두었습니다만, 역시 이 안에는 네임스페이스를 지정한 것 외에는 별다른 코드가 없습니다. 굳이 그 안의 코드를 보여드린다면, 다음과 같습니다.
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace TaeyoNET.Web
{
/// <summary>
/// PageBase의 요약 설명입니다.
/// </summary>
public class PageBase : System.Web.UI.Page
{
public PageBase()
{
//
// TODO: 생성자 논리를 여기에 추가합니다.
//
}
}
}
|
TaeyoNET.Web이란 네임스페이스를 부여한 것외에는 기본 코드 그대로임을 알 수 있습니다.
그리고, 사이트에는 하나의 마스터 페이지와 그 마스터를 이용하는 웹폼이 하나씩 놓여있습니다. 일단 마스터 페이지부터 한번 살펴볼까요? 저는 매우 간단하게 마스터 페이지를 다음과 같이 제작해 보았습니다(사실, 이 코드까지 굳이 보여드릴 필요는 없지만..).
SiteMaster.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteMaster.master.cs" Inherits="TaeyoNET.Web.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>태오 사이트</title>
<link href="CSS/Common.css" rel="stylesheet" type="text/css" />
</head>
<body leftmargin="0" topmargin="0">
<form id="form1" runat="server">
<div>
<div style="width:100%; height:40px; background:#5A9CD6; text-align:center;color:white">
<p><br />Taeyo.NET</p>
</div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
|
기본적인 마스터 페이지에 그냥 머릿글 같은 구역을 넣은 것과 네임스페이스를 지정한 것이 전부입니다. 이번 강좌는 템플릿을 구성하는 방법을 이야기하는 강좌이기에 각 페이지들의 구성은 매우 간단하게만 하고 있습니다.
여기까지는 그냥 일반적으로 혼자서 사이트를 만들듯이 뚝딱뚝딱 만들어 보았습니다. 원하신다면 추가적으로 공통 이미지나 XML 파일 같은 것들도 더 넣으실 수도 있을 것입니다만, 저는 이 정도까지만 구성을 해 보았습니다.
그리고, 중요한 Main.aspx 페이지입니다. 이 페이지가 중요한 이유는 이것이 아이템 템플릿으로도 재 사용될 것이기 때문입니다(파일명 자체는 전혀 중요하지 않습니다). 즉, 사이트를 구성한 뒤에, "새 항목 추가"를 통해서 새로운 웹 페이지를 사이트에 추가하는 경우, 이 골격으로도 사용자가 페이지를 추가할 수 있도록 하려는 것입니다. 해서, 그를 위한 약간의 설정이 필요한데요. 일단, 소스부터 보시고 진행하도록 하겠습니다.
Main.aspx
<%@ Page Language="C#" MasterPageFile="~/SiteMaster.master" AutoEventWireup="true"
CodeFile="Main.aspx.cs" Inherits="TaeyoNET.Web.$safeitemname$" Title="태오 사이트" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table style="background:gray;width:100%;height:100px" cellspacing="1">
<tr>
<td style="background:white">
</td>
</tr>
</table>
</asp:Content>
|
Main.aspx 페이지는 SiteMaster.master 마스터 페이지를 이용하고 있으며, 본문에는
태그를 가지도록 한 것이 전부입니다. 이것이 우리 사이트의 기본적인 웹 폼 디자인 이라고 가정한다는 것이죠. 물론, 실제 업무에서는 더욱 복잡한 태그와 디자인으로 구성되겠지만 여기서는 간단하게만 만들어 보았습니다.
이 코드에서 주의해야 할 부분은 @Page 지시문 구역의 Inherits 어트리뷰트입니다. 클래스명이 지정되어야 하는 곳에 엉뚱하게도 $safeitemname$이라는 예약어가 사용되고 있는 것을 보실 수 있을 것입니다. 이것이 나만의 웹폼 템플릿을 만들기 위한 핵심이자 전부인데요. 이 친구는 과연 무엇일까요?
이것은 VS가 내부적으로 사용하는 예약어로서, 파일이 생성될 경우 사용자가 입력한 파일 명칭으로 VS가 이 키워드를 바꿔주게 됩니다. 즉, 현재 페이지가 Main.aspx 니깐 실제로 이 템플릿을 이용해서 파일을 만들면, $safeitemname$가 Main으로 바뀌어서 만들어진다는 이야기이죠. 간단합니다. 템플릿으로 사용할 파일에 대해서는 클래스명을 $safeitemname$로만 바꾸어 주면 되는 것입니다.
다만, 이 작업은 aspx 페이지의 짝인 aspx.cs 코드비하인드 파일에 대해서도 마찬가지로 작업해 주어야 합니다. 다음과 같이 말이죠.
Main.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace TaeyoNET.Web
{
public partial class $safeitemname$ : PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
|
코드 비하인드 페이지는 공통 베이스 클래스인 PageBase(App_Code 폴더에 만들어 둔)로부터 상속을 받도록 설정하였구요. 클래스 명은 $safeitemname$로 지정되어 있습니다. 이것이 전부이죠. ^^
뭐 복잡한 작업을 한 것 같지만, 사실은 그냥 사이트를 원하는대로 구성하고, 템플릿으로 사용 예정인 웹 페이지에 대해서만 클래스 명을 $safeitemname$로 바꿔준 것이 전부입니다.
어렵지 않죠?
구성이 다 되었다면, 그 다음에는 이렇게 만들어진 웹 사이트를 템플릿으로 만들기만 하면 됩니다(빌드는 하지 마세요. 이것은 템플릿이지 실제 웹 사이트는 아니니까요). VS 2005의 메뉴 중 [파일]을 선택하시면, [템플릿 내보내기(E)]가 있습니다. 그것을 클릭해 보세요. 그러면, 다음처럼 [템플릿 내보내기 마법사]가 나타날 것입니다.
화면에 보이듯이, 템플릿은 두 종류로 만들 수가 있는데요. 하나는 프로젝트 템플릿이고, 다른 하나는 항목 템플릿입니다. 일단은 프로젝트 템플릿부터 같이 만들어 보구요. 이어서, 항목 템플릿을 만들어 보도록 하겠습니다. 그림에서 보이듯이, 템플릿의 형식이 "프로젝트 템플릿"임을 확인하시구요. 하단의 "템플릿을 만들 원본 프로젝트"로는 현재 작업하신 프로젝트가 올바로 선택되어져 있는지도 확인하세요. 그리고, [다음] 버튼을 누르시면 됩니다.
이어지는 마법사는 [템플릿 옵션 선택]입니다. 여기서는 템플릿의 이름이나 아이콘 등을 지정할 수가 있는데요. 대부분의 경우는 기본값을 이용하게 되겠죠? 이쁜 아이콘이 있다면 그것을 사용하는 것도 좋겠지만, 그런 아이콘 작업을 할 시간이 과연 우리 개발자들에게 있을라나 모르겠네요. ㅎㅎ
템플릿 이름은 원하는대로 주실 수 있습니다만, 저의 경우는 그냥 TaeyoTemplate이라고 프로젝트 명칭을 기본 값 그대로 사용하고 있습니다.
템플릿 설명은 적절하게 기록해주시면 되겠구요. 하단에는 두 개의 체크박스가 있는데요. 하나는 "자동으로 템플릿을 Visual Studio로 가져오기"이고, 다른 하나는 "출력 파일 폴더에 탐색기 창 표시"가 그것입니다.
첫 번째는 템플릿을 만든 다음, VS에 이 템플릿이 즉시 나타나도록 하겠다는 옵션입니다. 가급적 선택된 채로 놔두시는 것이 여러모로 편리하겠죠? 두 번째 체크박스인 "출력 파일 돌더에 탐색기 창 표시"는 템플릿을 만든 다음에, 탐색기로 그 만들어진 파일들을 보겠느냐는 의미입니다. 안 봐도 상관은 없지만 잘 만들어졌는지를 한번 보는 것도 나쁘지 않으니 역시나 체크된 채로 두시는 것이 좋을 것입니다. 그쵸?
다 되었으면, 이제 [마침]을 눌러 작업을 진행시키세요. 그러면, 쿵짝쿵짝 만들어진 템플릿이 탐색기 창으로 나타나는 것을 보실 수 있을 것입니다.
기본적으로 템플릿이 만들어지는 폴더는 C:\My Document\Visual Studio 2005\My Exported Templates 일 것입니다. 하지만, 앞선 [템플릿 옵션 선택] 창에서 "자동으로 템플릿을 Visual Studio로 가져오기"를 체크해 두었기에, 이 템플릿 파일은 VS 2005의 기본 템플릿 폴더인 C:\My Document\Visual Studio 2005\Templates\ProjectTemplates에도 복사됩니다. 그리고, 이 경로에 놓여진 템플릿 파일들은 VS 2005로 새로운 웹 사이트를 만드는 경우, "내 템플릿" 영역에 보여지게 됩니다. 다음처럼 말이죠.
멋지지 않습니까? 이것이 프로젝트 템플릿의 전부입니다. 오호호!!
|
아참. 만들어지는 템플릿 파일이 zip 파일이라는 것에 혹시 깜딱이야~ 하신 분들도 있을텐데요. 그렇습니다. Zip 파일로 되어 있습니다. 실제 사용되는 파일은 그 zip안에 모두 들어있죠.
만일, 템플릿을 구성하는 내부파일들을 살펴보고 싶다면, zip 파일을 압축 풀어서 살펴보시면 되는데요. 그 중 핵심 파일은 MyTemplate.vstemplate 입니다. 그 파일이 템플릿의 구성정보를 가지고 있는 파일이죠. MyTemplate.vstemplate 파일이 담고있는 구체적인 정보가 궁금하신 분들은 다음 링크를 참고해 보세요. 매우 훌륭한 컬럼입니다. 다만, 영어라는~
 http://aspalliance.com/933
|
여기까지 되었다면, 새롭게 VS 2005를 열고 새로운 웹 사이트를 추가해 보십시오. 위 그림과 같이 "내 템플릿" 영역에 TaeyoTemplate가 나타나는 것을 볼 수 있고, 그를 선택한 뒤 사이트를 만들면 다음처럼 멋들어지게 템플릿 골격대로 사이트가 주루룩~ 만들어지는 것을 볼 수 있을 것입니다.
오호. 훌륭합니다. 이를 잘 활용한다면 미리 개발자들이 작업할 수 있는 환경을 템플릿으로 만들어두고 편리하게 배포할 수 있을 것입니다. 그렇다면, 이렇게 만들어진 zip 파일을 어떻게 개발자들에게 배포하면 될까요?
파일 서버가 있다면 파일 서버를 이용하는게 가장 좋을 것입니다. 물론, 셋업 패키지를 만드는 방법도 있긴 합니다만, 간단하게라면 네트워크 폴더로 공유해서 개발자들이 쉽게 복사해 올 수 있게 하는 것도 나쁘지 않겠죠?
각 개발자들은 가져온 zip 파일을 로컬 PC의 C:\My Document\Visual Studio 2005\Templates\ProjectTemplates에 가져다 두기만 하면 됩니다. 그 곳에 복사해넣고 VS 2005를 열면 짜자잔~~ 하고, "내 템플릿"에 나타나니까요 ^^
다음은 그렇게 다른 개발자의 PC에서 나타나는 모습입니다. 일부러 영문 VS 2005에서의 모습을 캡춰해 보았습니다.
멋지죠?
당장 써먹어봐야겠다는 욕구가 목마른 사슴이 물을 찾듯이 솟구쳐 오르지 않습니까? 그렇다면, 꼭 사용해 보십시오. 한번 잘 만들어놓은 템플릿! 열 카피앤페이스트 신공이 부럽지 않을 것입니다.
다음 강좌에서는 나만의 템플릿 만들기 2탄 - 아이템 템플릿 만들기로 찾아뵙겠습니다.
참고 링크 (찾아만 놓고, 아직 저도 다 못봤는데요. 이 컬럼들을 다 보면 아마 템플릿 전문가라 자부해도 될 듯 합니다 ^^;;)
http://aspalliance.com/933
http://weblogs.asp.net/scottgu/archive/2005/09/09/424780.aspx
http://msdn2.microsoft.com/en-us/library/eehb4faa.aspx (템플릿 매개변수)
http://msdn2.microsoft.com/en-us/library/6db0hwky.aspx (모든 정보)
http://msdn.microsoft.com/msdnmag/issues/06/01/CodeTemplates/