새로운 모바일 표준을 논하다
HTML5 in 하이브리드앱

스마트폰 하면 빼놓을 수 없는 것이 바로 애플리케이션이다. 애플리케이션 없는 스마트폰은 상상할 수 없을 정도로 사용자들은 자신의 입맛에 많은 수많은 앱을 설치 및 사용하고 있다. 이에 많은 개발자들이 앱개발 전선에 뛰어들었으며 일부는 단숨에 재벌 계열에 올라설 정도로 막대한 부를 축적하기에 이른다. 하지만 대부분의 개발자들은 실패의 쓴맛을 맛봐야 했으며 포화될 데로 포화된 시장은 점차 발전 속도가 늦어지고 있다. 무엇보다 앱을 사용하는 비중이나 매출이 점차 줄어들고 있기에 개발자 입장에선 난감할 수밖에 없다. 이는 게임을 비롯한 엔터테인먼트 카테고리가 애플리케이션 시장에 대부분을 차지하는 데다 매출 또한 이쪽으로 편향되어 있기 때문이다. 또한 앱 하나 당 들어가는 시간과 비용에 비해 매출이 낮은 편이고 변화하는 사용자들의 패턴에 빠르게 대응하지 못하는 것도 이유 중 하나다. 이를 타파하기 위해선 먼저 개발과정에서의 효율적인 작업이 이뤄져야 한다. 향후 스마트폰 앱의 기준이 될 새로운 형태의 앱, 하이브리드앱이 바로 그 주인공이다.

하이브리드앱의 뼈대, HTML5

하이브리드앱 소개에 앞서 우리는 그 기준인 HTML5에 대해 알아볼 필요가 있다. HTML5는 인터넷 웹페이지를 프로그래밍하는 언어인 HTML(HyperText Markup Language, 하이퍼본문표식달기언어)의 차기 주요 제안 버전의 일종이며 2004년, ‘WHATWG’에서 ‘웹 애플리케이션1.0’이란 이름으로 처음 공개되었다. 기존 버전과 비교했을 때 HTML5에서 제공되는 주요기능은 다음과 같다.

▲ HTML5 주요기능 (출처: 한국인터넷진흥원 ‘KOREA HTML5’)

눈여겨 볼 항목이 ‘Video & Audio’, ‘3D, Graphics & Effects’, ‘Device Access’ 이 3가지이다. 현재 인터넷 내 동영상이나 이미지를 제대로 보려면 ‘플래시’나 ‘자바’와 같은 플러그인 설치가 필수적이다. 하지만 HTML5는 자체적으로 이 기능을 제공하기 때문에 프로그램 설치가 필요가 없어진다. 무엇보다 대한민국 인터넷 문제점 중 하나인 ‘Active X’를 설치하지 않아도 웹페이지를 활용할 수 있다는 엄청난 장점을 가지고 있다. 이는 PC는 물론, 스마트폰과 같은 모바일 디바이스에서 더욱 영향력이 크다. 현재 스마트폰 웹브라우저는 기종별로 통일되지 않은데다 플래시 미지원 기기가 대다수이기 때문에 웹서핑을 완벽하게 즐길 수 없는 상태다. 하지만 HTML5로 개발된 웹페이지는 이러한 문제점이 모두 사라지게 되는 것이다. 또한 그래픽 기능이 웹페이지에서 실행가능하기 때문에 앱이 아닌 웹에서 게임이나 엔터테인먼트를 즐길 수 있게 된다.

HTML5가 제대로 활성화된다면 PC, 스마트폰, 태블릿PC 등 어떠한 디바이스에서도 웹페이지의 100% 호환이 가능해진다. 이를 전문용어로 ‘크로스플랫폼’ 혹은 ‘멀티플랫폼’이라 한다. 개발자 입장에선 기종별, OS별로 개별적으로 프로그래밍할 필요가 없기 때문에 비용과 시간이 절감되며 사용자 또한 번거롭게 디바이스를 교체하며 웹페이지를 로드하지 않아도 되는 장점이 있는 것이다.

웹&앱으로 분리된 현 스마트폰 시스템

모바일 기기 기준으로 우리는 현재 어떤 방식으로 스마트폰을 사용하고 있을까? 이는 크게 2가지로 나눌 수 있는데 바로 ‘애플리케이션’과 ‘웹페이지’다. 애플리케이션은 전용 스토어에서 다운로드받아 스마트폰에 설치 후 사용하는 방식이며 웹페이지는 설치할 필요 없이 스마트폰 내 브라우저에서 바로 사용하는 방식이다. 이 두 가지 프로그램은 각기 다음과 같은 장단점을 가진다.

애플리케이션

웹페이지

이렇듯 앱과 웹페이지의 장단점을 보면 서로가 완전히 정반대의 성격을 지니고 있음을 알 수 있다. 하지만 두 콘텐츠의 장점은 유지하되, 단점은 최소화시킨 것이 바로 하이브리드앱이다.

하이브리드앱, 플랫폼의 경계를 허물다

하이브리드앱은 HTML5, CSS, 자바스크립트로 제작된 웹페이지를 자바스크립트 API를 통해 앱 형태로 제작한 것을 뜻한다. 즉, 속은 웹페이지지만 껍데기는 앱의 형태를 갖췄다고 보면 된다. 하이브리드앱으로 제작됨으로서 가지는 장점은 다양하다. 먼저 애플리케이션 스토어에 등록이 가능하게 된다. 이는 웹페이지가 가진 콘텐츠의 가치나 수익구조가 획기적으로 향상되는 걸 의미한다. 둘째는 개발단가가 일반 앱 개발에 비해 저렴하다는 점이다. 다양한 디바이스에 적용이 가능하기 때문에 각기 다른 앱을 개발할 필요가 없어진다. 셋째는 유지비용과 적용 속도 향상이다. 단일 플랫폼이기에 유지비용이 저렴해지는 건 물론이거니와 업데이트 또한 빠르게 적용될 수 있다. 또한 웹페이지에선 사용하기 어려웠던 스마트폰 HW와 SW의 기능호환이 원활해지고 저장 공간도 효율적으로 사용가능한 장점이 존재한다.

▲ 하이브리드앱으로 제작된 ‘GCON채널’, 경기콘텐츠진흥원 제작

물론 단점도 일부 발생한다. 웹페이지 기반이기 때문에 일반 앱보단 실행속도가 낮을 수 있다는 것과 아직까지는 웹페이지와 앱을 연결해주는 시스템인 ‘하이브리드 프레임워크’에 대부분 의존하고 있다는 게 대표적이다. 또한 모바일 디바이스의 화면이 워낙 다양하기 때문에 해상도 차이로 인한 최적화 문제도 거론되고 있다. 그러나 이들 단점은 스마트폰 하드웨어의 성능개선과 하이브리드 프레임워크의 최적화 방향에 따라 충분히 상쇄될 수 있는 부분이다.

현재 하이브리드앱을 개발하는 데 필수적으로 사용하고 있는 하이브리드 프레임워크는 크게 ‘앱스프레소’, ‘폰갭’, ‘티타늄’ 3가지가 있으며 특징은 다음과 같다.

하이브리드앱, 어떻게 만들어지나

하이브리드앱을 개발하고 싶은 개발자는 무엇을 준비해야 할지 궁금할 것인데 개발과정은 크게 4가지 단계로 구분해볼 수 있다.

웹표준 제작 → 웹&앱 UI연동 → 웹▷모바일 앱 변환 → 하이브리드 프레임워크

1. 웹표준 제작 : 웹페이지를 제작하는 과정이다. 이를 위해 HTML5, 자바스크립트, CSS3에 대한 사전지식과 개발과정을 알고 있어야 한다.

2. 웹&앱 UI연동 : JQuery와 Ajax를 통해 웹과 앱의 UI연동을 준비해야 한다. JQuery는 자바스크립트 라이브러리 파일로 사용했던 태그들을 찾아 함수로 사용하는 것이고 Ajax는 서버와 통신하기 위한 라이브러리다.

3. 웹▷모바일 앱 변환 : 웹페이지를 모바일앱으로 변환하기 위해 Sencha Touch를 익혀야 한다.

4. 하이브리드 프레임워크 : 마지막으로 모바일앱을 하이브리드앱으로 변환하기 위해 앞서 소개된 하이브리드 프레임워크 3종 중 하나를 사용해야 한다.

HTML5&하이브리드앱, 아직은 시기상조

지금까지 HTML5와 하이브리드앱의 전반적인 기술과 개발방법에 대해 알아봤다. 그런데 지금 시점에서 HTML5가 결합된 하이브리드앱이 과연 전망이 있을까에 대한 의문이 있을 것이다. 이에 시장조사 전문기관 스트래티지 애널리틱스에서는 전 세계적으로 HTML5를 지원하는 모바일 디바이스가 2016년에는 15억6000만 대로 전체 디바이스의 85%에 달할 것이라 전망했다. 표준화 진행과정도 순조로운 편이다. 국제 웹 표준화 단체인 W3C(World Wide Web Consortium)에서는 2012년 9월, HTML5에 관련된 공식결정을 내렸으며 2014년12월경 HTML5를 표준화시킬 것이라 발표했다. 여기에 방송통신위원회에서도 HTML5의 중요성을 인지하고 2012년 ‘HTML5 확산 추진계획’을 발표한 바 있다. 해당 계획에 따르면 2017년에는 모바일 웹이 모바일 앱을 넘어설 것이라 예측하고 있다.

하지만 이건 어디까지나 가능성인데다 지난 2010년부터 2013년까지 실질적으로 변화된 부분은 많지 않다. HTML5를 완벽하게 지원하는 단말기나 브라우저도 존재하지 않는다. 게다가 HTML5를 활용한 하이브리드앱에 관해서는 개발자 수도 많지 않은데다 기업 입장에서도 기존에 정해진 개발틀을 완전히 바꿔야하기 때문에 변화의 흐름에 쉽사리 타지 않으려 하는 실정이다. 시장원리를 보면 분명 초기에는 다양한 방식으로 개발이 시도되지만 후반부에는 이러한 방식이 통합되는 경우가 대부분이다. 앱과 웹 개발 또한 이러한 시장원리를 벗어나지 못할 것이며 언젠가는 하이브리드앱이 표준화될 가능성이 높다. 즉, 하이브리드앱의 표준화는 기정사실이지만 아직은 때가 아니라는 것이다. 가장 먼저 하이브리드앱 개발의 표준이 되는 HTML5의 활성화가 급선무라 볼 수 있다.

앱스토리(www.appstory.co.kr) | 신효송 기자