작년 요맘때 삼성에서 T*Omnia 핸드폰을 출시 하였고 그때 당시 사내에서 모바일에 멀티 콘텐츠 브라우징 인터페이스를 Flash Lite로 개발하여 올려볼 일이 있었습니다.

그때 테스트 후에 재미삼아 Youtube 임베디드 플레이어 API를 이용해서 Youtube의 주요 카테고리(최신영상, 가장 많이 본 영상 등)를 볼 수 있는 모바일 애플리케이션을 Flash Lite을 이용해 만들어 봤습니다.

모바일 디바이스는 데스크탑 PC에 비해 그 사양이 매우 낮기 때문에 Flash Lite 3.1 플레이어 역시 기술 지원이 데스크탑에 비해 제한적입니다.  하지만 모바일 환경에서 Flash의 Rich UI를 제공할 수 있다는 것은 Flash Lite 의 큰 장점입니다.

최근 Adobe Max 에서 발표한 Flash 10.1에 대한 기대는 모바일 부분에서도 상당한 것으로 알고 있습니다.  일찍이 국외 스마트 폰에는 Flash 대응을 위해 많은 노력을 기울익 있습니다.
하지만 국내에서는 임베디드 시스템에 다이나믹한 UI를 제공하기 위한 수단으로만 사용될 뿐 개발자를 위한 환경에는 별 관심이 없어 보여 아쉬움이 남습니다.

서두가 길었습니다.

개발했었던 mtube 소개나 할까 시작한 글인데요 : )



개발에 필요한 요소
1. Youtube Embed Player API & Data API
2. ActionScript 2.0 on Flash CS4
3. Flash Lite 3.1
4. Adobe Mobile Packager

개발에 필요한 요소는 위의 4가지 입니다.  개발 후 Adobe Mobile Packager 을 이용해 패키징 하여 디바이스에 설치하여 사용할 수 있습니다.

Adobe Mobile Package Example from rhiokim on Vimeo.


Adobe Mobile Programming Example from rhiokim on Vimeo.



테스트 장비
5. Window Mobile 6.x
6. Samsung T*Omnia(SCH-M490)

최근 옴니아 2가 좀더 나은 스펙으로 출시 되었던데 그 폰에서는 원활이 구동되지 않을까 짐작해봅니다.  사실 이 mtube 애플리케이션은 옴니아에서 메모리 오류가 발생합니다. 

이유 인 즉, Youtube 임베디드 플레이어가 모바일 용이 아니다 보니 : (  메모리 점유율이 상당히 많더군요. 뿐만 아니라 동영상 또한 버퍼를 이용하므로 많은 메모리를 요구하게 됩니다.

mTube based on Flash Lite 3.1 from rhiokim on Vimeo.



첨부한 Youtube.metadata 와 Youtube_1.0.0_English (US).cab 파일을 폰에 저장하고 cab 파일을 설치하면 됩니다.  소스와 클래스 다이어그램을 첨부합니다.


개발 경험에 대한 정리도 할 겸 간단히 Flash를 이용한 Mobile 앱을 개발하고픈 개발자에게 도움이 될까 공유해 봅니다.  

Tip, JavaScript 나 ActionScript 나 그 표준(ECMA-262)이 같기 때문에 근본적인 원리를 알고 접근한다면 매우 쉽고 재미있는 기술입니다.

클래스 다이어그램
 

매우 단순한 구조로 되어있습니다.

Youtube Class는 main class로 Controller 담당하고
Embed Class는 Youtube 임베디드 플레이어 모델 담당, List Class는 Youtube XML Data 모델  담당,  Container는 동영상 클립들을 제어 관리 모델 역할을 합니다.


신고
Posted by Rhio.kim

예전에 JavaScript를 이용한 Local Shared Object 라이브러리를 블로그에 소개했었는데요.  
  1. SharedObject in Macromedia Flash
  2. Shared Object library - powerful browser cookie?

이는 일종의 브라우저 쿠키와 매우 유사하지만 그 기능은 좀더 강합니다. 하지만 Expire에 대한 메커니즘은 포함되어 있지 않습니다.

제가 개발했던 Shared Object 제어를 위한 JavaScript 라이브러리는 사용자 PC에 .so파일을 생성하여 Flash Movie에서 이 .so 파일에 데이터를 읽고 쓸 수 있는 방식이였습니다.  이로써 제한적인 쿠키의 제한적인 부분을 해소해 보고자 했었습니다.

하지만 Ajaxian.com 에 소개된 jsSO – Flash Shared Objects in JavaScript는 Adobe Systems의 FMS(Flash Media Server)와 같은 RTMP 프로토콜을 사용하는 서버(이하 RTMP 서버)를 통해서 하나의 공유 객체를 동일 Flash Movie를 사용하는 사용자들끼리 이 객체를 공유할 수 있게 됩니다.

간단히 아래의 구조를 갖습니다.  

 

RTMP 프로토콜은 아래 링크를 참고해주세요.
http://ko.wikipedia.org/wiki/리얼_타임_메시징_프로토콜 
http://www.adobe.com/aboutadobe/pressroom/pressreleases/200901/012009RTMP.html

실제 위의 web-user1 과 web-user2는 Shared Object 의 정보를 갖고 또한 실시간(real-time)으로 RTMP 서버에 의해서 각 유저들에게 공유 객체의 데이터를 보내게 됩니다.

jsSO 개발자도 JavaScript에서 게임과 채팅과 같은 애플리케이션을 개발해보고자 한듯 하네요.

Adobe의 FMS 3.5를 제외한  Red5Mammoth 의 경우에는 오픈 소스 프로젝트로 진행중입니다.
위 서버와 구조를 잘 활용한다면 매우 재미있는 서비스들을 많이 개발할 수 있을 것입니다.




위 소스는 사내에서 Red5 에 대한 분석자료를 만들면서 예시로 만들었던 라이브 스트리밍 혹은 퍼블리싱 되는(FLV, MP4, AVI, MP3) 스트리밍을 보는 예제 소스입니다.  혹 도움이 될까해서 올려봅니다.

jsSO - Flash Shared Objects in Javascript
Ajaxian.com : http://ajaxian.com/archives/jsso-flash-shared-objects-in-javascript
Red5 : http://osflash.org/red5
Mamoth : http://mammothserver.org/

신고
Posted by Rhio.kim
http://labs.adobe.com/technologies/distributableplayer/

그동안 Private Beta 테스트를 해온 Distributable Player Solution(이하 DP)이 정식 발표를 하였습니다.  여기에는 Adobe Mobile Packager 가 함께 포함됩니다.

이를 이용하면 데스크탑 Flash Application 모델을 그대로 모바일에 적용하여 수행할 수 있게 합니다.  당연 개발은 Flash Lite 3.1상에서 개발해야 겠죠.  Flash Lite 3.1 은 Flash 10에 비하면 지원여부가 매우 작지만 Flash의 주요 기술중 핵심 기술들은 대부분 구현이 가능합니다. Flash Application 개발자들에게는 더 없이 좋은 소식이 되겠네요.

Adobe Mobile Packager를 이용하여 .CAB 형태로 Package하여 Window Mobile 플랫폼에서 Standalone Application으로 동작할 수 있도록 합니다.  간단히 Package 테스트 및 환경 구축에 대한 내용은 아래의 내용에 추가했습니다.  또한 Adobe 에서도 ScreenCast가 있으니 함께 보시면 큰 도움이 되리라 봅니다.

Flash Lite DP 를 Window Mobile 6.x, 5.0의 Smart Phone 그리고 Symbian S60에서도 이용할 수 있게 되었습니다.  간단히 아래의 그림과 같은 방식(Workflow)으로 생성 및 배포, 실행할 수 있게 됩니다.
 
이미지 출처 : Adobe Lab


필요 요소
  개발 PC
    - Flash Professional CS3 or CS4, Device Central CS3 or more
    - MicroSoft ActiveSync

  Mobile Device(Flash Lite 3.1 Distributable Player) 
    http://labs.adobe.com/downloads/distributableplayer.html

    Download the Developer edition for Windows Mobile 5.0 Pocket PC (ZIP, 930 KB)
    Download the Developer edition for Windows Mobile 5.0 Smartphone (ZIP, 926 KB)
    Download the Developer edition for Windows Mobile 6 Professional (ZIP, 928 KB)
    Download the Developer edition for S60 devices (SIS, 675 KB)


Adobe Mobile Packager Test 내용

더보기



테스트 해보고 픈 마음에 만들어 놓았던 Image Viewer와 Video Player는 삼성 T*Omina(SCH-M490)에서는 돌아가질 않네요.
 
이제 iPhone용 Distributable Player만 발표 되면 되는 걸까요?  이것만 출시 된다면 다양한 플랫폼에 있어서 Flash의 입지는 좀더 강해지지 않을까 생각을 해봅니다.

참고자료
Adobe Video : http://tv.adobe.com/#pg+15313
PDF : http://labs.adobe.com/downloads/distributableplayer.html 
Flash Lite : http://www.adobe.com/products/flashlite/ 

신고
Posted by Rhio.kim
Ajaxian을 통해서도 Aptana 릴리즈 소식이 전해졌네요.

모바일 웹에 대한 관심도는 점점 커집니다. Nokia는 S60 폰안에 임베드된 WebKit에 새로운 Nokia Web Runtime과 함께 넣으려는 뜻을 밝혔습니다.

Nokie Web Runtime :

iPhone과 같이 모바일폰 내의 데스크탑에 설치하고 사용하기 쉬운 위젯 개발에 포커스를 맞춘 듯 합니다. 그리고 Web Runtime(WRT)는 S60 3rd Edition 디바이스 기반에서 이용될 수 있고 이전 기기에서도 업데이트를 통해 지원이 가능하다고 합니다.

이미 S60 폰의 경우에는 Flash Lite 을 지원하여 Flash Lite를 통해서도 개발되어졌는데 웹 런타임 환경이 제공된다면 일반 웹 개발자들도 쉽게 접근할 수 있어서 상당히 많은 모바일 애플리케이션이 개발되지 않을까 생각해보지만 워낙에 iPhone과 같이 수익 쉐어를 하는 모델이 있기 때문에 경쟁 구도에 있어서는 쉽지 않을 것 같다는 생각도 함께 해봅니다.

이에 발맞춰 Aptana에 plugin 으로 Nokia WRT를 지원한다는 발표가 있었네요.
아래 이미지는 Aptana.com 에서 올라온 이미지 입니다. 



Aptana.com 를 통해 스크린 케스트를 보면 매우 인상적입니다.  실제 S60 Device와 연동되는 것까지 신경써서 만들어 놓았네요.  한번 꼭 보시길.

Aptana는 iPhone plugin 다음으로 모바일 지원 환경을 Nokia까지 확장하였습니다.  향후 Android 플랫폼 까지 지원될지 여부는?  당연히 지원되리라 봅니다.  국내에서도 이미 Aptana의 사용자 층이 많아졌는데 활용할 수 있는 환경이 턱없이 부족하네요... 

최근 SCH-M490(T*Omnia), CT810(incite: 외국 출시) 폰등 다양한 3G 폰등을 접할 기회가 생겨 모바일 디바이스의 풀 브라우징 웹 환경에 대해 테스트를 해보았는데 iPhone이나  iPhone의 대항마 HTC, 위에 언급한 S60 등 국외 모바일 폰에서 웹 런타임을 위한 지원은 그나마 좋은 편이나 국내 디바이스 환경은 그에 비한다면 매우 부족합니다.

디바이스 자체의 기능은 국외에서도 알아주지만 뭔가 국내외 웹 환경의 차이처럼 모바일 폰에서도 비스한 느낌을 버릴수가 없습니다. (예를 들면 국내 1위 검색포털이 네이버라면 국외는 구글)  또한 오픈 플랫폼, 수익쉐어 라는 것에 비춰 볼 때 역시 매우 그렇습니다.

Aptana Plugin for Nokia : http://aptana.com/nokia
Aptana Plugin for iPhone : http://aptana.com/iphone


신고
Posted by Rhio.kim

삼성 T*OMNIA(옴니아) Phone 에서 Flash Lite 3.1 개발을 위한 준비

사용자 삽입 이미지

모바일 시장이 꾀 빠르게 변화하고 다 각도로 생활에 자리를 잡아가는 것 같습니다.  최근 불경기임에도 불구하고 삼성에서는 모델명 SCH-M490의 T*Omnia Phone를 내놓았습니다.  그것도 100만원 정도의 부담을 주는 가격으로 또한 Apple에서는 iPhone와 기존에 iPod Touch 2세대를 내놓았고  iPhone 국내 출시도 머지 않았습니다.

두 기기 뿐만 아니라 Nokia 에서도 새로운 모델을 통해 웹 기반의 강력한 환경을 지원하기 위한 발전이 매우 빠르게 이뤄지고 있고 Google의 Android 플랫폼의 아고라 또한 내년 초에 그 모습을 드리운다고 하니…

과연 이런 변화가 웹의 생태에도 영향을 미치지 않을까 라는 생각을 요즘 들어 많이 하게 됩니다.  또 하나의 이유인 즉 저 역시 iPod Touch 2세대를 열심히 사용중인데 사용할수록 매우 강한 인상을 받습니다.  아침에 눈떠서 화장실에 갈 때도 자리에 누워서 잠을 자기 전까지 출근할 때나 자투리 시간이 남을 때면 핸드폰 보다 아이팟을 더 보게 됩니다.  이렇듯 생활에 필요한 하나의 큰 문화로 자리를 잡아간 다는 것.

아마도 또 다른 많은 기기들에 의해서 그렇게 생활의 주요 일부분을 의지하게 되지 않을까요?

또한 그것들의 기술에 대한 궁금증으로 사로잡혀 헤어나기가 쉽지 않습니다.  기기들의 안의 컨텐츠는 웹 기반의 매우 다양한 솔루션들을 제공합니다. 

이렇듯 자기의 생활의 Storage를 자그마한 기기에 담고 다니는 것입니다.
이것들의 또 하나의 강력한 기능은 당연 Data Portability 일 것입니다.  이젠 이 Data 가 Life 혹은 Human Memorize 되는 날이 머지 않은 듯 합니다.

서두가 길었던 것 같습니다.

T*Omnia와 Apple iPhone 에 대해서 벤치마킹하고 싶은 마음도 간절합니다.
허나 그것보다 기기 위에 올려질 개발자들의 산물에 일부분들이 어떻게 효율적으로 개발되어질 수 있는지 그러한 경험들을 공유 해보고자 합니다.


Flash Lite 3.1 에 대한 이해

참고 : http://www.adobe.com/products/flashlite/
Flash Lite 3.1은 Mobile Opera build 1957 버전에서 그나마 안정적으로 지원되고 Internet Explorer 브라우저에서는 아직까지 지원되지 않는 모습이다.

 

사용자 삽입 이미지


이는 Adobe 사의 Flash Lite의 Archtecture 입니다. Lite 2.1에 비해 변화한 모습입니다.
http://www.adobe.com/products/flashlite/version/ 이곳을 통해 버전별 비교 모습을 보시면 좋겠습니다. 

위 자료에 보면 MPEG-4 and other video formats 부분에 (On2, Sorensen, and support for H.264) 라는 Support 여부에 대한 언급이 있는데 몇번의 H.264(AVC/AVV) 인코딩 된 영상 파일에 대한 테스트를 해 보았지만 재생은 되지 않았다.  어떤 조건이 맞지 않았는지 자세히 찾아 보지는 않았습니다.

그리고 Flash 내에서 표현되는 컨텐츠 요소마다의 Sound 제어할 수는 없는 것 같습니다.  두개의 멀티미디어 콘텐츠를 재생하려 할때 각기 다른 볼륨 컨트롤이 지원되지 않습니다.  SoundTransform Class가 따로 존재하지 않더군요.


옴니아 환경 정보 확인 

SCH-M490 모델 Windows Mobile 6.1 플랫폼에 Internet Explorer 과 Opera Mobile 두 가지의 브라우저가 Embed 되어있습니다.  그나마 Flash Lite가 안정적으로 지원되는 Opera는 설정 부분에서 Flash 지원여부를 선택함에 따라서 Flash를 사용할 수 있게 됩니다.

옴니아 초기 Opera 버전은 따로 최적화 작업을 한 것인지 모르겠으나 build 15110 으로 되어있다.  1511 버전을 안정화 한게 아닌가 생각이 듭니다.

인터넷에 찾아보니 옴니아 추출 버전이라고 하여 build 1957이 공유 되어지고 있는 것은 확인하고 옴니아에 인스톨해서 사용해 보았지만 Flash Lite는 돌아가지 않았습니다.

추가적인 한가지 인터넷 상에 배포되어지고 있는 대부분의 Mobile Opera 버전을 다운로드 받아 옴니아에 설치해서 구동시켜 Flash Lite 3.1 환경 테스트를 해보았지만 어느 하나 정상적으로 표시되는 것은 보지 못했습니다.

그리고 옴니아 폰에서는 Flash Lite 3.1을 기본적으로 지원하지 않습니다.  이는 따로 배포하고 있는 Flash Lite 3.1 Plug-In을 설치하여야 가능합니다.  Window Mobile 6.1에 embed 된 Flash Lite의 버전은 잘 모르겠지만 Flash가 브라우저상에 렌더링 되지 않았습니다.


옴니아 폰 환경 설정

Flash Lite 3.1 Plug-In은 정확한 배포 버젼을 다운 받아 Mobile 기기에 인스톨을 해주면 됩니다.

Mobile Opera의 경우에는 초기 폰에 설치되어 있는 버전의 설정 > 고급설정 > 플래시 사용 에 체크를 해줌으로써 기본적인 Flash Lite 3.1 개발 환경은 갖춰지게 됩니다.


Flash CS4 개발 환경

Flash 개발 환경은 CS4 와 CS3 모든 버전에서 동일합니다.

기본적으로 Flash Project 생성시 publish setting 에서 Player version, ActionScript version을 설정해 주게 됩니다.  Player는 Flash Lite 3.0 혹은 Flash Lite 3.1로 설정하고 ActionScript 2.0 으로 설정을 하고 개발하면 됩니다.

사용자 삽입 이미지


초기 개발에는 Player version을 Flash Player 8으로 설정하고 개발하면 되고 디버깅시에만 Flash Lite 3.x에 맞추면 됩니다.

디버깅이라는 것은 Adobe Device Central 을 이용해서 실제 모바일 환경에서 테스팅 할 수 있는 에뮬레이터가 뜨는데 이는 Adobe 사에서 온라인을 통해서 최신의 Device Profile 들을 제공해줍니다.  하지만 SCH-M490 모델은 없다는 것

하지만 Adobe Device Central CS4 의 기본 Flash Lite 3.1 에뮬레이터를 제공하니 표준에서 개발하시면 별 무리 없이 지원이 됩니다.

사용자 삽입 이미지

Adobe Device Central CS4

사용자 삽입 이미지사용자 삽입 이미지
다양한 Device 환경을 제공


위에 간략히 소개한 것은 웹 기반의 Flash Lite 3.1의 환경을 위한 것이고 실제로 Standalone Application 개발을 위해서는 현재 Adobe AppZone 에서 Distribute your content 탭에 보면 private beta 로 서비스 중입니다.

이와 관련된 정보는 http://www.adobe.com/devnet/devices/ 에서 참고할 수 있습니다.

모바일 환경에서는 Flash Lite 뿐만 아닌 MS의 Silverlight Mobile 또한 발표된 바 모바일 어플리케이션의 주요 기술로 두 사의 경쟁이 어떨지 기대됩니다.

최근 Flash 환경에서 웹과 모바일의 간단한 UI 개발 기회가 있어 경험을 쌓게 되었는데 ActionScript 2.0의 모태는 ECMAS-262 Spec을 따르고 있어서인지 JavaScript와 매우 유사한 모습을 띄우고 있습니다.

그리고 ActionScript 3.0 부터는 ECMAS4 Spec을 따르고 있어서 객체지향 언어로서의 완벽한 모습을 갖추고 그래서 인지 적응하기도 매우 빨라 보입니다.  UX 분석을 통한 디자인, 설계는 쉽지 않은 과제인 것 같습니다.

정리할 내용도 많고 개발에 필요한 환경 그리고 설정들에 관해서 좀더 디테일한 정보를 공유하고 싶네요.

요 아래 Mashup Contest 홍보 포스팅도 몹시 간략히 했지만 올해 매쉬업 경진대회에서는 이런 Mobile분야로 서비스 할 수 있는 Mashup Application도 나오면 어떨까?  짧은 아이디어를 내봅니다.


개발 가이드 : http://help.adobe.com/ko_KR/FlashLite/2.0_FlashLiteDevGuide2/

신고
Posted by Rhio.kim