bobozzang ::

시작하기 전에
안녕하세요. 김대우 입니다.
지난 UX의 시대 글을 통해 우리 창조적인 디자이너들에게 주어진 과제인 UX에 대한 소개와 UX 지향적인 디자인의 필요성, 그리고 UX를 향상시키기 위한 Microsoft의 노력에 대해서 소개해 드렸습니다. 이번 시간에는 웹에서 UX를 향상시키기 위한 RIA(Rich Internet Application)에 대한 소개와 Microsoft의 RIA 플랫폼 Silverlight에 대해서 소개해 드리는 시간을 가지도록 하겠습니다.

예전 글 보기 링크 :
http://magazine.jungle.co.kr/junglespecial/hotnissue/content.asp?table=hotnissue&idx=28

우리는 웹과 데스크톱 응용프로그램에 대해서 잘 알고 있습니다.
먼저 웹을 살펴 볼까요? 웹은 참 “접근”하기 쉽습니다. 단순히 컴퓨터를 켜고, 아무 웹 브라우저를 실행하면 우리가 원하는 모든 웹사이트에나 접근이 가능합니다. 뉴스 전문 웹사이트에 접속해 뉴스 기사를 살펴 보거나, 포털 사이트 카페와 같은 커뮤니티 웹사이트에 접속하거나, 이렇게 디자인 정글 웹사이트에 접속해 관심이 있는 글을 손쉽게 보실 수도 있습니다. 쉽게 접근이 가능하다는 것이 웹이 가지는 가장 큰 장점입니다. 하지만, 이렇게 편리하고 우리의 인터넷과 밀접한 관련이 있는 웹도 단점도 있습니다. 바로 데스크톱 응용 프로그램처럼 “풍부한 UX기능을 구현”하기 쉽지 않다는 것이지요. 예를 들어, 데스크톱 응용 프로그램처럼, 하드웨어의 성능을 극대화 시켜 사용하는 스타크래프트 같은 게임이나, MMORPG로 불리는 리니지와 같은 게임을, 아니, 우리가 매일매일 사용하고, 고민하는 디자인 툴을 웹에서 사용 가능할까요? 불가능하지요. 이렇게 웹은 접근하기 쉬운 장점이 있지만, UX적으로 풍부하고 강력한 기능들을 사용하는 데스크톱 응용프로그램과 같은 솔루션 구현은 불가한 단점이 있습니다.
물론, 최근에는 Ajax와 같은 동적인 스크립트 기능과 XML HTTP 통신 기능을 이용해 웹 페이지의 일부를 처리(Partial Rendering)하는 Ajax의 기능들을 다양한 형태로 사용해 어느 정도 동적인 웹사이트를 구현도 가능하지만, 웹에서 데스크톱 응용 프로그램과 같은 풍부한 UX지향적인 서비스를 제공하는 것은 사실상 불가능에 가깝습니다.
그렇다면, 이런 생각은 어떨까요? 웹이 가지는 이러한 폭넓은 접근성과 데스크톱 응용프로그램이 가지는 풍부한 UX 기능의 장점만을 취하는 솔루션은 없을까요?

그것이 바로 RIA(Rich Internet Application) 기술 입니다.
RIA는 멀리 있는 기술이 아닙니다. 이미, 우리가 만들고 있고 사용하고 있는 기술이기도 하지요. Silverlight에 대해서 소개해 드리기 전에 RIA의 어제와 오늘을 먼저 살펴 보시는 것은 어떨까요?

조금 일찍 웹을 경험하셨다면, 아마 기억하고 있으실 겁니다. 어느 날, 자주 들어가는 웹사이트 "구석"에 뭔가를 설치하면 애니메이션이나 광고가 돌아가면서 우리가 봐 주기를 기대하던 무언가 잘 알 수 없던 그 기술. "구석"에 위치하던 이 RIA 기술은 인터넷의 힘을 타고 점점 더 화면 "가운데"나 아예 웹사이트 메인 인트로 페이지를 구현하게 변경 되었지요. 만약 이때를 기억하신다면, "엽기토끼", "졸라맨", "떳다 그녀-고양이 남자와 토끼 여자의 사랑이야기"를 아마도 기억하고 있으실 겁니다.

그렇다면, 지금의 RIA는 어떤 모습일까요? UCC로 대변되는 미디어 산업의 "한 가운데"에, 포털 사이트의 캐주얼 게임에, 그리고 자동차 회사가 사활을 걸고 준비하는 온라인 카탈로그의 "핵심"에, 쇼핑몰이 매 주 발송하는 메일의 클릭을 타면 보여지는 쇼핑몰 카탈로그에 RIA 기술이 사용되고 있습니다. 네, 이제 우리는 RIA가 존재하지 않는 밋밋한 웹은 생각하기 불가능한 그런 웹의 시대를 맞이하게 된 것이지요.

다시 오늘날의 웹과 RIA를 돌아가 볼까요? 우리가 매일매일 사용하는 웹에서도 이러한 라이프 스타일의 변화를 적용하기 위한 노력이 이제 막 시작되려 하고 있습니다. 바로, RIA기술로 데스크톱 같은 강력한 기능과 웹과 같은 폭넓은 접근성을 이용해 이러한 우리 라이프 스타일의 변화를 빠르게 웹에서 서비스하기 위한 노력이 이제 시작되고 있는 것이지요.

차세대 RIA 기술, 웹을 더 쉽고 재미있게 만들기 위한 기술, 바로 Microsoft의 Silverlight을 소개해 드리려고 합니다.

RIA의 어제와 오늘에 대해서 간단히 소개 드렸습니다. 이 정도로 설명 드렸으면 RIA가 어떤 것인지 아마도 눈치 채셨을 겁니다. 바로 Adobe사의 “Flash”나 “OpenLaszlo”와 같은 기술이 RIA 기술이며 오늘 소개해 드릴 Silverlight도 RIA 기술입니다. 네, Silverlight도 역시 RIA 기술이긴 하지만, 기존의 RIA 기술과는 그 기반 기술 구조가 완전히 다른 새로운 차세대 RIA 플랫폼이라고 보셔도 좋을 것 같습니다.

Silverlight는 웹 페이지에서 동작하는 다이나믹하고 인터렉티브한 웹 응용 프로그램을 디스플레이하고 실행 하는 차세대 RIA기술입니다. 기존에 “WPF/E”라는 코드명으로 진행된 프로젝트 이며 지난, 2007년 5월 Silverlight으로 공식 발표 되었지요.
최상의 UX를 제공하는 데스크톱 응용 프로그램 개발 플랫폼인 “WPF”를 이용하시면, 다양한 3D 기술과 미디어 기술을 사용 가능합니다. 특히, 온라인 게임에서나 보시던 3D 기술을 어플리케이션에서 손쉽게 구현 가능해한 장점이 있으며 Microsoft의 .NET Framework 기술을 이용하기 때문에 빠른 응용 프로그램 개발이 가능합니다. 또한 동적인 웹 페이지를 구현하는 기술인 ASP.NET 기술이나, Windows Mobile Device, XBOX도 마찬가지로 모두 .NET Framework기술을 이용해 솔루션 구현이 가능합니다.

Silverlight 역시 .NET Framework를 사용하며, RIA와 같은 특수한 영역에 적합한 최적화된 .NET Framework을 사용하게 되고, 3Mbyte 크기의 Silverlight 런타임에 모든 .NET 기술과 코덱 기술, 어플리케이션을 위한 플랫폼 기술이 포함되어 있습니다.
응용 프로그램의 플랫폼이 단일화 될 수 있다는 것은 디자이너, 개발자 모두에게 큰 장점입니다. 이미지에서 나타난 것처럼, .NET은 모든 응용 프로그램 영역에서 사용 가능한 플랫폼 기술입니다.

WPF와의 차이점으로 Silverlight은 브라우저 확장 기술이기 때문에 WPF와 같은 3D 기술을 사용하실 수는 없지만, 미디어 기능은 WPF와 비교해도 손색이 없을 정도로, 데스크톱 응용 프로그램과 같은 퀄리티의 미디어 서비스를 손쉽게 구현 가능하며, 기존 RIA가 제공하던 2D Animation 기능, Vector 드로잉 기술 등의 다양한 기능들도 기본적으로 Silverlight로 구현 가능합니다.

플랫폼 기술뿐 아니라, 디자인 환경 역시 마찬가지 입니다.
Microsoft Expression Studio를 이용하시면, 현재 Microsoft의 WPF와 Silverlight에서 사용되는 모든 디스플레이 화면을 손쉽게 개발 가능합니다. Expression을 이용한 디자인 통합 기술은 Silverlight과 WPF에만 그치지 않고 계속해서 다른 플랫폼과 응용 프로그램까지 확대되어 나갈 것입니다. 즉, Expression Studio를 이용하면, 다양한 응용 프로그램 환경에서 사용 가능한 디자인 솔루션을 구현 할 수 있도록 하는 것이 Expression Studio의 목표이며, 이것은 XAML이라는 Presentation Layer 기술로 가능해 질 것입니다.

Expression과 XAML에 대한 내용은 다음 글에서 상세히 설명 드리도록 하겠습니다.

또한, Silverlight의 특징으로 크로스플랫폼(Cross-Platform)기술로 구현되어 Windows 시스템과 Macintosh 시스템의 브라우저(IE, Firefox, Safari, Opera(개발 중)), Windows Mobile Device에서 실행 가능하며 현재 다른 플랫폼에도 실행될 수 있도록 계속 개발이 진행 중입니다.

Silverlight의 주요한 특징을 정리 한다면, 다음과 같습니다.

1) 디자이너를 위한 손쉬운 완전한 디자인 환경 제공

디자이너를 위한 통합 디자인 환경인 Microsoft Expression Studio에는 Expression Web, Expression Blend, Expression Design, Expression Media 제품이 포함되어 있습니다. 각각의 툴들은 간략히 다음과 같은 역할을 수행합니다.

Expression Web
디자이너가 수행하는 웹 페이지 레이아웃이나 CSS디자인, 동적인 웹 기술(ASP나 ASP.NET 등)에 대한 디자인을 손쉽게 구현 가능합니다.

Expression Design
웹이나 데스크톱 응용 프로그램, Silverlight과 같은 RIA에서 사용 가능한 Vector 이미지나 Bitmap 이미지를 생성하고 수정하는 다양한 기능을 제공합니다.

Expression Blend
Silverlight나 Microsoft WPF 응용프로그램에서 사용되는 솔루션의 레이아웃이나 동적인 움직임, 여러 시간 동작 기술 등을 구현하는 인터렉티브 디자인 환경입니다. 이 제품은 손쉽게 개발자의 개발 환경인 Visual Studio와 같은 툴과 연동되어 개발자와 다양한 협업 작업을 구현 가능합니다.

Expression Media
동영상이나 음원과 같은 여러 종류의 Media를 관리하기 위한 제품입니다. 미디어는 단순한 동영상이 아닌 회사의 가장 중요한 자산으로 인식되고 있습니다. 이러한 미디어들을 다양한 형태로 인코딩 하거나 관리하기 위한 통합 미디어 자산 관리 솔루션입니다.

2) 기획자, 디자이너, 인터렉티브 디자이너, 개발자간 협업 솔루션 지원
우리 디자이너와 개발자간 협업은 참 어렵습니다. 디자이너는 디자인으로, 개발자는 코드로 소통하려 하며 소통하기 위한 기술과 방식이 전혀 다르기 때문입니다.

소통의 방식이 틀렸던 디자이너와 개발자들은, 현재까지의 전통적인 협업 방법으로 어렵게 생성한 디자인 시안을 만들고 개발자에게 전달하기 위해선, 다시 시안을 “해체”해 전달해야 했으며 개발자는 해체된 개별 이미지들을 다시 조합하는 형태로 프로젝트를 진행해 왔습니다. 물론 오늘날의 HTML은 HTML/CSS를 이용해 어느 정도 이러한 디자이너의 산출물이 그대로 솔루션에 적용 될 수 있지만, 아직까지 RIA 솔루션에서는 이러한 방법을 사용하기 어려운 것이 오늘날 RIA 솔루션 구현의 난제이지요.

따라서, RIA 솔루션 구축을 위해서는 반드시 이렇게 한번 디자인을 해체하고 다시 조합하는 형태가 될 수 밖에 없었고, 최초 창조적으로 구성한 디자이너의 시안이 변경되고 재구성 될 수밖에 없었지요. 이것이 오늘날의 RIA 솔루션 구현의 가장 큰 어려움 입니다.

Silverlight를 이용한 솔루션 개발은 어떨까요?
Expression 디자인 환경에서 작성해낸 결과물은 모두 XAML이라는 XML 마크업 언어 기반의 디자인 코드로 변환 가능합니다. 개발자는 이 XAML 디자인 코드를 받아 디자이너의 창조적인 결과물을 아무런 손실 없이, “있는 그대로 사용 가능”하기 때문에 더 이상 우리 디자이너와 개발자간 소통에 문제가 발생하지 않습니다. 네, 이제 그 동안 풀지 못했던 개발자와 디자이너간 소통이 Expression과 XAML 기술을 이용해 완전하게 해결된 것입니다.

다음 글에서 이렇게 Expression 디자인 환경을 이용해 Silverlight 솔루션을 구현하는 방법을 상세히 설명 드리도록 하겠습니다.

3) Windows Media 기술을 그대로 이용하는 강력하고 편리한 미디어 기술

비디오, 오디오 기술, 인터렉티브 2D 애니메이션 기술과 텍스트 기술, Vector 이미지 그래픽 기술을 모두 사용 가능합니다. 특히, 미디어 기능은 데스크톱 응용 프로그램과 비교해도 손색이 없을 정도로 강력하며 다양한 웹 미디어 기술을 빠르고 효율적으로 구현 가능합니다. 추가적으로, HD고화질(720p) 비디오를 서비스해도 성능 저하 없이 부드럽게 서비스 가능하고 다양한 미디어 기능이 추가되어 부가적인 광고 서비스 등을 동적으로 삽입 할 수 있습니다.

HD 고화질 미디어를 Silverlight로 서비스 하면서 우측 하단에 보시는 것처럼 PIP(다른 채널 보기) 기능을 추가 가능합니다. 물론 원하신다면, 얼마든지 광고 동영상, 이미지나 텍스트를 서비스 하실 수도 있으며 HD 동영상을 보면서도 동적으로 이런 서비스를 추가 가능합니다.

Silverlight 기술을 이용하면 원격지에 존재하는 여러 웹 서비스(Web Service)와 손쉬운 연계가 가능합니다. 즉, 원격지에 존재하는 데이터나 여러 서비스를 우리의 디자인된 화면 위에 다양한 형태로 손쉽게 적용 가능한 장점이 있습니다. 위의 화면은 Major League Baseball 서비스를 Silverlight으로 개발 중인 실제 화면이며 올해 가을 정도부터 Silverlight으로 실제 서비스 될 예정입니다. 여러 진루 정보와 개인화 정보, 부가적인 서비스가 한 화면에서 실행되는 스크린샷 입니다.

4) Windows Media 기술을 응용

향상된 Windows Media 기술로 인터렉티브 비디오 기술, 오버레이(Overlays), 광고 삽입 기술을 이용 가능합니다.

Silverlight TV 샘플로, 현재 10개의 동영상이 동시에 플레이 되는 샘플입니다. 미디어간 손쉬운 전환이 가능하고 동영상 뿐 아니라 다른 부가 정보도 손쉽게 표시가 가능합니다.

동영상을 최대한 방해하지 않는 형태의 다양한 광고 삽입 기술을 이용 가능하며 광고의 내용도 웹 서비스 등을 통해 손쉽게 동적으로 구현 가능합니다.

5) 크로스 플랫폼, 크로스 브라우저 기술
여러 플랫폼과 브라우저에서 사용 가능하기 때문에 웹의 장점을 살려 Reach한 고객에게 서비스를 하실 수 있습니다. 현재 지속적으로 서비스 가능한 플랫폼을 확장하고 있는 중이며 목표는 현존하는 모든 디스플레이 기기에 Silverlight을 확장하는 것이 목표입니다.

6) 다양한 미디어 포맷과 프로토콜을 지원합니다.
현재 예정된 미디어 포맷은 VC-1, WMV, WMA, MP3를 지원하며 프로토콜은 HTTP, HTTPS, MMS를 지원합니다. 코덱(Codec)이 내장되기 때문에 플랫폼이나 브라우저에 독립적으로 실행되며, WMA Pro 미디어 역시 곧 포함될 예정입니다. 추가적으로, SMPTE 표준 VC-1 코덱(HD-DVD나 블루레이에 포함된 것과 같은 코덱) 역시 사용 가능해 곧, Full-HD와 같은 초고화질의 동영상 미디어를 Silverlight에서 서비스 가능하도록 구현될 예정입니다.

Silverlight에 대한 다양한 샘플과 자료는 현재 http://www.silverlight.net 에서 확인 가능합니다.
Microsoft Expression Studio 관련 자료는 http://www.microsoft.com/expression 에서 많은 자료를 참고 하실 수 있습니다.
6월 19일 열리는 Korea REMIX에서 국내 정상급 미디어 회사의 다양한 Silverlight 적용 사례 역시 발표될 예정이니 꼭 기대해 주시길 바랍니다.

Korea REMIX 07 등록(무료)
http://www.microsoft.com/korea/events/remix/default.mspx
다음 글에서는 Silverlight 솔루션을 구현하기 위한 디자인 환경, Expression에 대해서 상세히 설명 드리도록 하겠습니다.
혹시, Silverlight 기술에 대한 추가적인 정보가 필요하시거나 저에게 문의해 주실 사항이 있으시면 제가 운영하는 블로그 사이트인 http://www.uxkorea.net 에서 문의해 주시면 답변 드리도록 하겠습니다.

http://magazine.jungle.co.kr/junglespecial/hotnissue/content.asp?table=hotnissue&idx=30

bobozzang .

ria

1 POSTS

웹과 UX 향상을 위한 다음 세대의 RIA 플랫폼 Silverlight

Please leave a comment.

bobozzang.

ria

1 POSTS

웹과 UX 향상을 위한 다음 세대의 RIA 플랫폼 Silverlight

Please leave a comment.

bobozzang .