Taeyo's ASP.NET

차세대 웹은 기능적인 측면과 그래픽적인 측면에 대해 많은 진화가 예상됩니다.
그리고, 그 중 기능적인 부분은 AJAX가, 그래픽적인 부분은 바로 WPF/E가 주도하게 될 것입니다.
이번 강좌에서는 WPF/E 애플리케이션 템플릿 구성과 크로스 브라우저 지원을 해보겠습니다

참고로, 강좌 및 세미나를 준비하는 중에 WPF/E Feb 2007 CTP 버전이 나왔네요 ^^
크게 달라진 것은 없지만, 강좌를 일부 수정해야 해서 시간이 좀 걸렸습니다.

*********************************************************************
Silverlight 1.0 Beta가 나오면서, 기존의 파일들이 상당 부분 변경되었습니다.
해서, 이번 강좌에서 설명하는 내용은 현재 시점에서는 올바로 동작하지 않습니다.
조만간, Silverlight 1.0에 맞춰서 재정리하여 강좌를 업데이트 하도록 하겠습니다.
*********************************************************************

WPF/E Overview Part (3)

본격적인 Silverlight(코드명 WPF/E) 개발을 위해서는 일단 Silverlight(코드명 WPF/E) SDK를 설치해야 한다. SDK에는 참조(레퍼런스) 문서와 자습서뿐 아니라, 프로젝트 템플릿 및 유용한 유틸리티들도 포함되어 있어서 개발 시에 다양한 도움을 얻을 수 있다. 이전에 이미 링크를 제공하였지만 아직까지 설치하지 않았다면 지금이라도 설치를 하도록 하자.

중요 체크!!!

강좌가 진행되는 중에 Silverlight(코드명 WPF/E) 2007년 2월 CTP 버전이 나왔다. 기존 12월 버전을 설치했던 분들은 새 버전으로 재설치 하기를 권장한다. 내부적인 기능 강화가 있었고, 약간의 새로운 기능(FullScreen 기능)이 추가되긴 했지만 아직 눈에 띄는 큰 변화는 없으니 부담없이 재설치를 시도해보자!

Windows를 위한 Silverlight(코드명 WPF/E) 런타임은 다음 링크에서 설치 가능하다.

Silverlight(코드명 WPF/E) 2007년 2월 자 CTP 버전(이전 버전은 제거한 뒤, 설치)
http://www.microsoft.com/downloads/details.aspx?FamilyId=E63992D3-CCF5-40B9-B98A-D16BCA57467C

설치가 되고 나면, 자습서가 C:\Program Files\Microsoft SDKs\WPFE 폴더 하위에 생성되는 것을 확인할 수 있다. 꼭 한번은 자습서를 살펴보도록 하자. 대부분의 경우, SDK에 포함되어 있는 자습서는 시중의 그 어떤 기술 서적보다도 훌륭하다. 신기술 관련 책을 집필하는 저자들도 자습서를 참고하여 책을 집필하곤 한다는 점을 생각하면, 자습서의 중요성은 두말할 필요가 없다.

추가적으로, 만일 여러분들이 Visual Studio 2005(이하 VS 2005)를 사용한다면, 다음 링크로부터 "Visual Studio 2005 extensions for .NET Framework 3.0 (WCF & WPF), November 2006 CTP"도 설치할 것을 권장한다. 이를 설치하면 VS 2005에 WPF 애플리케이션 개발을 위한 기능(디자이너와 파서 등)들이 추가되는데, 이는 XAML 파일에 대한 인텔리센스 기능을 비롯하여 XAML 디자이너도 이용할 수 있음을 의미하므로 설치하게 되면 WPF/E를 개발하는 경우에도 생산성에 큰 도움이 된다.

Visual Studio 2005 extensions for .NET Framework 3.0 (WCF & WPF), November 2006 CTP
(물론, 이 링크는 예고없이 변경될 수 있다. 그 경우, 직접 MS 사이트에서 찾아보는 노력은 셀프!)

더해서, 영문 VS 2005를 사용한다면, WPF/E SDK에 포함되어 있는 WPF/E용 프로젝트 템플릿도 이용할 수 있지만, VS 2005 한글판에서는 이를 설치하는 것에 문제가 있어서 현재는 아쉽게도 WPF/E 프로젝트 템플릿을 이용할 수 없다(편법으로 템플릿 파일인 WPFEWebApplicationCS.zip 파일만을 별도로 구해 적용하는 방법도 없지는 않지만 권장하진 않는다). 해서, 현재로서는 WPF/E 웹 애플리케이션의 기본 골격을 수동으로 작업을 해야 한다. 하지만, 그 기본 골격이라는 것이 고작 폴더 몇 개를 구성하는 수준이기에 어려울 것은 전혀 없다. 곧 같이 해볼 것이다.

이 부분 정정한다. 이유는 2007년 2월자 CTP 버전이 나오면서 이 부분도 픽스되었기 때문이다. 고로, 이제는 템플릿이 올바로 설치된다. ^^ 템플릿 설치파일은 C:\Program Files\Microsoft SDKs\WPFE\Tools에 있는 WPFEVSTemplate.msi 를 설치하면 된다. 그러면, VS 2005에서 새로운 프로젝트를 만들 경우 다음과 같이 템플릿을 선택할 수 있다.

하지만, 개인적으로는 이 템플릿이 그다지 맘에 들지 않는다. 해서, 강좌에서는 제공되는 템플릿을 사용하지 않고 직접 사이트를 구성하는 쪽으로 진행해 보겠다. 기본적으로 제공되는 템플릿이 손으로 직접 구성하는 것이나 별 차이가 없을 정도로 간단하기 때문이다.

정식 버전에서는 좀 더 나은 템플릿을 기대해본다 ^^

모든 설치를 마쳤다면, 이제 본격적인 시작을 위해서 새로운 웹 사이트를 하나 만들도록 하자. 필자는 VS 2005를 통해서 다음과 같이 로컬 디렉토리(C:\WPFEWeb)에 가상 웹 사이트를 구성해 보았다. 만일, VS 2005를 사용하지 않는 독자라면, 직접 C:\WPFEWeb 폴더를 만들고, 그 폴더를 가상 디렉토리로 설정하면 될 것이다.

웹 사이트가 만들어졌다면, 루트에 js라는 폴더와 xaml 이라는 폴더를 각각 새로이 추가하도록 하자. 그리고, 다음 경로로부터 aghost.js 파일을 복사하여 js 폴더에 붙여넣도록 하자.

여기까지의 작업으로 여러분의 가상 디렉토리는 다음과 같은 구성을 가지게 되었을 것이다.

aghost.js는 WPF/E SDK에서 제공하는 자바스크립트 파일로서, 다양한 플랫폼과 브라우저에서 WPF/E 컨텐츠 즉, XAML 파일을 구동할 수 있게 도와주는 역할을 한다. 파일의 내부 소스를 살펴보면, 이는 agHost라는 자바스크립트 클래스로 구성된 것을 확인할 수 있는데, 이 클래스는 현재 사용자의 플랫폼과 브라우저를 검사하여 그에 최적화된 ActiveX 코드를 출력하는 역할을 담당한다. 즉, 개발자가 단지 자바스크립트로 agHost라는 클래스를 생성하면서 적절히 인자들(WPF/E를 출력할 대상 HTML 요소 ID, XAML 파일경로 등)을 지정하기만 하면, 이 도우미 클래스가 알아서 적절하게 HTML 상에 <object> 태그나 <embed> 태그를 삽입하여 WPF/E를 표현하는 것이다.

aghost.js 파일

이전 글에서 설명했다시피, XAML은 HTML 상에서 WPF/E ActiveX 컨트롤을 통해 호스트되어 표현되는데, XAML이 올바로 렌더되려면, 사용자의 플랫폼과 브라우저에 따라 각기 다른 태그가 사용되어야 한다. 예를 들면, Windows XP sp2나 Windows Vista 상의 IE에서는 다음과 같은 <object> 태그를 이용하여야 올바로 XAML(WPF/E용 XAML)을 출력할 수 있다.

반면, Windows 플랫폼 상에서 Firefox를 지원하려면 다음과 같이 <embed> 태그를 이용해야 하며, 각 설정값을 어트리뷰트로서 지정해야 한다.

더불어, Macintoshi 플랫폼 상에서 Firefox를 지원하려면, 상기 <embed> 태그 중 pluginspage 어트리뷰트의 값을 다음과 같이 바꾸어 작성해야 한다.

pluginspage="http://go.microsoft.com/fwlink/?LinkID=77793&clcid=0x409"

브라우저나 플랫폼에 따라 각기 다른 태그를 출력하도록, 개발자가 JavaScript 코드를 작성하는 것이 어렵지는 않지만, 이는 피곤한 작업임에 틀림이 없으므로, 마이크로소프트가 agHost.js 파일을 통해서 그러한 작업을 대신하고 있는 것이다. 그리고, 이 파일은 지원되는 플랫폼이나 브라우저가 늘어날 때마다 계속적으로 업데이트 될 것이기에, 개발자가 agHost.js 파일을 사용할 경우, 이후에도 크로스 플랫폼/브라우저를 신경쓰지 않아도 되는 이점도 있다.

현재, 공개되어 있는 외국 개발자 블로그나 MS 샘플들을 살펴보면 agHost.js 파일을 이용하여 WPF/E를 렌더하는 것이 일반화되어 있는 것을 볼 수 있다. 또한, 이는 Channel9을 통해서 계속적으로 업데이트가 이루어질 것으로 보여지기에, 이 유틸리티 파일은 널리 즐겨볼 만 하다. 그리고, 그럼으로써 대략적인 WPF/E 애플리케이션의 템플릿이 정리되어 지는데, 다음은 ahHost.js 파일을 이용하는 경우의 일반적인 파일 구성이다.

이 템플릿 구조의 규칙은 매우 간단하다. 하나의 html 웹 페이지는 여러 개의 관련 xaml을 가질 수 있으며, 이들은 agHost.js 파일을 공통적으로 이용하도록 한다. 또한, 각각의 xaml 파일이 스크립트와의 연동이 필요할 경우에는 동일한 이름의 js 파일을 추가로 작성하여 필요한 추가 스크립트들을 그 안에 작성토록 한다. 이렇게 하면, 파일 관리와 소스 관리가 매우 명확해질 것이니 말이다. 해서, 이제부터의 예제들은 상기 구조의 템플릿과 agHost.js를 사용하여 작성해 보도록 하겠다.

스크립트에 자신이 있는 독자는 agHost.js 파일의 소스를 한번 살펴보는 것도 나쁘지는 않다. 소스 내용은 크게 어려울 것이 없으니 말이다.

agHost.js 파일을 이용하게 되면 XAML(WPF/E 용)을 HTML에 나타내는 것이 매우 편리해진다. 그렇다면, 기존의 Hello 예제를 agHost.js 파일을 이용하는 것으로 바꾸어 보도록 하자. 다음은 그렇게 바꾸어 본 코드 샘플이다.

<html>
<head>
    <title>Hello. WPF /E</title>
    <style>p { font-family:tahoma; font-size:12 }</style>
    <script type="text/javascript" src="js/aghost.js"></script>
</head>
<body>
    <p>WPF /E 기본예제</p>

    
    <div id="agControl1Host">
    </div>

    <script type="text/javascript">
        new agHost(
            "agControl1Host",       // 호스트 HTML 요소의 Id, 일반적으로 <div>를 사용.
            "agControl1",             // WPF/E ActiveX 컨트롤의 ID
            "400",                       // 너비
            "200",                       // 높이
            "#efefef",                 // 배경색
            null,                         // 인라인 Xaml을 포함하는 스크립트 명칭
            "PopcanDemo/popcan.xaml"       , // 소스 파일
            "false",                     // IsWindowless
              "30",                       // MaxFrameRate
            null                          // OnError 처리기(메서드명)
        );

        // 편의를 위해서 WPF/E ActiveX 컨트롤의 id를 전역 변수에 넣어둔다
        var agControl = document.getElementById("agControl1");
    </script>
</body>
</html>

agHost.js 파일을 사용하면, WPF/E ActiveX 컨트롤을 <object> 태그나 <embed> 태그를 이용하여 직접적으로 작성하는 대신, 위와 같이 new agHost() 클래스를 선언하는 것만으로 대신할 수 있게 된다. 처음 대면할 경우에는 오히려 이 방식이 복잡하게 느껴질 수 있으나, 익숙해지면, 이 코드는 거의 표준 코드처럼 사용하게 되기에 훨씬 쉽게 느껴질 것이다.

상기 코드는 agHost 클래스의 전체 인자와 그 설명을 포함하고 있어서 길게 작성되어 있지만, 부가적인 속성들을 제외한다면 사실상, 다음과 같이 간단하게 작성하는 것만으로도 WPF/E를 렌더할 수 있다.

<div> 태그를 이용해서 WPF/E ActiveX 컨트롤이 실제로 렌더될 영역을 잡아주어야 한다는 점은 꼭 기억을 하도록 하자. 상기 코드에서는 이를 위해 <div id="agControl1Host" /> 태그가 사용되고 있다.

이것이 전부이다. 간단하지 않은가? 그리고, 다음은 이렇게 바뀐 Hello.htm을 각각 IE와 Firefox에서 확인한 결과이다.

~~필자는 Mac 머신을 보유하지 못해서, Mac OS에서의 결과 이미지는 캡춰하지 못했으나, 마찬가지로 올바로 출력될 것이라 예상한다.~~ Mac OS에서의 Safari 브라우저에서의 결과화면은 다음과 같다. 참고로, 이 이미지는 [한국정보통신기술협회]에서 근무하시는 박현권님께서 캡춰하여 보내주신 것이다. OS 버전은 MacOSX 10.4.8 이며, 브라우저는 기본 내장 브라우저인 Safari 2.0.4 이다. 이에 감사의 말씀을 드린다.

갈수록 재미있어지는 WPF/E 강좌. 오늘은 여기까지다. 다음 시간에는 new agHost(..) 함수의 각 인자들에 대한 자세한 설명과 다양한 스크립팅 기법 등에 대해서 이야기할 것이다. 개발자들이 참으로 좋아할 만한 내용이 이어진다고 보면 되기에, 기대를 해주어야 한다!!