Adobe RIA World 2008 - Flex3 & AIR 런칭 세미나
Adobe CS3 런칭 세미나 때와는 달리 신버전의 새로운 기능에 대한 설명보다는 제품의 소개와 성공사례 소개 및 ADOBE의 앞으로의 계획에 대해 설명하는 자리에 가까운 세미나였음

 Agenda
+ 환영사
+ RIA – Transform Your Business
+ Adobe RIA Technology, Flex 3 & AIR New Feature
+ 1-4-All to All-4-1
+ RIA in Enterprise Track or RIA in On-line Track or RIA Showcase for IT Managers Track
+ Flex3가 가져올 변화와 개발 트렌드
+ RIA Best Case:해외사례+국내사례 발표

+ 환영사, RIA – Transform Your Business

‘메인프레임/단말기 - 클라이언트/서버 – 웹 애플리케이션 – 리치 인터넷 애플리케이션’ 으로 변해가는 애플리케이션의 변천사를 설명하고, 현재의 Rich Internet Application 즉 RIA에 대한 Adobe의 솔루션으로서 Flex와 AIR에 대한 소개를 시작하였다.

현재 Adobe Flash Player의 보급률은 Adobe측에 따르면 전체 시장의 95.7%에 달한다고 한다(2007년 12월 기준)http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

Adobe에서는 이러한 보급률을 바탕으로 2007년까지의 웹기반 RIA애플리케이션을 Flash, Flex가 담당했던 것을 넘어서, 2008년에는 Flash Lite, Flash SDK, Mobile MXML을 통한 멀티 플랫폼, 멀티 디바이스 기반 RIA 애플리케이션으로의 확장, 그리고 AIR, AMP, MXML을 통한 데스크탑 애플리케이션 영역으로의 확장을 추진할 것으로 설명하였다.

Flex의 장점으로 제시한 것은 다음과 같다

1. 오픈 소스 프레임워크(이클립스 기반)
2. 높은 생산성을 제공하는 개발 환경
3. Flash Player를 통해 애플리케이션이 실행되므로 동일한 모습으로 실행됨
4. 유지관리가 가능하며 소규모-대규모 프로젝트를 모두 포괄하는 솔루션

그리고 FLEX에 기반한 데스크탑 RIA 애플리케이션 솔루션인 AIR의 장점은 Native Desktop API의 지원과 Desktop 자원의 활용이 용이하다는 정도로 간략하게 설명하였다.

+ Adobe RIA Technology, Flex 3 & AIR New Feature, 1-4-All to All-4-1

 제목과는 달리 새로운 RIA 기술이라든가 Flex3, AIR에 대한 신기능에 대한 설명은 없었고, Adobe의 RIA 솔루션 제품군의 설명 외에는 앞의 두 세션과 중복되는 내용이 거의 대부분이었다.

+ RIA in On-line Track

RIA in Enterprise Track, RIA in On-line Track, RIA Showcase For IT Managers Track의 셋 중 택일하여 들을 수 있는 세션이었다. 그중에 RIA in On-line Track을 선택해서 들었으며, RIA in On-line Track은 ‘AMP(Adobe Media Player)를 사용한 UCC 서비스 개발, Flex로 구현하는 플래시 영어학습 전용 미디어 개발, AIR 기반 파일 공유 디렉토리 서비스 개발’의 세가지로 구성되었다.

소제목에서는 디자인과 멀티미디어 관련 이슈를 다룬 것처럼 보였으나, 오히려 개발자가 양질의 UI를 오픈 소스 컴포넌트를 활용하여 빠른 시간에 만들 수 있다는 내용이 주를 이뤘다.

AMP(Adobe Media Player)를 사용한 UCC 서비스 개발

AMP는 AIR로 제작된, AIR runtime이 설치된 PC에서 실행되는 동영상 재생 프로그램이다.

웹에서 UCC 컨텐츠를 업로드하고, RSS2.0에 기반하여 Multimedia 태그가 추가된 MRSS를 통해 컨텐츠를 배포하며, 대화식 멀티미디어 표현을 작성하기 위한 XML 기반 언어인 SMIL을 토대로 한 AMOD를 통한 Branding 등을 설명하였다.

인상적이었던 것은 AMOD를 통한 Branding이었는데, XML 형식의 스크립트를 통해 광고가 등장하는 시점, 시간 등까지 컨트롤 할 수 있으며, 플래시에 기반한 AMP의 특성상 동영상 영역에도 광고 컨텐츠가 오버레이로 위치시킬 수 있다는 점에서 다양한 활용 가능성을 보여주었다.

Flex로 구현하는 플래시 영어학습 전용 미디어 개발

Alice Player라는 언어 학습 전용의 미디어 플레이어를 Flex + AIR + LiveCycleDS(서버 사이드 자바 지원 플랫폼)로 개발하는 과정을 보여주었으며, 개발 방법론부터 실제 개발 과정을 명료하게 설명하였다. 동영상 파일과 SMIL 언어로 되어있는 자막 파일만 있으면 자막 표시, 구간 반복 및 문장 받아쓰기 기능, 각 구문에 대한 이해도를 체크하여 전체 동영상에 대한 이해도를 차트로 보여주는 기능 등 다양한 기능이 가능한 프로그램을 기존의 오픈 소스 컴포넌트를 최대한 활용하여 빠른 기간에 개발하였다는 것이 인상적이었다.

 AIR 기반 파일 공유 디렉토리 서비스 개발

기존 웹하드와 비슷한 파일 공유 서비스인 AirDisk에 대한 개발 과정을 설명하였다. JAVA로 서버사이드, HTML, Javascript, Flex로 클라이언트 사이드, AIR로 데스크탑 애플리케이션을 개발하는 과정을 보여주었는데, Flex나 AIR 자체의 기능에 대한 내용보다는 Flex를 사용하여 개발할 때 UI 쪽의 작업기간이 얼마나 줄어드는지를 강조하는 쪽에 초점이 맞추어졌다. 단250여 라인의 MXML로 간단히 구현된 UI는 충분히 보기에도 좋고 기능적으로도 뛰어난 UI였다.

+ Flex3가 가져올 변화와 개발 트렌드

사용자의 의사결정에 걸리는 시간과 노력의 정도가 UI, UX에 따라 많은 차이를 나타낸다는 점이중요하게 인식되면서 사용자 중심으로 변해가는 개발 트렌드를 설명하고 그 개발 과정에서의 Flex의 위치에 대해 소개하였다. 역시 앞의 세션들과 마찬가지로 빠르고 효율적이며 유연한 Flex RIA 개발의 장점에 대한 강조가 주된 내용이었으며, Flex 개발 과정에서 ‘UI설계영역 - Flex설계영역’의 역할에 대한 가이드를 제시하였다. 도움이 되는 내용인 것 같아 옮겨둔다.

UI 설계영역
1. 업무 Contents, KPI에 대한 이해도가 높아야 함
2. 해당 업무 컨텐츠를 어떤 형태로 표현할 때 가장 효율적인지 판단할 수 있는 능력
3. Flex UI Components에 대한 이해도가 높아야 함
4. 상용/비상용 UI Component에 대한 지식
5. 정보공학
6. UI Interface

Flex 설계 영역
1. Flex에서 제공하는 Client Side 기술셋과 Server Side 기술셋에 대한 풍부한 이해
2. J2EE에 대한 이해(Server Side 기술셋과 접목한다면)
3. OpenSource Framework에 대한 풍부한 이해와 연결방법
4. Enterprise 솔루션과의 연동 이해
5. 설정파일의 이해 구동 매커니즘
6. Client Side Performance AVM 이해

원칙
1. Contents와 분리된 기능은 죽은 기능
2. 정말 필요한 것인지 비용과 함께 고려
3. Simple is Best

+ RIA Best Case:해외사례+국내사례 발표

해외사례: eBay Desktop, Salesforce.com, Sony-Ericsson

1. eBay Desktop
빠른 프로세스와 피드백, 손쉬운 구매 환경, 리치 UX. 절제되고 효율적인 UI가 인상적.
꼭 필요한 기능만을 보기 좋게 구성한 모범 케이스.

2. Salesforce.com
오프라인에서의 데이터 엑세스 기능, 리치 유저 인터페이스, 브랜드 이미지를 UI에 녹여내는 방법론 제시.
방대한 양의 데이터를 다양한 효과적인 형식으로 보여주도록 하였음

3. Sony-Ericsson
제품의 선택을 직관적으로 할 수 있도록 구성. 스크린상의 견적 산출과 제품 선택의 사용성을 대폭 향상시킨 UI.
제품을 직접 보면서 비교하는 것 같은 제품 비교 기능.
선택한 제품을 비교한 페이지의 현재 상태의 URL을 다른 사람에게 보내서 공유 가능.

국내사례: Nike onAir, e-Bank, 현대자동차 dashboard, RIASoft dashboard

1. Nike onAir
AIR로 개발한 데스크탑 애플리케이션. YouTube의 나이키 브랜드 UCC와 연동되는 기능.
YouTube Mash-Up API와 다양한 Open API로 다양한 기능 확장이 가능한 구조.
별도의 ActiveX나 Plugin 없이 데스크탑-웹의 자유로운 연동 가능(ex-Drag&Drop으로 동영상 업로드 등).
브랜드 이미지를 사용자에게 친숙하게 인식시키는 방편으로 유용할 듯.

2. e-Bank
AIR로 개발한 데스크탑 e-banking 프로그램. 실시간 결과 및 실시간 이체결과 확인 가능.
탭-아코디언 방식의 새로운 UI (사용성 향상을 내세웠지만 애니메이션이 많아 난해한 느낌을 주었다)

3. 현대자동차 dashboard
글로벌 종합상황실 Dashboard. 국내외 생산, 판매와 관련된 종합적인 상황을 모니터링.
Visual한 종합 정보 모니터링. Drag&Drop 등의 마우스 조작으로 상세 데이터 연계

4. RIASoft dashboard
KPI별 스킨적용, 개인별 메뉴화, 슬라이드 쇼, 즐겨찾기 등록 등의 기능을 갖춘 대시보드.
다양한 기능을 보여준 것은 좋았으나 꼭 필요한 기능이라기보다는 ‘이런 것도 가능하다’고 보이는 기능들이 많았음

 전체적으로 해외사례의 경우 필요한 기능을 효율적이고 절제된 UI로 제공하면서, 아주 약간씩의 화려한 효과를 가미해서 전체적으로 깔끔하고 보기 좋게 만들어 낸 데 비해, 국내사례로 소개된 사례의 경우에는 효율성이 떨어지는 ‘기능을 위한 기능’으로 생각되는 기능이 많이 보였다. 바로 앞의 세션에서 제시된 원칙(Content와의 긴밀한 연계, 꼭 필요한 기능인가, Simple is Best)에서 아직까지는 거리가 있는 국내 개발 환경의 원인은 플래시에 대한 인식이 초기에 플래시 애니메이션, 통플래시 사이트 등으로 시작된 화려한 애니메이션 위주의 플래시에서 아직 벗어나지 못했기 때문인 듯하다. UI의 사용성에 대한 인식이 차차 나아지고 있으므로 더 개선될 여지는 있을 것이다.

**총평

플래시가 웹 환경에서의 표준은 아니지만 인터넷이 가능한 거의 대부분의 PC에 플래시 플레이어가 설치되어 있다는 것으로 볼 때, 표준 아닌 표준으로서의 역할에 대한 가능성을 보여준다고 할 수 있겠다. Flash나 ActiveX등의 요소 없이 XHTML, CSS, Javascript(AJAX) 등을 활용한 웹 개발의 경우 시각적인 표현의 한계와 브라우저 자체의 제약이라는 약점이 있는데, Flex를 사용하여 UI, UX 작업을 진행하게 되면 이러한 많은 제약을 벗어날 수 있을 것이며, 크로스브라우징에 많은 신경을 써야 하는 AJAX + XHTML 웹 개발에 비해 더 간편하게 작업하면서 시각적으로 뛰어나고 사용성이 좋은 UI를 만들어 낼 수 있다는 장점도 있다. 또한 AIR는 Flex와 동일한 과정으로 개발하여 데스크탑 애플리케이션을 만들어 낼 수 있다는 점, 웹 환경의 제약이 없는 데스크탑 환경에서 돌아가면서 웹과 연동한 다양한 기능을 가질 수 있다는 점을 장점으로 꼽을 수 있겠다. 각 세션에서 Flex3에 대한 내용보다는 AIR에 대한 내용이 많았던 것도 웹 브라우저를 벗어난 데스크탑과 통합된 웹 환경을 Adobe측에서는 차세대 웹 환경으로 생각하고 있기 때문으로 보인다.

UI와 UX 개발의 경우 툴이나 개발 환경보다도 업무 컨텐츠, 요구공학, 정보공학 등의 제반 사항에 대한 이해 없이는 좋은 결과물이 나오기 어려울 것으로 생각된다. Flash를 사용한 사이트의 경우에 화려한 UI에 비해 사용성이 떨어지는 경우가 그런 경우라고 할 수 있을 것이다. 이번 세미나에서도 UI 개발의 기본에 대한 것을 여러 번 강조하였는데, UI 개발자로서의 개발 스킬과 더불어 키워나가야 할 부분이라고 생각한다.

전체적으로 중복되는 내용도 많았고 진행상 매끄럽지 못한 부분도 많았으나, 차세대 웹 개발 환경에서 Adobe 쪽의 솔루션을 전체적으로 살펴보고, 앞으로 개발할 서비스에 적용할 수 있는 부분은 어떤 것이 있는지 생각해 볼 수 있는 계기가 되었다.

Tags : adobe, air, flash, flex, RIA, RIA World, UI

This entry was posted on Monday, March 24th, 2008 at 3:27 pm and is filed under 'UI' 이야기. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.