HTML5를 이용한 네이티브 앱 개발 도구들

새로 들어간 회사일로 HTML5를 이용하여 네이티브 앱 개발을 할 수 있는 도구들을 조사했습니다. 대표적으로 Appcelerator에서 개발한 Titanium과 Nitobi에서 개발한 PhoneGap이 있습니다. 이들은 급변하는 환경에 발빠르게 대응하여 진화하는 중이며, 근황을 살펴보면 Nitobi는 며칠전에 Adobe에 인수되었으며, Appcelerator는 웹 클라이언트 개발도구인 Aptana를 인수한 바 있습니다. 이 두 프레임웍을 중점으로 찾은 자료들 중 괜찮게 비교한 포스트가 있어 일부를 발췌했습니다.

이 두 프레임웍은 모바일 네이티브 앱 뿐만아니라 Adobe AIR의 취지와 같이 데스크탑 애플리케이션 개발 범주까지 포함하거나 포함할 예정이며, 한 플랫폼으로 구축된 프로젝트를 재사용하여 다른 플랫폼(iOS, Android 등)에서 돌아가는 네이티브 앱을 구축할 수 있다는 장점을 가지고 있기 때문에 웹 개발자들로부터 귀추가 주목되어 왔습니다. 지금부터 설명할 프레임웍들의 특성을 숙지하고 자신이 개발하려는 애플리케이션의 성격을 고려하여 적합한 개발도구를 선택하도록 합시다.

PhoneGap

PhoneGap은 웹 개발자들이 가진 기존의 모든 기술을 활용하고 자체적으로 제공되는 Device API에 자바스크립트로 접근할 수 있게 하는 것으로 모바일 디바이스에 특화된 네이티브앱을 개발할 수 있습니다. 별도의 개발도구를 제공하지 않으며, 해당 플랫폼의 SDK에 유기적으로 결합됩니다. 예를 들면 iOS인 경우 Xcode의 프로젝트 타입으로 등록되고, 안드로이드인 경우 이클립스에 프로젝트 타입이 추가됩니다.

 

TITANIUM 보다 좋은 점

• 보다 자유 분방한 라이센스(Apache open source license 대비 MIT)
• 보다 쉽고 다양한 테스팅(웹브라우저, Xcode 시뮬레이터, Adobe AIR 시뮬레이터)
• 더 많은 모바일 플랫폼 지원

모바일에 최적화된 웹페이지를 가지고 있다면 여기에 모바일 디바이스에서 지원하는 몇 가지 기능을 아주 쉽고 빠르게 추가 개발하여 배포하고 수익을 창출할 수도 있을 것입니다. 브라우저를 하나의 플랫폼인 관점으로 접근했기때문에 향후 이러한 프로그래밍은 더욱 인기가 높아질 것입니다.

 

Titanium

Titanium 역시 자바스크립트와 HTML, CSS를 작성할 수 있긴 하지만, 다소 억척스러운 면이 있습니다. 실제 네이티브 UI 컴포넌트를 호출할 수 있는 API를 제공합니다. PhoneGap처럼 브라우저를 드로잉 앤진(UIWebView)으로 사용하지 않는다는 얘기죠. 그리고 앞서 밝혔듯이 Aptana를 인수하여 이클립스 기반의 전용 IDE(통합 개발 환경)로 작업할 수 있습니다.

 

PHONEGAP 보다 좋은 점

• 쉽게 네이티브 앱처럼 보이도록 만들 수 있음(실제 네이티브 UI 컴포넌트를 사용하기 때문)
• 더 나은 성능(Objective-C로 작성된 앱과 견줄만 함)
• 모든 네이티브 기능을 추가하여 확장가능(예를 들면 서드파티 라이브러리?)

Titanium은 Objective-C를 배우는 대신에 사랑스러운 자바스크립트로 프로그래밍하고 네이티브 앱에 버금가는 성능을 얻는다는 것이 두드러진 특징이라 할 수 있겠습니다.

 

결론

결국 이들은 구축방식과 작동방식에서부터 완전히 다른 목적을 추구하는 프레임웍입니다. PhoneGap으로 작성된 앱은 네이티브 앱에 비해 성능이 떨어지는 아쉬운 점이 있습니다만, 웹과 앱을 구동하는데 있어서 프로젝트를 다방면으로 재사용하기에 좋습니다. Titanium은 마치 Objective-C로 작성하는 것과 같은 더욱 많은 장점이 있습니다만, Device API에 UI 컴포턴트 API 그리고 디바이스별로 사용법이 달라 같은 소스에서 크로스-디바이스까지 고려해야 한다는 노고가 뒤따릅니다. 참고로 Titanium / PhoneGap / Adobe Air for Mobile 비교표도 확인해 보세요.

 

출처 : http://firejune.com/1712/HTML5%EB%A5%BC+%EC%9D%B4%EC%9A%A9%ED%95%9C+%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C+%EC%95%B1+%EA%B0%9C%EB%B0%9C+%EB%8F%84%EA%B5%AC%EB%93%A4