이 글은 Adam Bradley와 Robert Nyman [Editor]이 쓴 The Missing SDK For Hybrid App Development의 한국어 번역본입니다.

하이브리드 vs. 네이티브: 이 논쟁은 이미 오래됐고, 앞으로도 계속될 것입니다. 각각의 앱 개발 방식은 나름의 장단점이 있습니다. 그래서 두 방식의 차이를 평면적으로 비교하는 것은 사과와 오렌지를 비교하는 것처럼 의미 없는 일입니다. 많은 하이브리드 앱 개발자들이 자신이 네이티브 앱 개발자들과 같은 지점에서 시작하지 않는다는 사실을 이해하고 있습니다. 하이브리드 앱 개발자들이 정확히 어떤 측면에서 네이티브 앱 개발자들과 다른 출발점에 있는지 알아봅시다. 우리는 하이브리드 개발 방식과 네이티브 개발 방식을 단순 비교할 게 아니라, 앱 개발에 사용되는 프레임워크를 비교 분석해야 합니다.

네이티브 앱 개발 방식

네이티브 소프트웨어 개발 킷(SDKs)은 앱을 컴파일하고 서명하는데 필요한 도구들의 모음입니다. 여기에는 “잘 작동하는” 다양한 도구들이 들어있습니다. SDK에 포함된 템플릿들과 SDK가 제공하는 공통 코드들이 앱의 “공통된 동작양식”을 처리합니다. 이것은 겉으로 드러나지 않는 중요한 장점입니다.

예를 들어, 애플의 자체 개발환경인 Xcode를 살펴봅시다. Xcode는 다양한 애플 플랫폼들을 위한 소프트웨어 개발 도구들의 모음입니다. Xcode를 실행시키면, Xcode는 그 즉시 새로운 프로젝트를 위한 템플릿 목록을 제공합니다. Xcode로 탭 형태의 iOS 어플리케이션을 만들어 봅시다. 그 과정에서 네이티브 앱 개발자들이 도구로부터 얼마나 많은 도움을 얻는지 알아봅시다.

Xcode를 실행시키고 몇 단계의 설정을 거치면 몇 분 이내에 실제로 동작하는 탭 형태의 앱을 만들 수 있습니다. 놀랍습니다! 간단히 일이 끝났습니다. 이제 후드티와 헤드폰을 걸치고 많은 고객들이 간절히 원하는 iOS 앱을 만들기 위해 집중하면 됩니다.

이 앱을 만드는 동안 저는 아무것도 한 일이 없습니다. Xcode가 저를 위해 무엇을 만들어 줬는지 좀 더 살펴봅시다. 이 앱은 디스플레이 장치를 100% 채우고 있습니다. 그리고 화면 하단에 회색 바탕의 탭들이 위치하고 있습니다. 그 중 한 탭은 파란색으로 하이라이트 표시되어 있고, 다른 탭은 회색으로 표시되어 있습니다. 각 탭에는 아이콘과 타이틀 문자열이 표시되어 있습니다. 각 탭 버튼에는 이벤트 리스너가 부여되어 있습니다. 그래서 두번째 탭을 클릭하면 그 탭이 파란색으로 바뀌고 다른 탭은 회색으로 바뀝니다. 그리고 화면 내용이 두번째 뷰(view)의 내용으로 전환됩니다.

조금만 더 작업하면, 각 탭에 독립적인 네비게이션 스택을 부여할 수 있습니다. 필요할 때마다 “뒤로가기” 버튼이 표시되게 할 수 있습니다. 헤더 영역에 각 뷰의 타이틀이 표시되도록 할 수 있습니다. 그리고 뷰(view) 사이를 이동할 때마다 화면전환 효과가 부드럽게 표시되도록 만들 수 있습니다. 폰트, 컬러, 그라디언트, 스타일 등이 플랫폼이 정의하는 일반적인 앱의 모습으로 표현됩니다. Xcode 프로젝트 탐색기에 있는 폴더들을 열어보면 엄청난 수의 파일들이 만들어져 있는 것을 볼 수 있습니다. 그 파일들이 무엇을 하는지 모르겠고 사실 관심도 없지만, 그 파일들은 무척 중요한 일을 합니다. 그 파일들 덕분에 앱을 만드는 과정이 그토록 매끄러울 수 있는 것입니다.

하이브리드 앱 개발 방식

솔직히 말해서, 저는 웹 개발자입니다. 제가 다니는 회사는 (여러 플랫폼을 대상으로) 똑같은 앱을 여러번 만들기 위해 (물론 철저하게 다른 방식으로 만들어야 하지만) Objective-C 개발자와 Java 개발자를 잔뜩 고용하고 있는 회사가 아닙니다. 저는 HTML/CSS/JS 스킬을 갖고 있을 뿐입니다. 그리고 저는 제가 만든 앱이 애플의 앱 스토어뿐 아니라, 구글의 플레이 스토어, 그리고 기타 다른 스토어들에서도 성공하기를 바랍니다. 제가 가진 스킬과 시간 제약을 고려할 때, 저는 특정 플랫폼에 갖혀서 플랫폼 회사가 정한 언어들을 배우고 익히는 것보다 하이브리드 앱 개발 방식을 선택하는 것이 더 합리적이라고 생각합니다.

하이브리드 앱 개발에 대해 겁먹을 필요 없습니다. 간단히 생각하면 하이브리드 앱 화면은 그냥 웹 브라우저 화면일 뿐입니다. URL 막대와 뒤로가기 버튼이 없을 뿐이죠. 하이브리드 앱 개발 방식을 이용하면 HTML/CSS/JS를 이용해서 네이티브 앱처럼 동작하는 완전한 형태의 앱을 개발할 수 있습니다. 하이브리드 앱은 네이티브 앱과 동등한 힘을 갖고 있습니다. 그래서 블루투스, GPS, 카메라, 파일 시스템, 모션센서 등에 접근할 수 있습니다. 하이브리드 앱은 (네이티브 앱 세계와 웹 세계) 양쪽의 장점을 제공합니다.

하이브리드 앱을 만들어 봅시다

제게 필요한 용도를 고려했을 때, 저는 하이브리드 앱이면 충분하다고 판단했습니다. 그러니 이제 시작해봅시다. 잠깐… 하이브리드 앱 개발에는 Xcode 같은 도구가 없군요! 내 앱이 앱처럼 보이는데 필요한 코드들은 어디서 구해야 하나요? 기본 UI, 멋진 애니메이션, 자연스러운 화면전환 코드는 어디서 구하나요? 하이브리드 앱 개발의 단점은 웹 플랫폼 위에서 실행되는 모든 일들을 직접 구현해야 한다는 점입니다. 황량했던 미개척 서부 시대와 같습니다. 개발자는 필요한 모든 일들을 직접 구현해야 합니다.

저는 진심으로 웹 플랫폼을 사랑합니다. 웹 플랫폼은 정보를 공유하고 소비하기 위한 도구들을 제공합니다. 하지만, 웹 플랫폼은 컨텐츠를 만들고, 컨텐츠의 외형과 인터랙션(interaction) 스타일을 꾸미고, 문서 사이를 탐색(navigating)하는데 필요한 아주 기본적인 부품들만 제공합니다. 웹 플랫폼은 본질적으로 iOS나 안드로이드처럼 미리 패키징된 라이브러리를 제공하지 않습니다. 가장 낮은 레벨에서 보면, 웹 브라우저는 하나의 “뷰(view)”와 하나의 네비게이션/히스토리 스택입니다. 이에 관한한 네이티브 앱 개발 방식이 우월합니다. 하이브리드 앱을 개발할 때는 (네이티브 앱처럼) 브라우저가 여러개의 뷰와 여러개의 스택을 처리할 수 있도록 하려면 많은 코드를 작성해야 합니다.

하이브리드 앱 개발자들은 그동안 수많은 문제들을 해결해 왔습니다. CSS를 이용해 뷰포트(viewport)를 100% 채우고, 컨텐츠를 표시할 때 화면 하단에 탭을 고정시키고, 이벤트 리스너를 추가하고, 아이콘과 뷰가 활성화된 상태를 표시하고, 각 탭별로 네비게이션 스택을 관리하고, 터치 제스쳐를 처리하고, 뷰와 뷰 사이의 이동과 전환을 처리하고, 화면전환 애니메이션을 표시할 때 하드웨어 가속 기능을 활용하고, 300ms 딜레이를 없애고, 뒤로가기 버튼을 언제 표시하고 언제 감출지 알아내고, 헤더의 타이틀을 갱신하거나 이동시키고, 안드로이드의 뒤로가기 버튼에 대응하고, 수천개의 아이템들을 부드럽게 스크롤시키는 것 같은 문제들 말입니다. 네이티브 SDK는 이런 기능들을 기본적으로 제공합니다. 앱의 규모가 커질수록, 하이브리드 앱을 일반 네이티브 앱처럼 보이게 만드는 일이 끝없이 고통스러운 싸움처럼 여겨질 것입니다. 네이티브 개발자들은 이런 문제들을 고민하지 않습니다. 왜냐하면 이런 기능들은 네이티브 개발자들에게 처음부터 당연히 제공되는 것들이기 때문입니다.

필자는 프레임워크/라이브러리를 쓰는 것이 공정한 상황을 만드는 방법이라고 생각합니다. 하이브리드 개발자들에게 네이티브 개발자와 동등한 툴킷을 제공해야 합니다. 대부분의 개발자들은 모든 것을 직접 만드는 것에서 일종의 자부심을 느낍니다. 그리고 분명 꽤 많은 상황에서 프레임워크 그리고/또는 라이브러리가 필요하지 않습니다. 하지만 하이브리드 앱 개발의 경우, 많은 개발자들이 앱을 만들 때마다 공통된 코드를 매번 다시 만들고 있습니다. 그건 네이티브 개발자가 이미 갖추고 있는 토대를 만들기 위해 노력과 시간을 낭비하는 것입니다.

Cordova (그러니까 Phonegap)는 많은 사람들이 사랑하는 오픈소스 소프트웨어 입니다. Phonegap은 웹 플랫폼을 이용해서 네이티브 앱을 만듭니다. 하지만 웹 플랫폼이 그런 것처럼, Phonegap도 기초적인 부품들만 제공합니다. Phonegap에도 개발을 시작하기 위한 프레임워크는 내장되어 있지 않습니다.

프레임워크와 라이브러리는 개별 앱 개발의 중요성을 강조합니다. 개발자들이 앱들의 공통된 동작양식보다 자기 앱의 특별한 동작양식에 집중할 수있도록 해줍니다.

하이브리드 개발을 위한 프레임워크: 하이브리드 개발자들이 기다려온 SDK

저는 프레임워크와 라이브러리를 생산성을 높이기 위한 소프트웨어 패키지라고 정의합니다. 제 경험에 의하면, 하이브리드 개발자의 주된 불만은 자기 앱을 만드는 것에 있지 않습니다. 대신 자기 앱을 앱처럼 보이게 만드는 것에 불만을 느낍니다. 앱을 앱처럼 보이게 만드는 것은 부차적인 일입니다. 아주 중요한 차이입니다.

하이브리드 앱 개발에 촛점을 맞춘 프레임워크들이 출현함에 따라, 개발자들은 드디어 네이티브 개발자들과 공정하게 겨룰 수 있는 SDK를 갖게 됐습니다. HTML/CSS/JS 기술로 구성된 크로스플랫폼 프레임워크는 웹 개발자가 자기 스킬을 이용해서 앱을 개발할 수 있게 해줍니다. 생산성을 높이기 위해, 하이브리드 앱 개발 프레임워크는 CSS와 마크업 같은 표준에만 집착하지 않습니다. 프레임워크는 본격적이고 규모가 큰 앱을 팀 단위로 개발할 수 있도록 MVC 개념도 제공합니다.

Sworkit, Inonic 프레임워크를 이용해서 만든 하이브리드 앱. iOS 앱스토어에서 가져옴.

Ionic 프레임워크 같은 프레임워크들은 앱들의 일반적인 기능을 만들기 위해 필요한 공통 코드를 제공합니다. 웹 플랫폼이 원래 제공하지 않는 것이죠 (고백: 저는 Ionic 프레임워크의 공동 저작자이며 AngularJS 머티리얼 디자인의 핵심 기여자입니다). 또다른 MVC를 발명하는 대신, Ionic은 AngularJS를 기반으로 만들어졌습니다. AngularJS는 최근 몇년 동안 인기 있는 프론트엔드(front-end) 프레임워크들 중에서 대표주자로 인정 받았습니다. Ionic은 거대하고 활발한 커뮤니티에 의해 만들어졌습니다. 탄탄한 문서와 자체 커맨드라인 도구가 생산성을 높여줍니다 (CLI는 필수는 아니지만 무척 요긴한 도움을 줍니다).

Ionic은 AngularJS 디렉티브(directives)를 사용해서 사용자 인터페이스를 빠르게 만들 수 있습니다. 무엇보다 중요한 것은, Sass와 간단한 마크업을 사용해서 Ionic을 완전하게 커스터마이징 할 수 있다는 점입니다. 만약 당신이 AngularJS에 친숙하지 않다면, Ionic이 제공하는 수많은 예제들과 템플릿들을 이용해서 빠르게 학습할 수 있습니다.

구글의 폴리머(Polymer)와 모질라 브릭(Brick)은 최첨단 웹 컴포넌트 스펙을 기반으로 만들어졌습니다. AngularJS 디렉티브를 이용하면, 복잡한 코드를 웹 컴포넌트 방식의 간단한 HTML 태그로 추상화시킬 수 있습니다.

Sencha Touch와 Kendo UI 같은 좀 더 오래된 다른 검증된 하이브리드 개발 프레임워크들은 자신만의 강력한 MVC/MVVM 방식을 제공합니다. 두 프레임워크 모두 많은 수의 내장된 컴포넌트들과 위젯(widget)들을 제공하며 이를 이용해서 iOS, 안드로이드, 블랙베리, Windows Phone 등에서 실행되는 강력한 앱을 만들 수 있습니다.

저는 AngularJS, Ember, Backbone 같은 프론트엔드 프레임워크들을 완전한 프레임워크라고 생각하지 않습니다. 이런 종류의 프론트엔드 프레임워크들은 사용자 인터페이스보다 로직에 집중함으로써 대규모 앱 개발에 도움을 주는 프레임워크들입니다.

Twitter Bootstrap과 Foundation 같은 프레임워크들은 멋진 사용자 인터페이스와 반응형 디자인(responsive design)을 제공합니다. CSS 프레임워크들은 UI와 반응형 디자인 패턴에 집중합니다. 하지만 UI만 지원하기 때문에 개발자들은 여전히 네이트브 앱의 “동작방식”을 재개발 해야 합니다.

앱 프레임워크들은 앱 개발의 복잡함을 덜어줍니다. 그리고 iOS와 안드로이드처럼 개발자들에게 핵심 로직과 UI를 제공해줍니다. 저는 근본적으로 웹 표준과 웹 플랫폼을 따르는 것이 중요하다고 믿습니다. 그러면 우리가 만든 앱은 Cordova 위에서 잘 동작할 것이며, (웹 브라우저를 포함한) 여러 플랫폼을 타겟으로 빌드시킬 수도 있을 것입니다.

소프트웨어 엔지니어링: 아직도 필요한 것

지난 몇년간 하이브리드 앱 개발 프레임워크들은 많은 발전을 거듭했습니다. 이들의 전망은 매우 밝습니다. 하지만, 하이브리드 앱 개발에도 소프트웨어 엔지니어링이 필요합니다. 네이티브 앱을 개발할 때처럼 말이죠. 어떤 종류의 개발일지라도 프로젝트에 단지 몇시간만 투자해서는 제품 수준의 멋진 결과물을 얻을 수 없습니다.

하이브리드 옹호자들은 가끔 프레임워크가 개발 과정의 모든 문제들을 해결해주는 유니콘이나 무지개인 것처럼 묘사 합니다. 이는 신참 개발자들에게 오해를 줄 수 있습니다. 한번만 개발하면 모든 곳에서 실행시킬 수 있다는 사실이 소프트웨어 개발 원칙의 예외를 의미하지 않습니다. 하이브리드 방식은 많은 혜택을 제공합니다. 하지만 세상의 모든 일이 그런 것처럼 대충 노력해서는 양질의 결과를 얻을 수 없습니다. 그러니 아주 작은 노력만 투자하고 결과가 형편 없다고 불평하지 말기 바랍니다.

공정하게 비교하기

프레임워크 없이 하이브리드 앱을 개발하는 것과 네이티브 앱을 개발하는 것을 비교하는 것은 공정하지 않습니다. 하이브리드 vs. 네이티브 개발 방식을 공정하게 비교하려면, 양쪽 방식을 프레임워크 레벨에서 분석 비교해야 합니다 (프레임워크를 사용한 하이브리드 개발 방식 vs. 네이티브 개발 방식, Ionic 프레임워크 vs. iOS 프레임워크, 또는 Polymer 프레임워크 vs. 안드로이드 프레임워크). 하이브리드 vs. 네이티브에 대해 이야기하자면, 이건 당신의 필요(use-case)를 먼저 연구해야 하는 문제입니다. 0 아니면 1로 결론나는 추상적이고 개념적인 비교로 판단할 문제가 아닙니다. 완전히 다른 차원의 추상화(HTML/CSS/JS)가 당신의 필요(use-case)와 조직(회사)에 적합한지 따져야 합니다.

저는 가끔 하이브리드 앱 개발 방식에 대한 의견들이 하이브리드 개발 방식이 충분이 성숙하지 못한 단계에서 형성됐다고 생각합니다. 세상은 빠른 기기와 빠른 브라우저로 빠르게 전환됐습니다. 뿐만 아니라 웹 표준도 빠르게 발전했습니다. 그리고 이런 전환과 발전이 늦춰질 기미는 전혀 보이지 않습니다. 당신이 하이브리드 SDK의 어깨에 올라서서 이미 갖고 있는 웹 개발 기술로 양질의 앱을 개발하기에 지금보다 좋았던 때는 없었습니다.

@adamdbradley