타이타늄 (Titanium) SDK를이용하면자바스크립트로 ios와안드로이드네이티브앱을동시에개발할수있다. 자바스크립트로모바일앱을개발한다고하면하이브리드로불리는웹뷰 (WebView) 를통해 UI를구성하는폰갭 (Phonegap) 이나코도바 (Cordova) 프레임워크를생각하는

Transcription

1 자바스크립트를이용한네이티브모바일앱개발 TITitanium 공개 SW 개발자 Lab 오픈소스프론티어 2 기이종은

2 타이타늄 (Titanium) SDK를이용하면자바스크립트로 ios와안드로이드네이티브앱을동시에개발할수있다. 자바스크립트로모바일앱을개발한다고하면하이브리드로불리는웹뷰 (WebView) 를통해 UI를구성하는폰갭 (Phonegap) 이나코도바 (Cordova) 프레임워크를생각하는경우가많다. 타이타늄은웹뷰를이용하는것이아니라자바스크립트와네이티브브리지 (Bridge) 기술을이용한다. 자바스크립트에서네이티브코드를실행 (invoke) 하여동작하고네이티브 UI를사용하는진짜네이티브앱을만들게된다. 이러한방식이웹뷰를이용한종래의크로스플랫폼모바일개발방식이나타이타늄과비슷한접근방식으로모바일앱개발을하는리액트네이티브 (React Native) 와비교하면서타이타늄을중심으로크로스플랫폼개발방법에대해설명한다. [ 목차 ] 1. 크로스플랫폼모바일앱개발 2. 무엇이네이티브앱인가? 3. 왜자바스크립트인가? 4. 브리지! 자바스크립트로네이티브를동작시킨다. 5. 크로스플랫폼을위한도구 5-1. 타이타늄개발도구 1: TiShadow 5-2. 타이타늄개발도구 2: 타이타늄 Alloy를위한 Atom 패키지 6. 크로스플랫폼개발프레임워크의개발자경험 1. 크로스플랫폼모바일앱개발 모바일운영체제시장은크게 ios 와안드로이드로나뉜다. 이두가지이외에윈도우와블 랙베리등이있지만그점유율은미비하기에여기서는 ios 와안드로이드에대해서만이야 기하겠다. 그렇다면 ios를먼저대응해야할까? 안드로이드를먼저대응해야할까? 모바일앱을만들어봤거나만들려고하는사람들이라면한번쯤혹은어쩌면수도없이하는고민일것이다. 고민이되는이유는두 OS중에어느것이절대적으로중요하다고말할수없기때문이다. 단순히시장점유율만보자면안드로이드가월등히앞서지만어떤사람들을대상으로어떤서비스를제공할지에따라분명그대상이되는사용자가사용하는스마트폰의모바일 OS 의점유율은판이하게다르다. 이렇다보니개발자개인혹은팀에서어느하나의플랫폼을선택하고나머지를완전히무시할수는없다. 결국현실은최소한 ios와안드로이드모두를염두에두고있어야한다. ios와안드로이드를만든애플과구글이제공하는이른바네이티브개발도구를이용하여앱을만들게되면두앱은완전히다른언어와도구를이용하여만들게된다. ios는오브젝티브-c( 혹은스위프트 ) 와 Xcode, 안드로이드는자바 (Java) 와안드로이드스튜디오를사용해야한다. 다른언어와다른도구를사용하다보니같은기능이라할지라도완전히다른코드

3 로각각만들어야한다. 소프트웨어개발방법론에서빠지지않는 DRY(Don't repeat yourself) 입장에서보면이는바람직하지않으며비효율적이라할수있다. 여기에한가지더하자면스타트업과같은작은규모의회사나팀의입장에서는양쪽모두를개발할수있는개발자를찾기도어려우며각플랫폼별로따로채용하기에도부담이된다. 크로스플랫폼개발이란하나의플랫폼에종속되지않는다는것이다. 여러플랫폼에서동작 하는제품을만드는것을의미한다. 모바일에서이야기하자면 ios 와안드로이드모두에서 동작하는애플리케이션을만드는것이다. 모바일크로스플랫폼개발프레임워크는크게두가지로나눌수있다. 첫째가웹뷰위에서 UI를구현하고각플랫폼앱으로패키징을하는경우다. 코도바가가장대표적인예다. 웹뷰가있는플랫폼이라면어디든동작하게한다는측면에서는매력적이지만네이티브가제공하는강력하고미려한다양한 UI 컴포넌트를사용하지못한다는점과이로인해해당플랫폼에서제공하는사용자경험가차이가있을수있다는단점이있다. 두번째는바로하나의언어로여러플랫폼앱을개발할수있게해주는프레임워크들이다. 자바스크립트를이용하는타이타늄과리액트네이티브, C# 을이용하는사마린 (Xamarin) 등이대표적이다. 이방법의장점은바로네이티브 UI 컴포넌트를사용한다는점이다. HTML과 CSS로화면을구성하는것이아니라해당플랫폼에서제공하는네이티브 UI 컴포넌트를이용한다. 해당플랫폼의사용자경험 (UX) 을그대로가져가면서도하나의언어와도구를사용하여여러플랫폼에서동작하는애플리케이션을만들수있다는것이가장큰장점이다. [ 표 1] 주요크로스플랫폼개발환경비교 2015년페이스북의 F8 컨퍼런스에서리액트네이티브가처음소개될때 한번배워서모든곳에사용한다 (Learn once, write everywhere) 가리액트네이티브의특징이자지향점이라고했다. 어디서많이들어본말이지않은가? 그렇다. 한번쓰면모든곳에서실행되는 (Write once, run everywhere) 폰갭, 한번쓰면모든곳에적용할수있는 (Write once, adapt everywhere) 타이타늄 (Titanium) 프레임워크와비슷하면서도다른표현이다. 표현이비슷하지만다르듯이모두여러플랫폼에서동작하는크로스플랫폼모바일앱이지만분명한차이점이있다.

4 2. 무엇이네이티브앱인가? 네이티브앱의정의는무엇일까? 여러가지정의가있을수있지만이정의는기술적인접근보다는사용자에게다가서는 UI와 UX에더관련이깊다고할수있다. 어떤언어로만들었는지와상관없이아이폰앱은아이폰앱다워야하고안드로이드는안드로이드앱다워야네이티브앱이라할수있을것이다. 아이폰앱답고안드로이드앱다우려면해당플랫폼에서제공하는 UI 컴포넌트와해당플랫폼의특징적인기능을잘버무려서앱을만들어야한다. 타이타늄과리액트네이티브는 HTML, CSS를기반으로이러한 UI컴포넌트와기능들을흉내내는것이아니라해당플랫폼에서제공하는 UI 컴포넌트와기능들을자바스크립트에서사용할수있는인터페이스를제공한다. 3. 왜자바스크립트인가? 크로스플랫폼모바일앱개발에서빠지지않는것이자바스크립트이다. 타이타늄과리액트 네이티브만보더라도자바스크립트만을이용해서앱을완성할수있다. 그렇다면왜이러한 플랫폼들이자바스크립트를사용하는것일까? 자바스크립트가갖고있는생태계때문일것이다. Node.js로서버를만들고웹페이지를만들고타이타늄이나리액트네이티브로앱을만들게될때생기는장점은바로하나의언어로작성한다는것이다. 언어가같다는말은 DOM, Node나타이타늄 API등과같이특정플랫폼에종속되지않은 Uderscores.js, Moment.js 같은순수자바스크립트라이브러리를모든플랫폼개발에서사용할수있다는말이다. 또한디펜던시를관리한다거나디버깅을할때사용하는도구가거의유사하다는장점또한무시할수없다. 4. 브리지! 자바스크립트로네이티브를동작시킨다. 몇년전만하더라도자바스크립트를사용하는네이티브모바일앱개발프레임워크분야에타이타늄이외에다른프레임워크를찾기어려웠다. 이분야에서타이타늄이거의유일한프레임워크였기때문에, 자바스크립트로네이티브앱을만든다는접근방식이폰갭과같은웹뷰기반의패키징기술과동일한것으로오해를받기도하고, 타이타늄이외에다른플랫폼이없는이유가이러한접근방식에단점이많아서가아니냐는평들도있었다. 그러나 2015년초에페이스북에서리액트네이티브를발표하면서자바스크립트로네이티브를다루는플랫폼이재조명받기시작했다. 페이스북은올해초리액트네이티브 ios 버전을발표한데이어가을에 Android 버전을발표했다. 리액트네이티브는공개된지얼마되지않아성숙도면에서실제제품을만드는데부족함이있을수있지만웹사용자인터페이스를만드는자바스크립트라이브러리인리액트 (React.js) 와동일한방식으로네이티브앱을제작할수있는장점이있어많은개발자들의관심을받고있다.

5 [ 그림 1] JS Thread 와 UI(Main) Thread 사이에존재하는 Bridge 타이타늄과리액트네이티브에서자바스크립트로네이티브객체에접근하고이를다룰수있는것은그중간에존재하는브릿지가있기때문이다. 이는마치브라우저에서자바스크립트로 DOM을다루는것과유사하다. 타이타늄과리엑트네이티브에서는자바스크립트로네이티브객체를다루게된다. 싱글쓰레드방식으로 DOM과자바스크립트가처리되는웹브라우저와달리타이타늄과리액트네이티트의자바스크립트코드는개별쓰레드에서자바스크립트앤진이구동되어 UI를담당하는메인쓰레드와별개로동작한다. 타이타늄은 SDK 에서제공하는자바스크립트 API 를기준으로개발자가자바스크립트코드를 작성하게되면자바스크립트 API 와브릿지로연결되어있는타이타늄네이티브 SDK 의해당 기능이구동하는방식이다. 5. 크로스플랫폼을위한도구 ios 는오브젝티브 -C 로안드로이드는자바로작성해야하는것뿐만아니라각플랫폼에서제 공하는도구를따로익혀야하는것도두가지플랫폼을대응하는어려움중의하나이다. 하지만타이타늄과리액트네이티브처럼크로스플랫폼을개발플랫폼으로사용하는경우사용하는 IDE에종속되지않고자신이원하는어떤에디터에서든쉽게개발이가능하다. 특히깃허브가 A hackable text editor for the 21st Century 라고소개하며공개한 Atom 에디터는웹기술에기반을두고있는개발자들에게사랑을받고있다. 페이스북의경우에는리액트개발관련된기능을포함하는아톰용패키지세트형태로 nuclide( 라는프로젝트를공개했다. 타이타늄진영에서도개인개발자들을중심으로관련된패키지들이만들어지고있다. A hackable text editor 라고소개된 100% 공개SW인아톰은기존과는완전히다른라이프사이클을갖는다. 기존에는개발자가에디터를사용하다불편한점이있다면불편한점을참고사용하거나불편한점을해결한다른에디터로갈아타야했다. 적극적인개발자는에디터제작사나개발자에게제품개선을요구할수는있었지만실제제품에반영될지는생산자의몫이였다. 해커블한제품의차이는바로이적극적인개발자에게에디터를변화시킬수있는열쇠를준다는것이다. 불편한사항이있다면직접수정해서사용가능한것이다. 스마트폰은개인개발자들에게주어진최초의 Hackable 폰이라할수있다. 생산자중심의

6 기획하에만만들어졌던스마트폰의기능이개인개발자들이자신의구미에따라새로운기능을앱으로만들어내고있다. Atom은 Hackable 개발도구이다. 공개SW이면서개발자들이많은부분을보다쉽게손댈수있도록 Atom의주요기능을다룰수있는다양한 API를제공하고있다. Atom 자체가개발자들사이에서대중적인자바스크립트로만들어졌고 API 또한자바스크립트로제공되다보니아톰을사용하는개발자라면선뜻해킹해볼생각이들가능성이높다. 실제로많은개발자들이 Atom을자신들의구미에맞게바꾸는패키지를만들고있다. 그중에 Autocomplete-plus이라는패키지는정식으로 Atom 제품에포함될만큼 Atom의장점주의하나로자리잡았다. 5-1 타이타늄개발도구 1 : TiShadow 타이쉐도우 (TiShadow) 는타이타늄의서드파티개발자도구이다. 이도구의장점은앱개발시에코드변경사항을실제애플리케이션에적용하기위해다시빌드할필요없이즉각적으로앱에적용하여확인할수있다는점이다. 네이티브앱개발은웹개발과달리빌드과정을거처야한다. 하지만브리지를이용하여네이티브코드를구동하는방식인타이타늄의경우변경된자바스크립트코드를앱에게보내고해당코드를자바스크립트엔진이다시실행해줌으로써앱의빌드나앱의재시작없이도변경한코드를반영할수있다. [ 그림 2] 타이쉐도우구동방식. 그림 2는타이쉐도우의구동방식에나타낸다. 타이쉐도우가파일변경을감지하고변경된파일을 Node기반의서버로보내고해당서버는소켓으로연결된애플리케이션에변경된자바스크립트코드를전달한다. 타이쉐도우는 2013년공개되어타이타늄개발시필수도구로여겨질만큼많은사랑을받고있으며이와유사한타이타늄서드파티도구들이나오기도했다. 또한리액트네이티브패키저 (Packager) 또한타이쉐도우와기본동작방식이유사하다.

7 5-2 타이타늄개발도구 2 : 타이타늄 Alloy 를위한 Atom 패키지 앱셀러레이터는타이타늄전용 IDE인 Appcelerator Studio를제공하고있다. 전용 IDE인만큼많은기능을갖고있으나이클립스기반이라는점때문에실행속도가느리고변경하기어려운단점이있다. 따라서 2015년부터타이타늄을위한아톰패키지를개발하여현재는 v 버전이최신버전이다 ( 이패키기로해결하고자했던문제는다음과같다. - 반복적타이핑 : Alloy MVC 프레임워크의특성상 View에해당하는 XML에서는 Tag를사용하고 Style에해당하는 TSS파일에서는 JSON형태로스타일을정의하게된다. 태그열고닫기, JSON Object의정의형태는지속적으로타이핑을반복하게된다. - 수많은 API : 타이타늄은 ios에서부터 Android, 윈도우폰까지대응하는 API를갖고있다. 공통적인 API는물로각 OS의특장점을그대로활용할수있는해당플랫폼에제한적인 API들을제공한다. 이모든 API를모두합치면그수는수천가지에이른다. 이모든 API 를외우는것은불가능하며매번문서검색을통해확인하며작업하는것은쉽지않은일이다. - 오타로인한오작동 : 자바스크립트의단점으로지적되는것중의하나는오타를사전에검출하지못하고런타임에에러가발생하거나심지어에러가없더라도원하는결과가나오지않는경우가많다는것이다. 사전에컴파일되지않고인터프리터방식으로실행되는구조에서오는문제이지만빌드를통해결과를확인해야하는모바일앱개발에서는오타로인한오작동이발생했을때오작동의원인을찾는것에서부터수정한후확인하는과정이간단치않다. - 여러파일을동시에작업 : Alloy MVC의구조상하나의 View를만들때 View의구조를나타내는 XML파일과스타일에해당하는 TSS파일, Controller에해당하는 JS 파일을번갈아가며교차작업해야한다. 위에서언급한이러한문제를아래와같은기능으로해결하려했다. - 코드자동완성 이기능은 Atom 기본패키지인 Autocomplete-plus 에의해동작하는 Provider 형태로구현 - XML 자동완성 : tag 이름, 현재태그의속성이름, 현재속성의값에대한자동완성 Style 셀렉터에해당하는 id와 class의경우현재 View의Style 파일은물론글로벌스타일인 app.tss 파일까지참고하여자동완성 - 클릭하여정의부로이동하기 이기능은 Facebook이만든 Hyperclick 패키지에서동작하는 Provider 형태로구현 XML의 id와 class 지정이름을클릭하여 TSS의스타일정의부로이동 XML에등록한이벤트핸들러이름을클락하여 JS파일에정의된핸들러함수정의부로이동 - 관련파일열기및닫기

8 현재파일과관련된파일열기 (View, Controller, Style) TSS Syntax Highlight 6. 크로스플랫폼개발프레임워크의개발자경험 사용자에게사랑받는애플리케이션을만드는방법을이야기할때빠지지않는것중에하나가바로사용자경험 (UX) 이다. 해당앱이어떤기능을가지고있고얼마나예쁘게디자인되었느냐가아니라사용자가그앱을사용하는경험자체가잘디자인되었는가가중요하다. 개발자가개발시사용하는프레임워크의성공여부도이와동일하다. 해당프레임워크가어떤기능을제공하고얼마나빠른성능을가지고있는가가아니라해당프레임워크를사용하여제품을만드는개발경험이더욱중요한것같다. 모바일분야에서크로스플랫폼개발프레임워크들이처음공개되었을때는해당프레임워크를사용하는개발경험이썩좋지않았다. 하지만벌써타이타늄 1.0이나온지 7년이라는시간이흘렀고최근에는타이타늄과유사한접근방식을갖고있는프레임워크들이공개될만큼이분야는많은발전을거듭해왔다. 오랜기간성숙되어완성도가높아진타이타늄, 아직성숙하지않았지만프레임워크에개발자경험을향상시켜주는개발도구들이내장되어있는리액트네이티브, 이두프레임워크가향후어떻게더발전해나갈지기대가된다.