강좌 전 태오의 잡담>

차세대 웹은 기능적인 측면과 그래픽적인 측면에 대해 많은 진화가 예상됩니다.
그리고, 그 중 기능적인 부분은 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 향상의 중요 요소: Rich UI

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

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

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

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

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) 실행이 가능한 새로운 웹 표현 기술"

"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) 런타임을 설치하라는 메시지가 나올 것이다. 걱정하지 말고, 링크를 따라가서 런타임을 설치하도록 하자).

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

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

강좌 목록으로..