한빛출판네트워크

저자: Jesse Liberty, 한동훈 역
원문: http://www.ondotnet.com/pub/a/dotnet/2004/09/27/libertyonwhidbey.html

대다수의 사이트에서 사용자가 페이지에서 페이지로 이동하는 동안 일관된 인상(look and feel)을 갖는 것은 중요하다. 이런 것은 닷넷 1.1에서도 가능했지만 어려운 일이었으며 프로그래머와 디자이너 모두 적절한 규칙을 정해야 했었다. ASP.NET 2.0에서는 마스터 페이지(master pages)를 생성하여 사용자에게 일관된 느낌(look and feel)을 보다 쉽게 제공할 수 있다.

마스터 페이지는 사이트에서 사용될 모든 페이지의 템플릿으로 사용할 수 있으며, 모든 페이지에서 공유할 수 있는 HTML, 컨트롤, 코드들을 작성할 수 있다. 예를 들어, 그림 1과 같이 오라일리의 로고인 안경원숭이(tarsier)와 헤더 이미지를 사용하는 마스터 페이지를 만들고, 이를 다양한 페이지에서 이용할 수 있다.


그림1. 일관된 디자인(look and feel)

이제, 이러한 작업을 어떻게 하는지 알아보자. 먼저, 새 웹 사이트를 "MasterPages"로 만든다. 프로젝트에서 마우스 오른쪽 버튼을 클릭하여 새 항목 추가(Add New item)을 선택한다. 그림 2와 같은 새 항목 추가 대화상자(Add New Item)에서 Master Page를 선택하고, 이름은 "TopMasterPage"로 입력한다.


그림2. 신규 마스터 페이지 객체

참고: 이 예제에서 프로젝트, 마스터 페이지 및 다른 페이지들의 이름은 각자 원하는 대로 해도 된다.

새로 생성된 마스터 페이지는 asp:contentPlaceHolder 태그 안에 생성된다. 이 태그는 마스터 페이지에서 사용하는 페이지의 내용들을 담는 그릇(placeholder)과 같은 역할을 한다. 예를 들어, 그림 3과 같이 앞에서 캡쳐한 로고를 추가할 수도 있다.


그림3 마스터 페이지 편집 화면

편의상 그림3을 세 영역으로 나누어 번호를 붙였다. (1)은 첫번째 이미지이며, (2)는 두번째 이미지이며, (3)은 ContentPlaceHolder 객체다. ContentPlaceHolder 부분을 클릭하고 텍스트를 추가할 수 있으며, 이는 다른 페이지의 기본 텍스트가 된다. 이 부분의 기본 텍스트는 마스터 페이지를 사용하는 페이지에 의해 대체된다.

콘텐트 페이지 추가하기

이제부터 추가할 페이지들은 앞에서 만든 마스터 페이지를 사용하게 되며, 마스터 페이지에 추가했던 ContentPlaceHolder 영역 안에 페이지의 내용을 올려놓게 된다.

참고: 하나의 마스터 페이지에는 하나의 ContentPlaceHolder를 올려놓을 수 있지만, 각 마스터 페이지는 고유의 ID를 갖기 때문에 경우에 따라 다양한 마스터 페이지를 사용할 수 있다.

마스터 페이지의 동작방식을 이해하기 위해 먼저 .aspx 페이지, Welcome.aspx와 SecondPage.aspx를 생성하자. 그림 4와 같이 생성할 페이지가 일반 "Web Form" 페이지이며, "Select master page" 항목을 선택해야 한다.


그림4. 마스터 페이지를 사용하는 웹 폼 만들기

추가(Add) 버튼을 클릭하면 마스터 페이지를 선택하는 대화창이 나타나며, 여기서 TopMasterPage.master를 선택한다. 그림 5와 같이 새로 만든 Welcome.aspx는 마스터 페이지 안에 나타나게 된다. Content 상자에 컨트롤, 텍스트 등을 원하는 대로 편집할 수 있지만 마스터 페이지의 내용은 사용할 수 없게 된다.


그림5. 마스터 페이지 내부에서의 편집 화면

SecondPage.asx를 만들 때도 같은 마스터 페이지를 사용하여 Welcome.aspx 페이지와 같은 스타일을 갖도록 할 수 있다.

하위 마스터 페이지(Sub-Master pages) 사용하기

응용 프로그램 전체가 일관된 모습을 갖는 것은 특이한 일이 아니지만, 어떤 요소들은 응용 프로그램의 특정 부분에서만 이용된다. 예를 들어, 회사 전체에서 쓰이는 헤더가 있는 가 하면, 부서 에서만 쓰이는 요소도 있을 수 있다. ASP.NET 2.0에서는 하위 마스터 페이지 작성을 통해 이 문제를 해결할 수 있다. .aspx 페이지(웹 폼)은 하위 마스터 페이지나 원본 마스터 페이지와 결합할 수 있다. 이를 이용해서 보다 알맞은 개별 페이지를 만들 수 있다.

예를 들기 위해, 하위 마스터 페이지 OnDotNet.master를 만든다. 아 하위 마스터 페이지는 앞에서 만든 TopMasterPage를 마스터 페이지로 사용하지만, Content 컨트롤 안에 이미지와 ContentPlaceHolder를 추가할 것이다. 적어도 베타 버전에서는 하위 마스터 페이지를 보기 위해 디자이너를 사용할 수 없기 때문에 이 하위 마스터 페이지를 사용하는 .aspx 페이지를 만들어야 그 결과를 알아볼 수 있다. 그림 6은 하위 마스터 페이지의 코드다.


그림6. 직접 코딩한 하위 마스터 페이지

신규 부분 페이지는 최상위 마스터 페이지와 마찬가지로 Master 지시문(@Mager)를 갖고 있지만, 하위 마스터 페이지는 그림6에서 강조된 부분과 같이 MasterPageFile 속성을 갖는다. 이 속성은 현재 마스터 페이지는 TopMasterPage.master의 하위 마스터 페이지인 OnDotNet.master라는 것을 의미한다.

하위 마스터 페이지를 사용하는 .aspx 페이지, OnDotNetPage1.aspx와 OnDotNetPage2.aspx를 만들어보자. 첫번째 페이지에는 텍스트를 추가하기 위해 블록을 추가한다. 두번째 페이지에서는 OnDotNet.master 페이지에 추가한 기본 텍스트를 사용하기 위해 블록을 제거한다. 결과는 그림 7과 같다.


그림7. 하위 마스터 페이지

각 페이지는 3개 영역으로 분리된다. 최상위 영역은 TopMasterPage.master의 오라일리 로고이며, 가운데 영역은 하위 마스터 페이지 OnDotNet.master의 OnDotNet.com 로고이며, 마지막 영역은 각 .aspx 페이지의 콘텐트가 된다. 기본 텍스트 위치를 직접 추가한 내용으로 변경되는 것을 OnDotNetPage1.aspx에서 볼 수 있다. OnDotNetPage2.aspx는 내용을 추가하지 않았기 때문에 OnDotNet.master에서 기본 텍스트를 상속받은 것을 알 수 있다.

모든 하위 마스터 페이지에서 공용 마스터 페이지를 사용할 수도 있다. 예를 들어, 그림 8과 같이 두번째 하위 마스터 페이지인 Liberty.master를 만들어 보자.


그림8. 두번째 하위 마스터 페이지 추가하기

새로 만든 하위 마스터 페이지는 빨간색으로 표시한 것과 같은 텍스트와 다른 이미지를 사용한다. 물론, 레이어 메뉴, 사이트 맵 등이 들어간 보다 다양한 하위 마스터 페이지를 만들 수 있다.

새로 작성한 하위 마스터 페이지가 어떻게 동작하는지 알아보기 위해 LibertyOnWhidbeyPage1.aspx, LibertyOnWhidbeyPage2.aspx, LibertyOnWhidbeyPage3.aspx을 추가했다. 그림9에서 처럼 이들 페이지는 OnDotNet 페이지와 마찬가지로 최상위 마스터 페이지를 공유하지만, 가운데 섹션은 Liberty.master 하위 페이지를 사용한다.


그림9. 마스터 페이지

마스터 페이지를 동적으로 편집하기

.aspx 페이지에서 특정 이벤트가 발생했을 때 마스터 페이지로 거슬러 올라가서 마스터 페이지의 표현양식을 변경하고 싶다고 하자. 이런 경우에는 마스터 페이지에 속성을 추가하고, .aspx 페이지의 master 멤버를 사용하여 그 속성에 접근할 수 있다.

참고: FindControl() 메서드와 같은 후기 바인딩(late-binding)을 사용하여 이러한 작업을 수행할 수 있지만, 이는 리플렉션을 사용하기 때문에 마스터 페이지에 속성을 추가하는 것보다 꽤 느린 편이다.

예를 들어, LibertyMaster.master 페이지의 이미지에 대한 URL을 설정할 수 있는 libertyImage를 추가한다고 하자. 실제 코드는 코드 숨김 페이지(Liberty.master.cs)에 추가하게 될 것이며, 다음과 같은 코드가 될 것이다.

public partial class Liberty_master
{
   public Image LibertyImage
   {
      get { return this.libertyImage; }
      set { this.libertyImage = value; }
   }

}

마스터 페이지에 속성을 선언했으면 .aspx 페이지에서 다음과 같이 이용할 수 있다.

public partial class LibertyOnWhidbeyPage3_aspx
{
   public void Page_Load( object sender, EventArgs e )
   {
      this.Master.LibertyImage.ImageUrl = "~//dotnet/2004/09/27/graphics/Triangle.jpg";
   }
}

그림 10에서 볼 수 있는 것처럼 Liberty.master 페이지에서 사용했던 이미지가 LibertyOnWhidbeyPage3.aspx 페이지에서 변경된 것을 볼 수 있다.


그림10. 동적으로 편집한 마스터 페이지

위에서 볼 수 있는 것처럼, LibertyOnWhidbeyPage1.aspx 페이지는 LibertyMaster.master에서 제공되는 이미지를 사용하고 있으며, LibertyOnWhidbeyPage3.aspx 페이지는 마스터 페이지의 이미지를 변경한 다음에 결과를 보여준다. 이와 같은 방법을 사용해서 페이지를 원하는 대로 작업할 수 있다. 필요하다면 템플릿을 변경하는 것도 가능하지만 일관된 사용자 인터페이스를 만들기 위해서는 대부분의 페이지에서 사용하는 템플릿을 이용해야 한다.

리소스

이 기사의 소스 코드 다운로드