TAEYO.NET

현재(2008년 8월)는 Silverlight v2.0까지 등장하려 하는 시점이기에 이하의 글에서 기술된 소프트웨어의 설치는 권장하지 않는다. 현재는 프로그래밍 기법도 많이 바뀌었으므로, 코딩을 작성하는 것은 자제하기를 바라며, 강좌를 개념적으로 읽어보기만을 권장한다

현재 버전인 Silverlight 2월자 CTP는 다음 링크에서 구할 수 있다. 하지만, 이전 Silverlight 샘플 사이트를 방문한 적이 있다면 그 페이지를 접근했을 경우, 다운로드 링크가 제공되었을 것이고, 그를 통해서 이미 설치가 된 상태일 것이다. (개발자라면 Silverlight SDK도 설치할 것을 권장한다. 개발을 위해서 필요할 테니!).

Silverlight의 공식 홈페이지는 다음과 같다.

http://www.microsoft.com/silverlight/

사실, CTP 버전이라 하더라도 XAML 렌더링 및 Javascript 연동 부분에는 이후에도 큰 변화가 없을 것으로 예상되기에, 단순 출력이나 AV 렌더링과 관계된 비교적 간단한 화면구성은 지금부터 제작해도 배포상에 큰 문제는 없을 것으로 예상된다. 물론, 어디까지나 예상이며, 장담은 할 수 없다.

현재 제공되는 2월 자 CTP 버전은 Windows와 Macintosh 플랫폼을 지원하며, IE(6.0, 7.0)과 Firefox(1.5.0.8, 2.0), 그리고 Safari(2.0.4) 브라우저를 지원하고 있다. 자세한 정보는 다음 그림을 참고하도록 하자(차후에는 Linux와 Solaris도 지원할 계획이라고는 하지만 확정된 계획은 아닌 것으로 보인다).

Silverlight가 설계 상에서 구상해 놓은 기본적인 목표는 다음과 같다.

즉, 저 용량의 플러그 인(현재, 약 1M 정도의 크기이며, 최종 릴리즈도 3M를 넘지 않을 것으로 이야기되고 있음)을 브라우저를 통해서 설치하기만 하면, 여러 플랫폼의 여러 브라우저에서 벡터 기반의 이미지 및 다양한 AV 포맷을 자연스럽게 보여줄 수 있게 되며, 2D 기반의 애니메이션 등 화려한 그래픽으로 무장한 UI를 가질 수 있다는 것이다. 클라이언트 PC에 Windows Media Player가 설치되어 있지 않아도 무관하다. 이미 Silverlight에는 그를 위한 코덱(codec)도 포함되어 있기 때문이다.

즉, Silverlight는 기존의 기능적인 웹 기술(ASP.NET AJAX)에 화려한 UI 및 향상된 경험을 더하여 마치 윈도우 애플리케이션과 같은 웹 애플리케이션을 가능하게 하려는 목표를 가지며, 마이크로소프트의 UX 기술 흐름 상에서 다음과 같이 중간 단계의 위치를 차지하는 기술이다.

이를 통해 조심스럽게 예상해 볼 수 있는 것은 앞으로의 웹 애플리케이션이 화려한 UI를 위해서는 Silverlight(코드명 WPF/E)를, 그리고 그와 웹 서버간의 데이터 통신을 위해서는 ASP.NET AJAX(코드명 Atlas)를 이용하지 않을까? 라는 것이다. 그리고, 예상대로 진행된다면, 이를 통해 기존보다 훨씬 강력한 웹 애플리케이션을 구성하게 될 수 있을 것이다.

하지만, 오해는 곤란하다. Silverlight(코드명 WPF/E)를 이용할 경우, 풍부하고 화려한 UI를 제공할 수는 있지만, 그렇다고 이 것이 당장 모든 웹 페이지를 대체할 수 있을 것이라고 생각하는 것은 곤란하다는 것이다(언젠가는 그렇게 될 수도 있긴 하지만). 각 웹 페이지는 업무에 따라, 기능에 따라 해당 페이지에 대한 표현 기법이 다양해 질 수 있다. 그래픽 차트나 시각화 보고서, 메뉴나 탐색 기능과 같은 경우, 또한 일부 그리드 리포트 출력과 관련해서는 Silverlight(코드명 WPF/E)의 미려함을 한껏 이용하여 뽐낼 수 있겠지만, 복잡한 업무 화면의 경우에는 오히려 기존처럼 단순하게 구성하는 것이 나을 수 있다(개발생산성 측면에서는).

사실, 이 부분은 반론이 있을 수 있다. 사용성과 편리성은 살리면서, 디자인도 예쁘게 만드는 것이 불가능하지는 않기 때문이다. 다만, 수백 본에 해당하는 업무용, 관리용 페이지에 미려함까지 만족시키려면 개발 공수 및 비용이 엄청나게 들기에 시도하지 않곤 한다는 점은 언급해 두고자 한다.

하지만, 시간이 지나 사용자들의 눈이 높아지기 시작하면, 업무 화면마저도 화려한 모습을 요구하게 될 것임은 충분히 예상되는 가정이다. 그리고, 그 때가 되면 Silverlight(코드명 WPF/E)는 절대적인 위치를 차지하게 될 수도 있을 것이다. 모든 UI를 Silverlight를 이용해서 화려하게 꾸미는 것이 불가능한 것은 아니기에, 계속적으로 효과적인 툴들이 등장하여 개발이 편리해지게 되면, 앞으로는 모든 웹 화면이 Silverlight로 구성될 수 있다는 가능성도 배제할 수는 없다. 그리고, 그것이 어쩌면 Microsoft가 꿈꾸는 미래의 웹 모습일지도 모른다.

본격적인 Silverlight 프로그래밍에 앞서, 우선 Silverlight(코드명 WPF/E)의 아키텍처 그림을 통해서 이것이 어떻게 설계되어 있는 지를 살펴보도록 하자. "싫어, 당장 [안녕, 세상] 샘플을 작성해 보고 싶어"라 할지라도, 그에 앞서 아키텍처를 알아보는 것은 대단히 중요하다. 단지, Silverlight의 작성 방식만이 궁금한 독자라면 이 부분을 건너뛰어도 좋으나, 진지하게 Silverlight를 살펴보고자 하는 독자라면 이를 부담스러워 해서는 안 된다. 이는 생각보다 지루하지 않으며, 오래 걸리지도 않을 것이니 말이다.

그림에서 보이는 것과 같이 Silverlight(코드명 WPF/E)는 크게 플러그 인과 런타임, 그리고 .NET 프레임워크(Silverlight를 위한 경량 버전)로 구성되어 있다. .NET 프레임워크 구역이 점선으로 표시된 것은 Silverlight 2월 자 CTP 버전에는 아직 포함되어 있지 않기 때문이다.

핵심이 되는 Silverlight(코드명 WPF/E)의 런타임은 이미 언급한 바와 같이 XAML을 지원하며, WMV와 WMA와 같은 미디어 포맷도 지원한다. 이는 클라이언트 PC에 윈도우 미디어 플레이어가 설치되어 있지 않아도 이러한 미디어들을 구동할 수 있음을 의미한다. 다만, MP3에 대한 지원은 2월 자 CTP에는 빠져있으며 정식 릴리즈에는 지원될 예정에 있다. 또한, Silverlight(코드명 WPF/E)는 자체 DOM API와 JavaScript DOM API도 지원하기에, 개발자가 JavaScript를 이용하여 XAML 요소들을 손 쉽게 제어할 수 있으며, 심지어는 동적으로 XAML 요소를 추가할 수도 있다. 이는 브라우저 단에서 개발자들이 XAML 요소들에 대해 다양한 클라이언트 기능들을 접목할 수 있음을 의미하며, AJAX와 함께 이용될 경우 효과적이면서도 다양한 시도가 가능함을 의미한다.

Silverlight(코드명 WPF/E) 아키텍처 웹 사이트를 방문해보면, Silverlight(코드명 WPF/E)와 ASP.NET AJAX가 서로를 보완하는 기술로서 설계되고 있음을 알 수 있다.

http://msdn2.microsoft.com/en-us/library/bb190633.aspx

위의 그림은 참고용으로만 살펴보기를 권장하는, Beta 버전 시의 런타임 아키텍처이다. 정식 릴리즈에서는 다소의 가감이 있을 수 있으므로, 대략적인 구조를 살펴보는 수준으로만 바라보길 바란다. 위의 그림을 통해, 우리는 Silverlight(코드명 WPF/E)가 WPF와는 달리 3D에 대한 지원이나 하드웨어 가속 등의 기능을 포함하지 않는다는 것을 알 수 있다. 이는 크로스 브라우저/플랫폼 지원과 경량의 크기를 목표로 하는 Silverlight(코드명 WPF/E) 입장에서는 당연한 결정일지도 모른다. 만일, 3D 지원 등의 고급 기능이 요구되는 애플리케이션이라면 Silverlight보다는 WPF를 이용한 XBAP(XAML Browser Application) 프로그램을 개발하면 될 것이다(XBAP을 비롯한 WPF 애플리케이션은 Silverlight와는 달리 클라이언트 PC에 .NET 프레임워크 3.0이 설치되어 있어야만 구동이 가능하다).

대략적으로 기본적인 내용들을 살펴보았으니, 이제(드디어!) "안녕~" 화면을 한 번 작성해 보도록 하자. XAML은 XML 기반의 텍스트 언어이기에 텍스트 편집기만 있으면 어디서나 쉽게 작성이 가능하다. 해서, 필자는 모두의 사랑(?)을 받는 범국민적인 편집기인 "메모장"을 이용하여 코드를 작성하고자 한다. 다음은 그렇게 작성해 본 간단한 XAML 코드이다.

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/XAML/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/XAML">

<TextBlock Canvas.Left="50" Canvas.Top="50" FontFamily="tahoma" FontSize="30"
    FontWeight="ExtraBold">
      Hello! WPF/E
      <TextBlock.Foreground>
        <LinearGradientBrush>
          <GradientStop Color="LightBlue" Offset="0.0" />
          <GradientStop Color="SlateBlue" Offset="1.0" />
        </LinearGradientBrush>
      </TextBlock.Foreground>
    </TextBlock>
</Canvas>

소스는 XML 선언 부를 시작으로 하여, 메인 컨테이너 개체로서 Canvas를 사용하고 있는 것을 볼 수 있다. 반드시 Canvas 요소를 사용해야 하는 것은 아니지만, 보편적으로 기본 레이아웃을 잡기 위해서는 Canvas를 사용하는 편이기에 이를 사용해 보았다. 주의할 것은 xmlns와 xmlns:x(XAML 네임스페이스)가 반드시 포함되어야 한다는 것이다. 이는 필수 어트리뷰트에 해당하므로 Canvas 요소 안에 반드시 위와 같이 작성을 해주어야 함을 기억하자.

메인 컨테이너를 생성한 뒤에는, TextBlock 요소를 추가하고 있는데, 요소의 위치를 잡기 위해서 Canvas.Left와 Canvas.Top 어트리뷰트 값을 적절히 지정하고 있음을 볼 수 있다. 이 어트리뷰트들은 확장 어트리뷰트(Extended Attribute)로서 요소가 Canvas 내부에 포함되는 경우에만 사용할 수 있는 어트리뷰트이다. 그리고, TextBlock 요소의 출력 텍스트로는 "Hello! WPF/E"를 지정하고 있으며, TextBlock의 전경 색에 대해서는 선형(線形)의 그라데이션 효과를 주기 위해, LinearGradientBrush를 이용하고 있다. 각각의 XAML 요소에 대한 상세한 설명은 본 아티클의 범주를 벗어나기에, 개별적으로 MSDN을 통해서 학습하기를 권해본다.

XAML 참조 사이트(영문)

http://msdn2.microsoft.com/en-us/library/ms747122.aspx

XAML 파일이 완성되었다면, 그 다음에 해야 할 일은 이를 호스트하기 위한 HTML 파일을 작성하는 것이다. 다음과 같이 Hello.htm 파일을 작성해 보도록 하자.

<html>
<head>
    <title>Hello. WPF/E</title>
    <style>p { font-family:tahoma; font-size:12 }</style>
</head>
<body>
    <p>WPF/E 기본예제</p>

    <object id="hello1" width="400" height="140"
        classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
        <param name="Source" value="Hello.xaml" />
        <param name="BackgroundColor" value="#dddddd" />
    </object>
</body>
</html>

소스에서 볼 수 있는 것과 같이, XAML 파일은 ActiveX 컨트롤을 통해서 호스트되는 형태로 HTML 안에 놓여진다. 즉, Silverlight(코드명 WPF/E) ActiveX 컨트롤(Silverlight 플러그인 설치 시, 함께 설치된 컨트롤)의 소스 파일로서 XAML 파일을 지정하기만 하면, 브라우저 안에서 멋지게 표현이 되는 것이다.

다음은 작성된 hello.htm과 hello.xaml 파일을 웹 서버에 옮긴 뒤, 브라우저를 통해 확인한 결과 화면이다(반드시, 두 파일을 웹 서버 상에 올려놓은 뒤에 http:// 경로를 통해 실행해야 결과를 볼 수 있다).

만일, 아직 Silverlight(코드명 WPF/E) 플러그인이 설치되지 않았다면, 위의 화면은 올바로 나타나지 않을 것이다. 그 경우에는 수동으로 반드시 Silverlight(현재는 약 1M 크기임)를 설치해 주어야 한다. 이후에는 이 부분도 자동화되지 않을까 예상해 본다.

어떤가? 간단하지 않은가? 단순 텍스트를 출력하는 예제치고는 어쩌면 생각보다 간단하지 않았을 수도 있지만, 기본적인 개발 템플릿만 준비된다면 이는 매우 간단한 작업이다. 그렇다면, 이제 워밍업을 마쳤으니 조금 더 다양한 예제를 다루어 보도록 하자.

사실, 방금 작성한 Hello 예제는 완전하지 못하다.

일단, 이전 예제에서 ActiveX를 렌더하는 HTML 코드는 별도의 Js 파일로 분리하는 것이 바람직하다. 그렇지 않고, 예제처럼 <object> 태그를 HTML 상에 직접 작성하게 되면 ActiveX 비활성화 문제로 인해 약간의 번거로움이 생기게 될 것이니 말이다.

또한, 이전 예제는 IE에서만 올바로 동작할 뿐, 아직 Firefox에서는 올바로 동작하지 않는다. 이는 Firefox를 위해서는 <object> 태그 대신 <embed> 태그를 이용해야 하기 때문이다.

그 외에도 몇몇 보완해야 할 사항들이 있는데, 이러한 문제들을 해결하려면 상당량(생각보다 많지는 않겠지만)의 JavaScript 코드를 작성해야 할 것이다. 해서, 마이크로소프트는 이미 그러한 자잘한 문제들을 모두 해결해놓은 별도의 JavaScript 파일(agHost.js)을 제공하고 있다(또한, 이를 꾸준히 업데이트하여 제공할 것으로 보인다). 해서, 이후 예제에서는 이를 이용하여 보다 쉽게 Silverlight(코드명 WPF/E)를 구현해보도록 하겠다.