lecture Home > Silverlight

Silverlight

   강좌 최초 작성일 : 2007년 11월 01일
   강좌 최종 수정일 : 2008년 02월 05일

   강좌 읽음 수 :

   작성자 : Taeyo(김 태영)
   편집자 : Taeyo(김 태영)

   강좌 제목 : ASP.NET AJAX와 Silverlight를 활용한 RIA 구현

강좌 전 태오의 잡담>

이번 강좌는 2007년 11월에 월간 Maso에 실렸던 글입니다.
ASP.NET AJAX와 Silverlight의 등장 및 기술 개요, 그리고 VS 2008에서의 RIA 지원을
아주 가벼운 마음으로 살펴볼 수 있습니다. ^^



RIA(Rich Internet Application)은 최근 UX(User eXperience)와 함께 차세대 웹 애플리케이션을 위한 중요한 요소로서 거론되는 단어이다. 웹 2.0의 핵심인 Ajax(Asynchronous javascript and xml) 기술의 등장으로 인해 보다 인터랙티브(interactive)하게 진화를 거듭하고 있는 현재의 웹 애플리케이션 시장은 더욱 진보된 RIA로서의 모습을 갖추고자 계속적으로 변화에 변화를 거듭하고 있다. 다양한 벤더들이 RIA를 위한 새로운 기술과 컨셉을 소개하며, 앞으로의 웹이 얼마나 풍요로워 질지를 앞다투어 그리고 있는 이 때. Microsoft도 그러한 차세대 웹, 즉 RIA를 위한 그들의 로드맵을 제시했으니, 그 핵심에 위치하고 있는 것이 바로 Silverlight와 ASP.NET AJAX이다.

ASP.NET AJAX

사실 ASP.NET AJAX는 Ajax 기술 측면에서 보면 다른 벤더들의 Ajax 라이브러리에 비해 다소 늦게 등장한 편이다. 하지만, 그의 등장 배경을 알고 나면 왜 이 기술의 등장이 늦어질 수 밖에 없었는지를 충분히 이해할 수 있다. 사실 ASP.NET AJAX는 내부적으로 ASP.NET 서비스와 긴밀하게 통합되어 설계되었을 뿐만 아니라, 떠오르고 있는 새로운 RIA 기술인 Silverlight와의 연계까지 고려하여 설계되었기 때문이다. 즉, Microsoft는 단순히 Ajax 만을 위한 라이브러리로서 ASP.NET AJAX를 준비한 것이 아니라, 그를 포함하여 RIA를 위한 클라이언트 프레임워크를 제공하고자 하는 목적으로 이를 준비한 것이다.

ASP.NET AJAX는 분명 모든 플랫폼과 모든 브라우저를 지원하는 대중적인 Ajax 라이브러리임에는 틀림이 없다. 다만, 다른 공개된 Ajax 라이브러리와는 달리, 이는 웹 서버가 Microsoft 플랫폼(ASP.NET)일 경우, 단순한 클라이언트 라이브러리를 넘어 프레임워크로서의 기반까지 제공해 준다. 기존 ASP.NET의 모든 기능과 통합되어 있기에 인증 서비스, 프로파일 서비스 등까지 쉽게 Ajax 방식으로 사용할 수 있으며, 웹 서비스와 JSON을 이용한 보다 효과적인 데이터 통신도 지원한다. 게다가, .NET 3.5의 WCF가 JSON 포맷을 지원함에 따라 WCF 서비스와의 데이터 통신까지도 지원을 할 수 있게 되었다. 더불어, ASP.NET AJAX가 기존에는 부재였던 클라이언트 개발 프레임워크의 자리를 맡게 됨으로 인해, 기존보다 명확하게 MVC(Model-View-Controller) 모델에 가까운 아키텍처를 구성할 수 있게 되었다.

다음은 ASP.NET AJAX 1.0의 전반적인 지원에 대한 그림이다.


그림 1 ASP.NET AJAX의 전반적인 지원

ASP.NET AJAX의 등장에 따라 ASP.NET 기술도 이제 보다 명확한 형태의 구성을 갖는 개발 프레임워크가 될 것으로 보인다. 기존에는 클라이언트 프레임워크나 클라이언트 프리젠테이션 기술이 별도로 제공되지 않았기에 ASP.NET이 엄연한 서버 기술임에도 불구하고 클라이언트 렌더 영역까지 담당했었지만, 이제는 ASP.NET AJAX의 지원으로 인해 ASP.NET은 자신 본연의 임무에 충실 할 수 있게 되었으니 말이다.

VS 2008에서의 ASP.NET AJAX 지원

그렇다면, Microsoft의 공개된 Ajax 라이브러리이자, RIA를 위한 클라이언트 개발 프레임워크인 ASP.NET AJAX를 Visual Studio 2008(이하 VS 2008)에서는 어떻게 지원하고 있을까? VS 2008을 실행한 뒤, ASP.NET 웹 애플리케이션을 보면, 도구 상자에 다음과 같이 기본적인 ASP.NET AJAX 컨트롤들이 포함되어 있는 것을 확인할 수 있다.


그림 2 AJAX 서버 컨트롤 포함

물론, 각 컨트롤에 대한 인텔리센스 기능도 완벽하게 지원이 된다.


그림 3 완벽하게 지원되는 인텔리센스

사실, 기존 Microsoft의 발표 자료를 보면 ASP.NET AJAX Control Toolkit(이하 ACT)에 속해있는 30여 개의 컨트롤들도 ASP.NET 도구 상자에 포함될 예정이라고 언급되어 있지만, 현재 버전의 VS 2008(Beta 2)에는 아직 반영되어 있지 않기에 별도로 다운로드 및 설치하여 ACT를 사용해야 한다. 정식 버전이 릴리즈 될 때는 ACT 컨트롤들도 포함되지 않을까 예상해 본다.

더불어, http://ajax.asp.net 사이트에서 ASP.NET futures 버전을 다운로드 하여 설치를 하고 나면, ASP.NET 페이지에서 Ajax 방식으로 프로파일 서비스를 사용할 수 있게 하는 ProfileService 컨트롤을 비롯하여, DragOverlay 익스텐더 등 ASP.NET AJAX 1.0 베타버전에서는 포함되었다가 1.0 정식버전에서는 누락되었던 몇몇 컨트롤들도 추가된 것을 확인할 수 있다. 더불어, 쉽게 Silverlight 모듈을 등록할 수 있게 하는 Xaml 서버 컨트롤과 Media 컨트롤도 추가로 탑재된 것도 확인할 수 있다.


그림 4 ASP.NET Futures 컨트롤들

이는 ASP.NET AJAX가 이후 버전에서는 ASP.NET과 통합되어 제공된다는 것을 의미하며, 개발자가 웹 애플리케이션에 쉽게 Ajax 기능을 추가할 수 있음을 의미하는 것이다. 이로 인해, 앞으로의 웹 애플리케이션 개발 방향은 기존과는 달리 다양성을 가질 수 있게 되며, 클라이언트 중심의 보다 인터랙티브한 구성이 가능해 질 것이다.

웹을 밝혀라! Silverlight

Ajax 기술로 인해 웹 세상은 더욱 기능적으로 풍부해지고 있다. 그리고, Microsoft의 ASP.NET AJAX 지원으로 인해 앞으로의 Ajax 개발은 더욱 쉬워지고, 그만큼 폭 넓게 적용될 것임에 틀림이 없다. 하지만, UX의 중요 요소 중 하나인 미려한 UI를 꾸미기 위해서는 여전히 순수 웹 기술은 많은 제약을 가지고 있다. 이미지로 전체 페이지를 도배하는 것이 그나마 가장 보편적인 방법이지만 이것 만으로는 갈수록 높아가는 사용자의 눈을 맞추기에 부족하다. 정적인 이미지만으로는 표현에 한계가 있기 때문이다.

그 동안 마이크로소프트의 웹 기술들(ASP, ASP.NET, ASP.NET AJAX 등)도 엔터프라이즈 시장을 기반으로 꾸준히 발전해 오긴 했지만, 이러한 기술들은 UI 프리젠테이션 측면에서는 HTML의 한계에서 벗어나지 못하기에 사용자가 원하는 화려하고 미려한 UI를 구성하기에는 사실 부족한 점이 많았다. 해서, 그 동안의 웹 UI 프리젠테이션 영역은 사실 매크로미디어(Macromedia) 사의 플래시(Flash)와 같은 기술이 대중적으로 사용되어 온 것을 다들 알 것이다. 그 기술의 등장은 정적인 웹에 신선한 충격을 주었고, 많은 이들의 관심과 사랑을 받으면서 현재까지도 범용적인 기술로 대접 받고 있다. 하지만, 시간이 지남에 따라 플래시도 다양한 보완점들을 지적 받고 있으며 그에 대한 대안 기술들이 계속적으로 발표되고 있는 상황이다. 하지만, 그러는 사이에도 Microsoft는 이 분야에 대해서는 그다지 눈에 띌 만한 움직임을 보여주지 않았는데, 그러한 무반응은 관심이 없기 때문이 아닐까 하는 오해를 사기에 충분했다. 하지만, 그 침묵이 폭풍전야의 고요함이었다는 것을 깨닫는 데에는 그리 오랜 시간이 걸리지 않았다. 그렇다. Silverlight를 앞 세워 웹 프리젠테이션 시장에 새로운 도전장을 던진 것이다.

Silverlight

Silverlight는 Microsoft가 웹 UI 분야에 내 놓은 새로운 웹 표현 기술에 대한 명칭이다. 이는 크로스 플랫폼, 크로스 브라우저의 기술이기에 사용자가 런타임만을 설치하면 대부분의 플랫폼과 브라우저에서 자유롭게 이용이 가능하다. 마치 플래시처럼 말이다. 해서, 최종 사용자들은 Silverlight를 플래시 기술과 비교하여 이야기하기도 하지만, 사실 이는 플래시와는 상당히 다른 아키텍처를 가지고 있으며, 보다 넓은 비전을 담고 있는 기술이다. 현재는 1.0 버전이 공식적으로 릴리즈 되어 있지만, 동시에 1.1 버전에 대한 알파 버전도 공개가 되어 있는 상황이다. 그리고, 사실상 Silverlight의 실체는 1.1이라는 것이 보편적인 의견이다.

Silverlight는 .NET 3.5의 핵심 프리젠테이션 언어인 XAML을 사용하여 UI를 렌더하도록 설계되어 있다. Silverlight가 XAML을 지원한다는 것은 의미하는 바가 큰데, 이는 윈도우 UI와 웹 UI 간의 장벽이 사라짐을 의미하기 때문이다(비록, Silverlight용 XAML은 WPF용 XAML에 비하면 일부이긴 하지만 말이다). 또한, 모든 UI가 XAML로 구성된다는 것은 화면 디자이너와 개발자 사이의 협업을 높일 수 있는 좋은 방안으로도 평가를 받고 있다. 그래픽 및 웹 디자이너를 위해서는 Expression 도구 시리즈를 지원하며, 기존 일러스트레이터와 같은 디자인 도구에서 XAML으로 익스포트를 가능하게 하는 애드온도 무료로 제공하여 기존 디자이너가 쉽게 Silverlight용 화면 구성을 할 수 있도록 배려하고 있다. 물론, 언젠가는 모든 디자이너들이 Expression 도구를 사용하여 화면 UI를 디자인 하는 것이 Microsoft의 바람이겠지만 말이다.

UI 렌더는 공통적으로 XAML을 사용하지만, 프로그래밍 로직 부분은 Silverlight 버전에 따라 차이가 있다. 1.0은 Javascript만을 지원하는 반면, 1.1은 .NET 언어(C#, VB.NET)를 사용할 수 있을 뿐만 아니라 IronPython과 IronRuby와 같은 언어도 지원하기 때문이다. 또한, 1.0 버전은 지원되는 컨트롤이 그리 많지 않아 입력 폼과 같은 것을 구성하기에 어려움이 있지만, 1.1에서는 보다 많은 컨트롤과 기능이 추가되어 업무용 화면까지도 구현이 가능할 것으로 보인다.

XAML(eXtensible Application Markup Language)은 벡터 기반의 그래픽 렌더, 애니메이션, AV 렌더링 외에도 모든 UI 요소를 렌더 가능하게 하는 새로운 XML 기반의 마크업 언어로 원래 WPF(Windows Presentation Foundation)에서 사용되는 언어이다(Silverlight에서 사용되는 XAML은 WPF XAML의 일부로 이루어져 있다). XAML 문법 및 구조에 대한 설명은 다음 링크에서 정보를 얻어보기를 권장한다.

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

Silverlight이 발표된 이후, 해외에서는 꾸준히 그 기술을 적용하여 미디어 서비스를 하는 곳이 늘어나고 있으며(MLB.com은 이미 야구 중계를 Silverlight으로 서비스하고 있다), 국내에서도 최근 SBS 웹 사이트가 뉴스 동영상을 Silverlight으로 서비스(NView)하는 것을 시작으로 꾸준히 관심이 높아져가고 있다.

하지만, 1.0 버전의 Silverlight는 미디어 경험 분야를 제외하고는 그다지 크게 주목할 만한 부분이 없기에, 사실상 개발자들은 1.1 버전에 더욱 주목하고 있는 상황이다. 1.0이 미디어와 관련된 서비스 구현에 주 목표를 두고 있다면, 1.1 버전은 업무 환경까지 지원할 수 있도록 준비되고 있기 때문이다. 예를 들면, 독립된 데이터 저장소를 제공한다거나, 파일 오픈 다이얼로그를 지원한다거나, 백그라운드 작업(BackgroundWorker)를 지원한다거나 하는 부분이 바로 그러한 지원을 느낄 수 있게 하는 부분들이다.

VS 2008에서의 Silverlight 지원

그렇다면, Microsoft의 야심작인 Silverlight를 VS 2008에서는 어떻게 지원하고 있을까? 사실, 현재 버전의 Beta 2는 기본적으로는 Silverlight을 위한 지원이 기본적으로 포함되어 있지 않으며, 별도의 애드온을 설치하여 적용하도록 하고 있다. 애드온의 명칭은 “Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2“이며, Microsoft의 다운로드 사이트에서 다운로드 및 설치가 가능하다. 이를 설치하면, VS 2008에서 Silverlight 전용 프로젝트 템플릿을 사용할 수 있으며, .NET 언어를 사용하여 1.1 버전의 개발을 미리 경험할 수 있다. 물론, 이 부분도 VS 2008 정식버전이 발표될 즈음에는 기본적으로 포함될 것으로 예상된다.

다음은 VS 2008에서 Silverlight 프로젝트 템플릿을 제공하는 모습이며, 그를 통해 프로젝트를 생성할 경우, 제공되는 프로젝트의 구조를 캡춰한 것이다.


그림 5 Silverlight 프로젝트 템플릿


그림 6 프로젝트의 기본 골격 제공

Silverlight 프로젝트 템플릿을 이용하면, 기본적인 파일 구성과 코드 골격을 제공받을 수 있으므로 상대적으로 편하게 개발을 시작할 수 있으며, 인텔리센스 기능과 디버깅 지원을 통해서 효과적이고 빠른 개발이 가능하다는 이점이 있다. 사실상, Silverlight용 UI를 작성하기 위해서는 Visual Studio 보다는 Expression Blend와 같은 도구를 사용하는 것이 보다 효과적이기에 VS 2008은 Expression과 연계하여 작업할 수 있는 지원(연결 단축 메뉴 등)도 포함한다. 물론, VS 2008에서 Silverlight의 디자인을 할 수 없는 것은 아니지만, 아무래도 VS 2008은 개발자 전용 도구이기에 화면 디자인보다는 프로그래밍 로직을 보다 효과적으로, 생산성있게 작성하는 데에 더 많은 지원을 쏟고 있다.

Silverlight에 대한 지원은 그 자체를 위한 프로젝트 템플릿 뿐 아니라, 완성된 Silverlight 모듈을 호스팅 하는 ASP.NET 페이지에도 포함되어 있다. 앞에서도 살짝 언급했듯이 ASP.NET Futures를 설치하면 함께 제공되는 XAML 서버 컨트롤과 Media 서버 컨트롤이 바로 그것이다.

특히나, Media 서버 컨트롤은 아예 Silverlight로 제작된 전용 미디어 플레이어를 제공하므로 빠르게 미디어 플레이어를 웹으로 제공하고 싶을 경우 유용하게 사용할 수 있는 컨트롤이다(Silverlight 자체가 미디어 플레이어 기능을 보유하고 있기에, 동영상 상영을 위해 PC에 Windows Media Player를 설치될 필요는 이제 전혀 없다). 다음은 Media 서버 컨트롤을 사용하여 페이지를 작성하는 예를 보여준다.



그림 7 Media 서버 컨트롤

현재 VS 2008(Beta 2)에서는 Silverlight 1.1 Alpha를 지원하기에 프로그래밍 코드는 C#이나 VB.NET으로 작성하며, 배포 시에도 Js 파일이 아닌 dll 파일을 배포하도록 하고 있다. 물론, 아직은 알파버전의 기술이므로 실제 서비스를 위한 모듈을 개발하여 배포하는 것은 권장하지 않는다. 하지만, Microsoft 관련 커뮤니티나 몇몇 기업에서 시험적인 모듈들을 비공식적으로 개발하거나 내부 사용을 목적으로 준비하고 있다는 이야기는 심심히 않게 들려온다. 물론, 이런 사이트 중에는 필자가 운영하는 태오 사이트도 포함되어 있다.

이렇듯, Microsoft가 차세대 RIA를 위해 준비한 2가지 핵심 기술인 ASP.NET AJAX와 Silverlight는 VS 2008을 통해 보다 편리한 개발이 가능하도록 하고 있으며, 정식 버전이 릴리즈 될 때에는 지금 필자가 소개한 내용보다 훨씬 많은 지원이 포함될 것으로 기대된다. 기존 VS 2005에 비해 더욱 더 개발자의 편의를 위해 다양한 기능으로 무장하고 있는 VS 2008은 차세대 웹을 구축함에 있어서도 개발자들에게 최적의 환경을 제공하는 충실한 지원자로 남을 것이다.

강좌 목록으로..