달력

52024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'Develope/silverlight'에 해당되는 글 2건

  1. 2008.06.13 실버라이트 활용법
  2. 2008.05.23 Microsoft Silverlight(코드명 WPF/E)
반응형

한용희(롯데정보통신 정보기술연구소 근무)   2007/08/28
1부 | 백조에서 미운오리로 전락한 액티브X의 문제와 해결방안
2부 | 발등의 불끄기 공인인증서 대체기술
3부 | UI대체는 내게 맡겨라 Ajax를 이용한 UI 개발
4부 | 액티브X 뛰어넘는 기능과 호환성 XPCOM 전략
5부 | MS가 내놓은 액티브X의 대안 실버라이트 활용법
실버라이트
최근 정부기관들이 앞장서서 액티브X의 배제에 노력하면서 사회 전반에서도 액티브X에 대한 관심이 뜨겁다. 정부기관의 노력으로는 신규 발주 사업의 제안 요청서에 특정 제품을 지원하지 않도록 명시하여 표준을 따르지 않는 기술의 제안을 차단하는 것 등이다. 5부에서는 액티브X 컨트롤의 대안으로 MS가 내놓은 실버라이트 활용법에 대해 알아보자.

요즘은 브라우저 하나만 있으면 거의 모든 작업을 할 수 있다. 기업 내에서 사용하는 ERP 애플리케이션도 브라우저 하나로 돌아가고 은행 거래나 쇼핑, 공공기관 증명서 발급 등 모든 작업을 브라우저 안에서 할 수 있다. 하지만 이는 브라우저가 가진 기본적인 기능에서 액티브X 컨트롤을 이용하여 그 능력을 확장했기에 가능한 기능들이다.

이에 따라 이제는 기존 브라우저가 가진 단순 정보 표현 기능 말고도 더 새로운 사용자의 다양한 욕구를 충족시켜줄 수 있는 새로운 프레임워크가 필요하다. 시대는 그러한 기능을 요구했고, 사람들은 그러한 기능을 수행할 수 있는 새로운 대안을 찾아 다녔다. 그렇다고 기존에 웹이라는 세상이 만들어 놓은 네트워크 구조를 무너뜨릴 생각은 없었다. 오히려 이를 그대로 이용하면서 그 위에서 다양한 기능을 수행 할 수 있는 무엇인가가 필요했다.

그래서 찾은 것이 단순 애니메이션 기능으로 사용하였던 플래시였다. 플래시는 브라우저위에 액티브X 컨트롤로 만들어진 별도의 플러그인을 한 번만 설치하면 플래시로 만든 모든 응용 프로그램을 구동할 수 있다. 즉, 새로운 기능을 제공하는 새 프레임워크를 발견한 것이다. 사람들은 이 플래시를 단순 애니메이션 도구가 아닌 새로운 응용 프로그램을 만들 수 있는 도구로 재평가하기 시작했고, 플래시는 그러한 기능을 하나 둘씩 추가해 나갔다.

플래시는 본격적인 응용프로그램 개발 툴로 끌어올린 플렉스(FLEX)라는 제품을 발표하면서 본격적으로 리치 인터넷 애플리케이션(Rich Internet Application) 서비스를 하게 된 것이다.

액티브X 컨트롤을 대체하려면 무엇보다 브라우저가 가진 기능을 확장할 수 있어야 하며, 웹이 만들어 놓은 네트워크라는 세상 안에서 그 기능을 수행해야만 한다. 또한 특정 OS나 특정 브라우저가 아닌 모든 환경에서 사용가능 해야만 한다. 이러한 조건을 충족시키기 위해서는 기존 브라우저 위에서 플래시처럼 한 번의 플러그인을 설치하면 모든 응용 프로그램을 구동시킬 수 있는 기술이 필요했던 것이다. 그래서 탄생한 것이 바로 실버라이트(코드명: WPF/e)이다.

플래시와 비슷한 개념이고 기능도 비슷하지만 내부를 들여다보면 그 개발 환경은 사뭇 다르다. 플래시는 태생이 애니메이션을 위한 도구로 출발한 것인 반면에 실버라이트는 출발부터 디자이너와 개발자를 위한 새로운 플랫폼으로 출발한 기술이다.

  개발자와 디자이너를 위한 협업

개발자와 디자이너는 서로 다른 세계를 살아가는 사람들이다. 개발자가 숲 보다는 나무를 보고 일하는 사람이라면 디자이너는 나무 보다는 숲을 보고 일하는 사람들이다. 서로의 보는 관점 자체가 다르다. 이렇게 서로 다른 시각을 가진 사람들이 일을 하다보면 서로 의사소통이나 표현의 문제로 서로 대립되는 경우는 비일비재하다.

이러한 문제가 가장 크게 대두 되면서 만연했던 시기가 바로 ASP 시절이다. 일면 스파게티 코드로 유명한 ASP 코드는 디자이너의 코드와 개발자의 코드가 뒤섞여 있다. 자고 일어나면 상대방이 수정을 해서 디자인이 헝클어지거나 기능이 제대로 동작하지 않는 경우가 있었다. 이럴 때면 서로 네 탓이니 내 탓이니 하면서 싸우기 일쑤였다.

이러한 문제는 ASP.NET 기술이 등장하면서 디자이너의 코드와 개발자의 코드를 분리하면서 어느 정도 해결이 되었다. 하지만 사용자의 편의성을 높이기 위한 기능들은 클라이언트 쪽에서 구동되어야 하는데, 이는 별도의 스크립트라는 언어로 개발을 해야만 했다.

디자이너는 자신의 상상 속에서 사용자의 편의성을 높이기 위한 디자인을 내 놓지만 개발자가 그러한 디자이너의 상상 속의 세상을 스크립트로 구현하기란 좀처럼 쉽지 않았다. 그래서 디자이너와 개발자의 중간에 위치한 UI개발자라는 별도의 직업까지 생길 정도였다.

사용자의 요구사항은 이제 점점 웹을 단순한 정보를 표현하는 도구가 아닌 사용자와 서로 편하게 대화할 수 있는 환경으로 만들어 주기를 원했다. 이제 웹은 정보를 보여주는 도구가 아닌 정보를 생산하는 도구가 된 것이다. 따라서 사용자의 UI를 편하게 만드는 것이 보다 좋은 웹사이트를 만드는 척도가 되었다.

이제는 디자이너가 꿈꾸고 있는 상상속의 이미지를 그대로 표현해 주는 새로운 기술이 필요해 졌다. 기존의 HTML은 정보를 보여주는 데 적절한 언어이지 정보를 생산하는 데에는 적합하지 않았다. 따라서 HTML이 아닌 다른 새로운 표준이 필요했고 그래서 나온 것이 바로 XAML(eXtensible Application Markup Language, 재믈)이다.

이를 통해서 디자이너가 생각하는 기능과 표현을 XML 기반의 새로운 태그 언어로 표시한 것이다. XAML에 대해서는 자세히 설명하지는 않을 것이다. 이미 여러 차례 마이크로소프트웨어에서 소개되었기 때문이다(2007년 1월호 특집 기사 참조).

이제 디자이너는 XAML을 생성해 주는 새로운 도구를 이용해서 디자인을 해야만 한다. 그래서 MS에서는 익스프레션 제품군을 새로 만들어 판매하고 있다. <표 1>은 2007년 1월호 특집 기사에 실린 익스프레션 제품군과 어도비의 디자인 프로그램 비교표이다.


새로운 툴로 전향하기 싫은 사람들을 위해서도 별도의 변환 툴을 제공한다. 현재는 다음과 같은 두 가지 변환 도구가 출시되어 있다.

 SWF to XAML Converter(http://www.mikeswanson.com/swf2xaml)
: 플래시 SWF 파일을 XAML 파일로 변환
 Adobe Illustrator to WPF/XAML Export Plug-In(http://www.mikeswanson.com/xamlexport)
: Illustrator에서 XAML 파일로 저장해주는 플러그 인

MS에서는 이렇게 사용자의 편의성을 높여주는 일련의 활동을 UX(User Experience,사용자 경험)라고 정의하고 있다. 이제 디자이너는 마음껏 사용자의 편의성을 향상시키기 위하여 자신만의 언어를 사용할 수 있게 되었으며, 개발자도 자연스럽게 이를 수용할 수 있는 준비가 된 것이다.

  웹을 위한 종합선물세트, 실버라이트

요즘 기술 트렌드를 대변 하는 말 중에 유행하는 말이 한 가지 있다. 그것은 바로 ‘종합선물세트’라는 것이다. 요즘 기술의 추세는 특정한 기능에 편중되지 않고 모든 기능을 포함하는 것이 유행이다. 필자가 처음 실버라이트의 아키텍처를 보고 제일 먼저 머리에 떠오른 단어도 ‘종합선물세트’이었다. 실버라이트는 요즘 유행하는 모든 기술을 거의 다 담았다고 해도 과언이 아니다.

실버라이트는 현재 두 가지 버전이 있다. 1.0 베타와 1.1 알파 버전이다. 1.0 버전은 올 여름에 출시될 예정이고, 1.1 버전은 아직 미정이다. 1.0과 1.1의 가장 큰 차이점은 1.1에서는 닷넷 프레임워크 프로그래밍 모델을 지원한다는 것이다.

즉, C 비주얼 베이직을 이용하여 관리코드(Managed Code)를 작성할 수 있다. 닷넷 프로그래밍 모델을 지원하면 앞으로 실버라이트의 개발이 훨씬 용이해 질 것이다. 1.0 버전에서는 자바 스크립트만 지원한다. 이제 실버라이트의 주요 특징을 차례로 알아보자.

<그림 1> 실버라이트 application structure

●크로스 브라우저(Cross-browser), 크로스 플랫폼(Cross-platform)
실버라이트의 가장 큰 특징은 한 마디로 크로스 브라우저와 크로스 플랫폼이다. 현재 지원 가능한 브라우저는 IE와 모질라, 파이어폭스, 애플 사파리와 오페라다. 운영체제는 윈도우와 애플의 Mac OSX를 지원한다.

●경량화(Lightweight browser plug-in)
이름에서도 알 수 있듯이 실버라이트의 브라우저 플러그인은 경량화를 지향한다. 현재 실버라이트 1.0 베타 버전의 런타임은 1.38MB정도 한다. 최종 런타임도 3MB를 넘지 않을 것이라고 한다. 참고로 플래시 9.0의 런타임은 현재 2.2MB이다.

●멀티미디어 지원
실버 라이트는 오디오와 비디오 재생을 위한 자체적인 스트리밍 플레이 기능을 가지고 있는 덕분에 별도의 플레이어 없이 자체적으로 재생할 수 있다. 비디오는 윈도우 미디어 콘텐츠인 WMV와 WMA 포맷을 지원하며, HDTV 수준의 비디오 해상도도 지원한다.

오디오로는 MP3 포맷을 지원한다. 현재 www.Silverlight.net 사이트에 가면 폭스 무비(Fox Movie)의 영화 예고편을 실버라이트로 만들어 놓은 것을 확인해 볼 수 있다. 상당한 수준의 해상도를 지원하는 영화 예고편을 감상 할 수 있다.

●WPF, XAML 지원
실버라이트는 프레젠테이션 기술로 WPF(Windows Presentation Foundation)를 채택하였다. WPF는 윈도우 비스타의 닷넷 프레임워크 3.0에 포함된 기술인데, 디자인을 표현하는데 있어 XAML을 이용한다. 이에 대한 자세한 내용 역시 2007년 1월호 특집 기사를 참고하길 바란다.

실버라이트의 초창기 코드명은 WPF/e였다. 여기서 e는 Everywhere 즉, 어디서나 WPF 응용프로그램을 사용하자는 취지로 만들어진 코드명이다. 때문에 실버라이트는 3D 기능을 제외한 대부분의 WPF 기능을 제공한다. 플래시와 마찬가지로 벡터 기반이기 때문에 확대하거나 축소를 하더라도 이미지의 손실 없이 부드럽게 표현되는 것도 빼놓을 수 없는 특징이다.

●닷넷 프로그래밍 모델 지원
실버라이트 1.1버전부터는 닷넷 프로그래밍 모델도 지원한다. CLR 전부를 지원하는 것은 아니지만, CLR 대부분의 기능을 지원할 예정이다. 사용 할 수 있는 언어로는 C#과 비주얼 베이직, IronPython, Ruby, Managed JScript 등이 있다.

이중에 C#과 비주얼 베이직은 기존에 있던 언어이지만 새롭게 동적 언어인 IronPython, Ruby, Managed JScript 지원을 추가했다. 스크립트 언어가 가진 높은 생산성을 더 이상 무시할 수 없었던 것이다. 현재 ASP.NET도 IronPython과 같은 동적언어를 추가할 예정이다(http://www.asp.net/downloads/futures/default.aspx?tabid=62).

●기존 응용프로그램 지원
실버라이트는 자바스크립트와 서로 연동할 수 있다. 자바 스크립트 뿐만 아니라 ASP.NET AJAX와도 쉽게 연동할 수 있다. 한 예로 http://www.thewpfblog.com/examples/wpfe/microbe/Default.html에 가면 WPF/e와 플래시가 서로 연동되는 데모를 볼 수 있다. 공이 튀는 하나의 화면에서 움직이는 것 같지만 사실 왼쪽은 WPF/e로 만든 것이고, 오른쪽은 플래시로 만든 것이다. 서로 데이터를 주고받으면서도 부드러운 움직임을 보여준다.

<화면 1> WPF/e와 플래시가 서로 연동한 데모

●압축 지원
XAML 파일은 텍스트 기반이기 때문에 그 용량이 상당히 크다. 따라서 이를 그대로 웹에 올리려면 용량이 문제가 된다. 플래시의 경우도 개발 시에는 FLA 파일 포맷을 사용하지만 실제 배포할 때에는 압축된 SWF 포맷을 사용한다. 실버라이트도 이러한 압축 기술을 지원할 예정이다.

<그림 2> 실버라이트의 압축 패키징

  실버라이트와의 조우, Hello World!

새로운 언어를 배울 때 언제나 등장하는 것이 바로 ‘Hello World’를 출력하는 예제일 것이다. 실제로 이 예제를 만들어 봄으로써 실버라이트의 개발 환경을 느껴보자. 실버라이트를 개발하는데 있어 여기에서는 1.1 알파 버전을 사용할 것이다. 1.0 버전 버전은 닷넷 프레임워크를 아직 지원하지 않기 때문에 다양한 기능을 보여주기에는 부족한 점이 있다.

1.1 알파 버전은 http://msdn2.microsoft.com/en-us/asp.net/bb187452.aspx에서 다운로드 받아서 설치하면 된다. 웹 페이지에 접속하면 다음과 같은 프로그램들 목록이 표시된다.

• Microsoft Silverlight 1.1 Alpha.브라우저 플러그 인
• Microsoft Silverlight 1.1 Alpha Software Development Kit(SDK)개발 툴 킷
• Microsoft Expression Blend 2 PreviewXAML 디자인을 위한 디자인 툴
• Microsoft Visual Studio Code Name "Orcas" Beta 1.비주얼 스튜디오 차기 버전인 Orcas Beta1 버전
• Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.Orcas Beta1 버전에서 실버라이트를 개발하기 위한 프로젝트 템플릿

설치할 프로그램이 많은 편이다. 이 프로그램들은 모두 무료로 다운로드 받을 수 있으므로 전부다 다운로드 받아서 설치를 한다.

먼저 C# 기반의 실버라이트 응용 프로그램을 만들어 보자. 비주얼 스튜디오를 실행하고 새 프로젝트에서 C# 밑에 있는 실버라이트 프로젝트를 선택한다.

<화면 2> 실버라이트 프로젝트 선택하는 화면

프로젝트를 생성하면 <화면3>과 같은 프로젝트가 만들어 진다.

<화면 3> C# 기반의 실버라이트 프로젝트

화면을 표시하는 페이지는 TestPage.html이다. 기존의 MS 방식대로라면 확장자를 htm으로 사용하겠지만, html을 사용한 것으로 봐서는 크로스 브라우저를 지향하려는 의도가 엿보인다. TestPage.html 코드를 보면 별다른 코드가 없다.

 <리스트 1> TestPage.html의 일부


실버라이트의 런타임 자체도 액티브X 컨트롤로 만들어져 있는데, 작년에 이올라스 패치 문제가 있었듯이 한 파일 안에서 같이 실행하면 액티브X 컨트롤이 활성화되지 않는 탓에 별도의 파일로 분리하는 것이 좋다. Silverlight.js 파일은 모든 브라우저에서 실버라이트가 동작하도록 만들어 놓은 자바스크립트 라이브러리다. TestPage.html.js는 Silverlight.js에 있는 실버라이트 생성 컨트롤을 호출하면서 XAML 파일을 연동시켜주는 역할을 한다.

 <리스트 2> TestPage.html.js


Page.xaml 파일을 보면 단순히 Canvas 하나를 그리는 구문만이 존재 한다.

 <리스트 3> Page.xaml


이 구문에서 x:Class라는 부분이 바로 닷넷 프로그래밍 모델로 만든 어셈블리를 연동하는 부분이다. 클래스명과 경로를 적어주어야 한다. DLL로 만든 클래스의 네임스페이스와 이름을 표기하고 실제 DLL 파일의 경로를 적어 준다. Loaded에는 초기에 로드 되면서 호출할 메소드 이름을 적어준다.

디자이너는 이 XAML 파일을 수정하고 개발자는 이 XAML에 연동된 파일(여기에서는 xaml.cs)을 각각 수정하면 된다.

 <리스트 4> Page.xaml.cs


현재까지는 각각의 코드가 아무런 일도 하지 않는다. 이제 익스프레션 블랜드를 이용해서 Hello World! 텍스트 박스 하나를 그려보자. <화면 4>처럼 비주얼 스튜디오에서 바로 블랜드를 호출할 수 있다.

<화면 4> Blend를 여는 메뉴

<화면 5> Hello World! 텍스트 박스를 추가한 모습

<화면 5>를 보면 Hello World! 텍스트 박스를 추가한 모습을 볼 수 있다. 블랜드에서는 비주얼 스튜디오와 마찬가지로 옆에 프로젝트 리스트가 나오며 블랜드에서 아예 프로젝트를 새로 만들 수도 있다. 이러한 기능은 개발자와 디자이너가 보다 긴밀하고 효과적인 협업을 할 수 있도록 만들어진 기능이라고 할 수 있다.

<화면 6> 블랜드에서 프로젝트 만들기

이제 저장을 하고 비주얼 스튜디오로 돌아와서 실행을 하면 Hello World! 텍스트가 잘 나올 것이다. 단 아직 한글 지원이 미비한 관계로 블랜드에서 언어 관련 코드는 삭제해 주어야만 한다.

 <리스트 5> Page.xaml에 Hello World! 텍스트 박스 추가한 결과


<화면 7> Hello World!를 실행한 화면

이번에는 디자이너 부분이 아닌 개발자 부분에서 코드를 수정해 보자. 위의 TextBlock에 이름을 다음과 같이 지정한다.

<TextBlock x:Name="block" Width="156" Height="37" Canvas.Left="133" Canvas.Top="23" TextWrapping="Wrap">
Hello World!
<TextBlock>

이를 Page.xaml.cs 코드에서 다음과 같이 수정해 보자.

block.Text = "Welcome to the Silverlight";

즉, Page_Loaded 이벤트에서 block이라는 이름의 TextBlock의 내용을 바꾸었다. 이를 실행해 보면 Hello World!에서 ‘Welcom to the Silverlight’로 바뀐 것을 볼 수 있을 것이다.
이번에는 IronPython을 이용해서 똑같은 결과물을 만들어 보자. 위의 Page.xaml에서 동적언어에 대한 내용을 <리스트 6>과 같이 추가한다.

 <리스트 6> 동적언어 지원을 위한 Page.xaml


이번에는 닷넷 프레임워크 어셈블리가 필요 없으므로 x:Class도 선언할 필요가 없다. 대신 x:Code라는 태그를 통해서 동적언어를 설정한다. 기능은 앞의 예제와 동일하게 텍스트의 내용을 바꾼다.

 <리스트 7> Page.xaml.py


결과를 보면 파이썬으로 만들어도 동일한 결과를 볼 수 있다. 그렇다면 ASP.NET처럼 이러한 관리코드나 동적코드는 서버 사이드에서 실행되는 것일까? 우리가 어떤 버튼을 클릭하면 서버에 가서 그 이벤트를 처리하고 결과를 돌려주는 방식일까? 그것은 아니다. 실버라이트는 어셈블리나 동적언어 코드를 직접 클라이언트에 모두 로딩 한다. 따라서 서버에 특정 네트워크 통신을 따로 하지 않는 이상 라운드 트립은 없다.

  실버라이트의 추가적인 특징들

실버라이트의 주요 특징과 간단한 샘플 프로그램도 만들어 보았다. 이번에는 실버라이트의 추가적인 특징들에 대해 알아보자.

●DRM(Digital Right Management)
콘텐츠에 대하여 DRM 기능을 쉽게 적용할 수 있도록 지원되는 기능이다. 이를 이용하면 자신의 실버라이트의 콘텐츠에 대하여 저작권 보호 기능을 사용할 수 있다. 아직 구체적인 예제는 없지만, 예를 들면 복사를 제한하는 등의 기능이 추가될 것으로 예상된다.

●LINQ(Language Integrated Query)
LINQ에 대해서는 2006년 1월호 ‘C#의 미래’라는 글을 참고하길 바란다. 간단히 설명하자면 DB나 XML과 같은 데이터의 쿼리 구문을 수행하는데 있어 기존에는 문자열을 조합하여 쿼리 구문을 만들거나 별도의 객체를 이용해서 쿼리 구문을 수행하였다. 쿼리 구문이 언어와 독립적인 탓에 통일성 있는 개발이 어려웠던 반면에, 이제는 이러한 쿼리 구문 자체를 언어에 포함시켰다. 따라서 이제는 쿼리 구문을 언어 차원에서 보다 쉽게 만들 수 있는 것이다. 현재 이 기능은 C 포함될 예정이다. 비주얼 스튜디오 Orcas에는 이 기능이 이미 들어있다.

●격리된 스토리지(Isolated storage)
로컬 파일 시스템에 어떤 데이터를 저장해야 할 경우가 있을 것이다. 이때 아무 폴더나 접근 가능하게 하면 기존 액티브X 컨트롤의 보안 문제와 같은 위험을 내포하게 된다. 따라서 안전하게 격리된 별도의 저장 공간을 사용함으로써 이에 따른 보안 이슈를 해결할 수 있다. 실버라이트에서는 이러한 별도의 독립적인 저장 공간인 Isolated storage를 지원한다. Isolated storage에 대해서는 http://msdn2.microsoft.com/en-us/library/ffbfac6a-5c25-41de-830b-b7d0c1225f83.aspx을 참조하거나 2006년 7월호 ‘Enterprise Library2.0’기사를 참고하기 바란다.

●파일 관리
안전한 파일 열기 다이얼로그 박스를 지원한다. 실버라이트는 HTTP POST를 이용한 웹서비스도 지원하므로 파일 업로드/다운로드 기능을 구현할 수 있다. 실제로 실버라이트 1.1 QuickStarts 샘플에 보면 파일 업로드 다운로드 샘플이 있다. 기존에 많은 파일 업로드/다운로드 기능들이 액티브X 컨트롤로 구현이 되어 있는데, 앞으로 실버라이트를 이용한 업로드/다운로드 컨트롤의 가능성에 대해서도 검토해 볼 수 있을 것이다.

●JSON 지원
JSON은 JavaScript Object Notation의 약자이다. 한마디로 자바스크립트에서 사용하는 객체 기술 방법이다. XML과 비슷하게 텍스트 기반의 트리형식으로 데이터를 표시한다. XML은 범용 적이긴 하지만 파싱을 하기 위한 부하가 있고 수많은 꺽쇠 기호‘<’, ‘>’로 인하여 사이즈가 크다. 그래서 등장한 것이 경량화 되고 자바스크립트에서 바로 객체로 인식 가능한 데이터 형식인 JSON이다. 플랫폼에 종속적이지 않기 때문에 어디에서나 자유롭게 사용할 수 있다. 보다 자세한 내용은 http://www.ietf.org/rfc/rfc4627.txt?number=4627을 참조하길 바란다.

●POX 지원
POX는 Plain Old XML의 약자이다. XML 데이터를 주고받는데 있어 일반적으로는 SOAP 프로토콜을 이용한 방식이 권장된다. 하지만 SOAP 프로토콜은 부가적인 정보를 많이 포함해야 하므로 상당히 무겁다. POX는 단순한 XML 데이터를 전송하므로 상대적으로 가벼워지는 효과가 있다. 따라서 SOAP 프로토콜이나 WS-* 표준에 해당하는 기능을 사용하지 않을 거라면 단순한 POX 방식의 메시지가 유용할 것이다.

●XML 라이브러리
스크립트에서 XML DOM 객체를 이용해서 XML 데이터를 처리하는 것은 쉬운 일이 아니다. 실버라이트는 닷넷 프레임워크를 그대로 사용할 수 있으므로 닷넷 프레임워크에 있는 XMLReader나 XMLWriter 클래스를 바로 사용할 수 있다. 또한 XLinQ 기능을 이용하면 보다 쉬운 쿼리 구문도 만들 수 있다.

  실버라이트의 성능

실버라이트의 그래픽 렌더링 성능에 대해 벤치마크 할 수 있는 재미있는 사이트가 있다. 바로 http://bubblemark.com다.

<화면 8> 실버라이트, DHTML, Flex 그래픽 렌더링 성능 테스트

여러 개의 공을 표시하고 렌더링 하면서 초당 몇 프레임이 나오는지 계산하는 프로그램이다. 동일한 프로그램을 DHTML이나 플래시, 실버라이트를 이용해서 테스트를 수행할 수 있다. 실제로 사용자가 직접 할 수 있으므로 상당히 흥미로운 사이트다. 필자가 직접 테스트한 결과도 있는데 <표 2>는 올해 2월에 WPF/e로 수행한 결과이다.


결과를 보면 실버라이트의 렌더링 성능이 플렉스 못지않음을 확인할 수 있을 것이다. 이 결과 외에 여러 사람들이 테스트한 결과를 댓글로 올려놓았다. 관심 있는 독자들은 참고하길 바란다.

  실버라이트의 미래

WPF의 부분 집합 기능을 가지는 실버라이트는 점점 더 그 기능을 추가해 나갈 것이다. 현재 1.1 알파 버전에서 사용할 수 있는 컨트롤이 다양하지는 않지만 앞으로 많이 추가될 것이다. 아래는 WPF와 실버라이트의 특징을 비교한 표이다. 아래 표 내용은 미국 라스베가스에서 열린 MIX07에서 발표한 내용의 일부이다.




<표 3>~<표 5>를 보면 정식 1.1 버전이 나올 때쯤이면 상당히 유용한 기능들이 추가될 것으로 예상된다. 위의 기능들 중 한 가지 아쉬운 것은 1.1 버전에서도 DataGrid 기능은 고려되고 있지 않다는 점이다. 일반적인 응용 프로그램을 만드는데 있어 그리드 기능은 상당히 많이 사용된다. 그리드 기능만 있어도 웬만한 게시판 프로그램도 쉽게 만들 수 있을 것이다. WPF에서는 그리드 컨트롤을 써드파티 제품으로 제공하는데 실버라이트에서는 사용자 정의 컨트롤 기능을 지원하므로 다른 업체들이 이러한 그리드 컨트롤을 만들어서 제공할 수 있을 것으로 예상된다.

실버라이트의 발전 과정을 보고 있으면 마치 영화에서나 보았던 꿈에 그리던 미래의 컴퓨팅 환경이 상상이 되곤 한다. 기존 브라우저의 한계를 뛰어 넘는 자유로운 사용자 인터페이스는 새로운 웹 환경을 만들어 나갈 수 있을 것이다. @


참고자료
1) Silverlight 공식 사이트,http://www.microsoft.com/silverlight/default.aspx
2) Silverlight 커뮤니티 사이트, http://silverlight.net
3) Silverlight 개발자 센터, http://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx



* 이 기사는 ZDNet Korea의 제휴매체인 마이크로소프트웨어에 게재된 내용입니다.
반응형
Posted by 친절한 웬디양~ㅎㅎ
|
반응형

Microsoft Silverlight(코드명 WPF/E)

   강좌 최초 작성일 : 2006년 12월 24일
   강좌 최종 수정일 : 2007년 01월 02일

   강좌 읽음 수 : 21646 회

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

   강좌 제목 : Microsoft Silverlight(코드명 WPF/E) 1 : UX와 WPF/E

강좌 전 태오의 잡담>

차세대 웹은 기능적인 측면과 그래픽적인 측면에 대해 많은 진화가 예상됩니다.
그리고, 그 중 기능적인 부분은 AJAX가, 그래픽적인 부분은 바로 Silverlight(코드명 WPF/E)이 주도하게 될 것입니다. 이번 강좌에서는 바로 그 Silverlight(강좌현재 CTP 버전)에 대해서 상세하게 알아보는 시간을 갖습니다.

이 글은 제가 아는 저명(?)인사들에게 검토까지 받고(MS의 이건X 차장과 드원의 유경X 수석)...
그들의 의견을 수렴하여, 다시 글을 보태고, 줄이고(괜히 봐달라고 해서리 ㅜㅜ)... 해서, 나온 강좌!!!
비록 개그는 거의 없지만, 재미있게 읽어주셨으면 합니다.
(원래 어딘가(?)에 기고할 예정으로 준비하였던 것입니다.  해서, 경어로 작성되지 않았습니다.)


Microsoft Silverlight(코드명 WPF/E) Overview Part (I)


목차

이번 강좌

  1. UX(사용자 경험)의 세상
  2. UX 향상의 중요 요소: Rich UI
  3. 웹 UI의 혁신! Microsoft Silverlight(코드명 WPF/E)의 등장
  4. Microsoft Silverlight란 무엇인가?
  5. XAML! 윈도우 UI와 웹 UI의 장벽을 허물다
  6. Microsoft Silverlight(코드명 WPF/E)의 적용 사례
다음 강좌
  1. Microsoft Silverlight의 다운로드 및 지원하는 플랫폼과 브라우저
  2. Microsoft Silverlight의 목표
  3. Microsoft Silverlight 아키텍처
  4. Hello. Microsoft Silverlight(코드명 WPF/E) 샘플

UX(사용자 경험)의 세상

현재의 웹 세계는 WEB 2.0 열풍으로 인해 완전히 새로운 국면을 맞이하고 있다. 많은 기업들이 WEB 2.0 시대에 걸 맞는 무언가를 계획하고 있으며, 앞 다투어 새로운 트랜드를 쫓고자 준비를 하고 있다. 혹자들은 WEB 2.0을 한낱 마케팅 용어에 불과하다 말하기도 하지만, 현재의 웹 세상은 마치 실제 2.0으로 업그레이드가 일어나는 듯, 커다란 변화의 움직임이 일고 있는 것이 사실이다. 이는 YouTube와 같은 UCC 웹 사이트가 세계적인 유명세를 얻기 시작하면서 더더욱 가속화되고 있는 분위기이다. 하지만, 이는 어디까지나 비즈니스적인 분야와 사용자 성숙도 측면에서의 변화일 뿐, 소프트웨어 기술 측면에서는 아직까지 예전과 비교해 크게 달라진 것이 없다. 여전히, HTML과 HTTP에 의존적인 구조적 제약이 존재하기 때문이다. 하지만, 정체되어있던 웹 기술 시장에도 현재 새로운 기술들의 등장과 다양한 시도들이 이루어지기 시작하면서, 앞으로의 웹 기술 환경에도 큰 변화가 있을 것으로 예상되고 있다.

그 변화의 중심에는 2006년 최고의 화두(웹 기술분야)였던 AJAX라는 웹 비 동기 통신 기술이 한 자리를 차지하고 있다. 사실, AJAX라는 기술도 알고 보면 기존에 사용되던 비 동기 통신 기술을 사용하기 편하게 다듬은 수준의 것이기에 이를 새로운 기술이라고 말하기는 어렵다. 하지만, 이것이 공신력 있는 벤더들을 통해서 프레임워크 수준으로 정리되어 제공될 경우, 향상된 웹 애플리케이션 개발을 "매우 쉽게" 이룰 수 있을 것으로 예상되기에, 이 기술로 인해 이 후의 웹 서비스 환경이 크게 진보될 것이라는 예상은 자연스러워 보인다. 해서, 다양한 벤더들이 이미 AJAX 애플리케이션 개발을 위한 프레임워크와 라이브러리를 제공하고 있으며, Microsoft도 이에 질세라 ASP.NET AJAX란 이름으로 ASP.NET과 통합되는 AJAX용 프레임워크를 제시하고 있다.

더해서, 몇몇 사이트들은 AJAX 기술을 이용해서 윈도우 애플리케이션과 유사한 기능을 갖춘 웹 사이트를 이미 제공하고 있기도 하다. 그리고, 그를 통해 최종 사용자(end-user)의 이용 편의성과 만족도를 높이고 있으며, 한 차원 높은 웹 애플리케이션의 미래를 조심스럽게 그려나가고 있다. 그러다 보니, 자연스럽게 UX(User eXperience, 사용자 경험)라는 용어가 진화하는 소프트웨어 시장에 중요한 단어로 부각되고 있으며, 새로운 개발 기술들도 UX를 향상시키는 방향으로 그 초점이 맞춰지고 있다.

UX(사용자 경험, User eXperience)이란 무엇인가?

이는 사용자가 제품을 어떻게 사용하고, 제품이 어떻게 작동하는가에 대한 평가이다. 다소 추상적인 이야기이기에 예를 들어 보자면, 우선 컴퓨터 키보드를 생각해 보자. 키보드를 누르게 되면 일반적으로 "또각" 이라는 소리가 (작게라도) 나는 것을 다들 알 것이다. 모든 사용자가 그렇다는 것을 알고 있고, 은연 중에 그 소리를 당연한 경험으로 느끼고 있다고 볼 수 있는데(그 소리가 크건 작건 간에), 어떤 회사에서 버튼을 눌러도 아무런 소리도 나지 않고, 눌렸는지 안 눌렸는지 거의 느낄 수 조차 없는, 매우 가볍고 소프트 한 새로운 유형의 벌거벗은 임금님 식 키보드를 출시했다고 가정해보자. 이는 비록 작은 변화이기는 하지만 사용자들은 키보드가 "또각" 소리를 내지 않는다는 이유로, 또는 느낌이 전혀 없다는 이유로 해당 제품을 구매하지 않을 수 있다(물론, 이는 가정이긴 하지만 사용자 경험을 만족시키기에는 실패한 케이스라 볼 수 있다).

또 한가지 예로, 엘리베이터를 들어보도록 하자. 예전 엘리베이터와는 달리 요즘의 것들은 내가 가려고 하는 층수 버튼을 잘 못 눌렀을 경우, 그 버튼을 다시 한번 누르면 선택이 취소되는 기능이 들어있다(취소가 안 되면 다소 난감한 상황이 연출된다. 원래 가려던 층을 또 누르고 다른 사람들의 따가운 시선을 즐기거나, 그냥 실수로 누른 층에 내려서 다른 엘리베이터를 타고 가야 할 것이다). 일명, 토글(toggle) 기능이라고 이야기를 하는데, 이 기능은 사용자의 경험을 향상시킨 예라고 볼 수 있다. 모든 사용자들이 그러한 기능이 있었으면 좋겠다고 한 것이 반영된 것이고 그로 인해서 사용자 경험이 향상된 것이다.

사용자 경험은 이렇듯 제품의 성공/실패 여부와도 밀접한 관계를 가지고 있으며, 모든 제품은 사용자 경험을 최대한 맞춰주고, 향상시키는 방향으로 설계되는 것이 일반적이다.

UX 향상의 중요 요소: Rich UI

보편적으로 애플리케이션의 UX 향상과 관련해서는 크게 두 가지의 요소를 이야기하곤 하는데, 하나는 사용자의 사용 편의성이고, 다른 하나는 화면의 미려함이 그것이다. 개발자의 측면에서 바라보자면, 무엇보다 중요한 것이 사용 편의성 즉, 개발 완성도가 높은 것이 최우선이지만 현실은 우리 개발자들의 생각과는 다소 다르다.

사실, 초기 웹 세상은 디자인적인 부분보다는 기능적인 부분에 포커스가 맞춰져 있었다. WWW는 텍스트 기반의 데이터 공유가 일반적이었고, 그렇기에 모든 웹 기반 기술들은 기능과 성능을 향상시키는 부분을 중심으로 강화되어 왔다. ASP, ASP.NET, ASP.NET AJAX(코드명 Atlas) 모두 그렇게 10여 년에 걸쳐 등장한 마이크로소프트의 기술이다. 하지만, 이제 더 이상 웹은 텍스트의 세상이 아니다. 아니, 이미 오래 전부터 웹은 텍스트의 세상이 아니었다. 웹 페이지가 화려한 이미지와 동적인 애니메이션들로 채워져야 고객들과 사용자들이 만족스런 미소를 짓는 세상이니 말이다. 심지어 필자는 윈도우 애플리케이션으로 만들어야만 하는 프로젝트를 단지 웹 페이지를 써야 화려하고 미려한 화면을 구성할 수 있다는 이유만으로 웹 애플리케이션으로 개발하는 경우도 보았다(결국은 ActiveX를 남발하는 이도 저도 아닌 사이트가 되어버렸지만).

화면은 예쁘지 않으나 기능은 만족스러운 애플리케이션이 40점을 받는다고 가정할 경우, 그와는 반대로 디자인은 예쁘나 기능이 떨어지는 애플리케이션이 70점 이상(솔직히 필자는 10 점이라고 말하고 싶으나)을 받는 것은 이미 전혀 이상한 일이 아니다. 애플리케이션 시장도 화려한 UI와 디자인 중심적인 평가가 무엇보다 우선되는 것이 사실이기 때문이다.

"위 분들에게 보이려면 일단 예뻐야 합니다. 기능은 당장 안 되도 되는데요. 일단은 무조건 예뻐야 해요!" 설마, 한 번도 이런 이야기를 들어본 적이 없다고 당당히 말할 수 있는가?

UX의 향상이라는 것이 엔지니어 입장에서는 기능의 향상을 말하는 것처럼 생각될 수도 있지만, 일반적인 사용자들은 "보기에 좋은 음식이 맛도 좋다"는 말처럼, 일단 눈에 보여지는 모습 자체가 아름답지 않으면 UX 자체를 수준 미달로 평가하곤 한다. 엔지니어 계급장을 떼고 보면, 필자도 예쁜 화면에 점수를 후하게 주는 평범한 인간이기에 사실 그러한 평가를 이해 못하는 바는 아니다(개발자 입장에서는 이해하기 힘들지만). 유사한 예로, 여러분이 핸드폰이나 기능성 제품을 구매하는 경우를 생각해보라. 이 기능이 지원되는가, 저 기능은 내장되어 있는가를 열심히 따지다가도, 최종 선택은 기능보다는 디자인으로 선택하는 경우가 많지 않은가?(대부분의 최신 기기는 기능적으로는 대동소이하기에) 마찬가지 이야기이다.

단순히 화면을 이미지로 덕지덕지 채우는 것이 UX의 향상은 아니다. 또한, 화면을 무조건 화려하게만 만든다고 해서 사용자들이 만족하는 것은 아니다. 애니메이션이 사방에서 번쩍거릴 경우, 오히려 UX는 저하될 수 있기 때문이다. 잘 디자인된 상태의 화면을 사용자의 구미에 맞춰서 보다 아름답게 꾸밀 경우 UX는 향상된다. 디자인이 효과적으로 적용되어 사용자의 눈을 편하게 한다거나, 한 눈에 쏙 들어오는 모습을 가지게 될 경우에 UX는 향상되는 것이니 말이다. 잘 기획되지 못한 디자인은 오히려 사용자의 UX를 해칠 수도 있기에, 디자인 결정에는 상당한 주의가 따른다.

UX 평가에 있어, 기능적인 향상 및 편의성이 실제적인 주체임에는 틀림이 없겠지만, 안타깝게도 일단 미려하지 않은 제품에 대해서는 UX 평가 자체를 꺼린다는 사실을 기억해야 할 것이다. 해서, 현재의 웹 개발 시장은 발전하는 기술력만큼이나 UI 측면에서도 UX를 향상할 수 있는 뭔가 획기적인 기술들을 끊임없이 고민하고 있으며, 그것이 마이크로소프트 사가 Silverlight(코드명 WPF/E)를 준비하고 있는 이유이기도 하다.

웹 UI의 혁신! Microsoft Silverlight(코드명 WPF/E)의 등장

이미 언급했듯이, 현재의 웹 세상은 유행처럼 번지고 있는 AJAX 기술로 인해 사용 편리성에 날개를 달기 시작했다. 그래서, 너도나도 이를 위한 개발 프레임워크를 내놓고 있기에, 그로 인해 앞으로의 AJAX 개발은 더욱 쉬워질 것임에 틀림이 없다. 하지만, 미려한 UI를 꾸미기 위해서라면 여전히 웹은 제약이 많다. 이미지로 전체 페이지를 도배하는 것이 그나마 가장 보편적인 방법이지만 이것 만으로는 갈수록 높아가는 사용자의 눈을 맞추기에 부족하다. 정적인 이미지만으로는 표현에 한계가 있기 때문이다.

그 동안 마이크로소프트의 웹 기술들(ASP, ASP.NET, ASP.NET AJAX 등)도 꾸준히 발전해 오긴 했지만, 이 기술들은 UI 렌더 측면에서는 HTML의 한계에서 벗어나지 못하기에 사용자가 원하는 화려하고 미려한 UI를 구성하기에는 부족한 점이 많았다(비록 DHTML이 지원된다 하더라도 그것만으로는 충분치 않았다).

해서, 많은 이들이 매크로미디어(Macromedia) 사의 플래시(Flash)와 같은 기술을 사용하여 그 부족함을 채워 왔는데, 이 기술의 등장은 정적인 웹에 신선한 충격을 주었고, 많은 이들의 관심과 사랑을 받으면서 큰 인기를 끌었다. 플래시로 제작된 것 중 일반인도 잘 알고 있을만한 대표적인 것으로는 [엽기 토끼]라는 애칭의 애니메이션이 있으며, 그 외에도 플래시 카드, 플래시 애니메이션 등 이 기술은 현재까지도 범용적인 기술로 대접 받으며 널리 사랑을 받고 있다.

하지만, 시간이 지남에 따라 플래시도 그를 적용할 수 있는 분야가 한정적이라거나, 데이터연동이 용이하지 않다거나, 배포 상에서 문제가 있을 수 있다거나 하는 다양한 단점들이 계속적으로 지적되고 있다. 한 마디로, 기업 용 애플리케이션 입장에서는 플래시가 그리 매력적이지 않다는 것이다. 해서, 매크로미디어(Macromedia) 사에서도 그러한 단점을 보완하는 Flex란 기술을 제시하고 있으며, 그 외의 다른 업체도 OpenLaszlo와 같은 오픈 소스 플랫폼을 제시하면서 새로운 웹 표현 기술 시장에 뛰어들고 있다.

그렇다면, 마이크로소프트는 과연 이 부분을 언제까지 간과하고 있을 것인가? 웹 표현 기술 시장은 이대로 써드 파티들에게 양보할 것인가?

이에 대해서는 저명한 기고가인 피플웨어의 "류한석" 님의 다음 아티클을 참고해 보기 바란다.

RIA(Rich Internet Application) 트렌드를 따라가지 못한 마이크로소프트

그럴 리가 있는가? 이에 대한 마이크로소프트의 대답이 바로 Windows Vista 및 차세대 프레임워크(.NET Framework 3.0)의 등장과 함께 모습을 드러낸, 이번 강좌의 주제인 Microsoft Silverlight(코드명 WPF/E)이다. AJAX의 열풍으로 인해 웹 세상의 큰 이슈가 UX(User eXperience, 사용자 경험)라는 단어로 정리되는 상황에 이르자, 마이크로소프트도 드디어 웹 기반의 UX를 향상시킬 새로운 표현 기술을 제시한 것이다.

Microsoft Silverlight(코드명 WPF/E) 란 무엇인가?

사실, "Microsoft Silverlight(코드명 WPF/E)"라는 명칭은 어떤 제품에 대한 정식 명칭이 아닌 새로운 웹 표현 기술에 대한 코드 명일 뿐이다. 명칭이 WPF(Windows Presentation Foundation, .NET 3.0의 새로운 표현 기술)와 같아서 작은 혼란이 있을 수도 있지만, 이는 WPF/E가 WPF의 부분집합 격에 속하기에 그러한 코드명이 사용된 것일 뿐, 실제 구동과 관련해서는 WPF와 완전히 다른 방식으로 구동되므로 명칭 자체에는 큰 의미를 두지 않는 것이 좋다. 또한, 이 명칭은 2007년 4월 15일을 기해서 Microsoft Silverlight라는 이름으로 정식 명명되었다.

그렇다면, "Microsoft Silverlight(코드명 WPF/E)"란 무엇인가? 이를 한 문장으로 정의하자면 다음과 같다.

"풍부한 기능과 화려한 비주얼, 인터렉티브한 UX를 가능하게 하며, 크로스 플랫폼 및 크로스 브라우저를 지원하기에 어디서나(everywhere) 실행이 가능한 새로운 웹 표현 기술"

크로스 플랫폼, 크로스 브라우저

개발 문서에서의 크로스(cross-)라는 표현은 일반적으로 모두를 수용한다는 의미로 사용된다. 즉, 크로스 플랫폼이라는 의미는 특정 기술이 모든 플랫폼에서 구동이 가능하다는 의미이며, 크로스 브라우저라는 의미는 특정 기술이 모든 브라우저에서 실행이 가능하다는 의미이다.

"Silverlight(코드명 WPF/E)"는 브라우저가 HTML 마크업을 렌더 하는 것에 더하여, XAML로 정의된 콘텐트도 렌더할 수 있게 하는 고급 표현 기술이다. Silverlight가 XAML을 지원한다는 것은 의미하는 바가 큰데, 이는 윈도우 UI와 웹 UI 간의 장벽이 사라짐을 의미하기 때문이다(이에 대해서는 잠시 후에 설명하도록 하겠다). 게다가, Silverlight는 Java Script와의 완벽한 연동도 지원한다. 이는 XAML로 작성된 요소들(컨트롤들)을 클라이언트 스크립트로 쉽게 제어할 수 있다는 것이며, Action Script와 같은 별도의 스크립트를 공부할 필요가 없다는 것을 의미한다. 그 뿐이 아니다. 이는 .NET 프로그래밍(C#과 VB.NET)도 지원하기에 기존의 .NET 개발자들이 매우 쉽게 다양한 기능을 구현할 수 있다는 크나 큰 장점도 갖는다(각각의 XAML 요소들은 .NET 클래스들과 대응된다). 더불어, ASP.NET AJAX와 함께 사용한다면 3D 출력을 제외한 대부분의 원하는 표현을 웹 상에서 구현할 수 있을 것으로까지 예상되고 있다.

XAML(eXtensible Application Markup Language)은 벡터 기반의 그래픽 렌더, 애니메이션, 비디오와 오디오의 렌더를 가능하게 하는 새로운 XML 기반의 마크업 언어로 원래 WPF(Windows Presentation Foundation, Windows Vista의 일부인 .NET 3.0 표현 하부구조)에서 지원되는 언어이다. XAML 문법 및 구조에 대한 설명은 이번 강좌의 주제에서 벗어나기에 WPF 관련 사이트에서 정보를 얻어보기를 권장한다.

XAML 참조 사이트 : http://msdn2.microsoft.com/en-us/library/ms747122.aspx

XAML! 윈도우 UI와 웹 UI의 장벽을 허물다

사실, XAML의 등장은 UI 표현 방식을 전면적으로 재 정비하는 흥미로운 시도이다. XAML의 기본 취지는 모든 애플리케이션에서의 UI 표현 방식을 단일로 통일하겠다는 것과 모든 UI 정보를 XML 구조의 데이터를 이용하여 로직으로부터 완전히 분리하겠다는 것에서 출발한다. 이는 앞으로의 UI 표현 세계가 새로운 국면으로 접어듦을 의미하는 것이다.

여러분이 동일한 애플리케이션에 대해서 윈도우 버전과 웹 버전 모두를 제작해 본 경험이 있다면 알겠지만, 이 작업은 다른 무엇보다 화면 디자인 작업에 상당히 많은 시간과 노력을 요구한다. 업무 로직이야 공통적으로 사용할 수 있도록 별도로 모듈화하거나 웹 서비스로 제작하여 공유할 수 있지만, UI의 경우는 윈도우와 웹에 맞게 항상 각각 작성해 주어야만 하기 때문이다. 하지만, 이제 UI를 XAML로써 구성하게 되면, 이를 윈도우와 웹 애플리케이션 모두에서 그대로 재 사용할 수 있기에 화면 구성을 단일하게 가져갈 수 있다는 이점을 얻을 수 있다. 단 한번의 UI 작성으로 모든 유형의 애플리케이션을 지원할 수 있다는 사실은 굳이 거듭 강조하지 않아도 충분히 흥미로운 소식이다.

더불어, XAML은 개발자와 디자이너 사이의 협업을 더욱 매끄럽게 만들어 준다. 사실, 기존 윈도우 프로그래밍에서는 화면 디자인을 위해 별도로 디자이너를 고용하거나 하진 않았는데, 이는 대부분의 UI 디자인이라는 것이 개발자에 의해 이루어졌기 때문이다. 하지만, 현재는 사용자의 눈높이가 높아짐에 따라, 웹 애플리케이션뿐 아니라 일반 윈도우 애플리케이션에도 그래픽 디자이너의 참여가 지극히 자연스러운 현상으로 자리잡고 있다. 그럼으로써, 디자이너와 개발자 간의 협업이 개발 생산성에 큰 영향을 끼치는 중요한 변수로 떠오르고 있는데, 바로 이 부분을 XAML은 효과적으로 풀어낼 수 있다는 것이다.

물론, 기존에도 UI와 로직을 분리하고자 하는 시도는 많았지만, XAML은 현재까지 나온 방식 중 가장 나은 방식을 제시하고 있다고 볼 수 있다. XAML를 사용하면 UI 정보의 일부(컨트롤의 속성 정보 등)를 XML 구조로 저장하는 것이 아니라, 화면 레이아웃부터 전체 화면에 대한 모든 UI 정보를 통째로 기술할 수 있기 때문이다. 그래픽 디자이너나 UI 디자이너는 자신의 그래픽 도구(예, Adobe Illustrator, Microsoft Expression)를 이용하여 단지 화면을 그리기만 하면 된다. 기존처럼 화면의 일부(배경 이미지나, 버튼 이미지 등)를 작성하여 개발자에게 건네주는 것이 아니라, 화면 전체를 그래픽으로 그리면 된다는 것이다. 그러면, 그 그래픽은 XAML Export와 같은 기능을 이용해서 쉽게 XAML로 추출(그래픽으로 그려진 선, 도형, 공간, 컬러 및 모든 개체들이 XAML 요소로 재 구성된다)해낼 수가 있게 되며, 이를 그대로 화면으로서 사용이 가능하게 된다. 디자이너가 프로그래밍 언어나 기술에 대해 알 필요는 전혀 없다. 그들은 그래픽에만 충실하면 된다. XAML이 그 그래픽을 실제 화면으로 마법과 같이 만들어 줄 테니 말이다.

현재 Mobiform Aurora, Electric Rain ZAM 3D, Microsoft Expression과 같은 도구들이 XAML 을 지원하고 있으며, Adobe Illustrator에 대해서는 별도의 plug-in이 준비되고 있다. Adobe Illustrator 플러그 인에 대한 자세한 정보는 다음 링크에서 살펴볼 수 있다.

http://blogs.msdn.com/mswanson/archive/2005/09/16/469670.aspx

심지어는 XAML로 구성된 화면 데이터를 서버 상의 데이터베이스에 저장하고 동적으로 이를 가져와 화면을 구성할 수도 있다. XAML로 작성된 UI 데이터는 텍스트 기반의 XML 데이터이기에 쉽게 데이터베이스에 저장이 가능하고, XAML은 동적으로 런타임 시에 렌더될 수 있기에, 그 UI 데이터를 데이터베이스 서버로부터 읽어와 동적으로 화면을 출력하는 것도 얼마든지 가능하다. 이는, 마치 스마트 클라이언트가 UI 데이터를 런타임 시에 서버로부터 다운로드 하는 것처럼, UI 화면 자체를 웹 서비스를 통해서 가져와 동적으로 구성하는 것이 얼마든지 가능하다는 이야기가 된다.

XAML을 학습해야 하는 부분이 심적인 부담이 될 수는 있겠지만, 이를 익히는 것은 사실 생각만큼 그다지 어렵지가 않다. XAML은 HTML과 유사한 XML 기반의 선언적 언어로서 웹 개발자들의 눈에 낯익은 구조를 가지고 있으며, 또한 굳이 XAML을 속속들이 알지 않아도 쉽게 이를 다룰 수 있게 하는 개발 도구들도 지원될 것이기 때문이다. 이를 위해, 마이크로소프트는 Microsoft Expression Studio(디자이너 용)와 Visual Studio의 신 버전(개발자용)를 준비하고 있다.

Microsoft Silverlight(코드명 WPF/E)의 적용 사례

이제는 Silverlight(코드명 WPF/E)가 무엇인지 조금이나마 이해가 되는가?

그럴 리가 없지 않은가! 너무 성급하게 물어본 필자, 여러분께 고개 숙여 사과 드린다. 사실, 위의 이야기만으로는 Silverlight(코드명 WPF/E)를 이해하기에 아직 부족함이 많을 것이다. 그리고, 사실 독자들이 Silverlight가 어떤 것인지를 쉽게 이해하려면, 이 기술이 무엇인가에 대한 정의보다는 이 기술을 이용하면 무엇을 할 수 있는지를 먼저 살펴보는 쪽이 나을 것이다. 즉, Silverlight가 제공하는 화려하고도 인터렉티브한 UI를 직접 느껴보는 것이 이해에 더 도움이 될 것이라는 이야기이다. 해서, 필자는 여러분이 글을 계속 읽기에 앞서 우선 다음의 샘플 페이지들을 (반드시!) 방문해 볼 것을 권한다. 이는 Silverlight(코드명 WPF/E) 기술을 이용하여 구현된 샘플 사이트들이며, 이를 통해 여러분은 Silverlight의 위력적인 모습을 조금이나마 느껴볼 수 있을 것이다(사이트 접근 시, Silverlight(코드명 WPF/E) 런타임을 설치하라는 메시지가 나올 것이다. 걱정하지 말고, 링크를 따라가서 런타임을 설치하도록 하자).

  • Page Turner : http://go.microsoft.com/fwlink/?linkid=79204&clcid=0x409
  • Sprawl Game : http://go.microsoft.com/fwlink/?linkid=79206&clcid=0x409
  • Media Library : http://go.microsoft.com/fwlink/?linkid=79205&clcid=0x409
  • Channel 9 Player : http://channel9.msdn.com/playground/wpfe/ch9player/default.html
  • Film Strip Slide-Show : http://go.microsoft.com/fwlink/?linkid=79208&clcid=0x409


    그림 1 Microsoft Silverlight(코드명 WPF/E) 샘플 사이트들

    참고: Silverlight(코드명 WPF/E)는 브라우저로 Silverlight가 포함된 웹 페이지를 접근할 경우, 마이크로소프트 웹 사이트로부터 다운로드 받아서 설치하게 되는 플러그 인으로서 배포된다

    위의 데모들을 통해서, 여러분은 Silverlight를 이용할 경우 웹 사이트가 얼마나 더 진화할 수 있는 지를 조금이나마 느낄 수 있었을 것이다. 그리고, 이 기술을 좀 더 알아보고 싶은 궁금증이 불끈! 솟아오르고 있을 것이다. 그렇다면, 이제 부푼 기대를 안고 이 기술에 대한 내용을 차근차근 알아나가 보도록 하자.

  • 반응형
    Posted by 친절한 웬디양~ㅎㅎ
    |