강좌 전 태오의 잡담>

이번 강좌는 태오 사이트의 멤버이자, Microsoft MVP인 김 경균님이 제공하는 ASP.NET 2.0 Theme와 관련된 이야기입니다. 알아두면 상당히 유용한 내용이니 많은 관심 부탁드려 보아염 (박수) 짝짝짝

ASP.NET 2.0 - 테마를 이용한 UI

안녕하세요.. ASP.NET게시판에 가끔(--;) 답변을 달고있는 Microsoft MVP(ASP/ASP.NET) 김경균 입니다. ASP.NET2.0의 새로운 기능인 테마에 대해 확실히 알고 넘어가도록 하겠습니다. 그다지 어려운 부분은 없으니 안심하시고 천천히 따라오세요^^

ASP.NET이 처음 선을 보였을 때 이 강좌를 읽고 계신 모든 분들께서는 코드비하인드라는 생소한 단어를 접하셨던 기억이 있을 것입니다. 코드비하인드는 HTML코드와 CS를 완전히 분리하여 관리하는 개념이었습니다. 테마는 이와 같은 맥락으로 볼 수 있는데 이는 HTML(웹컨트롤, HTML컨트롤 등)과 디자인을 다시 분리한다고 말할 수 있습니다. 이렇게 분리 했을 경우 테마의 수정만으로 ASPX파일을 수정하지 않고 페이지의 디자인을 완전히 변경할 수 있게 됩니다. 기존에 CSS스타일시트를 이용한 경우와 비슷한 부분이 있습니다. 하지만 테마는 스타일시트의 장점과 더불어 컨트롤의 속성과 이미지파일을 다룰 수 있어 보다 유연하게 작업이 가능합니다.

그럼 시작해 보도록 하겠습니다.

가장 먼저 테마가 적용될 페이지를 만들어 보도록 하겠습니다.

Theme가 적용될 페이지의 코드는 위와 같이 간단하게 버튼과 GridView컨트롤을 추가하였습니다.  ID, runat, Text와 같이 디자인과는 관련이 없는 속성3개만이 추가 되었습니다.  이제 테마를 만들어 보도록 하겠습니다. 테마를 만들기 위해서는 우선 Theme폴더를 생성해야 하는데요 ASP.NET 폴더 추가→Theme를 선택합니다. 그럼 App_Themes폴더가 생성되고 하위로 Theme1폴더가 생성됩니다. Theme1폴더를 이제 우리가 사용할 테마명으로 변경합니다. 기본이 되는 테마를 먼저 만들어 봐야 하니까 테마폴더 명을 Basic라고 바꾸도록 하죠..

이제 테마를 만들어 보도록 하겠습니다.

Basic테마 폴더에서 새 항목 추가를 선택한 다음 skin파일을 추가합니다.

스킨파일에서 실제 컨트롤의 스킨을 만들 수 가 있는데 이때 ID값은 제외하고 디자인에 관련된 여러 속성들을 일반적인 컨트롤을 추가할 때와 동일하게 추가합니다. 이때 주의할 점이 runat="server"는 반드시 추가해야 한다는 것입니다. 추가하지 않을 경우 파서오류가 나타나게 됩니다. 그럼 만들어진 스킨파일을 보면 

상당히 복잡해 보이십니까? 네.. 복잡합니다. ㅡ.ㅡ;; 잘 보시면 aspx파일의 컨트롤 작성 방법과 상당히 비슷하다는 걸 느끼실 수 있을 것입니다.  ID값을 제외하고 UI와 관련된 대부분의 속성들이 정의되어있습니다.  샘플을 꼭 저렇게 복잡하게 해야겠냐구요? ㅎㅎ  사실대로 말씀 드리자면 위의 스킨은  ASP.NET의 자동서식을 이용해서 만들어진 것입니다..^^ 적용될 페이지에서 자동서식을 이용해 UI관련 작업을 한 후 그대로 스킨파일에 복사한 후 ID값만 지원준거죠.. 그러니 복잡해 보인다고.. 혹시 뭐 중요한거 있나 하고.. 너무 열심히 들여다 보지는 마세요..^^

아무튼 스킨파일생성까지 완료 했습니다.  이제 생성된 스킨을 실제 페이지에 적용해야 하는데 이를 수행할 수 있는 방법에는 몇 가지가 있습니다.  우선 테마가 적용된 결과부터 보고 설정하는 방법에 대해 알아보도록 하겠습니다.

결과가 상당히 화려한가요? ㅡ.ㅡ 아무튼 스킨이 적용된 것이 그나마 좀 나아 보이기는 하죠?^^ 실제 적용하는 부분을 알아보도록 하겠습니다.

1. 전역적인 테마 설정

<system.web>    <pages theme="테마명" /> </system.web>

2. 페이지 별 테마 설정

<%@ Page Language="C#" ......  Theme="테마명" %>

3. 동적 테마 설정

protected void Page_PreInit(object sender, EventArgs e) {    Page.Theme = "테마명"; }

1,2번의 경우는 별다를 것이 없지만 3번 동적 테마 설정에서 특이한 점을 발견할 수 있습니다. PreInit메서드에서 테마명을 잡아주게 되는데요.. 그 이유는 페이지 주기에서 가장 먼저 실행되는 부분이  바로 PreInit입니다. 이때는 어떤 컨트롤도 생성된 상태가 아니죠.. 컨트롤이 생성되기 전에 테마가 먼저 생성되고 그 후에 그 속성들이 각 컨트롤에 적용되는 것입니다. 드롭다운 리스트와 같은 곳에 테마를 미리 설정해 두고 각 테마를 선택할 때 이를 적용시킬 경우 위와 같이 작업해 줄 수 있습니다.

드롭다운리스트에서 값을 받아 테마를 설정 할 경우 PreInit메서드는 아직 컨트롤이 생성되기 전 단계이므로 드롭다운리스트의 SelectedValue를 통하여 값을 가져올 수 없습니다. 해결 방법은 Rqeust.Param["컨트롤아이디"]로 접근할 경우 값을 가져올 수 있습니다.

그럼 동적 테마 설정의 실행 결과를 보도록 하겠습니다.

우선 두개(Basic, Black)의 테마를 만들고 드롭다운리스트에 테마의 이름을 넣어준 다음 포스트백이 일어날 때 PreInit메서드에서 Page.Theme에 Request.Param으로 받아온 테마명를 설정했습니다. 그다지 멋지지는 않군요 ㅡ.ㅡ;; 이를 잘 응용하면 보다 멋진 테마를 만들실 수 있을 것입니다.

테마를 설정할 경우 Theme속성 외에도 StylesheetTheme라는 것이 있는데 StylesheetTheme는 Theme와 동일하게 @Page지시자 , Web.config, 비하인드 코드에서 사용할 수 있습니다. StylesheetTheme가 존재하는 이유는 이것으로 테마를 설정할 경우 동일한 속성에 대해 스킨파일에서 선언된 속성보다 실제 적용 페이지 내에서 선언된 속성이 우선순위를 갖고 Theme속성에 테마를 설정한 경우 그 반대가 됩니다.

지금까지 테마를 생성해서 스킨을 만들고 이를 적용하는 것 까지 해보았습니다. 이미 눈치 채신 분들도 있을 텐데요.. 그럼 스킨파일에 버튼을 하나 만들면 테마가 적용된 페이지에서는 모든 버튼의 디자인이 동일해야 하나? 라고 생각하시는 분들이 계실 것 같습니다.  당연히 이 부분을 처리 할 수 있어야겠죠? 해결방법은 상당히 간단 합니다. SkinID속성을 이용하면 간단하게 문제가 해결됩니다.

<asp:Button runat="server" BackColor="#507CD1" ForeColor="#ffffff" BorderStyle="Solid" BorderWidth="1px" BorderColor="#003399" /> <asp:Button runat="server" BackColor="#507CD1" ForeColor="#ffffff" BorderStyle="Solid" BorderWidth="3px" BorderColor="red" SkinID="Delete" />

스킨파일에서 이미 선언되어 있던 버튼을 그대로 복사한 후 BorderWidth와 BorderColor를 바꾸었습니다. 그리고 SkinID속성을 추가 했습니다.  컨트롤의 개수와는 상관없이 SkinID만 중복 되지 않으면 원하는 만큼 다른 스타일의 버튼을 정의 할 수 있습니다.

<asp:Button ID="btnWrite" runat="server" Text="글쓰기" /> <asp:Button ID="btnDelete" runat="server" Text="삭제" SkinID="Delete"  /> <asp:GridView ID="gv1" runat="server"></asp:GridView>

실제 적용하는 부분인데요.. 상당히 간단합니다. 그냥 위에서 선언했던 버튼의 SkinID값만 추가 해 주면 끝입니다.

그럼 결과를 보겠습니다.

위의 결과는 테마와 SkinID를 모두 동적으로 처리해본 경우 입니다.

App_Themes폴더 내부에는 여러개의 Theme폴더가 존재 할 수 있고, Theme폴더 내부에는 다수의 skin, css, 이미지 파일이 존재 할 수 있습니다. 예를 들면 스킨파일의 경우 Button.skin, Gridview.skin을 생성하고 Button.skin에는 버튼에 관련된 스킨만, Gridview.skin엔 그리드뷰에대한 스킨만 정의 하는 코드를 만들고 각각 내부에서 SkinID로 구분지어 주면 보다 관리 하기 용이한 테마를 만들 수 있을 것다는 필자의 생각입니다.^^

지금까지 ASP.NET 2.0에서 지원하는 Theme에 대해 알아봤습니다. 그다지 어려운 부분은 없지만 잘 활용하면 상당히 유용하게 쓰일 수 있을 것 같습니다. ASP.NET 2.0의 개인화에 더해져 사용자 별로 다른 유저인터페이스를 제공하고 주기적으로 사이트의 레이아웃을 변경 할 수 있다는 점 등. 응용할 수 있는 부분은 상당히 많다고 생각됩니다. 본 강좌에서는 간단한 부분만을 다루었기 때문에 결과물에 별로 만족하지 못하시겠지만 스타일시트와 스킨을 적절히 이용하면 스킨의 변경만으로도 완전히 다른 모습으로 보이게 할 수도 있습니다. 물론 샘플로 제공해 드리진 못했지만 ㅡ.ㅡ 이 강좌를 참고해 보다 멋진 테마를 이용한 사이트를 만들 수 있었으면 합니다.

이번 강좌에 쓰인 소스를 원하시면 클릭하세요 ^^

다음 번엔 좀 더 좋은 내용의 강좌로 뵙도록 하겠습니다.

강좌 목록으로..