Taeyo's ASP.NET

태오 사이트에서 활약중인 Microsoft MVP 김석중군이 준비한 멋진 강좌!
요즘 최고의 화두인 Silverlight 에 대한 기술 강좌입니다. 프리뷰성의 강좌이기는 합니다만,
.NET 프로그래밍이 가능한 Silverlight 1.1 버전에서의 개발방식을 미리 살펴볼 수 있는 좋은 강좌입니다.
많은 응원 부탁드려요~

Silverlight 1.1(Alpha) Preview
( Visual Studio 'Orcas' 와 Microsoft Expression Blend 2 를 이용한 )

안녕하세요. ^^ 맛보기 강좌로 연재(?)를 하고 있는 ASP.NET MVP 김석중입니다.

최근에 웹 기술로 가장 화두가 되고 있는것이 무엇일까요? 그건 이래저래 Silverlight (CodeName : WPF/E) 가 아닐까 합니다. 미국 라스베가스에서 열린 MIX07을 통해서도 많은 정보가 쏟아져 나왔고, 많은 Blog를 통해서도 그 내용을 접하실 수 있을 것입니다. 저 또한 많은 정보를 접하느라 정신이 없고, 그 내용을 어떻게 정리를 해볼까 고민을 많이 하고 있는데요. 우선 하나만 정리를 해보자는 생각에 이 강좌를 적어나가려 합니다. ^^

1. Silverlight 1.1 Alpha 개발을 위한 준비
2. Visual Studio 'Orcas' - Silverlight Project 생성 및 살펴보기
3. Expression Blend 2 - XAML 디자인하기
4. Visual Studio 'Orcas' - Behind 파일 수정 및 Silverlight Project 빌드 / 실행
5. 웹 배포 - Visual Studio 'Orcas', Web Site (Framework 3.5)
6. 웹 배포 - Visual Studio 2005, Web Site (Framework 2.0)
7. 맺음말

우선 말씀드리는건 Taeyo님께서 강좌를 올리시는 부분외의 내용이 될듯합니다만 중복되는 내용이 있다면 양해부탁드립니다.

그래서~~~ ^^;; 오늘은 먼저 MIX07에서 비록 공개가 된 내용이지만, Visual Studio 'Orcas' (Beta 1), Microsoft Expression Blend 2 (May Preview) 를 이용한 Preview Silverlight 1.1 (Alpha)를 진행해 보도록 하겠습니다. .NET을 이용해서 Silverlight를 만든다는 점이 참 맘에 들고 (다른 언어를 안배워도 된다는 혜택이.. ^^;), .NET의 Framework를 사용함으로서 많은 자원을 사용할 수 있어 더욱 편리하게 Silverlight를 만들 수 있을것 입니다.
아래 그림을 보시면 Silverlight가 어떻게 구성이 되는지에 대해 쉽게 이해 하실 수 있을거라 생각이 됩니다.

그림 1. Microsoft Silverlight 1.1 Developer Reference
( 출처 : MSDN - http://msdn2.microsoft.com/en-us/library/bb404713.aspx )

서두에서도 말한바와 같이 이 강좌를 따라하기 위해서는 Visual Studio 'Orcas', Microsoft Expression Blend 2를 설치해야만 합니다. Visual Studio 'Orcas' Beta1 은 상단의 링크를 통해서 다운을 받으실수 있습니다. 다만 엄청난 양(5기가가 넘죠..-_-)을 다운 받으시려면 조금 시간이 소요됩니다. 다운 받으신 'Orcas' Beta1에는 'Orcas' 설치 파일과 MSDN이 포함되어 있어서 그런것이니 꼭 다운을 받으셔서 MSDN과 함께 설치하시기를 바랍니다. 또한 Microsoft Expression Blend 2는 현재 May Preview 버전이 공개되어 있습니다. 상단의 링크에서 다운 받으시고, 아래에 나타나 있는 키를 입력하시면 최대 180일간 사용이 가능합니다. (180일 이전에 다른 Preview 혹은 Beta 버전이 공개되겠지요? ^^;;)

자 여기까지 준비가 되었으면 한가지 더 준비하실것이 있습니다. 상단의 'Orcas'의 Add-on을 설치하시면 Silverlight Project를 생성하며, 'Orcas'와 Expression Blend간의 데이터전송, 그리고 'Orcas'에서 Silverlight Project를 컴파일 후 웹 배포도 쉽게 가능하게 됩니다. 꼭 설치를 하시기 바랍니다. 이 강좌도 'Orcas' Add-on을 설치하셨다는 전제하에 진행됩니다.

아, 그리고 중요한걸 하나 빼먹었습니다. Silverlight 1.1 Runtime을 설치하셔야 합니다. 그렇지 않으면 Get Silverlight 이미지를 보실수 있습니다. ^^;; 그리고 SDK도 같이 설치해주는 센스~~~ 부탁드립니다.

모든 준비를 마쳤습니다. 이제 Visual Studio 'Orcas'를 실행해서 Silverlight 프로젝트를 생성해 보겠습니다.

위와 같이 Visual Studio 'Orcas'를 실행시키고 New Project, Visual C#(혹은 Visual Basic.NET) - Silverlight - Silverlight Project를 원하시는 위치와 Project Name을 입력하고, 생성하게 되면 아래와 같이 프로젝트가 생성이 되며 .NET을 이용한 Silverlight 1.1을 만들수 있습니다.

자 이제 첫걸음을 내딪었으니, 어떻게 Silverlight Project가 구성이 되어 있는지 소스를 통해서 한번 살펴보겠습니다.

Silverlight의 XAML은 WPF와는 다르게 Canvas Control (Layout)로 시작을 합니다. 고로 바탕이 되는 Canvas Control의 Property를 알아보죠. Expression Blend 등의 툴에서 보통 만들어 지겠지만, 적어도 어떻게 구성이 되었는지 이해할 필요는 있다고 생각을 합니다.

Canvas Control Property
x:Name	컨트롤의 이름을 설정합니다.
xmlns	xml NameSpace를 설정합니다. Root Canvas에서는 필수입니다.
xmlns:x	XAML NameSpace를 설정합니다. Root Canvas에서는 필수입니다.
Loaded	해당 Silverlight가 실행됐을때의 Load 이벤트를 설정합니다.
x:Class	Class를 설정합니다. assembly는 컴파일 후 dll의 폴더위치를 설정합니다. Root Canvas에서는 필수입니다.
Width	가로(Width) 크기를 설정합니다.
Height	세로(Height) 크기를 설정합니다.
Background	바탕색을 설정합니다.

그리고 Page.xaml.cs 파일은 따로 소스를 보며 설명을 하지 않겠지만, .cs 라고 하니 무엇인지 감이 오시죠? ^^ ASP.NET 페이지의 Behind 페이지와 동일하다고 보시면 됩니다. 즉 Silverlight .xaml의 Behind 파일입니다. Event 등을 구성하여 Silverlight를 제어합니다.

XAML은 XML을 기반으로 만들어졌기 때문에 직관적이며 이해하기 쉽습니다. ^^ 자 이제 XAML을 실행할 HTML페이지를 살펴보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Silverlight Project Test Page </title>

  <script type="text/javascript" src="Silverlight.js"></script>
  <script type="text/javascript" src="TestPage.html.js"></script>
</head>


<body onload="document.getElementById('SilverlightControl').focus()">
  <div id="SilverlightControlHost" >
    <script type="text/javascript">
      createSilverlight();
    </script>
  </div>
</body>
</html>

Silverlight.js 파일은 그 소스를 여기서 설명하지는 않겠지만, Silverlight가 Embed되고 실행할수 있는 환경을 만드는 Javascript 파일입니다. 그 소스를 보시면 IE, FireFox, Safari 등의 다양한 브라우저를 지원하기 위한 소스들이 존재하니 한번 보시는 것도 좋을 것이라 생각합니다.
TestPage.html.js 파일은 예전 브라우저 설계변경 때문에 발생하는 문제를 해결하는 Javascript Function을 담고 있습니다. 그 내용은 아래 소스에서 확인을 해보겠습니다. 여기서 가장 중요한 부분은 Javascript 중 createSilverlight(); 입니다. Silverlight를 div 태그(SilverlightControlHost)에 Embed 하게 되는 부분입니다. 즉 Silverlight를 이 div 태그 내에서 실행을 한다는 것이지요.

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight()
{
   Sys.Silverlight.createObjectEx({
    source: "Page.xaml",
    parentElement: document.getElementById("SilverlightControlHost"),
    id: "SilverlightControl",
    properties: {
      width: "100%",
      height: "100%",
      version: "0.95",
      enableHtmlAccess: true
    },
    events: {}
  });
}

TestPage.html.js 파일입니다. 그 내용은 상당히 간단합니다. createSilverlight() Function이 존재하고 그외에는 아무것도 없지만, 이부분을 잘 보시고 차후에 Silverlight를 Embed 하게 될때 변경을 해서 사용을 하시면 될것 입니다.
Sys.Silverlight.createObjectEx는 Silverlight.js 파일에서 찾아 보실 수 있습니다. 그 내용을 일일이 설명하기는 힘들지만, 이 Function에서 Silverlight를 Embed하고 각 Browser에 맞게 설정을 하게 됩니다. (솔직히 조금 긴 Javascript로 이루어져 있습니다. ^^;;)

source는 .xaml 파일의 위치를 표시합니다.
parentElement는 Silverlight가 실행된 div의 ID값입니다.
id는 실행될 Silverlight의 id를 설정합니다.
Property는 Silverlight의 속성을 정의합니다. 가로, 세로, 버전, HTML 접근 여부 등.
events는 이벤트를 제어 할수 있습니다.

자 여기까지 입니다. Silverlight Project를 생성하고 그 구성을 간단하게 살펴보았습니다. 어려운점은 없으시지요? 그래서 더 매력적으로 다가 오는것 같습니다. ㅋㅋ

이제 Expression Blend 2를 사용할 차례입니다. 솔직히 우리가 디자이너는 아니지만 XAML이 어떻게 구성되고 동작하겠구나를 Expression Blend를 통해 보면, 최대한 빠르게 이해가 될것이기 때문에 간단한 사용법은 익히시는편이 좋을것 같습니다.
하지만~~~ 여기서는 툴 사용법에 대해서는 넘어가도록 하겠습니다. (왜냐? 라고 물으신다면 앞에서 말한바와 같이 우리는 디자이너가 아니고 주제를 벗어나기 때문입니다.)
그 대신 제가 준비한 XMAL 소스로 대체를 해서 설명을 간단하게 드리겠습니다. XMAL을 보고 실행한 예를 보시면 '정말 얘는 디자인을 안하는게 좋겠구나.' 라고 느끼실겁니다. ^^;;

'Orcas'에서 .xaml 파일 우클릭 - Open In Expression Blend를 클릭합니다.
(몇번을 강조하지만 이 강좌는 상단에서 Visual Studio 'Orcas', Expression Blend와 'Orcas' Add-on을 설치하셨다고 가정합니다.)

오우! 무엇인가 해야 할것만 같은 검은(?) 프로그램이 실행되었습니다. ^^;;; 이 프로그램이 Microsoft Expression Blend 2 입니다. 툴 사용법은 훌쩍~~~, 구렁이 담 넘어가듯이 넘어가겠습니다. ㅋㅋ

하지만, 여러분!! 눈에 띄는.. 아니 익숙한 무엇인가를 발견하셨습니까? 바로 Project Window인데요. 어디서 많이 보던 파일 및 폴더 구조를 포함한 Window, '아니 저건!!! -_-' 그렇습니다. 아래 이미지에서도 보시면 알다시피 Project Window에는 Visual Studio 'Orcas'에서 생성된 Silverlight Project가 로드되어 있습니다.

이제 Silverlight를 만들때 Expression Blend를 사용하여 .xmal 부분은 디자이너가, Visual Studio를 사용하여 .cs 부분은 프로그래머가 보면서 프로젝트를 진행 할 수 있게 된 것입니다. 즉 협업이 많이 강조가 될 수 밖에 없는 상황이지요. 고로 디자이너와 친하게 지내셔야 겠지요? ^^ (만약 디자이너와 싸우고, 디자이너가 .cs 파일을 확 날려버린다면.. -_- 끔찍합니다.)

사실 말이죠. Visual Studio 'Orcas'에서 Silverlight Project를 생성했지만, 위의 그림처럼 Expression Blend 2에서도 Silverlight Project를 생성할 수 있습니다. 그리고 또 하나 놀라운(?) 사실은 아래 그림을 보시죠. (놀라지 않으셔도 어쩔수 없습니다. -_-+)

Expression Blend 2 에서는 Project를 빌드 할수도 있고, Test Project를 실행해서 브라우저에서도 확인이 가능합니다.

얼추 Expression Blend에 대해서 설명이 된 것 같습니다. 그럼 제가 준비한 XAML 파일을 Expression Blend에 넣어보겠습니다.

소스를 잠시 설명을 드리겠습니다.
(디자인은 지금 강좌의 중점사항이 아니니까 또 슬쩍~~ 넘어가겠습니다. ^^;;)

Storyboard Object - Animation Object. 즉 Storyboard 안의 내용은 전부 Animation을 위한 Object.
Rectangle Control - Drawing Object, 사각형을 그리기 위한 Control.
TextBlock Control - 글자를 입력하기 위한 Control.

전체적으로 'Go! Taeyo.NET' TextBlock(x:Name - txtTaeyoNET)과 투명한 사각형(Rectangle, x:Name - recTaeyoNET)을 포함하는 Canvas Control(x:Name - CanvasTaeyoNET)이 있습니다.
① Animation - 비하인드 파일을 이용하여MouseEnter/MouseLeave 이벤트를 발생. Canvas Control에 Animation을 동작
② Click Event - MouseLeftButtonDown 이벤트로 Canvas Control을 마우스클릭시 Taeyo.NET으로 이동하게 만들려 합니다.

말로 설명을 하니 복잡한가요? 하나하나 따라 실행을 해보면 그다지 어렵지 않다는 것을 느끼실 것입니다. ^^

위는 Expression Blend에서 본 Page.xaml 입니다. 아직 변화를 하거나 하는 모양이 보이지 않습니다. 이제 Page.xaml을 저장하고 'Orcas'로 돌아가겠습니다.

Expression Blend에서 변경된 XAML페이지를 'Orcas'에서 다시 열기위해 확인을 하는 창이 뜨게됩니다. 'Yes'를 클릭.

4. Visual Studio 'Orcas' - Behind 파일 수정 및 Silverlight Project 빌드 / 실행

이제 비하인드 파일을 열어서 위에 설명한 것 중 ① Animation 처리를 해보겠습니다. Canvas 위로 Mouse가 올라갈때, 내려올때 처리를 하게 됩니다.

흐음.. 그다지 설명을 드릴것이 없어 보일 정도로 쉬운 소스라 생각이 드는데요. ^^;;

해당 Control에 이벤트를 적용하려면 Page_Loaded 이벤트에 EventHandler를 입력하시면 됩니다. 그리고 MouseEnter 이벤트에는 첫번째 Timeline(x:Name - TimelineCanvasTaeyoNET)을 실행시켜서 움직이도록 하고, MouseLeave 이벤트에서 원래대로 움직이도록 하는 Timeline(x:Name - TimelineCanvasTaeyoNETLeave)을 실행합니다.

다음으로 ② 클릭시 브라우저에서 새창을 띄워 Taeyo.NET으로 이동해 보겠습니다. 아래 그림에서 추가된 부분(MouseLeftButtonEvent)만 입력하시면 됩니다.

오~~~ 역시 잘 동작을 하고 있습니다.
휴우~~ 쉽게 따라 오셨나요? 설명이 어렵지는 않았는지 궁금합니다. ^^

여기까지 Visual Studio 'Orcas'에서 Silverlight Project를 생성, Expression Blend 2를 이용하여 XAML 디자인. 다시 Visual Studio 'Orcas'를 이용하여 Behind를 구성, 동작하는 모습을 보여드렸습니다. 이상으로~~~~~~

라고 끝을 내면 안되겠지요? ^^;; 실제로 Silverlight Project가 포함된 Solution에 Web Site를 추가하여 배포, 동작하는 모습도 보여드려야 인지상정(人之常情) 아니겠습니까? 그럼 다시 힘을 내서 출발~~~!!

Visual Studio 'Orcas'의 Solution에 Web Site를 추가하도록 하겠습니다.

Silverlight Project를 Web Site에 배포하기 위해서는 상단 그림과 같이 Web Site - Add Silverlight Link를 클릭합니다.

Silverlight Project를 선택하고 'OK'. 배포가 끝났습니다. 정말 배포가 끝난것이냐구요? 끝입니다. -_-;;

Add Silverlight Link후에 Solution Explorer의 모습입니다. ClientBin폴더와 Page.xaml 파일이 복사된 것을 알 수 있습니다. 그럼 단순히 한 번의 배포를 위해 Add Silverlight Link를 한 것 일까요? 이 부분은 잠시후에 알아보기로 하고, 우선 Web Site가 정상적으로 동작을 하도록 구성해보겠습니다.

복사가 안된 Silverlight.js와 TestPage.html.js 파일을 Web Site에 추가합니다.

Web Site의 Default.aspx페이지를 Silverlight Project의 TestPage.html과 같이 수정(Copy&Paste 신공)합니다. 자 이제 준비가 완료되었습니다. Web Site를 빌드하고 Default.aspx 파일을 실행해 보도록 하겠습니다.

자 여기서 잠깐, 조금 전에 Add Silverlight Link에 대해서 확인을 해보겠습니다. Add Silverlight Link는 단 한 번의 배포를 위해 하는것이 아닙니다. 말그대로 Link이자 참조입니다. 즉 Silverlight Project를 수정하고 빌드를 하게되면 Link 된 Web Site에 자동 배포가 되어지죠. 정말이냐구요? 그럼 간단히 변경을 해보겠습니다. (이 부분은 'Orcas' Add-on을 설치하셔야 합니다.)

Silverlight Project의 Page.xaml.cs를 조금 수정하겠습니다. TilelineCanvasTaeyoNET의 Completed 이벤트를 추가합니다. 그 후에 Silverlight Project를 빌드. Web Site의 Default.aspx 파일을 다시 브라우저에서 실행하겠습니다.

MouseEnter 이벤트 발생후에 TimelineCanvasTaeyoNET이 종료될때, Text가 변경이 되었지요? ^^
('Go! Taeyo.NET' -> 'Taeyo.NET Fighting!')

그렇다면 Silverlight Project에서 만들어진 Silverlight 1.1 Alpha를 현재 우리가 사용하고 있는 Visual Studio 2005, 즉 Framework 2.0의 Web Site에 어떻게 추가를 해야 할까요? 이 부분은 어쩔수 없이 파일 Copy를 통해서 2.0 Web Site로 추가해 주어야 합니다. 그 방법은 아래에서 확인하도록 하겠습니다.

Visual Studio 2005를 사용하여 적당한 위치에 Web Site를 추가합니다. 아래는 추가한 모습입니다.

위의 그림과 같이 Silverlight Project에 있던 ClientBin 폴더와 Page.xaml, Silverlight.js, TextPage.html.js 파일을 복사하여 Web Site에 추가합니다. Default.aspx 파일을 Silverlight Project - TestPage.html을 참고하여 수정을 하고, Web Site 빌드, Default.aspx를 브라우저로 실행하겠습니다.

실행되는 모습이 보이시나요? 으하하하하~~~ 정상적으로 잘 실행이 되고 있습니다. ^^

지금까지 Visual Studio 'Orcas', Expression Blend 2 를 통해서 Silverlight를 제작하고, 웹으로 배포하여 실행되는 모습을 보셨습니다.

최근 사용자들의 높아진 눈과 H/W, S/W의 양적/기술적 성장으로 인해 새로운 기술들이 나오고 있고, 사용자에게 보다 많은 것을 보여줄수 있는 환경이 조성되고 있으며, 사용자들은 이를 원하고 있습니다. 그에 부응할 수 있는 웹 기술이 Silverlight임은 틀림이 없다고 생각합니다. 물론 경쟁사들의 기술도 진화를 하고 있고, 좋은 상대(Silverlight)가 나와서 기술적인 진보를 이룰수도 있을 것이구요. 선의의 경쟁을 기대해 보는 것도 즐거울 것 같습니다. ㅋㅋ

이번 여름에 정식으로 출시될 Silverlight 1.0, 그 후 조금 더 다듬어진 모습으로 선보일 Silverlight 1.1은 사용자에게 보다 많은, 그리고 좋은 경험을 쌓을 수 있도록 도울것이며, 개발자에게도 새로운 개발의 기회를 줄 것이라 믿어 의심치 않습니다. 우리 모두 즐거운 마음으로 기다려 보도록 하구요. ^^

이 강좌에서 소개된 모든 소스는 아래에 링크를 클릭하셔서 다운 받으시면 됩니다.

그럼 저는 차후에 Silverlight 또는 다른 내용으로 슬쩍~~ 몰래~~ 찾아뵙겠습니다. ^^;;