Titanium 과 Parse Server 를적용한고효율의 네이티브모바일앱개발 Titanium_Parse 공개 SW 개발자 Lab 오픈소스프론티어 3 기김동우

Size: px

Start display at page:

Download "Titanium 과 Parse Server 를적용한고효율의 네이티브모바일앱개발 Titanium_Parse 공개 SW 개발자 Lab 오픈소스프론티어 3 기김동우"

자영 담
5 years ago
Views:

1 Titanium 과 Parse Server 를적용한고효율의 네이티브모바일앱개발 Titanium_Parse 공개 SW 개발자 Lab 오픈소스프론티어 3 기김동우

2 전세계스마트폰의 O/S는 ios와 Android가양분하고있으며, 하나의코드로 ios와 Android 모두를지원하는크로스플랫폼모바일앱을개발하는방법은끊임없이발전해왔다. 자바스크립트는이러한크로스플랫폼모바일앱개발요구를해결할수있는개발언어로써많은프레임워크에앞다투어사용되었으며, 오픈소스커뮤니티의발전과함께폭넓은인기를얻고있다. 스마트폰의성능향상, 모바일 O/S의기술적성숙으로사용자의안목은네이티브 UI를갖춘앱과이를웹브라우저로흉내낸모조품을구별할수있게되었고, 크로스모바일앱개발에서도네이티브 UI를제공하는것이필요하게되었다. 이러한크로스플랫폼네이티브모바일앱개발을할수있는대표적인방법으로 Titanium과 React Native가있다. Titanium과더불어, 오픈소스 MBaaS인 Parse Server를사용하여얻을수있는고효율의네이티브모바일앱개발방법을소개한다. [ 목차 ] 1 크로스플랫폼모바일앱개발에서자바스크립트의역할 2 구글 V8로이룬자바스크립트의극적성능향상 3 네이티브로도약한자바스크립트 4 크로스플랫폼모바일앱개발의완성된기술, Titanium 5 ios에이어 Android를지원하는 Facebook의적자, React Native 6 Facebook이남긴 MBaaS의올인원솔루션, Parse Server 7 Titanium과 Parse Server를적용한고효율의모바일앱개발 1 크로스플랫폼모바일앱개발에서자바스크립트의역할모바일앱은 ios 또는 Android 등의스마트폰 O/S 위에서구동되는설치형애플리케이션을말한다. 전세계스마트폰의 O/S는 ios와 Android가양분하고있으며, 이구조가단기간에급변하거나한개의 O/S가지배적지위를가지기어렵다.

[ 그림 1] 전세계스마트폰 O/S 시장을양분하고있는 ios 와 Android 그러므로모바일앱을개발하려고하는개발자는 ios와 Android 두개버전의앱을개발해야하는비효율에빠진다. 만약한개의 O/S만을선택하여모바일앱을개발하게된다면상당수의고객을포기해야하는큰위험을안게된다. 두 O/S는모바일앱이필요로하는기능을구현하기위해전혀호환되지않은완전히다른코드가필요하다.

3 [ 그림 1] 전세계스마트폰 O/S 시장을양분하고있는 ios 와 Android 그러므로모바일앱을개발하려고하는개발자는 ios와 Android 두개버전의앱을개발해야하는비효율에빠진다. 만약한개의 O/S만을선택하여모바일앱을개발하게된다면상당수의고객을포기해야하는큰위험을안게된다. 두 O/S는모바일앱이필요로하는기능을구현하기위해전혀호환되지않은완전히다른코드가필요하다. ios는 ios API를이용하여 Object C 언어로개발해야하며, Android는 Android API를이용하여 Java 언어로개발해야한다. 이전혀다른 O/S의 API 및개발언어의학습비용, 개발비용은막대한부담이된다. 또한, 개발된앱의유지보수및기능업그레이드에필요한비용도지속해서부담된다. 이러한비효율을해결하기위해서지속해서크로스플랫폼모바일앱개발을위한기술이발전해왔다. 대표적인두 O/S인 ios와 Android를모두지원하려는방법으로표준적기술인웹브라우저를이용한방법이초기에고안되었으나, 이것으로는네이티브 UI의높은성능과미려한디자인을흉내내기는불가능했다. 네이티브 UI를제공하는크로스플랫폼모바일앱개발기술에대한요구는커졌고, 이를위한연구는거듭되었다. 크로스플랫폼모바일앱개발프레임워크이면서네이티브 UI를제공하는대표적인제품은 C# 언어를사용하는 Xamarin과 JavaScript 언어를사용하는 Titanium, React Native가있다. JavaScript는웹브라우저를이용한전통적방법에서도로직과동작을제어하기위한역할을담당했고, 네이티브 UI를제공하는크로스플랫폼모바일앱개발기술에서도대표적두제품의개발언

어로채택되어핵심역할을담당하고있다. 브라우저에동적인동작을구현하기위해널리쓰이던 JavaScript 가크로스플랫폼네이티브모바일 앱개발의핵심개발언어로사용된배경에는이어서살펴볼기술발전의역사가존재한다. 2 구글 V8 으로이룬자바스크립트의극적성능향상 2008년, 구글은세상을놀라게한 2가지제품을발표했다.

4 어로채택되어핵심역할을담당하고있다. 브라우저에동적인동작을구현하기위해널리쓰이던 JavaScript 가크로스플랫폼네이티브모바일 앱개발의핵심개발언어로사용된배경에는이어서살펴볼기술발전의역사가존재한다. 2 구글 V8 으로이룬자바스크립트의극적성능향상 2008년, 구글은세상을놀라게한 2가지제품을발표했다. 첫번째제품은구글이 2008년 9월 2일에발표한 Chrome 브라우저다. 발표이후탄탄한상승세를유지한 Chrome은이제전통의강자인마이크로소프트의 Internet Explorer를넘어전세계브라우저점유율의약 50% 를웃도는명실공히최고의브라우저가되었다. 이후 Chrome은 Chromium open-source project로공개되어브라우저기술발달에크게기여하고있다. 두번째제품은구글이 2008년 10월 24일에발효한 V8 JavaScript Engine이다. V8은 Chrome과함께 Chromium open-source project의일부로 JavaScript의성능향상을위한노력의결정체다. [ 그림 2] 브라우저별자바스크립트성능분석 (Google, 2008) 종래의모든브라우저를압도하는엄청난성능을보여준 V8 으로인해세상은자바스크립트의새로 운가능성에주목하게된다. 특히무겁고반복적인작업에서압도적성능격차를보여준 V8 으로인

해이후브라우저개발사들은앞을다투어자바스크립트성능경쟁에뛰어들게된다. 3 네이티브로도약한자바스크립트 2009년 5월 27일 Joyent의개발자라이언달 (Ryan Dahl) 은구글 V8을이용한오픈소스크로스플랫폼자바스크립트런타임환경인 NodeJS를발표한다. NodeJS는이벤트기반의논블로킹 I/O 모델을사용해아주가볍고효율적이다.

5 해이후브라우저개발사들은앞을다투어자바스크립트성능경쟁에뛰어들게된다. 3 네이티브로도약한자바스크립트 2009년 5월 27일 Joyent의개발자라이언달 (Ryan Dahl) 은구글 V8을이용한오픈소스크로스플랫폼자바스크립트런타임환경인 NodeJS를발표한다. NodeJS는이벤트기반의논블로킹 I/O 모델을사용해아주가볍고효율적이다. NodeJS의출시로자바스크립트는브라우저를넘어네이티브의세계에발을디디게된다. 이듬해인 2010년 12월 7일, 다시금구글은세상을놀라게한 V8의성능업그레이드를발표한다. Crankshaft라는이름의 V8의새로운컴파일레이션인프라스트럭처 (compilation infrastructure) 는일거에종전 V8의성능을 2배로끌어올리는쾌거를이룩한다. [ 그림 3] Crankshaft 를적용한 Chrome 의성능분석 (Google, 2010) V8은자바스크립트를바이트코드 (bytecode) 로컴파일하거나인터프리트 (Interpret) 하는대신실행하기전직접적인기계어 (x86, ARM, MIPS 등 ) 로컴파일하여성능을향상하는구조로되어있었는데, Crankshaft에서는런타임프로파일러 (runtime profiler) 를이용해이컴파일을필요한시점에최적의효율로이루어지도록하여, 성능을극도로향상했다.

[ 그림 4] 2008 년발표이후 2010 년 Crankshaft 까지 V8 의성능비교 (Google, 2010) V8은 2008년출시이후지속적인성능향상을이룩하고있었으나, Crankshaft로인해압도적성능향상을보여주었고, 이는다시 NodeJS에적용되어 NodeJS의가능성은더욱커지게된다.

6 [ 그림 4] 2008 년발표이후 2010 년 Crankshaft 까지 V8 의성능비교 (Google, 2010) V8은 2008년출시이후지속적인성능향상을이룩하고있었으나, Crankshaft로인해압도적성능향상을보여주었고, 이는다시 NodeJS에적용되어 NodeJS의가능성은더욱커지게된다. NodeJS는 Crankshaft와함께, 이에앞서 2010년 1월공개되었던 NPM이라는패키지매니저와 2011년 6월발표된마이크로소프트윈도우즈용버전을통해네이티브자바스크립트런타임으로서의전성기를구가하게되었다. 4 크로스플랫폼모바일앱개발의완성된기술, Titanium 구글이 Chrome과 V8으로세상을놀라게한 2008년, 조용히세상에등장한 Titanium이라는제품이있다. Titanium은오픈소스프로젝트로개발된크로스플랫폼모바일앱개발프레임워크 (cross-platform mobile application development framework) 다. 2008년이후휘몰아친자바스크립트기술의격동기를통해, Titanium은구글의 V8과 NodeJS 등의오픈소스자바스크립트기술을끊임없이적용해급격히발전하게된다. 2013년비즈니스인사이더 (Business Insider) 의발표에따르면전세계스마트폰의약 10% 에서 Titanium으로개발된앱이구동되었으며, 지속적발전을통해 2016년 Titanium 개발자는전세계에 80만명이넘어서게된다. Titanium의핵심가치는한벌의자바스크립트코드로 ios, Android, Windows Phone에서네이티브

7 UI 로동작하는애플리케이션을만들수있다는엄청난효율성에있다. [ 그림 5] ios 와 Android 에서네이티브로동작되는 Titanium 의아키텍처 Titanium의가장큰장점은 7년에걸쳐개발된 Titanium SDK가가진탄탄한완성도이다. 오랜기간오픈소스로개발되면서충분한시행착오와기술적성숙을거친 Titanium은모바일애플리케이션개발에필요한대부분의 API를기본제공하고있으며, 특수한요구에필요한 API를다양한네이티브모듈형태로조합하여해결할수있도록제공하고있다. 5 ios 에이어 Android 를지원하는 Facebook 의적자, React Native 앞서살펴본 Titanium과유사한자바스크립트를이용한크로스모바일앱개발기술로는 React Native가있다. React Native는 ReactJS에기반을두고있다. ReactJS는 Facebook, Instagram과같은대형웹앱에서 UI를효율적으로개발하기위해 Facebook이자체개발한자바스크립트 UI 라이브러리로 2013년 3월공개되었다. ReactJS는 Facebook의적극적지원으로빠르게웹개발분야에서높은인기를얻었다. 2015년 3월, ReactJS를통해축적된기술을활용하여개발된 React Native가세상에발표되었다. ios만을지원하는상태로발표되었던 ReactJS는 2015년 9월 Android를지원하는버전으로업데이트되었다. 하지만여전히부족한기능으로한계점을가지고있던 React Native는 2016년 4월 Facebook의개

8 발자컨퍼런스인 F8 의홍보 / 안내목적모바일앱이 React Native 로개발되면서, 이제프로덕션에사 용할수있는수준임을과시하였다. [ 그림 6] React Native 로개발된 F 홍보 / 안내용모바일앱 (Facebook, 2016) React Native는 Titanium과구조적으로매우유사하면서도, Titanium 및자바스크립트가가지는동기적동작의한계점을보완한비동기적구조로되어있다. 하지만여전히 React Native로 ios/android를모두지원하는모바일앱을개발하기위해서는각각의플랫폼별로구분해서작성해야하는코드의양이상당하며, 플랫폼별 API를학습해야하는약점을가지고있다. 하지만이러한약점은 Facebook과오픈소스개발자들의적극적참여와열광적인기를통해향후빠르게개선될것으로예견되며, Titanium과경쟁하며자바스크립트를이용한크로스플랫폼모바일앱개발분야의빠른발전을가져올것으로기대된다.

9 6 Facebook 이남긴 MBaaS 의올인원솔루션, Parse Server 2011년 Parse라는미국캘리포니아소재의스타트업이 Parse.com이라는모바일백엔드-에즈-어-서비스 (mobile backend as a service) 를발표한다. 모바일앱개발을위해필요한백엔드서버를개발하고운영하는데필요한데이터 I/O 및 Push 알림기능등을모두무료서비스로이용할수있도록제공함으로써높은인기를얻은 Parse.com은 2013년 8천500만달러 ( 약 900억원 ) 에 Facebook에인수된다. Parse.com은 Facebook의지원에힘입어빠른속도로지원하는플랫폼을확장하여, Restful API를시작으로 ios / Android / JavaScript /.NET+Xamarin / macos / Unity / PHP / Arduino / Embeded C 용의 SDK를오픈소스로제공하고있다. 하지만 2016년 1월 28일, Facebook은돌연 Parse.com 서비스종료를예고하며, Parse.com을리팩토링하여 Parse Server라는설치형 MBaaS 오픈소스프로젝트로써공개한다. Parse Server는 NodeJS를기반으로자바스크립트언어로개발되었습니다. 그리고 Parse Server는데이터베이스로 MongoDB를사용합니다. MongoDB는자바스크립트데이터형태인 JSON(JavaScript Object Notation) 을그대로사용하여높은개발효율을제공하며, 빅데이터를다룰수있는 NoSQL로써높은성능, 안정성, 확장성을제공한다. 자바스크립트개발능력을그대로활용하여빠르고효율적으로 Parse Server가제공하는기능에추가로필요로하는기능을구현해낼수있다. Parse.com을사용하고있던약 100만여개의모바일앱들은 2017년 1월 28일까지 Parse Server를이용하여마이그레이션을해야한다는패닉에빠졌지만, 오픈소스개발자커뮤니티의힘으로 Parse.com의제약을넘어서놀랄만큼빠르게더효율적이며강력한 MBaaS로거듭나게되었다. Facebook은사업적손익계산때문에수익률이떨어지는 Parse.com의운영종료를결정한것으로추측되지만, 이는오픈소스개발자의집단적참여를통해전화위복이되어 MBaaS의가장인기있는솔루션으로자리잡았다.

[ 그림 7] Facebook 의손을떠나오픈소스로거듭난 Parse Server (Parse, 2016) 7 Titanium 과 Parse Server 를적용한고효율의모바일앱개발 React Native의기술발전의미래가매우기대되기는하지만, 현재시점에서크로스플랫폼모바일앱을개발하기위해서는충분히기술적으로성숙한 Titanium을선택하는것이안전한선택이다.

10 [ 그림 7] Facebook 의손을떠나오픈소스로거듭난 Parse Server (Parse, 2016) 7 Titanium 과 Parse Server 를적용한고효율의모바일앱개발 React Native의기술발전의미래가매우기대되기는하지만, 현재시점에서크로스플랫폼모바일앱을개발하기위해서는충분히기술적으로성숙한 Titanium을선택하는것이안전한선택이다. Titanium을이용해서 Frontend의높은효율을달성했다면, 여기에더해서 Parse Server를사용하여 Backend까지도높은효율을달성하여모바일앱개발에극도의효율을추구할수있다. Titanium에 Parse Server를사용하기위해서는 Parse Server의자바스크립트 SDK를 Titanium에맞게 CommonJS 형식으로포팅한모듈을사용한다. 이모듈은역시오픈소스로공개되어있다. Titanium이데이터를다루는근간은 BackboneJS로이루어져있는데, Parse 자바스크립트 SDK 또한 BackboneJS를바탕으로개발되어궁합이아주좋다. Titanium의 Frontend 환경에서개발된코드를그대로 Parse Server의 Backend 환경으로옮겨서동작할수있다. Parse Server 또한 Parse 자바스크립트 SDK를이용해서로직을구성할수있도록제공하기때문이다. Titanium과 Parse Server를조합하여사용함으로써 Frontend 부터 Backend를거쳐데이터베이스까지도풀스택 (Full-stack) 자바스크립트개발을할수있어서개발의효율및코드의수정과유지보수모두아주높은효율을달성할수있다. 또한, 자바스크립트로이루어진풀스택개발은팀을구성하는개발자의수나구성과상관없이커뮤니케이션비용을아주낮게유지할수있다. 참여하는모든개발자가같은코드베이스를이해하고판단하고개발할수있기때문이다. Titanium과 Parse Sever 모두오픈소스로개발되기때문에폭넓은자유도와신뢰성, 오픈소스커뮤니티의저력을바탕으로한끊임없는기술발전을기대할수있다. Titanium과 Parse Server를이용하여크로스플랫폼모바일앱을개발하고, 이를통해얻은높은효율성은비즈니스에더많은도전을할소중한기회를제공할것이다.

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

WAC 2.0 & Hybrid Web App 권정혁 ( @xguru ) 1 HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API Mobile Web App needs Device APIs Camera Filesystem Acclerometer Web Browser Contacts Messaging