uTube Deck은 Youtube의 인기있는, 많이 본, 즐겨찾기가 많이 된 등 Youtube 내에서 이슈가 되는 영상들을 인터넷이 되는 환경에서 Youtube에 접속하지 않고 볼 수 있도록 Youtube Player API와 Data API 를 활용하여 만든 영상 검색 및 뷰어입니다.

Youtube JavaScript Player API Reference
http://code.google.com/intl/ko-KR/apis/youtube/js_api_reference.html#Overview
http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed

Youtube Data API Reference
http://code.google.com/intl/ko-KR/apis/youtube/2.0/reference.html

애플리케이션의 화면 프레임을 구성과 인터렉션 처리를 위해 Ext JS라는 JavaScript Framework를 사용하였습니다.

Ext JS
http://www.extjs.com

그리고 빌드, 패키지와 배포를 위해서 Titanium을 이용하였습니다.

Appcelerator Titanium
http://www.appcelerator.com

이미 만들어 놓은 웹 애플리케이션이 있다면 패키징하여 배포하는 것은 그다지 어렵지 않습니다. 

uTube Deck 를 만들면서 경험했던 Titanium 에 대한 것을 동영상으로 제작해 보았으니 참고하시는 것도 작은 도움이 되리라 봅니다.

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer FullMode



OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


소스는 정리되는 데로 Github 를 통해서 공유하도로고 하겠습니다. : )

uTubeDeck based on Appcelerator Titanium from rhiokim on Vimeo.



신고
Posted by Rhio.kim

하이브리드 웹 애플리케이션 개발 도구인 Appcelerator사의 Titanium(타이타늄)은 크로스 플랫폼하에 동작이 가능한 네이티브 애플리케이션 개발을 위한 도구이다.  이런 도구는 Titanium외에도 PhoneGap이라는 도구도 있다.  단 PhoneGap의 경우에는 Titanium과 아키텍쳐는 유사하지만 모바일에 초점이 맞추어져 있고 Titanium의 경우에는 모바일뿐 아니라 데스크탑 애플리케이션까지 개발이 가능하도록 도와준다.


구조

Titanium은 4가지 레이어로 나뉜다.
1. HTML/CSS/JavaScript 으로 구현된 애플리케이션 코드
2. 디바이스와 데스크탑의 내장 기능에 접근하기 위한 API, 분석과 모듈 기능
3. 웹 형태의 코드를 내장 애플리케이션으로 컴파일하기 위한 브릿지 
4. 크로스 플랫폼으로 배포를 위한 응용프로그램 패키지 런타임 쉘


특징
가장 큰 특징은 웹 서비스를 개발하기 위하여 가장 흔히 사용되어 왔던 서버 영역에 PHP 뿐아니라 Python, Ruby 를 포함한 최근 연일 이슈에 오르는 HTML5과 CSS3, JavaScript 로 데스크탑 운영 체제인 Window, OSX, Linux 위에서 내장 애플리케이션으로 손쉽게 개발, 패키징, 배포할 수 있는 것이다.

여기에 더하여 iPhone과 iPad, Android 의 모바일 플랫폼에서도 동일하게 내장 애플리케이션을 개발할 수 있도록 한다.

웹 개발자들에게 있어서는 기존에 가지고 있던 웹 개발 스킬을 굳이 iPhone,iPad 앱 개발을 위해 Objective-C를 학습하다던가 Android를 위해 Java 공부를 새롭게 시작할 필요가 50%정도는 줄어든 셈이다.



모바일

iPhone을 생각할 때 가장 특징은 바로 터치로 움직이는 유연한 UI를 손꼽을 수 있다. Android 역시 비슷하다. 

Titanium은 이러한 UI와 table view, scroll views, native button, switch, tab 등과 같은 대부분 것들을 제공한다.


다시 말하면 웹 기술만으로도 iPhone이나 Android에서 기존의 네이티브 애플리케이션들과 똑같이 동작한다는 것이다.

또한 페이스북이나 야후, 트위터와 같은 소셜 네트워킹 서비스나 위치기반 서비스들을 그대로 활용할 수 있게 된다.

무엇보다 중요한 것은 모바일 디바이스의 내장 기능(비디오, 데이터 베이스, 카메라등) 들에 접근인데 거의 모든 기능들을 접근할 수 있도록 지원하고 있다.  물론 웹 표준 기술들을 지원하기 때문에 동반하는 많은 기술들을 그대로 사용할 수 있다.

1. Rich Multimedia 
2. Flexible Storage ; Filesystem, Database On Device
3. Unlimited Extensibility
4. Your Best Shot: Access the Camera or Video Camera
5. Cloud-Connected Apps
6. Code like it’s the year 202 : HTML5 and CSS3 support

모바일 앱에서 필요한 거의 대부분의 기능들을 300개 이상의 API를 이용하여 제공하고 있다.


데스크탑
그간 웹 기술을 이용하여 데스크탑 애플리케이션을 만들기 위한 도구로는 Adobe AIR의 런타임 환경에서만 구동되고 HTML이나 JavaScript의 기술로 만들더라도 AIR 플랫폼의 특징을 이해해야 했다.  반면에 Titanium 은 더 나은 기존의 나왔던 도구들보다 더 나은 성능과 각각의 OS에 기반 UI, 데이터베이스 접근, 오프라인 기능, 알림기능 그리고 멀티미디어 기능까지 모두 제어할 수 있다.

Adobe AIR와 마찬가지로 하나의 코드로 Window, OSX, Linux의 세가지 플랫폼에서 동일하게 동작하지만 Adobe AIR에 비해서 메모리 사용률은 1/10배에 불과할 뿐 아니라 로컬 시스템 접근을 완벽하게 지원한다.

이 말은 웹에서 구현할 수 있었던 거의 모든 기능들을 데스크탑에서 구현하게 됨으로써 플래시 비디오나 마이크로 블로그는 데이터 저장소를 로컬에 둠으로써 향상된 성능과 오프라인상에서 원활히 동작할 수 있게 된다.

또 하나의 작은 특징이라면 운영체제에서 지정된 UI를 완벽하게 지원하는데 이것은 Titanium 자체에서 각각의 플랫폼에 맞게 동작하도록 되어있다. 

Appcelerator 사에서 Titanium 의 초점은 바로 모든 플랫폼에서 원할히 동작할 수 있는 오픈웹 기술들에 있다.  이것은 webkit 엔진의 최선 버전이 번들되게 되고 HTML5나 CSS3의 최신 기능들이 따라서 제공된다.

추가적으로 커스텀 에니메이션, 3D 이펙트 혹은 크로스브라우저 문제 없는 킬러 UI를 만들 수 있다.


Titanium Desktop 에는 몇 가지 특징이 더 있다.

1. The Appcelerator Network breaks the interup barrier
         자체적인 클라우드 서비스를 이용해 빌드, 패키지, 크로스 플랫폼으로 배포까지 지원.
2. No sandbox, better Performance
        Adobe AIR와는 달리 시스템 리소스 전체를 접근할 수 있도록 지원하고 AIR 애플리케이션에
        비해 약 1/10배의 메모리만 사용.
3. Apps for more than just the desktop
        파워 디지털 간판, point for sale, 키오스크, ATM기, 셋톱 앱 그리고 구글 크롬 OS와 애플 
        타블렛에도 지원할 예정.
4. Mix and match your favorite web technologies
        오픈웹 기술 HTML5, CSS3, JavaScript 뿐만 아니라 서버사이드 기술인 Python, Ruby, PHP까지 
        모든 플랫폼, 모든 앱, 모든 운영체제에서 모두 제공.


요약
Adobe AIR 의 경우에는 웹 기술을 활용하여 데스크탑 애플리케이션 개발을 위한 환경이였고 실제로 만들어 보려고 몇번 시도는 했으나 번번히 작은 제약들과 AIR 환경에 대한 학습 부담이 있었지만 Titanium은 동일한 코드로 애플리케이션을 빌드하고 패키지하여 배포하는데까지 AIR 만큼의 학습을 요구하지 않습니다. 

아니 그냥 메뉴얼에 따라 움직이면 될정도 간단하고 쉽습니다.
이미 만들어 놓은 웹 기반 애플리케이션이 있다면 패키지 레퍼런스를 보고 한번 따라해보면 될것도 같습니다.

모바일이나 맥, 리눅스 개발환경이 없어서 패키징이나 배포를 해볼 기회는 없으나 윈도우에서는 정말로 간단히 애플리케이션을 만들 수 있도록 지원합니다.

개발자 커뮤니티를 통해 계속적으로 발전을 꾀하고 있고 오픈 웹 기술의 발전 가능성 만큼 타이타늄과 같은 플랫폼은 발전가능하다는 것을 느끼게 되었습니다.


더불어 HTML, CSS, JavaScript를 이용해서 데스크탑이나 모바일 애플리케이션을 만들 수 있는 도구가 나왔고 웹 개발자에게 있어서도 좋은 기회들을 많이 만들 수있을 것 같다는 생각이 듭니다. : )





신고
Posted by Rhio.kim