[강좌]네이티브와 웹 기술의 접목, 개발자라면 알아야 할 `하이브리드 웹앱`을 아시나요

편집자 주> 이 글은 월간 마이크로소프트웨어에서 제공하였으며, 원문 http://bit.ly/jaI6k7 을 통해 더 자세한 내용을 확인할 수 있습니다. 전자신문인터넷에서는 최근 업계의 화두로 떠오른 모바일 웹과 하이브리드앱을 주제로 한 세미나 http://bit.ly/qakDsm 를 마련하였습니다. 많은 성원 부탁 드립니다.

전자신문인터넷 테크트렌트팀 trend@etnews.com

[[빠르게 애플리케이션에서 앱으로의 진화가 이루어지면서 시장은 거대해지고 서비스를 개발하는 기업 입장에서 시간, 비용, 개발 인력 문제 등 다양한 악재가 현실화되면서 이를 극복할 대안을 모색하는 데 주력하고 있다. 진화하는 웹 표준 기술을 기반으로 새로운 서비스 개발 플랫폼으로 주목 받고 있는 하이브리드 웹앱 개발 기술에 대해 소개해 보고자 한다.]]

[[글쓴이 - 김민태 ibare77@gmail.com, Twitter: @ibare｜KTH 기술연구소 웹플랫폼Lab에서 근무하고 있다. W3C HTML5 한국 관심 그룹의 UI 그룹 그룹장으로 활동하고 있으며 웹 표준기술을 적용한 다양한 서비스 솔루션 개발에 관한 연구를 진행하고 있다.]]

2007년 세상에 등장한 ‘아이폰’이라는 충격이 채 가시기도 전에 애플은 ‘앱 스토어’라는 마켓을 탄생시켰다. 한국에서 아이폰이 출시된 지도 1년이 넘어 2년째를 향해 달려가고 있다. 아이폰 출시 후 짧은 기간 동안 전세계 IT 업계 흐름은 큰 변화를 겪었으며 IT 업계의 갈라파고스란 비아냥을 듣던 한국도 그 거대한 흐름을 거스르지 못했다. 1년여의 짧은 기간 동안 정말 많은 것이 달라졌고 지금도 달라지고 있다.

이런 거대한 변화를 주도한 것은 다름 아닌 아이폰이란 작은 이동전화기이지만 ‘진짜 주인공은 앱 스토어가 아닐까?’하는 생각을 지울 수 없다. 개인 개발자 또는 기업에게 기존과는 확연히 다른 새로운 시장을 열어주었고 사용자 입장에선 값싸고 질 좋은 애플리케이션(이하 앱)을 쉽게 구입하고 사용해 볼 수 있는 길을 앱 스토어가 열어 주었기 때문이다. 농촌의 농민들과 도시의 소비자들간에 복잡한 유통채널을 없애고 생겨난 직거래 장터와 유사한 이런 구조는 공급자와 소비자 모두 ‘윈윈’할 수 있는 선 순환의 생태계를 완성했다는 측면에서 혁신이라 말할 수 있을 것이다. 하지만 아무리 장점이 많다고 해도 단 하나의 마켓 구조란 것은 문제가 있을 수밖에 없다. 앱 스토어 초창기에는 예상되는 문제들이 현실화되지 않았으나 지난해 말 기준으로 애플 앱 스토어에 등록된 앱의 개수는 약 32만 5,000개에 달했고, 월 평균 약 2만 5,000개의 새로운 앱들이 등록되고 있는 현 상황에서 수많은 문제점들이 노출되고 있다. 급기야 시장에는 안드로이드 진영이 급성장하고 있으며 단말 개수만 놓고 본다면 아이폰의 판매 대수를 넘어선 지 오래이고 안드로이드 앱 스토어 역시 급속도로 성장하고 있다. 블랙베리, 윈도우폰7 등의 경쟁자들도 포기할 수 없는 이 시장을 향해 지속적으로 투자하고 있다.

이런 시장 상황 속에서 앱 스토어에 앱을 팔아 일확천금의 꿈을 실현한 것은 이미 신화가 됐다. 경쟁자들은 많아졌고 수많은 기업들이 경쟁하기 시작해 모바일 앱 개발에서 더 이상 단순하고 반짝이는 아이디어에 소규모 자본을 투자해 빠르게 시장에 출시하면 된다는 성공 전략이 깨진 것이다. 무엇보다 앱 시장이 커지면서 다양한 사람들이 다양한 디바이스로 동일한 서비스를 제공받기를 바라고 있다. 개발사 입장에서 아이폰 사용자만 만족시키면 문제없었던 상황에서 안드로이드용, 블랙베리, 윈도우폰7 등의 스마트 폰 앱뿐만 아니라 TV, 셋톱박스 등 너무나 다양한 사용자들에게 동일한 서비스를 제공해야 하는 상황에 직면한 것이다. 그러나 기존 개발 방법으로는 더 이상 비용과 시간이라는 측면에서 사용자들을 만족시키기가 점점 불가능한 일이 되고 있다. 이제 기존의 개발 전략을 수정하여 새로운 개발 전략을 찾아야 할 때가 온 것이다.

새로운 대안 웹 표준 기술

거의 유일한 대안으로 평가 받는 기술은 다름아닌 우리에게 가장 익숙한 웹 표준 기술이다. 웹 표준 기술의 장점은 잘 알려져 있지만 앱 개발에 적극적으로 사용되지 못한 이유는 개발에 필요한 다양한 기능들을 제대로 제공하지 못했기 때문이다. 최근 몇 년간 플랫폼으로의 역할을 할 수 있는 차세대 웹 표준 기술 개발에 시동이 걸렸고, HTML5로 대표되는 차세대 웹 표준 기술은 이제 그 어떤 플랫폼보다 더 다양하고 광범위한 기능을 제공할 뿐만 아니라 지금도 지속적으로 새로운 기능을 추가하고 있다. 텍스트와 이미지 그리고 문서간 링크 서비스 정도만을 지원하던 웹 기술은 이제 2D, 3D, 벡터 그래픽은 물론 고화질 동영상, 사운드, 고속 동기 통신 프로토콜, 데이터베이스 그리고 하루가 다르게 발전하는 자바스크립트 엔진 등 수많은 기능들을 개발자들에게 제공한다. 표준 기술을 지원하는 브라우저만 있다면 단 한 벌의 코드만으로 다양한 디바이스에서 실행되는 고품질의 앱을 개발할 수 있는 최상의 개발 솔루션으로서의 면모를 갖춰가고 있다.

네이티브 앱의 돌파구 하이브리드 앱

디바이스에서 제공되는 SDK 환경에서 개발된 네이티브앱은 많은 장점에도 불구하고 앞서 얘기된 성능 외적 요인으로 인한 단점을 노출하고 있다. 그러나 현실적인 문제는 웹 기술이 많은 발전을 했음에도 불구하고 단기간 내에 네이티브 앱 마켓이 사라지지는 않을 것이란 것이다. 그 자체로서 거대한 시장이고 지금도 계속 성장하고 있으며 사용자들에게 최상의 환경을 제공하고 있기 때문에 대부분의 사람들은 유사한 서비스가 웹으로 제공된다고 하더라도 접근성이 우월한 앱 스토어를 결코 떠나지 않을 것이다. 그렇다면 어떤 해법이 있을까? 앞서 열거한 무시할 수 없는 심각한 문제점들을 계속 안고 갈 수밖에 없는 것일까? 네이티브 기술과 웹 기술을 접목시킨 하이브리드 앱 기술이 이 어려운 문제의 해결책을 제공할 수 있다.

하이브리드 앱 기술이란 무엇일까? 하이브리드 앱 기술은 새로운 기술이 아니다. 오래되고 숙성된 기술이며 컴포넌트를 조합하여 개발하는 형태로 우리에겐 아주 익숙한 기술이다. 이 오래된 기술이 신기술인 양 주목받는 이유는 몇 가지 우연과 필연이 만난 결과인 듯 하다. 대표적인 하이브리드 개발 플랫폼 3가지를 살펴보면서 우연과 필연이 어떻게 결합하여 이 거대한 시대의 흐름에 주역으로 떠오르고 있는지 알아보자.

PhoneGap

2009년 초 공개된 하이브리드 앱 개발 프레임워크인 Phone Gap은 HTML로 만들어진 웹페이지를 아이폰 앱으로 만들어주는 마술을 보여주며 세간의 주목을 끌게된다. 단지 앱 스토어에 올릴 수 있을 뿐만 아니라 아이폰의 카메라를 사용할 수 있으며, 주소록에 접근하고, GPS 센서의 위치 정보를 자바스크립트를 통해서 받아올 수 있는 퍼포먼스를 보여준다. PhoneGap이 전하는 놀라움은 여기서 멈추지 않고 동일한 기능을 안드로이드, 블렉베리, 심비안, WebOS 등으로 확장해 나간다.

그러나 그것은 말 그대로 단지 흥미로운 퍼포먼스였다. 시장에 나와있는 주요 모바일 플랫폼 대부분을 지원하고 아이폰과 안드로이드 등 메이저 플랫폼 디바이스 자원에 접근하는 기능을 자바스크립트 인터페이스로 제공하여 웹앱에서 직접 사용할 수 있도록 제공했지만 문제는 웹으로 만들어진 결과물이 네이티브앱 UI와 간극이 너무 크다는 문제를 극복하지는 못했다는 것이다. PhoneGap으로 인한 문제는 아니었지만 결국 PhoneGap으로 만들어진 결과물이었기 때문에 평가절하될 수밖에 없었다. PhoneGap은 더 이상의 임펙트를 줄 수는 없었지만 행운이 뒤따른다. 브라우저 벤더들이 HTML5 신규 스펙 구현에 열을 올리며 경쟁하는 상황이 호재로 작용한 것. 웹앱의 실행 환경인 브라우저의 성능 향상과 강력하고 광범위한 기능으로 무장한 HTML5의 새로운 스펙들은 하이브리드앱 진영에게는 천군만마와도 같은 힘을 실어준다. 앱이라 불리기엔 떨어지는 퍼포먼스는 비약적으로 향상됐고 다양한 앱을 개발하기에 부족했던 기능은 HTML5의 광범위한 기능들을 활용할 수 있게 바뀜으로써 네이티브앱 부럽지 않은 앱을 개발할 수 있게 된 것이다. 무엇보다 웹 기술들의 특징인 간단한 개발 방식과 많은 수의 웹 개발자들을 잠재적인 웹앱 개발자로 확보하게 돼 앱 개발에 필요한 인력수급 문제도 상당수 해결됐다.

생각지도 행운으로 다시금 주목받게 된 PhoneGap은 2009년에 공개된 최초의 하이브리드 웹앱 프레임워크라는 명성과는 다르게 단촐한 형태를 가지고있다. 현재 배포되고 있는 0.9.4 버전의 패키지가 단지 4.5MB의 용량인 것에서 알 수 있듯이 통합 개발환경이나 웹앱 개발에 유용한 도구 등은 제공되지 않는다. 단지 지원 플랫폼별로 프로젝트 템플릿을 제공하고 있다. 그 이유로 개발하고자 하는 플랫폼의 개발 환경에 대한 일정의 지식이 있어야 개발이 가능하다는 점이 단점이다. 이는 네이티브 개발자가 아닌 웹 개발자들에게 진입장벽으로 작용해 PhoneGap 웹사이트에선 플랫폼별 설치 정보를 Wiki 형태의 문서와 스크린 캐스트 동영상으로 제공하고 있다.

Accelerator Titanium

Titanium은 하이브리드 앱 개발 프레임워크로서 PhoneGap보다 출발은 약간 늦었지만 PhoneGap과는 전혀 다른 방식으로 접근해 하이브리드 앱 개발에 새로운 방향성을 제시하고 있다. PhoneGap은 브라우저 컴포넌트를 사용하여 웹앱 파일을 구동시키는 구조이기 때문에 구현과 확장이 용이하지만 브라우저로 웹앱을 구동시키는 것과 완전히 동일한 형태이기 때문에 웹앱이 갖는 미묘한 성능 문제를 피할 수 없다는 게 단점이다. 하이브리드 앱이라면 어쩔 수 없는 결과이나 Titanium 개발팀은 다른 방향의 해결책을 찾아냈다. 웹 기술을 이용하여 네이티브앱을 개발하는 방식을 택한 것이다. 개발 언어는 HTML, 자바스크립트지만 결과물은 네이티브인 방식이다. 이 방식의 장점은 근본적으로 네이티브 자원을 활용해 네이티브와 동일한 성능을 보여 줄 수 있다는 것이다.

Titanium은 Titanium 자바스크립트 API 형태로 앱 개발에 필요한 대부분의 기능을 제공한다. 부가적으로 네이티브 SDK에선 제공되지 않는 Twitter, Facebook 등과 같은 서비스 API들도 제공해 손쉽게 이들 서비스와 연동되는 기능을 사용자 앱에 추가할 수 있다. Titanium의 이런 개발 방식이 성능 문제를 해결하기도 했지만 어쩔 수 없이 희생된 측면도 분명히 있다. 자바스크립트로 네이티브앱을 만들기 위해서 완전하게 통제된 자바스크립트 API가 필요했고 이는 Titanium 전용 API 형태가 될 수밖에 없기 때문이다. 이 자체만으로 Titanium은 분명히 웹 기술이라고 할 수 있으나 과연 이것이 웹 표준 기술이 가지는 장점을 유지하고 있는지는 생각해 봐야 할 것이다. 표준 기술의 진정한 가치는 특정 단체나 기업에 의존적이지 않다는 데 있다. 하지만 Titanium과 같은 형태라면 형식만 웹 기술일 뿐 표준 기술이라 부르긴 힘들 것 같다. 성능을 해결하기 위해 너무 많은 희생을 치른 것 같다.

Titanium의 또 하나 독특한 특징은 모바일뿐만 아니라 데스크톱 플랫폼도 지원한다는 것이다.

Titanium이 지원하는 플랫폼은 iOS, Android, Blackberry, Windows Family, Linux, OSX로 모바일 플랫폼과 데스크톱 OS 모두를 지원하고 있어 진정한 크로스 플랫폼 배포를 실현하고 있다. 하지만 안타깝게도 모바일 플랫폼과 데스크톱 플랫폼의 차이가 매우 크기 때문에 동일한 개발 환경을 제공하지는 못하고 있으며 모바일용, 데스크톱용 API가 각각 존재한다.

Appspresso

하이브리드 앱 개발 플랫폼 중 가장 최근에 발표된 Appspresso는 최근에 나온 솔루션답게 이클립스 기반의 통합 IDE를 제공하고 jQueryMobile, Sencha Touch 등 모바일 자바스크립트 프레임워크 템플릿 생성 도구 및 이동통신사 중심의 웹앱 표준인 WAC Waikiki API를 지원한다. 무엇보다 한국 기업인 KTH의 웹 플랫폼 연구소에서 개발된 것이 눈에 띈다. 공개 된지 이제 한 달 정도밖에 되지 않았으며 현재 배포판은 베타 2이고 1.0 정식 버전은 7월경에 발표될 예정이다.

Appspresso는 기본적으로 PhoneGap과 동일한 구조를 가진다. 즉 웹앱을 네이티브로 만들기 위해 브라우저 컴포넌트에 의존하는 형태라는 의미다. 플랫폼 별 프로젝트 템플릿의 형태로 제공되는 PhoneGap과는 다르게 통합 개발 환경을 제공해 개발 편리성을 매우 높였지만 Appspresso가 PhoneGap과 보이는 가장 큰 차이점은 디바이스 자원에 접근하기 위해 제공되는 자바스크립트 인터페이스의 구조다. PhoneGap이 제공하는 자바스크립트 인터페이스는 표준이 아닌 PhoneGap 스타일의 API다. 비록 현재 개발 중인 W3C의 디바이스 API와 유사해 보이지만 정확히 일치하지 않는다. 디바이스 API 표준이 확정되고 브라우저에서 지원하게 되면 호환성에 문제를 일으킬 수 있으며 개발된 코드를 수정할 수밖에 없을 것이다. Appspresso는 이런 문제를 해결하기 위헤 디바이스 API 인터페이스를 모두 WAC Waikiki API로 제공하고 있다. 이것이 의미하는 것은 WAC API로 개발된 웹앱을 코드 수정 없이 Appspresso를 이용해 iOS나 안드로이드 네이티브앱으로 만들 수 있다는 것이다. 반대의 경우도 가능한데, Appspresso IDE에서 WAC 패키지로 생성기능을 제공한다.

웹사이트를 개발하던 개발자들도 웹앱 개발을 처음 접할 때 많은 시행착오를 거치게 된다. 웹사이트 개발과 유사한 점이 매우 많지만 다른 점도 많기 때문이다. 모바일 앱의 디자인과 동작 방식은 아이폰이나 안드로이드의 영향으로 어느 정도 표준적인 가이드라인이 존재한다. 웹앱을 개발할 경우 HTML과 CSS만으로 네이티브앱과 유사한 UI를 구현해야 하는데 웹 개발자에게도 결코 쉬운 일은 아니다. jQueryMobile이나 Sencha Touch와 같은 자바스크립트 프레임워크로 개발하게 되면 많은 도움을 받을 수 있는데, 이런 프레임워크도 약간의 학습 비용이 필요하다.

Appspresso에서는 프로젝트 생성시 자바스크립트 프레임워크를 선택할 수 있는 기능을 제공해 보다 손쉽게 웹앱 개발을 시작할 수 있다. 여름으로 예정된 1.0 정식 버전에서는 Appspresso 플러그인 개발 플랫폼과 런타임에 소스 수정이 가능한 On the fly development 기능이 공개된다고 하니 모습을 보여주게 될지 기대해 보자.

어떤 솔루션을 선택할 것인가?

지금 이 시간에도 많은 개인과 기업들이 하나의 앱을 멀티 디바이스에 배포하기 위해 사투를 벌이고 있다. 이는 서비스 개발에 투자해야 할 시간과 비용을 엉뚱한 곳에 낭비하고 있다는 의미로, 이를 깨달은 많은 기업과 개인 개발자들은 하이브리드 앱 개발에 관심을 기울이기 시작했다. 많은 사람들이 웹 기술이 대세라고 얘기하지만 웹 기술이 대세인 시대는 이미 지났다. 웹 표준 기술을 기반으로 한 서비스 개발은 이미 대세를 넘어 현실이 되었다. PhoneGap은 여러 가지 단점에도 불구하고 처음 시장을 개척했다는 이유로 여러 부문에서 지원 사격을 받고 있다. Adobe나 각종 자바스크립트 프레임워크들은 PhoneGap과 보다 잘 융합되기 위해 여러 가지 지원을 아끼지 않고 있다. Titanium은 최근 유명한 이클립스 기반의 웹 개발 도구 개발사 Aptana를 인수해 Titanium Studio라는 전용 개발 환경을 개발하고 있고 최근에 Preview 버전을 공개하며 매우 공격적인 행보를 취하고 있다. Appspresso는 가장 최근에 출시된 솔루션답게 기본기에 충실하며 표준 지향적인 행보를 취한다. 여름에 그 실체가 공개될 예정인 WAC 단말이 출시되면 더욱 흥미로운 개발 플랫폼이 될 것으로 예상되며 미리 WAC에 적응해 보고 싶은 개발자라면 Appspresso에서 WAC 앱 개발을 시작해 볼 수 있을 것이다. 무엇보다 한국의 개발자들은 한국에서 개발된 개발 도구라는 장점을 충분히 이용할 수 있을 것으로 생각된다.

서비스를 개발하고 적절한 개발 환경을 고민해야 하는 입장에서 하이브리드 기술을 도입하고자 한다면 지금까지 소개한 여러 가지 형태의 하이브리드 개발 환경이 존재한다. 그러나 개발하고자하는 서비스의 형태를 잘 고려해 최대한 확장성과 유동성에 대응할 수 있는 개발환경을 채택하는 지혜가 필요할 것이다.

참고자료

1. http://www.phonegap.com

2. http://www.appcelerator.com/

3. http://www.appspresso.com

4. http://www.jquerymobile.com

5. http://www.sencha.com/products/touch/