Microsoft Silverlight VS Adobe Flex Part #1

2008년 5월 17일

김대욱(kdw234@naver.com)

http://kdw234.tistory.com

날로 빨라지고 있는 개발 주기와 사용자의 경험(UX)을 동시에 만족시킬 수 있도록 고안된 RIA(Rich Internet Application) 시장에 그 동안 RIA시장의 80% 이상을 차지하고 있던 Adobe Flex(Flash)에 강력한 라이벌로 Microsoft Silverlight가 떠오르고 있습니다.

Microsoft의 Silverlight가 기존 개발자들에게 친숙한 환경제공으로 개발자들 사이에 빠른 속도로 보급될 것이라는 의견이 있지만 다른 시작에서는 Silverlight에 비해 일찍 시작한 만큼 안정된 성능뿐만 아니라 Flash 시절 때부터 이어온 인지도 덕분에 주도권을 계속 유지할 것이라는 시각도 있습니다.

이 글에서는 필자의 경험과 웹 상의 여러 자료들을 바탕으로 Silverlight와 Flex에 대해 비교해보고, 이를 통해 Silverlight와 Flex 둘 중 어떤 것을 공부 해야 할지 고민하는 개발자들에게 조금이나마 도움이 되었으면 합니다.

본격적인 비교에 앞서 RIA에 대해 간단하게 정리하고 시작하자면 기존의 Desktop Application의 기능과 특징을 구현한 Web Application으로 기존의 복잡한 조작을 할 수 없었던 WebBrowser 기반의 Application의 한계를 극복하고 풍부한 UX(사용자의 경험)를 겸한 Application이라 할 수 있습니다.

그럼 본격적으로 Silverlight와 Flash(Flex)에 대해 살펴보도록 하겠습니다.

개발자와 디자이너간의 협력 작업

“개발자와 디자이너는 서로 다른 세계를 살아가는 사람같다.”

디자이너와 함께 팀을 이루어 개발을 해본 경험이 있는 대부분의 개발자들이 하소연 하듯 하는 말입니다. 서로의 문제를 바라 보는 관점 자체가 다른 사람들이 일을 하다보면 서로 의사소통이나 표현의 문제로 서로 대립되는 경우도 비일비재하게 발생할 수 밖에 없기 때문입니다.

Silverlight와 Flex를 개발하기 위해 Microsoft와 Adobe가 제공하는 Tool에 대해 살펴보도록 하겠습니다.

여기서 주목해야할 점은 Microsoft 제품에 사용되는 XAML이라는 언어인데요, Adobe의 제품의 경우 각각의 Format을 가지고 있어 디자이너가 Design한 결과물을 Application까지 적용시키기 위해서는 여러 번의 포멧 변환이 필요하며 이 과정에서 디자이너가 생각했던 모습되로 적용되지 않는 경우가 발생합니다.

하지만 Microsoft의 제품의 경우 XAML이라는 통일된 언어를 사용하기 때문에 디자이너가 Design한 결과물(XAML)을 그대로 변환없이 사용 가능하기 때문에 디자이너의 요구를 만족 시킬 수 있습니다. Microsoft에서는 사용자의 편의성을 높여주기 위한 일련의 활동들을 UX(User Experience, 사용자 경험)라고 정의하고 있습니다.

Microsoft의 Design Tool이 아직까지는 Adobe에 Photoshop과 Illustrator에 비해 화려한 Design을 하기엔 다소 무리가 있지만, 아직 초창기 버전이고 더 발전 할 수 있음을 감안할 때, 개발자와 디자이너간의 협력 부분에서는 Microsoft의 Expression Studio가 우세하다고 할수 있습니다.

그리고 기존 Adobe제품을 사용하면서 Microsoft 제품을 사용하길 원한다면 아래와 같은 별도의 변환툴을 사용하면 유용합니다.

l  SWF to XAML Converter(http://www.mikeswanson.com/swf2xaml)

l  Adobe Illustrator to WPF/XAML Export Plug-In(http://www.mikeswanson.com/xamlexport)

같은 결과 다른 성능

Silverlight와 Flex 모두 같은 RIA기술을 사용하지만 그 성능은 같지 않습니다. 어쩌면 당연한 말이지만, 여러 가지 환경에서의 그 성능의 차이는 어떻게 다르게 나타나는지 http://bubblemark.com/에서 실시한 성능 비교 자료를 참고하여 두 기술의 성능 차이에 대해 말씀 드리겠습니다. 이 실험의 목표는 같은 기능을 수행하면서, 서로 다른 기술로 구현된 RIA가 서로 다른 Browser와 Framework에서 어떤 차이를 보여지는 측정하기 위함이며, 실험의 사용하여 단순한 2차원 애니메이션을 통한 성능 측정 방법입니다.

실험은 화면상에 여러 개의 공들이 표시되고 공들이 서로 부딪히면서 발생하는 Animation의 FPS를 측정하는 방법으로 진행되었습니다. 제가 실험에 사용한 환경은 아래와 같습니다.

l  CPU : Pentium 4 3.2Ghz Desktop

l  RAM : 2048Mb

l  OS : Windows Vista Enterprise English

l  Ball Count : 16 Balls

l  Internet Explorer 7

위 결과와 같이 IE 7에서 가장 최적의 성능을 발휘하는 RIA는 Silverlight 2.0 Beta로 구현한 Application이였습니다. Flex의 경우 Silverlight 2.0 Beta에 비해 현저히 떨어지는 것을 확인 했습니다.

실험에 사용된 컴퓨터에 설치된 Browser가 IE7밖에 없어 IE7로 밖에 확인을 해보지 못해 기타 Browser에 대한 내용을 http://metalinkltd.com/ 에서 실험한 결과로 말씀 드리겠습니다.

(테스트 환경이 구축 되는 데로 실험 결과를 블로그에 업데이트 하도록 하겠습니다.)

위 결과에서 알 수 있듯이 IE에서는 Silverlight가 Flex보다 역시 빠른 성능을 보이는걸 알 수 있습니다. 하지만, Flex는 어느 브라우저를 사용하든지 일정한 속도를 유지하지만 Silverlight의 경우 IE일 경우 일 때와 아닐 때의 속도차이가 많이 나거나 지원하지 않는다는 것을 알 수 있습니다.

결과적으로만 봤을 때 Silverlight가 성능상이나 활용 면에서 뛰어난 것은 사실이지만, Flex에 비해 안정성이나 Cross Platform 지원 등은 불완전 하다는 것을 알 수 있었습니다.

이번 시간의 비교는 여기까지로 하며, 2부에서는 RIA와 .Net Framework 그리고 Action Script라는 주제로 올리도록 하겠습니다. 궁금 하신 점이나 틀린 부분은 메일이나 블로그에 남겨주시면 참고 하겠습니다.

위 성능 평가에 사용한 소스코드 및 테스트 페이지는 http://bubblemark.com/ 에서 확인 하실 수 있습니다.