[Silverlight] UX와 성능은 RIA에서 공존 가능한가? - AOL의 Silverlight 이메일 솔루션

Silverlight2의 개발 기능을 이용한 어플리케이션 소개

이 내용은 준서아빠가 예전에 적었던 포스트인
[Silverlight] Scott Guthrie가 발하는 Silverlight2의 RIA(Rich Internet Application)

의 내용과 이어집니다. - Silverlight2에서 제공하는 RIA 기능과 컨트롤을 이용한 사례 입니다.

"UX를 향상시키면 성능은 떨어진다?"
준서아빠가 예전에 적었던 포스트처럼, UX는 단순히 디자인적인 요소만을 의미하지 않는다.
하지만, UX라는 솔루션 Planning 에서, HCI의 분야로 회자되는 이 일련의 중요한 작업들이
언제나 "성능"과의 경합에서 그 중요성을 인식받지 못하는 현실은 아쉽다.
고민의 시작은 언제나 그렇든 주류에 대한 부정에서 시작되는 것일까?

이런 흥미로운, 주류에 대한 부정은 어떨까?

"RIA 솔루션 구축시 UX를 향상시켜도 성능을 보장받을 수 있다면 어떨까?"

준서아빠 블로그의 URL은 "UX"KOREA다.
URL에도 들어가 있는 것처럼, 준서아빠의 모든 이야기는 "UX의 향상" 부터 시작하며
이 일련의 생각들을 UX에 기반해 풀어나가려 노력한다.
- 마침 MIX08 행사에서 UX와 성능이라는 두 평행선이 하 마침내 교차하는 순간을 보았다고
준서아빠는 생각하고 흥미로운 결과물을 소개하고 싶다.

바로 AOL(American Online)의 Silverlight2 이메일 솔루션이다.

AOL은 한 십년쯤 전이려나, 톰행크스와 맥라이언이 나오는 "시애틀의 잠못이루는 밤"에 나오는
그 AOL에 대한 기억 뿐이였다.

AOL에 5천만명의 사용자가 존재한다는데(그 기간만큼이나...)
사실 물건너 우리네에게 대단히 국수적으로 보이는 이름의 이 서비스는 준서아빠에겐
사실상 "아웃 오브 안중"이였으나 흥미로운 점은, 이 AOL에 적지 않은 변화가 시도되고 있다는 것이다.

그 변화는 UX와 성능이라는 서로 배타적인 키워드들에 대한 새로운 시도였다고 생각한다.
그럼 AOL을 조금 더 벗겨 보도록 하자.

AOL - Silverlight2를 이용한 웹메일 솔루션

AOL은 국내 웹메일 서비스에서도 흔히 볼 수 있는 DHTML과 AJAX를 사용하고 있으며 데스크탑
환경과 유사한 Drag & Drop이나 컬럼 리사이징, Cascade와 같은 기능을 사용하고 있다.

그리고, Silverlight2로 개발된 AOL 웹메일 화면이 등장한다.
준서아빠 블로그를 읽는 분은 잘 아시겠지만, 새로운 Silverlight2 웹메일 솔루션이
기존의 DHTML / AJAX와 유사한 인터페이스와 Look을 유지하고 있다는 부분이다.
- Seamless Experience. RIA의 중요 요소를 AOL은 잘 이해하고 있다고 생각한다.

   
    "It's(Silverlight2 솔루션) significantly faster than our AJAX-based applications, maybe two to three times, conservatively."- Silverlight2는 기존의 AJAX기반 웹메일보다 2배~3배 빠른 성능을 보여주고 있다...."In the near future you'll see mail from AOL leverage Silverlight 2 in creating rich Internet applications, focused on performance, personalization, and the overall user experience, which is really what people should expect. "- 오래지 않아, AOL의 Silverlight2 메일을 볼 수 있을 것이고, 성능과 개인화, UX를 포함한 RIA 솔루션으로 구현될 것이다.  
 

Roy Ben-Yoseph, Vice President, Mail Products / AOL

Silverlight2 웹메일 솔루션에서 제공하는 성능
좌측 메일함의 트리구조나 메인의 웹메일 그리드 형태의 화면, 우측의 컨택 화면이
RIA라는게 믿기지 않을 정도로 유연하고 빠르게 동작한다. - 데스크탑에서야 별거 아니지만,
RIA에서는 경악할 부분이다. 저 방대한 데이터가 모두 순간적으로 렌더링되고 동작한다? 허걱이다.

성능과 개인화 서비스
Halo3의 테마를 적용하는 부분에서 메인 메일 그리드 화면의 백그라운드 효과 부분과
효과가 적용되어도 성능은 유지되는 부분 역시 인상적이다.
이렇게 다양한 테마(비주얼효과)를 적용해 RIA 솔루션을 구축해도 그 성능은 유지된다.

DHTML / AJAX 웹메일과 비교
현재 이 화면은 라이브 쇼이며 서버는 Dulles, Virginia에서 오고 있다고 한다.
Silverlight2에서 제공하는 보호되는 격리 스토리지(Isolated Storage)를 이용해 데이터를 일부 캐시하고 있고 브라우져의 코드 크기를 현격히 줄이고 있다. 마찬가지로 수천개의 컨택 리스트를
이 Isolated Storage를 사용하고 있다는데...(아래서 상세히)

테마와 함께 광고 역시 솔루션에 잘 녹아들 수 있으며, 다양한 광고와의 연계가 가능하다.

MIX08에 등장한 AOL, 단순히 웹메일을 의미한다고 생각하는가?
AOL의 데모는 단순히 웹메일을 의미한다고 생각하지 않는다.
준서아빠는 AOL의 사례가 우리의 기업용 RIA를 보여줬다고 확신한다.

성능과 UX는 마치 평행선처럼 절대로 공존할 수 없는 영역이였다. 분명 지금까지의 RIA는 그랬다.
기업의 웹에서 대용량의 데이터를 빠르게 렌더링하고 디스플레이 가능하며
다양한 데이터 시각화(Data Visualization)을 제공해야 하는 기술로 RIA를 선택하는 것은 당연하다.

만약, Silverlight2의 Isolated Storage를 이용한 캐시 기능을, 기업의 복잡한 UI를 가지는 챠트나
한번 전달되는 일정 시간 지속되는 데이터에 적용하면 어떨까?

- 챠트에서는 일부 비주얼 렌더링에 필요한 데이터만 가져오면 될것이고 나머지 리소스는
로컬의 보호되는 Isolated Storage를 이용해 즉각적인 챠트자 데이터 비주얼 효과를 제공하며

기업에서 사용되는 데이터를 더욱 효율적으로 웹에서 전달 가능하며 이는 높은 수준의
챠트와 그리드형태의 Data Visualization을 지원하고

- 방대한 데이터라도 적절히 캐시되어 로컬에서 Fetch되고 렌더링 된다면, 위의 AOL 사례처럼
일반 웹인 DHTML이나 AJAX보다 2배~3배 이상의 속도를 낼 수 있을 것이다.

기업의 방대한 데이터를 얼마든지 웹에서 Silverlight로 구현 가능하며 기존의 DHTML/AJAX보다
빠른 성능을 끌어낼 수 있다.

- 이러한 Asset이나 Resource 형태의 프로젝트 리소스를 적절히 배분해 로컬에 유지할지 여부만
명확히 결정되면 Isolated Storage 구현은 몇줄 정도의 코드만으로 구현이 가능하며

기업용 RIA에서 요구되는 로컬 캐시 기능의 극대화로 빠른 정보 표시 및 네트워크 리소스 보호
로컬에 캐시된 자원에 대한 보호 역시 가능하다.

- 저장소 설정은 도메인 단위로 보호되기 때문에 얼마든지 개발자가 관리 가능하다.

만약, Silverlight으로 게임 솔루션을 만든다고 해도, 핵심적인 게임 엔진이나 게임 루틴등의
Common 루틴들을 로컬에 캐시 시키고 일부 동적인 루틴만을 전달받게 한다면 훨씬 더 쾌적한
게임 환경이 마련될 것이다. - 마치 로컬에 설치하는 듯한 느낌...

성능 = 로컬 캐시만을 의미하지 않는다.
그리드나 트리뷰가 저런 빠른 성능을 낸다는 것은 타기술과의 차별화 영역이며
Enterprise RIA의 허들로 알려진 방대한 UI로직에 대한 처리 루틴을 더욱 더 UX 친화적으로
쉽게 가져갈 수 있다는 의미이다.

Silverlight UI렌더링 엔진과 .NET이라는 기술이 보여주는 성능이라고 표현하면 좋을까.

...

변화, 그 한쪽에는 AOL이 있다. 그렇지만, 변화의 중심에는 우리들이 있다.

MIX08 / Silverlight 관련 포스트
[Silverlight] Scott Guthrie가 발하는 Silverlight2의 RIA(Rich Internet Application)
[Silverlight] MIX08 키노트에 Doubleclick 발표 및 Silverlight 2 지원
[Silverlight] Silverlight과 광고 비지니스 연계를 통한 수익 모델 - Monetization
[Silverlight] Progressive Download 서비스의 확장 - Bit-rate Throttling
[Silverlight] Adaptive Streaming - 스트리밍 서비스의 확장
[Silverlight] Silverlight을 이용한 미디어 서비스의 한계는? - 베이징 올림픽