하이브리드 앱을 구현하는 기술-미리보기

지은이

로버트 러브 Robert Love

초창기부터 리눅스를 사용하고 있으며 리눅스 커널과 GNOME 데스크톱 환경에 많은 기여를 하고 있다. 로버트는 구글에서 소프트웨어 엔지 니어로 근무 중이며 과거에는 안드로이드팀에서 일했고 현재는 웹 검색 인프라팀에서 근무 중이다. 로버트는 플로리다 주립 대학에서 수학과 컴퓨터 과학을 전공했다. 현재 보스턴에 있다. 옮긴이

김영근 iam@younggun.kim

애플 II에서 베이직으로 처음 프로그래밍을 시작했고, 장래 희망은 항상 프로그래머라고 말하고 다니다 정신 차리고 보니 어느덧 10여 년 차 개 발자가 되었다. 임베디드 환경에서부터 미들웨어, 스마트폰 애플리케이션에 이르기까지 다양한 분야의 개발 경험이 있다. 국립금오공과대학교 에서 컴퓨터공학을 전공하고 리눅스 커뮤니티에서 오랫동안 활동한 경험 살려 운명처럼 『리눅스 시스템 프로그래밍 개정 2판』을 번역했다. 데 이터 분석의 매력에 빠져 『파이썬 라이브러리를 활용한 데이터 분석』(한빛미디어, 2014)을 번역했으며 <PYCON 한국 2014>를 조직해 개최 했다.

하이브리드 앱을 구현하는 기술 : HTML5, 자바스크립트, 코도바(폰갭)로 만드는 안드로이드와 iOS 앱 개발 초판발행 2015년 3월 1일 지은이 구보타 미츠노리, 아시알 주식회사 / 옮긴이 김성재 / 펴낸이 김태헌 펴낸곳 한빛미디어 (주) / 주소 서울시 마포구 양화로 7길 83 한빛미디어(주) IT출판부 전화 02 – 325 – 5544 / 팩스 02 – 336 – 7124 등록 1999년 6월 24일 제10 – 1779호 / ISBN 978-89-6848-168-0 93000 총괄 배용석 / 책임편집 최현우 / 기획 최현우, 김상민 / 편집 백지선 디자인 표지·내지 여동일, 조판 이경숙 영업 김형진, 김진불, 조유미 / 마케팅 박상용, 서은옥 / 제작 박성우 이 책에 대한 의견이나 오탈자 및 잘못된 내용에 대한 수정 정보는 한빛미디어(주)의 홈페이지나 아래 이메일로 알려주십시오. 잘못된 책은 구입하신 서점에서 교환해 드립니다. 책값은 뒤표지에 표시되어 있습니다. 한빛미디어 홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr [iOS/Android TAIO] HTML5 HYBRID APPLICATON KAIHATSU <JISSEN> NYUMON

by Mitsunori Kubota, ASIAL CORPORATION Copyright © 2013 Mitsunori Kubota, ASIAL CORPORATION All rights reserved.

Original Japaneses edition published by Gijyutsu-Hyoron Co., Ltd., Tokyo This Korean language edition published by arrangement with Gijyutsu-Hyoron Co., Ltd., Tokyo in care of Tuttle-Mori Agency, Inc., Tokyo through Botong Agency, Seoul 이 책의 한국어판 저작권은 보토에이전시를 통한 저작권자와의 독점 계약으로 한빛미디어가 소유합니다. 신 저작권법에 의하여 한국 내에서 보호를 받는 저작물이므로 무단전재와 무단 복제를 금합니다.

지금 하지 않으면 할 수 없는 일이 있습니다. 책으로 펴내고 싶은 아이디어나 원고를 메일 ( writer@hanbit.co.kr ) 로 보내주세요. 한빛미디어(주)는 여러분의 소중한 경험과 지식을 기다리고 있습니다.

하이브리드 앱을 구현하는 기술 iOS/Android 지원, Cordova 4 버전

구보타 미츠노리, 아시알 주식회사 지음 / 김성재 옮김

옮긴이•지은이 소개

옮긴이

김성재

기술 분야 전문 번역가로 평소 관심 분야는 IT 기술과 일본어 교육 콘텐츠 등이다. 최근에는 업무에 필요한 Mac OS 및 iOS 애플리케이션 개발 및 리뷰, 환경 구축에 관심이 있다. 번역서로는 『만들면 서 배우는 기계 학습』(2012, 한빛미디어), 『빅데이터의 충격』(2012, 한빛미디어), 『C언어로 배우는 리눅스 프로그래밍』(2013, 한빛미디어) 등이 있다.

지은이

구보타 미츠노리 久保田 光則

도쿄 거주. 아시알 주식회사 소속의 UI /UX 디자이너 겸 소프트웨어 엔지니어로 사내에서는

HTML5 하이브리드 앱 개발에 많이 참여한다. 뛰어난 디자인과 엔지니어링을 양립한 오버 퀄리티 애플리케이션 개발을 실현하고자 날마다 노력한다.

지은이

아시알 주식회사 Asial Corporation

PHP 등의 서버 사이드 기술과 폰갭 등 스마트폰을 중심으로 개발하는 기술 벤처. HTML5 하이브 리드 앱을 브라우저 상에서 개발할 수 있는 모나카(http://monaca.mobi )와 폰갭의 일본어 정보 를 배포하는 폰갭팬(http://phonegap-fan.com ) 등의 웹 서비스를 제공한다.

4

옮긴이의 글

바둑은 한 수만으로도 성패가 갈린다. 바둑뿐만 아니라 사소한 차이가 일의 성패를 좌우하는 경 우는 그 밖에도 많다. 언제나 경험이 많이 쌓인 후에야 깨닫게 되지만 처음 시작할 때 ‘이런 것 을 미리 알았으면 피해갈 수 있었을 텐데’ 하는 아쉬움이 누구나 있을 것이다. 그렇다면 사소한 차이를 만들어내는 것은 무엇일까? 사소한 차이는 결국 경험의 차이다. 이 책은 하이브리드 앱을 개발하려는 사람에게 꼭 필요한 경험을 단시간에 할 수 있게 해준다. 프레임워크 설치, 프레임워크 동작 방식에 관한 이해, 최적 의 개발 순서, 모바일 환경에 적합한 기술의 선택 기준 등 오랜 시간이 지나야 얻을 수 있는 경 험과 조언이 들어 있다. 특히 어느 정도 웹 개발에 익숙한 사람이 프레임워크를 이용하여 하이 브리드 앱을 개발하려고 할 때 좋은 길잡이가 될 것이다. 이 책은 예제 프로젝트에 따라 뭔가를 완성하거나 HTML이나 자바스크립트, 오브젝티브-C 문 법을 설명하지 않는다. 따라서 기본적으로 HTML과 자바스크립트에 대한 어느 정도의 지식은 있어야 하고 나아가 독자적인 플러그인이라도 개발하려면 각각의 플랫폼과 언어에 관한 사전 이해는 필수다. 이런 점에서 약간 아쉽거나 초보자에게 어렵게 느껴질 수도 있겠지만 이 책을 읽고 나면 코도바 프레임워크를 이용한 하이브리드 앱 개발 과정의 큰 틀을 머릿속에 그릴 수 있을 것이다. 국내 에 나온 폰갭 프레임워크 서적이 대부분 오래되어 최신 버전으로 학습할 때 필요한 도움을 받기 가 어렵고, 모바일이 아닌 일반 웹 개발 기법을 그대로 사용하는 경우가 많은 상황에서 이 책은 충분히 매력적이다. 끝으로 책의 분량에 비해서 번역 기간이 상당히 오래 걸리고 말았는데 그래도 끝까지 믿고 기다 려주셔서 죄송하면서도 감사할 따름이다. 번역 중에도 맥의 새 운영체제와 개발 툴이 나오고, 안드로이드와 iOS의 새 버전이 나왔으며, 코도바 버전이 높아지는 등 원서 집필 시점의 사정과 달라지는 급변하는 IT 환경을 실감하였다. 다시 한 번 함께 고생하신 모든 분들께 감사의 마음 을 전한다. _ 2015년 3월 옮긴이 김성재

5

이 책에 대하여

이 책은 iOS와 안드로이드용 HTML5 하이브리드 앱 개발에 관한 지식을 설명한 기술서다. 하이브리드 앱 개발이란 HTML5와 같은 웹 기술로 앱을 제작하는 개발 기법이다. 하이브리드 앱 개발 기법은 더 간단하게 앱을 개발하고 원 소스 멀티 플랫폼 지원이 가능하며 스마트폰 앱 개발 비용과 기간을 줄일 수 있다는 이유로 최근 주목받고 있다. 무엇보다 웹 기술을 이용하여 개발할 수 있으므로 자바나 오브젝티브-C를 모르는 웹 개발자도 스마트폰 앱을 개발할 수 있 다는 점에서 많은 관심을 모으고 있다. 하지만 하이브리드 앱 개발은 이제 막 떠오르기 시작한 개발 기법이고 실제 개발에 필요한 노 하우·기법·정보 등 많은 부분이 아직 드러나지 않았다. 이 책은 하이브리드 앱 개발을 시작 하기 위한 기초 지식과 튜토리얼에 머무르지 않고, 고품질 하이브리드 앱 개발에 필요한 필수 지식과 노하우를 망라하는 내용으로 구성했다.

대상 독자 이 책은 다음과 같은 독자를 대상으로 한다. ●●

안드로이드, iOS에서 동작하는 하이브리드 앱을 처음 개발하는 사람

●●

더 좋은 하이브리드 앱 개발을 위한 각종 노하우를 알고 싶은 사람

●●

하이브리드 앱에 관한 전반적인 지식을 얻고, 나아가 하이브리드 앱의 구조를 이해하고 싶은 사람

이 책을 보려면 HTML·CSS·자바스크립트에 관한 기본 지식이나 이를 사용한 웹 페이지 작 성 능력이 있어야 한다. 이에 관한 지식이 없으면 관련 지식을 먼저 습득하고 이 책을 보기 바 란다.

6장에서는 간단한 SQL의 예를, 11장과 12장에서는 자바와 오브젝티브-C로 WebView웹뷰를 사용하는 코드를 소개하는데, 자바와 오브젝티브-C에 관한 지식이 있다면 더 깊이 이해할 수 있을 것이다. HTML·CSS·자바스크립트 문법에 관해서는 이 책에서 따로 설명하지 않는다.

6

필요 환경 이 책의 개발 환경은 Mac OS X이다. iOS 앱은 Mac OS X에서만 개발할 수 있어, 안드로이 드 앱과 iOS 앱을 모두 개발하려면 반드시 Mac OS X이 필요하기 때문이다. 따라서 Mac OS X 개발 머신에 안드로이드와 iOS 앱을 개발하기 위한 소프트웨어 개발 키트 인 SDKSoftware Development Kit를 설치해서 간단한 앱을 만드는 튜토리얼을 소개하고, 4장에서는 하 이브리드 앱 개발 프레임워크인 코도바Cordova로 안드로이드와 iOS용 앱 개발에 필요한 기초 지 식을 소개한다(코도바는 폰갭의 기반이 되는 아파치 오픈소스 소프트웨어다). 만약 독자가 안 드로이드 전용으로 하이브리드 앱을 개발하고 개발 환경이 윈도우나 리눅스라고 해도 대부분 의 내용은 개발에 도움이 될 것이다. 이 책에서 설명하는 개발 환경은 다음과 같다. ●●

Cordova 4.0.0 버전

●●

Mac OS X 10.9 (OS X Mavericks ) 이후

●●

Android Developer Tools 22.0.5 버전

●●

Xcode 6.1 버전

검증 및 설명 대상으로 하는 OS는 iOS 7, iOS 8 안드로이드 2.3 계열, 안드로이드 4 계열이다.

이 책의 구성 이 책은 입문에 해당하는 1부 기본편과 실제적인 적용에 해당하는 2부 실전편으로 나뉜다. 기본편인 1~4장에서는 HTML5 하이브리드 앱 개발을 위한 기초 지식을 설명한다. 먼저 하이 브리드 앱이 무엇인지 설명한 후, 그 기반 기술을 소개하면서 실제로 안드로이드와 iOS 개발 환경을 살펴본다. 그런 다음 하이브리드 앱 개발 프레임워크로서 가장 유명한 코도바 프레임워 크로 안드로이드와 iOS용 하이브리드 앱을 만들 것이다. 1부는 하이브리드 앱 개발 입문이 주 요 내용이다.

7

실전편인 5~12장에서는 하이브리드 앱 개발에 필요한 실전적인 내용을 기술한다. 모바일 고 유의 상황에 대한 배려와 HTML·CSS·자바스크립트 관련 고급 기법 및 플랫폼에 따른 특성 등을 소개한다. 마지막에는 프레임워크를 사용하지 않고 처음부터 하이브리드 앱을 만드는 방 법도 설명한다.

1부 기초편 1장_ HTML5 하이브리드 앱이란 iOS와 안드로이드라는 모바일 플랫폼이 보급되면서 하이브리드 앱이 어떤 배경에서 등장했는 지 설명한다.

2장_ 하이브리드 앱 개발의 기반 하이브리드 앱을 지탱하는 기반과 주변 기술에 관해 설명한다. HTML5 등의 웹 기술과 웹킷Webkit 렌더링 엔진, 안드로이드와 iOS에 관해 설명한다.

3장_ 하이브리드 앱 개발을 위한 프레임워크 하이브리드 앱 개발 프레임워크는 무슨 일을 하는지, 어떤 프레임워크가 있는지 소개한다.

4장_ 코도바를 이용한 앱 개발 흐름 하이브리드 앱 개발 프레임워크 중에서도 가장 인기가 많은 코도바 프레임워크를 이용한 개발 과정을 설명한다. 코도바 설치부터 프로젝트 작성 방법까지 소개한 후, 간단한 앱을 만들어 안 드로이드와 iOS에서 동작을 확인한다. 그리고 코도바 플러그인 설치법과 커스텀 플러그인을 만드는 방법도 설명한다.

8

2부 실전편 5장_ 더 좋은 앱 개발을 위한 노하우 하이브리드 앱을 개발하기 위한 자세한 기법과 노하우를 소개한다.

6장_ 스토리지 하이브리드 앱에서 이용할 수 있는 스토리지인 로컬 스토리지LocalStorage , 세션 스토리지 , 파일 스토리지FileStorage, WebSQL 데이터베이스, 모바일 Baas를 소개한다.

SessionStorage

7장_ 모바일 환경의 특징 모바일 웹 특유의 터치 제스처 이벤트 처리, 디바이스의 방향 뷰포트Viewport 처리에 관해 설명 한다.

8장_ 디버그 하이브리드 앱 내의 HTML·CSS·자바스크립트를 디버그하는 도구와 디버그 기법을 함께 소 개한다.

9장_ 메모리 측정·절약 안드로이드와 iOS의 메모리 관리 모델을 설명하고 앱이 이용하는 메모리 사용량을 측정하는 도구와 그 사용법을 설명한다. 그리고 메모리를 절약하는 방법도 함께 소개한다.

10장_ HTML5 하이브리드 앱 보안 하이브리드 앱의 보안을 위한 지식을 설명한다. 하이브리드 앱 개발자가 알아둬야 하는 안드로 이드 iOS의 보안 모델과 현재 확인된 WebView 관련 취약성과 그 대처법을 소개한다.

9

11장_ 자바스크립트와 네이티브의 브릿지 웹 애플리케이션에서는 호출할 수 없는 단말기의 기능을 하이브리드 앱이 호출할 수 있는 이유 는 코도바 등의 프레임워크가 자바스크립트와 네이티브의 브릿지를 제공하기 때문이다. 이 브 릿지의 구조를 설명한다.

12장_ WebView로 HTML5 하이브리드 앱 개발하기 프레임워크를 전혀 이용하지 않고 WebView로 안드로이드와 iOS에서 동작하는 하이브리드 앱을 개발하는 코드를 소개한다.

10

CONTENTS

PART

옮긴이·지은이 소개 ............................................................................................................

4

옮긴이의 글 ........................................................................................................................

5

이 책에 대하여 ....................................................................................................................

6

I 기초편

CHAPTER

1 HTML5 하이브리드 앱이란 1.1 HTML5 하이브리드 앱의 개요 ..................................................................................... 28 1.2 앱 개발의 과제 ........................................................................................................... 29 1.2.1 멀티 플랫폼 지원의 필요성 .................................................................................. 29 1.2.2 멀티 플랫폼 지원의 어려운 점 .............................................................................. 30

1.3 HTML5 하이브리드 앱의 등장 ..................................................................................... 31 1.4 애플리케이션의 형태 ................................................................................................... 32 1.4.1 네이티브 앱 ..................................................................................................... 32 1.4.2 웹 앱 .............................................................................................................. 33 1.4.3 하이브리드 앱 .................................................................................................. 36

1.5 하이브리드 앱의 구조 .................................................................................................. 37 1.6 하이브리드 앱의 장점 .................................................................................................. 39 1.7 하이브리드 앱의 단점 .................................................................................................. 41 1.8 하이브리드 앱의 사례 .................................................................................................. 41 1.9 정리 ......................................................................................................................... 45

11

CONTENTS

CHAPTER

2 하이브리드 앱 개발의 기반 2.1 웹 기술 ..................................................................................................................... 48 2.1.1 HTML5 ......................................................................................................... 48 2.1.2 CSS .............................................................................................................. 49 2.1.3 자바스크립트 ................................................................................................... 49 2.1.4 라이브러리 프레임워크 ....................................................................................... 50

2.2 웹킷 렌더링 엔진의 개발 환경 ....................................................................................... 52 2.3 iOS 개발 환경 ........................................................................................................... 53 2.3.1 iOS 앱 개발 환경 구축 ....................................................................................... 54 2.3.2 필요한 개발 환경 ............................................................................................... 55 2.3.3 Xcode 설치 .................................................................................................... 55 2.3.4 Xcode 실행 .................................................................................................... 57 2.3.5 새 프로젝트 생성 .............................................................................................. 57 2.3.6 프로젝트 편집 .................................................................................................. 59 2.3.7 프로젝트 실행 .................................................................................................. 61 2.3.8 실제 디바이스로 테스트하기 ................................................................................ 62

2.4 안드로이드 개발 환경 .................................................................................................. 62 2.4.1 안드로이드(안드로이드 SDK + 이클립스) 개발 환경 구축 ......................................... 64 2.4.2 필요 환경 ........................................................................................................ 65 2.4.3 안드로이드 SDK 설치 ....................................................................................... 65 2.4.4 프로젝트 생성 .................................................................................................. 67

2.5 정리 ......................................................................................................................... 79

12

CHAPTER

3 하이브리드 앱 개발을 위한 프레임워크 3.1 프레임워크의 개요 ...................................................................................................... 82 3.2 프레임워크의 역할 ...................................................................................................... 82 3.3 코도바(폰갭) .............................................................................................................. 85 3.4 트리아이나 ................................................................................................................ 86 3.5 프레임워크를 이용하지 않을 경우 .................................................................................. 87 3.6 서버 클라우드 환경 ..................................................................................................... 88 3.6.1 폰갭 빌드 ......................................................................................................... 88 3.6.2 트리거 IO ........................................................................................................ 89 3.6.3 모나카 ............................................................................................................ 90 3.6.4 아이스니움(테러릭 앱 빌더) ................................................................................. 92

3.7 정리 ......................................................................................................................... 93

CHAPTER

4 코도바를 이용한 앱 개발 흐름 4.1 코도바 개발 환경 구축 ................................................................................................. 96 4.1.1 Node.js 설치 .................................................................................................. 97 4.1.2 코도바 커맨드라인 인터페이스 설치 ...................................................................... 98 4.1.3 프로젝트 생성 .................................................................................................. 99 4.1.4 안드로이드용 컴포넌트 설치 .............................................................................. 100 4.1.5 프로젝트의 디렉터리 구조 확인 .......................................................................... 101 4.1.6 안드로이드 에뮬레이터 이용 .............................................................................. 103 4.1.7 iOS 시뮬레이터 이용 ....................................................................................... 103 4.1.8 실제 디바이스 프로젝트 실행하기 ....................................................................... 104

13

CONTENTS

4.1.9 기본적인 개발 흐름 이해하기 ............................................................................. 105 4.1.10 브라우저로 확인하기 ...................................................................................... 106 4.1.11 업데이트 관리 ............................................................................................... 106

4.2 코도바를 이용한 앱 개발 ............................................................................................ 107 4.2.1 www 디렉터리 구조 ....................................................................................... 107 4.2.2 index.html .................................................................................................... 108 4.2.3 cordova.js ................................................................................................... 108 4.2.4 deviceready 이벤트 ...................................................................................... 110

4.3 앱 설정 ................................................................................................................... 112 4.3.1 config.xml의 구조 .......................................................................................... 112 4.3.2 앱에 관한 설정 ............................................................................................... 113 4.3.3 설정 반영 ....................................................................................................... 114 4.3.4 안드로이드의 설정 항목 .................................................................................... 115 4.3.5 iOS 설정 항목 ................................................................................................ 115 4.3.6 아이콘 설정 .................................................................................................... 117 4.3.7 앱의 스플래시 스크린 설정 ................................................................................ 118 4.3.8 도메인 화이트 리스트 설정 ................................................................................ 120

4.4 플랫폼별 사용자화 .................................................................................................... 122 4.4.1 HTML5 쪽을 플랫폼별로 전환하기 .................................................................... 122 4.4.2 네이티브 코드 쪽을 플랫폼별로 전환하기 ............................................................. 123

4.5 코도바 플러그인 이용하기 .......................................................................................... 126 4.5.1 플러그인 설치하기 .......................................................................................... 126 4.5.2 플러그인 관리 ................................................................................................ 129 4.5.3 플러그인 설치 과정 이해 ................................................................................... 129 4.5.4 플러그인의 구조 ............................................................................................. 133 4.5.5 내장 플러그인 목록 .......................................................................................... 133 4.5.6 안드로이드용 코도바 플러그인 제작 .................................................................... 135 4.5.7 안드로이드용 플러그인 개발의 세부 사항 ............................................................. 141

14

4.5.8 iOS용 코도바 플러그인 제작 ............................................................................. 141 4.5.9 cordova 커맨드로 설치할 수 있는 플러그인 개발 ................................................. 147

4.6 그 밖의 명령 설명 ..................................................................................................... 147 4.7 기존 앱에 코도바 입히기 ............................................................................................ 148 4.7.1 코도바 프레임워크 다운로드 .............................................................................. 148

4.8 안드로이드 프로젝트에 코도바 프레임워크 도입 .............................................................. 149 4.8.1 화면 일부에 코도바 이용하기 ............................................................................. 152

4.9 iOS 프로젝트에 코도바 프레임워크 도입하기 ................................................................. 153 4.9.1 앱 화면 일부에 코도바 이용하기 ......................................................................... 154 4.9.2 www 디렉터리에 배치하기 ............................................................................... 157 4.9.3 코도바 프레임워크를 호출하는 코드 기술하기 ....................................................... 157

4.10 plugman 명령으로 코도바 플러그인 설치하기 ............................................................ 159 4.10.1 plugman 명령의 설치 .................................................................................. 159 4.10.2 plugman 명령을 이용하여 코도바 플러그인 설치하기 ......................................... 160

4.11 정리 ..................................................................................................................... 161

PART

II 실전편

CHAPTER

5 더 좋은 앱 개발을 위한 노하우 5.1 a 태그와 click 이벤트 사용하지 않기 ........................................................................... 165 5.1.1 Tappable ..................................................................................................... 167 5.1.2 FastClick ..................................................................................................... 167

5.2 제이쿼리 대신 Zepto.js 이용하기 ................................................................................ 168 5.2.1 Zepto.js 설치 ................................................................................................ 169 5.2.2 Zepto.js 사용 ................................................................................................ 169

15

CONTENTS

5.3 대화창 표시 ............................................................................................................. 170 5.3.1 코도바 Notification 플러그인 사용 .................................................................... 171

5.4 탭할 때 표시되는 하이라이트 없애기 ............................................................................ 173 5.5 팝업 메뉴 없애기 ...................................................................................................... 173 5.6 사용자가 문자를 선택할 수 없게 하기 ........................................................................... 174 5.7 콘텐츠 일부에 관성 스크롤 사용하기 ............................................................................ 174 5.8 안드로이드 버전을 iOS 버전보다 먼저 개발하기 ............................................................. 175 5.9 인디케이터 이용하기 ................................................................................................. 176 5.9.1 Spin.js ......................................................................................................... 176

5.10 문자 크기 자동 조정을 무효로 하기 ............................................................................ 177 5.11 DOM 트리의 변경 줄이기 ....................................................................................... 178 5.11.1 다시 그리기 비용 줄이기 ................................................................................. 178 5.11.2 반복된 DOM 조작이 그리기를 느리게 한다 ........................................................ 179 5.11.3 DOM에 삽입하는 처리를 한 번에 모으기 ........................................................... 179 5.11.4 DOM 트리에서 잘라내 조작한 후에 다시 삽입하기 ............................................. 180

5.12 레이아웃 재계산 비용 줄이기 .................................................................................... 181 5.12.1 레이아웃 재계산 ........................................................................................... 181 5.12.2 요소 크기 고정하기 . ...................................................................................... 183 5.12.3 절대위치 지정하기 ......................................................................................... 183 5.12.4 CSS Transforms 이용하기 .......................................................................... 184 5.12.5 DOM 트리 단순하게 만들기 ........................................................................... 186

5.13 실제 디바이스로 확인하기 ........................................................................................ 186 5.13.1 iOS 시뮬레이터의 단점 .................................................................................. 187 5.13.2 안드로이드 에뮬레이터의 단점 ......................................................................... 187

5.14 JSON ................................................................................................................. 188 5.14.1 JSON을 파싱하기, JSON으로 변환하기 .......................................................... 189 5.14.2 JSON 문법 ................................................................................................. 190 5.14.3 JSON의 잘못된 파싱 .................................................................................... 191

16

5.15 CSS 애니메이션 이용하기 ....................................................................................... 192 5.15.1 자바스크립트로 애니메이션하지 않는다 ............................................................. 192 5.15.2 CSS 애니메이션 .......................................................................................... 192 5.15.3 transition 스타일 속성 사용하기 ..................................................................... 193 5.15.4 자바스크립트에서 CSS 애니메이션 이용하기 .................................................... 195 5.15.5 CSS 애니메이션 관련 이벤트 파악하기 ............................................................ 196 5.15.6 CSS 애니메이션을 자바스크립트에서 취소하기 .................................................. 196 5.15.7 CSS 애니메이션을 더 부드럽게 표현하기 ......................................................... 197 5.15.8 iOS기기에서 깜박임 줄이기 ............................................................................ 199

5.16 앱을 실행하는 기기의 정보 얻기 ................................................................................ 200 5.16.1 유저 인터페이스로 플랫폼 판단하기 .................................................................. 201 5.16.2 코도바(폰갭)를 이용하여 기기 정보 취득하기 ....................................................... 202

5.17 안드로이드 4.0.3의 WebView와 asset에 관한 버그에 대처하기 ................................... 203 5.17.1 버그 재현하기 .............................................................................................. 204

5.18 안드로이드 기기의 버튼에 대응하기 ........................................................................... 205 5.18.1 코도바를 사용할 때 ........................................................................................ 206 5.18.2 WebView를 사용할 때 ................................................................................. 206

5.19 이벤트 전파 ........................................................................................................... 207 5.19.1 이벤트 버블링 .............................................................................................. 208 5.19.2 이벤트 전파 ................................................................................................. 210 5.19.3 Zepto.js를 사용한 이벤트 전파 ....................................................................... 210

5.20 HTML5와 네이티브의 구분 ..................................................................................... 211 5.20.1 HTML5만으로 전부 구현할 수 없는 상황 .......................................................... 211 5.20.2 특정 화면, 특정 위치만 네이티브로 구현하기 ...................................................... 212 5.20.3 HTML5와 네이티브의 약점을 서로 보완하기 ..................................................... 212

5.21 정리 .................................................................................................................... 213

17

CONTENTS

CHAPTER

6 스토리지 6.1 스토리지 개요 .......................................................................................................... 216 6.2 웹 스토리지 ............................................................................................................. 217 6.3 로컬 스토리지 .......................................................................................................... 217 6.3.1 HTML5 하이브리드 앱에서 이용하기 ................................................................. 218 6.3.2 안드로이드의 WebView에서 이용하기 ............................................................... 218 6.3.3 iOS의 UIWebView 클래스에서 이용하기 ........................................................... 219 6.3.4 데이터 저장하기 .............................................................................................. 219 6.3.5 데이터에 접근하기 ........................................................................................... 220 6.3.6 데이터 삭제하기 .............................................................................................. 221 6.3.7 용량 제한 ...................................................................................................... 221 6.3.8 남은 용량 파악하기 .......................................................................................... 222 6.3.9 이용 상황 ...................................................................................................... 223

6.4 세션 스토리지 .......................................................................................................... 223 6.4.1 특성 ............................................................................................................. 223 6.4.2 로컬 스토리지와 같은 API ................................................................................ 224 6.4.3 안드로이드, iOS의 WebView에서 이용하기 ....................................................... 224 6.4.4 용량 ............................................................................................................. 225 6.4.5 이용 상황 ....................................................................................................... 225

6.5 파일 스토리지 .......................................................................................................... 225 6.5.1 파일 스토리지 API .......................................................................................... 225 6.5.2 구현된 API .................................................................................................... 227 6.5.3 설정 .............................................................................................................. 227 6.5.4 파일 스토리지 API 이용하기 ............................................................................. 229 6.5.5 파일 읽기 ...................................................................................................... 229 6.5.6 파일 쓰기 ...................................................................................................... 231 6.5.7 파일을 텍스트로 읽어오기 ................................................................................. 232

18

6.5.8 파일과 디렉터리의 이동·복사·삭제 등의 기타 조작 ............................................. 234 6.5.9 제한 .............................................................................................................. 235 6.5.10 이용 상황 .................................................................................................... 236

6.6 WebSQL 데이터베이스 ........................................................................................... 236 6.6.1 WebSQL 데이터베이스의 개요 ........................................................................ 236 6.6.2 안드로이드에서 이용하기 .................................................................................. 237 6.6.3 iOS에서 이용하기 ........................................................................................... 238 6.6.4 코도바의 WebSQL 데이터베이스 이용하기 ........................................................ 238 6.6.5 이용할 수 있는 SQL ....................................................................................... 239 6.6.6 데이터베이스 이용 .......................................................................................... 239 6.6.7 데이터베이스 테이블 생성 ................................................................................. 239 6.6.8 트랜잭션 발행 ................................................................................................. 241 6.6.9 트랜잭션 안에서 롤백하기 ................................................................................. 242 6.6.10 명시적 롤백 ................................................................................................. 242 6.6.11 읽기 전용 트랜잭션 발행 ................................................................................. 243 6.6.12 SQL 발행 ................................................................................................... 244 6.6.13 플레이스 홀더 ............................................................................................... 245 6.6.14 마이그레이션 ............................................................................................... 246 6.6.15 SQLite 버전 추출 ......................................................................................... 250 6.6.16 외부에서 실제 파일을 추출하여 SQLite로 조작하기 ............................................ 250 6.6.17 이용 상황 .................................................................................................... 252

6.7 모바일 BaaS .......................................................................................................... 252 6.7.1 모바일 BaaS 기능 .......................................................................................... 253 6.7.2 모바일 BaaS 소개 .......................................................................................... 254 6.7.3 오픈소스 모바일 Baas ..................................................................................... 256 6.7.4 이용 상황 ....................................................................................................... 257

6.8 정리 ....................................................................................................................... 258

19

CONTENTS

CHAPTER

7 모바일 환경의 특징 7.1 터치 감지 ................................................................................................................ 260 7.1.1 자바스크립트로 다루는 이벤트 ........................................................................... 260 7.1.2 touchenter, touchleave 이벤트 ..................................................................... 262 7.1.3 이벤트 속성 .................................................................................................... 263 7.1.4 터치 오브젝트 ................................................................................................ 264 7.1.5 터치 좌표 구하기 ............................................................................................ 264 7.1.6 스크롤 금지 ................................................................................................... 265 7.1.7 크롬에서 터치 이벤트 발생시키기 ....................................................................... 265 7.1.8 마우스 관련 이벤트의 균형 ................................................................................ 266 7.1.9 마우스 관련 이벤트 이용하지 않기 ...................................................................... 267 7.1.10 안드로이드에서의 touchstart 이벤트와 touchend 이벤트 ................................. 267

7.2 제스처 감지 ............................................................................................................. 268 7.2.1 제스처 이벤트 ................................................................................................ 269 7.2.2 안드로이드에서 제스처 감지하기 ........................................................................ 270

7.3 제스처를 판별하는 라이브러리 .................................................................................... 271 7.4 디바이스 오리엔테이션 .............................................................................................. 274 7.4.1 디바이스 오리엔테이션 파악 .............................................................................. 274 7.4.2 디바이스 오리엔테이션의 변화 감지하기 .............................................................. 275 7.4.3 디바이스 오리엔테이션을 미디어 쿼리로 다루기 .................................................... 277 7.4.4 안드로이드 4.0.3의 미디어 쿼리에 오리엔테이션 지정 시 버그 ................................. 279 7.4.5 오리엔테이션을 판단하는 미디어 쿼리를 자바스크립트로 호출하기 ........................... 280 7.4.6 오리엔테이션을 지원하지 않는 선택지 ................................................................. 281

7.5 뷰포트에 대응하기 .................................................................................................... 281 7.5.1 뷰포트 .......................................................................................................... 282 7.5.2 뷰포트 설정 방법 ............................................................................................ 282

20

7.5.3 파라미터 ........................................................................................................ 283 7.5.4 아이폰, 아이팟 터치용 뷰포트 설정 ..................................................................... 284 7.5.5 안드로이드의 뷰포트 . ...................................................................................... 285 7.5.6 target-densitydpi 파라미터 지정 .................................................................... 286 7.5.7 density의 차이 검증 ....................................................................................... 287 7.5.8 target-densitydpi 파라미터를 지정했을 때의 레이아웃 ....................................... 289 7.5.9 width 파라미터를 자바스크립트로 에뮬레이트하기 ............................................... 290

7.6 정리 ....................................................................................................................... 291

CHAPTER

8 디버그 8.1 와이너리에 의한 웹 인스펙터 ...................................................................................... 294 8.1.1 와이너리로 할 수 있는 일 .................................................................................. 295 8.1.2 와이너리 도입하기 ........................................................................................... 295

8.2 iOS에서 원격 웹 인스펙터 ......................................................................................... 301 8.2.1 이용할 수 있는 기능 ......................................................................................... 301 8.2.2 이용 준비 ...................................................................................................... 302 8.2.3 원격 웹 인스펙터 열기 ...................................................................................... 303

8.3 크롬 원격 웹 인스펙터 ............................................................................................... 304 8.3.1 안드로이드 4.4 이후 버전에서 크롬 인스펙터 이용하기 .......................................... 308

8.4 안드로이드에서 자바스크립트의 오류 로그 기록하기 ....................................................... 309 8.4.1 안드로이드 앱의 로그 가져오기 .......................................................................... 310 8.4.2 오류 로그 기록 ............................................................................................... 310

8.5 정리 ....................................................................................................................... 312

21

CONTENTS

CHAPTER

9 메모리 측정·절약 9.1 메모리 절약의 중요성 ................................................................................................ 314 9.1.1 메모리 스와핑을 지원하지 않는 안드로이드와 iOS ................................................ 314

9.2 단말기의 메모리 용량 ................................................................................................ 315 9.2.1 iOS 단말기의 메모리 용량 ................................................................................ 315 9.2.2 안드로이드 단말기의 메모리 용량 ....................................................................... 316

9.3 메모리 사용량 측정 ................................................................................................... 317 9.3.1 가상 메모리 .................................................................................................... 318 9.3.2 iOS 메모리 측정 ............................................................................................. 319 9.3.3 안드로이드 메모리 측정 .................................................................................... 322

9.4 메모리 절약 방법 ...................................................................................................... 328 9.4.1 HTML5 하이브리드 앱이 사용하는 메모리 .......................................................... 328 9.4.2 자바스크립트의 메모리 관리 .............................................................................. 329 9.4.3 크기가 큰 이미지 사용 줄이기 ............................................................................ 330 9.4.4 객체 풀 이용 ................................................................................................... 331 9.4.5 자바스크립트로 필요 없는 참조하지 않기 ............................................................. 332

9.5 정리 ....................................................................................................................... 334

CHAPTER

10 HTML5 하이브리드 앱 보안 10.1 웹 앱과는 다른 HTML5 하이브리드 앱의 보안 문제 ..................................................... 336 10.2 안드로이드와 iOS 샌드박스 ..................................................................................... 336 10.2.1 샌드박스란? ................................................................................................. 336 10.2.2 iOS 샌드박스 ............................................................................................... 336 10.2.3 안드로이드 샌드박스 ...................................................................................... 338

22

10.3 HTML5 하이브리드 앱에서의 XSS의 위험성 ............................................................. 339 10.3.1 XSS를 통한 네이티브 브릿지 이용 ................................................................... 339 10.3.2 iOS의 위험성 ............................................................................................... 339 10.3.3 안드로이드의 위험성 ...................................................................................... 341

10.4 변조나 유출 가능성 고려하기 .................................................................................... 342 10.4.1 안드로이드 apk 패키지에 포함된 리소스 추출 .................................................... 343 10.4.2 iOS의 ipa 패키지에 포함된 리소스 추출하기 ..................................................... 344 10.4.3 패키지 내용의 도난·변조 고려하기 .................................................................. 346

10.5 console.log 메소드를 이용하여 중요 정보 기록하지 않기 ........................................... 346 10.6 정리 .................................................................................................................... 348

CHAPTER

11 자바스크립트와 네이티브의 브릿지 11.1 자바스크립트로 네이티브 기능을 호출하는 방법 ........................................................... 351 11.2 네이티브 브릿지에 필요한 조건 ................................................................................. 351 11.3 addJavascriptInterface 방식 ............................................................................... 352 11.3.1 구현 ........................................................................................................... 352 11.3.2 값의 전달 ..................................................................................................... 354 11.3.3 자바에서의 스레드 세이프 ............................................................................... 355 11.3.4 적용 범위 제한 ............................................................................................. 356 11.3.5 보안 우려 .................................................................................................... 357 11.3.6 메소드 비공개 설정 . ...................................................................................... 358

11.4 네이티브에서 자바스크립트로 값 넘기기 ..................................................................... 359 11.4.1 iOS . .......................................................................................................... 360 11.4.2 안드로이드 .................................................................................................. 360 11.4.3 값 전달하기 ................................................................................................. 360

23

CONTENTS

11.5 커스텀 URL 스킴 방식 ............................................................................................ 361 11.5.1 안드로이드에서의 구현 ................................................................................... 362 11.5.2 iOS에서의 구현 ............................................................................................ 364

11.6 iOS에서 특정 페이지 읽기 제한 ................................................................................ 365 11.6.1 webView:shouldStartLoadWithRequest:navigationType: 이용하기 ............. 365 11.6.2 NSURLProtocol 클래스 이용하기 ................................................................. 366

11.7 JsAlert 방식 ......................................................................................................... 367 11.7.1 구현 ........................................................................................................... 368

11.8 로컬 HTTP 서버 방식 ............................................................................................ 369 11.8.1 로컬에 HTTP 서버 구축하기 .......................................................................... 370 11.8.2 토큰을 이용한 제한 ........................................................................................ 373

11.9 정리 .................................................................................................................... 374

CHAPTER

12 WebView로 HTML5 하이브리드 앱 개발하기 12.1 안드로이드의 WebView로 HTML5 하이브리드 앱 개발하기 ......................................... 376 12.1.1 WebView 표시 ........................................................................................... 376 12.1.2 WebView 설정 ........................................................................................... 377 12.1.3 WebSettings 설정 ...................................................................................... 377 12.1.4 WebViewClient 설정 .................................................................................. 380 12.1.5 WebChromeClient 설정 ............................................................................. 381 12.1.6 대화창 설정 ................................................................................................. 382 12.1.7 console 오브젝트의 동작 설정 ....................................................................... 383 12.1.8 액티비티의 생애주기에 대응하기 ...................................................................... 384 12.1.9 WebView에서 자바스크립트 실행하기 . ........................................................... 385

24

12.2 iOS의 WebView로 HTML5 하이브리드 앱 개발하기 ................................................. 386 12.2.1 기본 코드 ..................................................................................................... 386 12.2.2 UIWebView 클래스 설정 .............................................................................. 387 12.2.3 UIWebViewDelegate 설정 .......................................................................... 388 12.2.4 ViewController 클래스가 폐기되었을 때 UIWebView 오브젝트 해제하기 ............ 390

12.3 정리 .................................................................................................................... 390

APPENDIX A 마켓 공개 포인트 .................................................................................. 391 APPENDIX B 참고문헌 ............................................................................................. 397 찾아보기 ..................................................................................................................... 408

25

1 기초편

1장 HTML5 하이브리드 앱이란 2장 하이브리드 앱 개발의 기반 3장 하이브리드 앱 개발을 위한 프레임워크 4장 코도바를 이용한 앱 개발 흐름

CHAPTER

1

HTML5 하이브리드 앱이란

이 책에서는 HTML5 하이브리드 앱 개발 기법에 관해 설명한다. HTML5 하이브리드 앱 은 모바일 앱을 개발하는 새로운 기법이다. 먼저 HTML5 하이브리드 앱이 무엇인지 살펴 보도록 하자.

27

1.1 HTML5 하이브리드 앱의 개요 스마트폰의 역사는 1990년대 후반부터 시작되었다. 그로부터 십수 년이 지난 오늘날 스마트 폰은 전 세계로 보급되어 이제는 누구나 가지고 다니는 휴대용 디바이스가 되었다. 스마트폰에 이용되는 모바일 운영체제로는 심비안, 타이젠, 윈도우폰, 파이어폭스 OS 등이 있지만 그중에 서도 iOS와 안드로이드가 현재 세계에서 가장 널리 보급된 모바일 운영체제다. 스마트폰의 매력 중 하나는 컴퓨터처럼 사용자가 스스로 다양한 애플리케이션을 설치할 수 있 다는 점이다. 스마트폰에서 이용할 수 있는 애플리케이션을 간단히 ‘앱’이라고 불린다. 사용자 는 앱 마켓(iOS 디바이스라면 앱스토어, 안드로이드 디바이스라면 구글 플레이 스토어)에서 자신이 좋아하는 앱을 내려받아 설치할 수 있다. 마켓에서는 유료나 무료 앱이 배포된다(그림

1-1 ). 그림 1-1 앱스토어와 구글 플레이 스토어

안드로이드나 iOS 등의 스마트폰에서는 해당 운영체제에서 동작하는 애플리케이션 개발 도구 와 문서가 공개되어 있어 누구나 앱을 개발할 수 있다.

28

1부 기초편

스마트폰은 컴퓨터와는 달리 누구나 가지고 다니며 손쉽게 이용할 수 있다. 전철 안에 있을 때 나 누군가를 기다리면서 시간을 보낼 때, 할 일이 없어 심심할 때 등 약간의 시간만 있어도 스 마트폰을 이용하는 모습을 볼 수 있다. 개발자 시각에서 보면 컴퓨터용 애플리케이션을 만드는 것보다 스마트폰용 애플리케이션을 만 드는 편이 사용자에게 자신의 앱을 손쉽게 알릴 수 있다는 말이 된다. 결국 개발자들은 새롭게 등장한 스마트폰이라는 애플리케이션 플랫폼을 이용하여 앱을 개발하기 시작했다. 스마트폰용으로 공개된 앱의 종류는 엄청나게 많다. 2013년에 구글 플레이 스토어에 올라온 앱 수는 약 100만 개, 앱스토어에 올라온 앱 수는 90만 개를 넘어섰다. 스마트폰 앱을 개발하 는 업체는 이 새로운 플랫폼에 앱을 공개함으로써 큰 이익을 얻을 수 있게 되었다. 이런 상황에서 등장한 것이 HTML5 하이브리드 앱이다. 개발자들은 HTML5 하이브리드 앱이 일반적인 앱 개발에서 직면하는 여러 문제를 해결해줄 수 있을 것이라고 생각했다. 그렇다면 일반 앱 개발에는 어떤 문제점이 있을까? 그리고 개발자들은 왜 HTML5 하이브리드 앱이 그런 문제를 해결해줄 것으로 기대했을까? 이 장에서는 HTML5 하이브리드 앱이란 무엇 인지, 왜 주목을 받는지 살펴보도록 하겠다.

1.2 앱 개발의 과제 HTML5 하이브리드 앱의 등장 배경은 두 가지로 볼 수 있다. 첫째, HTML5라는 애플리케이 션 기반이 등장했다는 점이고 둘째, 스마트폰용 앱 개발에서 해결해야 할 어떤 과제가 있었다 는 점이다. 여기서는 후자인 앱 개발에서 해결해야 하는 과제에 관해 설명하고자 한다.

1.2.1 멀티 플랫폼 지원의 필요성 현재 모바일 운영체제 대부분을 점유하는 것은 구글 안드로이드와 애플 iOS다. 두 운영체제가 모바일 운영체제 시장을 양분하고 있다. 그 밖에도 블랙베리나 윈도우폰 같은 모바일 운영체제 가 있지만 아주 미미한 점유율에 그친다.

1장 HTML5 하이브리드 앱이란

29

여기서 생각해봐야 할 것은 사람들은 대부분 하나의 모바일 플랫폼만 접한다는 사실이다. 기 본적으로 스마트폰은 휴대전화이고 일반적인 사용자는 휴대전화를 한 대만 소유하는 게 보통 이다. 이런 이유에서 앱 개발 업체는 안드로이드와 iOS 중 한쪽에만 앱을 제공하는 것이 아니라 양쪽 플랫폼 모두를 대상으로 앱을 제공하고 싶어 한다. 하지만 개발자들은 여러 플랫폼을 대상으로 앱을 개발하다가 몇 가지 문제점이 있다는 사실을 깨달았다.

1.2.2 멀티 플랫폼 지원의 어려운 점 어떤 앱을 다른 플랫폼에 제공하는 것을 멀티 플랫폼 지원이라고 한다. 그런데 어떤 앱을 전혀 다른 두 플랫폼에 제공하는 과정을 단순히 생각해보면 어떻게 될까? 먼저 어느 한쪽 플랫폼을 대상으로 앱을 구현한 후 공개한다. 그런 다음 앱을 다른 플랫폼으로 이식할 것이다. 하지만 앱을 다른 플랫폼으로 이식하는 작업은 생각처럼 간단하지 않다. 안드 로이드와 iOS라는 두 플랫폼 사이에는 다음과 같은 여러 가지 차이점이 있기 때문이다. ●●

프로그래밍 언어가 다르다.

●●

API가 다르다.

●●

개발 환경이 다르다.

●●

지식, 노하우가 다르다.

●●

프로파일, 디버그 방법이 다르다.

각각의 모바일 운영체제 플랫폼은 서로 다른 개념과 기술로 이루어진다. 안드로이드에서는 개발 언어로 자바를 사용하지만, iOS에서는 개발 언어로 오브젝티브-C를 사용한다. 또한 통합 개발 환경을 의미하는 IDEIntegrated Development Environment를 살펴보면 안드로 이드에서는 이클립스나 안드로이드 스튜디오Android Studio를 사용하지만 iOS에서는 Xcode를 사 용한다. 게다가 Xcode는 Mac OS X에서만 사용할 수 있다. 안드로이드와 iOS에서 이용하는 API도 다르다. 예를 들어 안드로이드에서는 애플리케이션은 액티비티Activity라고 불리는 화면 단위의 집합이 있다. 기본적으로 안드로이드의 액티비티는 서 로 통신할 수 없으므로 어떤 액티비티가 다른 액티비티의 메소드와 오브젝트를 직접 호출할 수 없다.

30

1부 기초편

반면에 i O S 에서의 화면 전환은 애플리케이션의 rootV i e w Co n trol l e r 에 설정된

UINavigationController 오브젝트가 담당한다. iOS 앱에서는 UINavigationController에 UIViewController 오브젝트를 추가한다. ViewController와 UIViewController는 분리되 어 있지 않아 직접 메소드를 호출하거나 오브젝트를 추출할 수 있다. 결국 앱을 이식하는 개발자는 안드로이드와 iOS 플랫폼에 모두 정통해야만 한다. 개발 방식뿐 아니라 플랫폼에 따른 제한도 있다. 예를 들어 안드로이드에는 ‘서비스’라는 메커니즘이 있어 앱을 실행하지 않고도 백그라운드에서 처리할 수 있지만 iOS에는 그런 메커니즘이 없다. 안드로이드 앱 플랫폼과 iOS 앱 플랫폼은 이용하는 프로그래밍 언어, 필요로 하는 환경, 애플 리케이션 개발에 이용되는 API, 개발 노하우, 앱에 대한 개념, 앱을 빌드하는 데 이용하는 컴 파일러, 모바일 운영체제의 커널 등 처음부터 끝까지 완전히 다르다. 개발자가 어떤 앱을 안드로이드에서 iOS 플랫폼으로 단순히 이식만 하려고 해도, 결과적으로 안드로이드 플랫폼에서의 개발과 비슷한 수준의 시간과 비용이 들게 된다. 같은 스마트폰 앱인 데도 플랫폼 간 앱 개발에 차이가 있으므로 그 정도의 시간과 비용이 필요한 것이다. 앱 개발의 현황과 과제를 정리하면 다음과 같다. ●●

안드로이드와 iOS는 전혀 다른 플랫폼이다.

●●

앱 개발 업체는 양쪽 플랫폼에 모두 앱을 제공하고 싶어 한다.

●●

기존 앱을 이식하면 비용과 기간이 두 배 가량 든다.

1.3 HTML5 하이브리드 앱의 등장 이런 상황에서 스마트폰 앱의 새로운 형태로 HTML5 하이브리드 앱이 등장했다. 새로운 형태 의 앱은 지금까지의 네이티브 앱과 브라우저에서 이용할 수 있는 웹 애플리케이션의 장점만을 모은 것으로 개발자의 주목을 받고 있다.

HTML5 하이브리드 앱이 다른 앱과 차이점은 무엇일까? 여기서는 HTML5 하이브리드 앱이 무엇인지, 어떤 장점이 있는지 살펴보자.

1장 HTML5 하이브리드 앱이란

31

1.4 애플리케이션의 형태 애플리케이션이란 사용자가 요구하는 기능을 직접 제공할 수 있는 소프트웨어를 말한다. 사용 자는 수많은 애플리케이션 중에서 자신의 목적에 맞는 것을 선택하여 이용한다. 스마트폰에서 이용하는 앱에도 다음과 같은 세 가지 형태가 있다. ●●

네이티브 앱

●●

웹 앱

●●

하이브리드 앱

각각의 앱은 다른 개발 방법과 다른 배포 과정을 거쳐 사용자에게 도달한다. 네이티브 앱은 마 켓에서 내려받아 자신의 디바이스에 설치한 다음에 이용할 수 있지만, 웹 앱은 브라우저만 있 으면 설치하지 않아도 이용할 수 있다. 또한 네이티브 앱은 모바일 운영체제의 API를 직접 이 용하여 개발되지만 웹 앱은 웹 기술을 이용하여 개발된다.

1.4.1 네이티브 앱 네이티브 앱은 모바일 앱 중에서 가장 흔한 유형이다. 네이티브 앱이라는 말은 주로 웹 앱이나 하이브리드 앱과 대비되어 쓰인다. 사용자는 마켓을 통해 네이티브 앱을 설치한 후 디바이스의 홈 화면에서 설치된 앱을 실행해서 이용한다. 네이티브 앱은 해당 모바일 운영체제가 제공하는 개발 방법에 따라 개발된다. 안드로이드라면 개발자는 우선 안드로이드 SDK를 개발용 컴퓨터에 설치하게 된다. 안드로이드 SDK 안에는 안드로이드 앱 개발에 필요한 도구가 포함되어 있다. 예를 들어 USB 케이블로 연결한 디바이 스에 앱을 설치하거나 디바이스 안의 정보를 가져오는 adbAndroid Debug Bridge나 자바의 대표적인

IDE인 이클립스와 안드로이드 개발용 이클립스 플러그인이 포함된다. 자바의 class 파일을 안 드로이드의 달빅 가상 머신Dalvik virtual machine이 해석할 수 있는 바이트 코드로 변환하는 컴파일러 등도 포함된다. 네이티브 앱 개발자는 이 도구들을 이용하여 모바일 플랫폼 환경에서 권장하는 형태 그대로, 즉 다른 모바일 플랫폼에 대해서는 전혀 신경 쓰지 않고 앱을 개발한다. 안드로이드에서는 앞 에서 말한 대로 앱의 모든 화면이 액티비티로 구성되며 액티비티에는 뷰가 배치된다. 안드로이

32

1부 기초편

드에서는 자바 API가 준비되어 있고 앱 개발에는 주로 자바를 이용한다. iOS에서는 오브젝티 브-C*로 개발한다. 각 모바일 운영체제에는 자신의 기능을 최대한 활용할 수 있는 API가 준비되어 있다. 다른 모 바일 플랫폼을 의식하지 않아도 되기 때문에 앱 개발자는 API를 자유롭게 이용하여 앱을 개발 할 수 있다. 예를 들어 안드로이드에는 NFC를 다루는 API가 있지만 iOS에는 없다. 즉, 안드 로이드 앱을 개발할 때는 NFC를 이용하는 API를 이용할 수 있다. 안드로이드용으로 기술한 코드를 다른 모바일 운영체제에서 이용할 일은 없기 때문이다. 네이티브 앱 개발에서는 개발자가 모바일 운영체제의 API를 마음껏 이용할 수 있다. 또한 모바 일 운영체제에 최적화된 코드를 기술해서 디바이스와 모바일 운영체제의 기능과 성능을 최대 한 이끌어낼 수 있다. 한 가지 잊지 말아야 할 것은 네이티브 앱이 홈 화면에서 바로 실행될 수 있다는 점이다. 잠시 후에 설명할 웹 앱을 실행하려면 네트워크에 연결된 상태에서 브라우저를 실행해야 하지만 네이티브 앱은 아무 때나 홈 화면에서 바로 앱을 실행할 수 있다. 네이티브 앱이란 해당 플랫폼에서의 개발 방식에 따라 개발된 이른바 일반적인 앱을 말한다. 네이티브 앱의 장점을 정리하면 다음과 같다. ●●

앱스토어, 구글 플레이 스토어에서 배포할 수 있다.

●●

디바이스의 기능, 성능을 최대한으로 끌어낼 수 있다.

●●

홈 화면에서 바로 앱을 실행할 수 있다.

1.4.2 웹 앱 웹 앱은 웹으로 이용할 수 있는 앱이다. 사용자는 웹 브라우저를 실행한 후, 웹 앱의 URL에 액 세스해서 웹 앱을 이용할 수 있다. 네이티브 앱과는 달리 모바일 디바이스에 설치할 수 없다. 그도 그럴 것이 웹 앱의 실행 파일이라고 할 수 있는 HTML·CSS·자바스크립트는 디바이스 에 있는 것이 아니라 웹 앱을 제공하는 서버에 있기 때문이다. 사용자는 항상 웹 브라우저를 통해 웹 앱을 이용한다. 웹 앱이 제공하는 HTML·CSS·자바스크

* 애플이 2014년 6월 2일 애플 세계 개발자 회의에서 새로운 iOS용 개발 언어 스위프트(swift)를 발표했다. 그렇다고 오브젝티브-C가 구 동되지 않는 것은 아니다. 이 책은 네이티브 언어가 아니라 웹 언어에 개발 초점이 있으므로 이 책을 공부하는 데에 있어서 스위프트의 출현 은 전혀 문제가 되지 않는다.

1장 HTML5 하이브리드 앱이란

33

립트는 웹 브라우저가 해석하여 실제 앱으로 움직이게 된다. HTML·CSS·자바스크립트의 실 체는 단순한 텍스트에 불과하므로 브라우저가 없으면 앱으로 작동할 수 없다는 뜻이다. 웹 앱의 장점은 다음과 같다. ●●

항상 최신 상태다.

●●

웹 표준 기술을 이용할 수 있다.

●●

크로스 플랫폼의 특성이 있다.

●●

개발 속도가 빠르고 개발 비용이 비교적 저렴하다.

각 항목에 대해 차례로 살펴보자.

항상 최신 상태다 첫 번째 장점은 웹 앱이 항상 최신 상태라는 점이다. 조금 전에 소개한 네이티브 앱은 업데이트 를 설치하지 않으면 최신 버전을 사용할 수 없다. 마켓에 있는 앱이 업데이트되면 대부분 앱을 다시 내려받아 설치해야만 한다. 현재 최신 안드로이드와 iOS에서는 앱이 갱신되면 자동으로 업데이트하는 기능이 있지만 만약 그런 기능이 없거나 자동 갱신 기능을 꺼두었다면 사용자는 스스로 다시 마켓에서 앱을 내려받 아 설치할 필요가 있다. 웹 앱에서는 항상 최신 상태가 웹 서버로부터 직접 제공되므로 네이티브 앱처럼 앱을 업데이트 하기 위해 다시 설치할 필요가 없다.

웹 표준 기술을 이용할 수 있다 웹 표준 기술을 이용하여 웹 앱을 만들 수 있다. HTML·CSS·자바스크립트와 그 API는

W3C, WHATWG, Ecma International 등의 표준화 기구에 의해 사양이 책정된다. 표준화 되어 있으므로 특정 업체에 예속될 걱정이 없다. 웹 표준 기술이 사용되면 다음과 같은 장점이 있다.

34

●●

다양한 라이브러리와 노하우가 있다.

●●

기존 자산을 이용할 수 있다.

1부 기초편

이미 웹 기술은 다양한 환경에서 이용되고 있다. 앱 개발자는 원래부터 가지고 있던 라이브러 리나 노하우 등을 이용하여 앱을 구축할 수 있다. 또한 웹상에는 웹 기술에 관한 많은 정보나 노하우가 축적되어 있으므로 이런 기존의 노하우를 이용하여 앱을 개발할 수 있다. 과거에 컴퓨터 웹 브라우저용 앱을 제공한 적이 있다면 그것을 모바일용 웹 앱으로도 이용할 수 있다. 웹 앱에서 이용한 화면 구성과 디자인, HTML, CSS 등의 자산 일부를 사용할 수도 있다. 대부분의 웹 앱은 서버 사이드 애플리케이션과 함께 제공된다. 예전에 컴퓨터 웹 브라우저용으 로 작성한 시스템의 일부를 이용할 수 있다. 예를 들어 REST API 등을 가진 서버의 시스템은 모바일용 웹 앱 시스템의 일부로 그대로 이용할 수 있다.

크로스 플랫폼의 특징이 있다 똑같은 사양의 앱을 여러 플랫폼에서 동작하게 하는 특성을 크로스 플랫폼Cross platform이라고 한 다. 웹 앱은 소스 코드 하나로 복수의 플랫폼을 지원할 수 있는 크로스 플랫폼 특성을 가지고 웹 표준 기술을 이용하여 개발된다. 크롬Chrome을 개발한 구글이나 사파리를 개발한 애플, 오페라 브라우저를 개발한 오페라 등 브 라우저를 개발한 회사를 ‘브라우저 벤더’라고 부른다. 각 브라우저 벤더는 표준화 기구에 의해 책정된 HTML·CSS·자바스크립트의 사양을 바탕으로 브라우저를 구현한다. 브라우저 벤더는 자신이 제공하는 브라우저를 다양한 플랫폼에 제공한다. 예를 들어 오페라는 윈도우와 맥, 리눅스 등의 일반 컴퓨터용 브라우저를 제공할 뿐만 아니라 휴대 단말, 가정용 게 임기, 자동차 내비게이션 등에도 브라우저를 제공한다. 오페라 만큼은 아니더라도 다른 브라우 저 벤더도 일반 컴퓨터에 사용되는 복수의 운영체제(윈도우, 맥, 리눅스 등)에 자사의 브라우 저를 제공한다. 결국 웹 기술을 이용한 앱을 만들어놓으면, 해당 플랫폼에서 제공하는 브라우저를 통해 웹 앱 을 동작하게 할 수 있는 것이다.

개발 속도가 빠르고 개발 비용이 비교적 저렴하다 웹 앱은 일반적으로 네이티브 앱보다 개발하는 기간이나 비용이 적게 든다. 그 이유는 앞에서 언급했듯이 이미 있는 라이브러리와 축적된 노하우의 영향 때문이라고 생각할 수 있다.

1장 HTML5 하이브리드 앱이란

35

웹 앱의 단점 웹 앱의 단점도 살펴보자. ●●

브라우저를 경유하지 않으면 앱을 실행할 수 없다.

●●

디바이스의 기능을 이용할 수 없다.

●●

성능이 나오지 않는다.

웹 앱은 브라우저에서 동작하므로 브라우저가 없으면 시작할 수 없다. 네이티브 앱은 홈 화면 에서 앱의 아이콘을 터치하여 그대로 시작할 수 있지만, 웹 앱은 브라우저를 먼저 실행해서 웹 앱의 URL에 접속할 필요가 있다. 사용자에 따라서는 네이티브 앱과 비교했을 때 웹 앱의 실행 이 조금 귀찮게 느껴질 수 있다. 또한 웹 앱은 웹 기술로 개발되므로 디바이스가 가진 기능의 예를 들면 가속도 센서, 파일 스토 리지, 카메라 기능 등을 이용할 수 없다. 네이티브 앱에서는 디바이스에 탑재된 기능을 모두 자 유롭게 이용할 수 있지만, 웹 앱에서는 이용할 수 있는 기능이 제한되어 있다. 그리고 웹 앱이 네이티브 앱보다 성능이 떨어지는 문제도 자주 지적된다. 웹 앱은 HTML·

CSS·자바스크립트 등의 웹 기술을 이용하여 개발되고, 네이티브 앱은 모바일 운영체제용 네 이티브 코드로 개발된다. 웹 앱이 웹 기술을 기반으로 개발된 이상 브라우저의 렌더링 엔진에 의해 동작할 수밖에 없기에 필요한 성능이 충분히 나오지 않거나 성능상의 제약이 발생한다.

1.4.3 하이브리드 앱 마지막으로 소개할 것은 이 책의 주제이기도 한 HTML5 하이브리드 앱이다. 단순히 하이브리 드 앱이라고도 불린다(이 책에서는 하이브리드 앱이라고 부르겠다). 지금까지 네이티브 앱과 웹 앱 두 가지로 앱의 형태를 소개했다. 하이브리드 앱은 이 두 형태를 교 배한 듯한 정말로 하이브리드한 앱의 형태로서 네이티브 앱과 웹 앱의 장점만을 가져온 것이다. 사용자는 하이브리드 앱을 마치 네이티브 앱처럼 사용할 수 있다. 하이브리드 앱은 웹 앱과 마 찬가지로 HTML·CSS·자바스크립트 등의 웹 기술을 이용하여 개발하지만 실제로 이용할 때 는 브라우저를 실행할 필요가 없다는 특징이 있다. 네이티브 앱처럼 스토어에서 필요한 앱을 찾아 자신의 디바이스에 설치하고 실행하면 바로 이용할 수 있다.

36

1부 기초편

또한 하이브리드 앱은 웹 앱이 이용할 수 없는 디바이스 자체의 가속도 센서, 카메라, 파일 스토 리지 같은 기능을 이용할 수 있다. 따라서 웹 앱으로 구현할 수 없는 기능을 하이브리드 앱으로 구현할 수 있다. 스마트폰에 도착한 푸시 알림을 탭해서 그 하이브리드 앱을 시작할 수도 있다. 지금부터 하이브리드 앱에 관해 더 자세히 살펴보도록 하자.

1.5 하이브리드 앱의 구조 하이브리드 앱은 웹 앱과 마찬가지로 HTML·CSS·자바스크립트 같은 웹 기술로 개발하지만 웹 앱과 달리 네이티브 앱처럼 마켓을 통해 배포할 수 있다. 또한 사용자는 일반 앱과 완전히 똑같은 방식으로 하이브리드 앱을 설치하고 이용할 수 있다. 어떻게 이런 일이 가능할까? 여기서 잠시 하이브리드 앱의 구조를 알아보자(그림 1-2 ). 그림 1-2 네이티브 앱과 하이브리드 앱의 구조

오브젝티브-C (스위프트) 혹은 자바

HTML5 자바스크립트

CSS

앱

앱

네이티브 앱

하이브리드 앱

WebView 각 플랫폼에는 WebView라는 컴포넌트가 있다. WebView는 웹의 렌더링 엔진을 서드파티 앱에서 이용할 수 있게 하는 컴포넌트다. 안드로이드와 iOS에 모두 WebView라는 클래스가 있으며, WebView는 브라우저처럼 HTML·CSS·자바스크립트를 읽고 해석하여 실행한다. 안드로이드와 iOS의 WebView는 웹킷을 이용한다. 웹킷은 애플이 개발한 오픈소스 렌더링 엔진으로 애플의 사파리나 구글의 크롬 브라우저에서 이용된다.

WebView는 앱 내에 내장할 수 있는 브라우저의 렌더링 엔진만을 뽑아낸 듯한 컴포넌트다.

1장 HTML5 하이브리드 앱이란

37

이 WebView는 브라우저처럼 HTML과 CSS를 해석하여 렌더링하거나 자바스크립트를 실행 하지만 브라우저와 같은 주소창이나 ‘이전 페이지 보기’, ‘다음 페이지 보기’ 등의 UI는 가지고 있지는 않다. 하이브리드 앱에서는 앱을 표현하는 HTML·CSS·자바스크립트를 WebView가 읽고 해석 함으로써 동작한다.

앱 패키지 안에 파일 내장 하이브리드 앱은 네이티브 앱처럼 패키지로 만들어져서 마켓에 제공된다. 안드로이드, iOS 모 두 패키지 안에 내부적으로 이용할 파일이나 디렉터리를 포함할 수 있다. 안드로이드에서는 이 를 에셋Asset이라고 부르고, iOS에서는 리소스Resource라고 부른다. 하이브리드 앱이 빌드될 때 앱 을 구성하는 HTML·CSS·자바스크립트는 패키지 안에 내장된다.

네이티브 브릿지 하이브리드 앱에서 놓칠 수 없는 한 가지가 자바스크립트로 네이티브 기능을 호출할 수 있는 네이티브 브릿지 구조다. 하이브리드 앱 개발을 위한 폰갭 등의 프레임워크에는 일반 웹 앱에 서는 불가능한 스마트폰의 기능을 호출하는 메커니즘이 있고, 개발자는 하이브리드 앱 개발 프 레임워크가 제공하는 디바이스의 다양한 기능에 자바스크립트로 액세스할 수 있다. 또한 프레임워크에서 구현되지 않은 기능이라도 필요한 기능의 플러그인을 만들어 자바스크립 트로 호출할 수 있다. 이 메커니즘에 의해 웹 기술만으로는 불가능했던 기능을 하이브리드 앱 으로 구현할 수 있게 되었다. 하이브리드 앱 개발 프레임워크에 관한 자세한 설명은 뒤에서 자 세히 하기로 한다.

하이브리드 앱의 실행 하이브리드 앱을 실행하면 곧바로 화면 안에 WebView가 삽입되어 애플리케이션 패키지의

HTML을 읽도록 WebView에 명령한다. WebView는 읽어들인 HTML의 렌더링 결과를 화 면에 표시한다. 앱을 실행한 사용자가 보기에는 일반 네이티브 앱과 다름없는 움직임이다. 사 용자는 보통의 앱처럼 하이브리드 앱을 이용할 수 있고, 개발자는 웹 기술을 이용해 크로스 플 랫폼의 특징을 지닌 하이브리드 앱을 개발할 수 있는 것이다.

38

1부 기초편

1.6 하이브리드 앱의 장점 하이브리드 앱의 장점은 다음 네 가지다. 하이브리드 앱이 주목받는 이유이기도 하다. ●●

네이티브 앱처럼 마켓을 통해 바로 설치할 수 있다.

●●

크로스 플랫폼의 특징이 있다.

●●

네이티브 앱의 기능을 호출할 수 있다.

●●

웹 기술의 노하우와 자산을 이용할 수 있다.

네이티브 앱처럼 마켓을 통해 바로 설치할 수 있다 스마트폰 사용자는 자신이 원하는 기능이 있는 앱을 마켓에서 찾아 스마트폰에 내려받아 설치 한다. 앱은 기본적으로 마켓을 통해서만 설치할 수 있다. 안드로이드에서는 기본적으로 구글 플레이 스토어, iOS에서는 앱스토어다. 마켓을 제한하는 이유는 사용자가 설치할 앱의 품질과 보안을 보증하기 위해서다. 따라서 사용자는 대부분 마켓에서 필요한 앱을 찾고자 한다. 앱 개발 업체는 되도록 많은 사용자에게 앱을 제공해야 하므로 사용자가 많이 모이는 마켓을 통해 앱을 배포하고 싶어 한다. 하지만 마켓에서 배포하는 앱은 모바일 플랫폼에 맞게 패키지 로 빌드되어야만 하므로 웹 앱은 마켓을 통해 배포할 수 없다. 하지만 하이브리드 앱은 일반 네 이티브 앱처럼 패키지로 빌드할 수 있으므로 마켓을 통해 배포할 수 있다. 이 사실은 더 많은 사용자가 앱에 접근할 수 있게 한다는 점에서 웹 앱보다 유리하다. 또한 마켓에는 결제 기능이 있다. 안드로이드와 iOS 마켓에서는 앱 가격을 설정하여 판매할 수 있다. 일반적으로 앱 개발 업체는 앱을 하나만 개발하는 것이 아니라 지속적으로 앱을 개발하 고 공개한다. 그런데 앱마다 결제 기능을 따로 추가하는 작업은 꽤 손이 많이 가는 일이다. 하 지만 마켓을 통해 앱을 제공하면 결제 기능을 마켓에서 대행해주므로 별도의 결제 기능을 구현 하는 수고를 덜 수 있다.

크로스 플랫폼의 특징이 있다 하이브리드 앱은 주로 HTML5·CSS3·자바스크립트로 구현된다. 안드로이드와 iOS 모 두 HTML5 를 해석해서 실행할 수 있는 렌더링 엔진을 가진 WebView 가 갖추고 있다.

1장 HTML5 하이브리드 앱이란

39

WebView에서 이용하는 렌더링 엔진은 웹킷이라는 렌더링 엔진이다. 이용하는 플랫폼과 버 전에 따라 미세하게 동작의 차이가 있지만 기본적으로 안드로이드와 iOS에서 똑같이 동작 한다.

HTML·CSS·자바스크립트로 기술한 앱은 양쪽 플랫폼에 있는 WebView에 의해 거의 똑같 이 동작하므로 하나의 소스로 안드로이드와 iOS에 대응할 수 있다. 그러므로 각 플랫폼별로 네 이티브 앱을 개발하기보다 하이브리드 앱을 개발하는 편이 많은 수고를 덜 수 있다.

네이티브 앱의 기능을 호출할 수 있다 하이브리드 앱은 네이티브 앱처럼 패키지로 빌드된다. 하이브리드 앱의 코드에는 특정 플랫폼 용 네이티브 코드를 넣을 수 있으므로 웹 앱에서는 원리적으로 불가능한 디바이스의 기능을 끌 어낼 수 있다. 예를 들어 웹 앱에서 이용할 수 없는 푸시 알림을 다루는 처리도 하이브리드 앱 에서는 가능하다.

웹 기술의 노하우와 자산을 이용할 수 있다 하이브리드 앱의 기능은 웹 표준 기술을 이용하여 구현된다. 웹 표준 기술을 이용하여 생기는 장점은 다음 두 가지다. ●●

기존 기술과 노하우를 살릴 수 있다.

●●

웹 개발자도 앱을 개발할 수 있다.

지금까지는 스마트폰 앱을 개발하려면 모바일 운영체제용 앱 개발 기술을 배워야 했다. 안드로 이드나 iOS에서도 모바일 운영체제용 앱을 개발하려면 웹 기술과는 전혀 다른 기술을 배워야 했던 것이다. 결국 네이티브 앱으로 두 플랫폼을 지원하고자 할 때 학습 비용은 두 배가 된다. 하지만 하이브리드 앱에서는 웹 기술을 이용하여 개발할 수 있기 때문에 불필요한 학습 비용을 줄일 수 있다.

40

1부 기초편

1.7 하이브리드 앱의 단점 하이브리드 앱의 단점은 다음과 같다. ●●

여전히 디바이스의 성능을 완전히 끌어내기 어렵다.

●●

HTML5로는 원리상 불가능한 기능이 있다.

하이브리드 앱 대부분의 기능은 웹 기술로 구현된다. 앞에서 설명한 것처럼 HTML·CSS·자 바스크립트로 기술된 앱은 WebView가 해석하여 실행하게 되는데, WebView에서 실행되는 처리 속도는 네이티브 앱의 실행 속도보다 느려지는 경향이 있다. 이러한 속도 지연 문제는 이 책에서 제시하는 기법을 이용하면 어느 정도 줄일 수 있지만 때에 따라서는 태생적으로 HTML5로 구현하기 어려운 앱도 있다. 예를 들어 하이브리드 앱에 3D 게임처럼 빠른 연산과 그래픽 처리를 요구할 수 없다. 자바스크립트는 싱글 스레드로 동작하고 고속 그래픽 처리를 위한 기반이 없기 때문이다. 자바스크립트로 그래픽 처리를 하는 HTML5 캔버스를 이용하면 어느 정도 대응할 수는 있지만 게임에 필요한 애니메이션이나 3D를 다루는 고속 처리에는 적합하지 않다는 점은 분명하다.

1.8 하이브리드 앱의 사례 여기서는 주로 국내에서 유명한 하이브리드 앱의 사례를 몇 가지 소개하겠다.

쿡 패드 쿡 패드Cookpad는 요리 레시피를 보거나 투고할 수 있는 웹 서비스를 제공한다. 앱에서도 요리 레시피를 검색하고 읽을 수 있다(그림 1-3 ).

1장 HTML5 하이브리드 앱이란

41

그림 1-3 쿡 패드

네이티브도 HTML5도 아닌 하이브리드 앱의 가치

●

http ://el.jibun.atmarkit.co.jp/rails/2012/10/HTML5 -d1ba.html

이 앱은 안드로이드 버전만 제공된다(iOS 버전은 기능상 차이가 있다). 쿡 패드

●

https ://play.google.com/store/apps/details?id=com.cookpad.android.activities

위키피디아 모바일 위키피디아Wikipedia는 웹상에서 누구나 편집할 수 있는 무료 백과사전을 만드는 프로젝트다. 위 키피디아의 모바일 앱도 하이브리드 앱으로 개발되었다(그림 1-4 ).

42

1부 기초편

그림 1-4 위키피디아 모바일 (왼쪽 : 안드로이드, 오른쪽 : iOS)

위키피디아의 콘텐츠 대부분은 HTML로 되어 있다. HTML5 하이브리드 앱의 특성을 살려 모바일에서도 콘텐츠를 간편하게 볼 수 있도록 한 좋은 예로 볼 수 있으며 안드로이드 버전과

iOS 버전이 공개되어 있다. 위키피디아 모바일(구글 플레이 스토어)

●

https ://play.google.com/store/apps/details?id=org.wikipedia 위키피디아 모바일(앱스토어)

●

https ://itunes.apple.com/kr/app/wikipedia -mobile/id324715238

헬스플래닛 주식회사 타니타헬스링크가 제공하는 헬스플래닛healthPlanet은 사용자의 신체와 건강에 관한 데이 터를 등록하고 관리할 수 있는 웹 서비스 헬스플래닛의 앱 버전이다(그림 1-5 ). 앱을 통해서 사용자의 체중, 체지방률, 걸음 수 등 신체에 관한 다양한 데이터를 등록해서 관리할 수 있다.

1장 HTML5 하이브리드 앱이란

43

그림 1-5 헬스플래닛

헬스플래닛

●

https ://www.healthplanet.jp/index.do 타니타의 무료 건강 관리 앱(플레이 스토어, 앱스토어)

●

https ://play.google.com/store/apps/details?id=jp.healthplanet.healthplanetapp https ://itunes.apple.com/jp/app/tanitano -wu -liao -jian -kang/id692700901

폰갭으로 개발된 앱 하이브리드 앱 개발 프레임워크인 폰갭의 웹 사이트에는 폰갭으로 개발된 앱이 다수 등록되어 있다(그림 1-6 ). 그리고 웹 사이트에는 어떻게 폰갭으로 개발했는지에 관한 기사도 제공되고 있어 참고할 수 있다. 폰갭으로 만들어진 앱들

●

http ://phonegap.com/app

44

1부 기초편

그림 1-6 폰갭으로 만들어진 앱

1.9 정리 이 장에서는 HTML5 하이브리드 앱이 무엇인지에 대하여 살펴보았다. 다음 장에서는 HTML5 하이브리드 앱에 이용되는 기술에 대하여 자세히 살펴보도록 하겠다.

1장 HTML5 하이브리드 앱이란

45

CHAPTER

2

하이브리드 앱 개발의 기반

HTML5 하이브리드 앱의 기반을 지탱하는 주요 기술은 다음과 같다. ●●

웹 기술

●●

웹킷 렌더링 엔진 개발 환경

●●

모바일 운영체제인 안드로이드와 iOS

이 장에서는 각각의 기술에 대하여 개별적으로 살펴보도록 하겠다.

2장 하이브리드 앱 개발의 기반

47

2.1 웹 기술 웹 기술은 W3CWorld Wide Web Consortium와 WHATWGWeb Hypertext Application Technology Working Group 등의 표준화 기구가 사양을 책정한다. 브라우저 벤더는 그 사양에 기초하여 브라우저를 구현한다.

W3C가 정의한 사양에 기초한 문서를 기술하면 어떤 브라우저에서도 같은 렌더링 결과가 나 올 것을 기대할 수 있다. 여기서는 하이브리드 앱을 개발할 때 이용하는 웹 기술의 개요를 설명 한다.

2.1.1 HTML5 하이브리드 앱을 구현하는 데 사용하는 HTML을 주로 HTML5라고 한다. 왜 HTML5일까?

HTML은 Hyper Text Markup Language의 줄임말이고 문서의 구조를 표현하는 것이 HTML의 역할이다. HTML5를 단순히 설명하면 HTML의 다섯 번째 버전이라고 할 수 있다.

HTML5에서는 문서의 구조를 나타내는 시맨틱스가 강화되어 몇 가지 태그가 추가되었다. 대 표적인 것은 section 태그, header 태그, article 태그 등이다. 하지만 그밖에도 크게 바뀐 점 이 있다.

HTML4까지는 HTML이 단지 문서를 표현하는 마크업 언어였지만 HTML5부터는 문서뿐만 아니라 웹 앱도 표현하게 되었다. 실제로 HTML5라는 말은 새로운 버전의 마크업 언어라는 의 미 이외에도 새롭게 추가되는 웹 앱을 위한 자바스크립트 API와 웹 앱의 표현 기반이라는 의미 로 사용된다. 주요 API는 다음과 같다. 웹 스토리지(WebStorage )

●

클라이언트 사이드에서 이용할 수 있는 단순 스토리지 API 인덱스드DB (IndexedDB )

●

구조화된 데이터를 빠르게 검색하기 위한 클라이언트 사이드 스토리지 API 웹워커(WebWorker )

●

자바스크립트로 병렬 처리를 하기 위한 API 웹GL (WebGL )

●

고속 그래픽 처리를 하는 오픈GL(OpenGL)을 브라우저에서 이용하기 위한 API 파일 API (File API )

●

선택한 파일을 자바스크립트에서 이용하기 위한 API

48

1부 기초편

캔버스 API (Canvas API )

●

자바스크립트로 2차원 이미지를 그릴 수 있는 API

위 API를 보면 문서를 표현한다기보다 애플리케이션을 구현하기 위한 API라는 사실을 분명히 알 수 있을 것이다. 2014년 10월 28일 W3C는 HTML5를 표준안으로 확정 발표했다. W3C에 서 책정하는 사양의 상태는 규격 초안 → 권고 후보 → 권고로 바뀌고 마지막 권고 상태가 되고 나서야 비로소 사양이 확정된다. 그런데 브라우저 벤더들은 HTML5의 모든 기능을 앞질러 구 현했기에 현재 브라우저로도 HTML5를 이용할 수 있다. 물론 안드로이드와 iOS의 브라우저 에도 구현되어 있다. 단, 모든 API를 이용할 수 있는 것이 아니라 운영체제의 버전에 따라 구 현되지 않은 API도 있다.

2.1.2 CSS CSSCascading Style Sheet는 브라우저에서 렌더링할 때 문서 전체의 시각적인 스타일을 유지하기 위 해 이용한다. 문서의 구조와 스타일을 분리한다는 개념을 구현하고자 등장했다. HTML이 문서 의 구조를 규정하고 CSS는 HTML이 정의한 문서의 구조를 꾸민다. CSS에 표시할 문서의 레 이아웃, 글꼴, 문자셋, 색, 이미지의 크기 등 스타일에 관련된 항목을 지정하는 것이다. 현재의 CSS는 CSS3로 진화하여 둥근모서리, CSS 애니메이션 등의 고급 기능을 이용할 수 있 게 되었다.

2.1.3 자바스크립트 자바스크립트는 객체지향 스크립트 언어다. HTML에 삽입된 자바스크립트는 브라우저에 의해 해석되어 실행된다. 하이브리드 앱에서의 처리는 주로 이 자바스크립트를 기술하여 구현된다. 자바스크립트는 예전에 넷스케이프 사가 넷스케이프라는 브라우저를 구현하기 위해 개발한 프 로그래밍 언어다. 자바스크립트의 등장으로 문서뿐이던 웹 페이지에 사용자 입력에 반응하는 인터랙티브형 처리가 더해지게 되었다. 처음에는 라이브스크립트LiveScript라는 이름이었지만 당시 주목받던 프로그래밍 언어 자바의 영 향으로 자바스크립트라는 이름을 갖게 되었다. 자바와 자바스크립트는 이름이 비슷하지만

2장 하이브리드 앱 개발의 기반

49

실제로는 문법 일부만 비슷할 뿐이고 전혀 다른 프로그래밍 언어라고 봐야 한다. 자바스크립트 는 마이크로소프트의 인터넷 익스플로러에서도 제이스크립트JScript라는 이름으로 구현되어 보 급되었다.

W3C에서 사양이 표준화된 HTML이나 CSS와 달리 자바스크립트는 넷스케이프에서 독자적 으로 구현한 스크립트 언어다. 애초에 자바스크립트의 사양이 표준화되지 않았기에 마이크로 소프트가 인터넷 익스플로러에서 한 것처럼 각 브라우저 벤더가 독자적으로 기능을 구현했고 결과적으로 브라우저 간에 호환성 문제가 생기게 되었다. 그런 이유에서 각 브라우저 벤더는

ECMA스크립트ECMAScript 언어 사양을 참조하여 자바스크립트 언어 처리 시스템을 구현하게 되 었다.

2.1.4 라이브러리 프레임워크 오픈소스로 공개된 프레임워크와 라이브러리를 이용하면 더 빠르게 앱을 개발할 수 있다. 여기 서는 대표적인 모바일용 라이브러리와 프레임워크 몇 가지를 소개하고자 한다.

Zepto.js Zepto.js는 제이쿼리jQuery와 호환성이 있는 API를 가진 모바일용 경량 라이브러리다. 제이쿼리는 일반 컴퓨터의 브라우저용 자바스크립트 개발에서 사실상 표준de facto standard이라고 해도 좋을 정도로 자주 사용되는 라이브러리다. 단, HTML의 DOM 조작이나 Ajax, 이벤트 처리 등의 기능을 제공하는 제이쿼리에는 브라우저 간의 차이나 브라우저 버전 간의 차이를 해 결하기 위한 코드가 포함되어 있어 모바일 운영체제인 안드로이드와 iOS의 브라우저에서 이용 하기에는 적합하지 않다.

Zepto.js는 모바일용 개발에 이용할 수 있도록 필요 없는 코드가 삭제되어 가벼워졌다. 제이 쿼리와 호환성이 있는 API를 제공하므로 제이쿼리 사용법을 알면 간단히 이용할 수 있다.

Zepto.js

●

http ://zeptojs.com

50

1부 기초편

jQuery mobile 모바일용 유저 인터페이스를 제공하는 라이브러리다. 제이쿼리에 의존한다. jQuery mobile

●

http ://jquerymobile.com

Backbone.js 컴퓨터용 브라우저에서도 모바일용 브라우저에서도 이용할 수 있는 경량 MVC 프레임워크다.

MVC란 웹 앱에서 자주 이용되는 애플리케이션 아키텍처의 하나로 프로그램 전체를 모델Model, 뷰View, 컨트롤러Controller로 나눈다. 제이쿼리 모바일처럼 유저 인터페이스를 제공하지 않지만 모델이나 컨트롤러를 모듈화할 수 있다.

Backbone.js

●

http ://backbonejs.org

센차터치 센차터치Sencha Touch는 센차 사에 의해 개발된 모바일용 유저 인터페이스를 제공하는 MVC 프레 임워크다(그림 2-1 ). 제이쿼리 모바일과는 다르게 유저 인터페이스는 마크업이 아니라 코드로 기술된다. 그림 2-1 센차터치

Sencha Touch

●

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

2장 하이브리드 앱 개발의 기반

51

2.2 웹킷 렌더링 엔진의 개발 환경 HTML5 하이브리드 앱은 브라우저의 렌더링 엔진에서 동작한다. 안드로이드와 iOS는 애플이 오픈소스로 공개한 웹킷 렌더링 엔진을 사용하고 있다. 여기서는 웹킷 렌더링 엔진을 살펴보기 로 한다.

웹킷 웹킷은 애플이 중심이 되어 개발한 오픈소스 HTML 렌더링 엔진이다. 안드로이드와 iOS용 하 이브리드 앱을 개발할 때는 이 렌더링 엔진을 염두에 두고 개발한다. 웹킷은 원래 Mac OS X에 탑재하는 사파리 웹 브라우저를 위해 개발한 렌더링 엔진이었다. 그 리고 유닉스 계열 플랫폼에서 동작하는 렌더링 엔진인 KHTML을 기반으로 탄생했다. 현재 최 신 버전의 사파리 브라우저는 Mac OS X과 iOS에서만 이용할 수 있지만 웹킷 렌더링 엔진은

Mac OS X, 윈도우, 리눅스 등의 컴퓨터 운영체제는 물론이고 안드로이드, iOS 등의 모바일 운영체제에서도 이용된다. 모바일 환경에서 웹킷은 안드로이드, iOS의 표준 브라우저나 WebView 내부에서 사용된다. 따라서 안드로이드와 iOS에 대응하는 하이브리드 앱을 개발할 때는 웹킷이라는 렌더링 엔진만 고려해서 HTML·CSS·자바스크립트를 기술하면 된다. 적어도 하이브리드 앱을 개발할 때는 컴퓨터에서 브라우저 종류나 버전 차이로 생기는 문제만큼 고생하는 일은 없을 것이다. 웹킷의 소스 코드는 아래 웹 사이트에서 배포된다. 웹킷에서도 HTML·CSS·SVG 렌더링을 담당하는 웹코어WebCore와 자바스크립트 엔진을 제공하는 자바스크립트 코어JavaScriptCore는 LGPL 로 배포된다. 그 밖의 컴포넌트는 수정 BSD 라이선스로 배포된다.

The WebKit Open Source Project

●

http ://www.webkit.org

브라우저 앞에서 설명한 것처럼 하이브리드 앱은 웹 기술을 바탕으로 개발되므로 앱을 컴퓨터 브라우저 에서도 동작하도록 설정해두면 개발과 디버깅에 편리하다. 마찬가지로 안드로이드와 iOS의

WebView는 웹킷을 렌더링 엔진으로 이용하므로 웹킷을 이용하는 크롬이나 사파리 브라우

52

1부 기초편

저로 앱이나 페이지의 일부를 실행해보면 어느 정도 똑같이 렌더링된다. 크롬과 사파리에는 웹 개발용 웹 인스펙터web inspector가 포함되어 있다. 웹 인스펙터를 이용하면 개발 및 디버그를 편 리하게 도와주는 다음 기능들을 이용할 수 있다. ●●

자바스크립트 오류를 표시한다.

●●

DOM 트리의 상태와 DOM 요소에 해당하는 스타일을 확인한다.

●●

네트워크의 병목을 조사한다.

●●

자바스크립트에 브레이크 포인트를 설정하여 단계별로 실행한다.

●●

렌더링을 프로파일링하여 병목을 조사한다.

모바일 브라우저에서 렌더링하는 페이지를 인스펙트하는 방법도 있지만 지금까지 웹 개발에서 쌓은 노하우를 살릴 수 있는 컴퓨터용 브라우저에서 하는 것이 좀 더 편하다. 다시 말해서 컴퓨 터 브라우저에서도 앱이 동작하도록 개발한다면 꽤 도움이 될 것이다.

2.3 iOS 개발 환경 iOS는 애플이 개발한 모바일 기기용 운영체제다. 아이폰과 아이패드, 아이팟 터치 등의 기기 에 탑재된다. iOS는 컴퓨터용 운영체제로 제공되는 Mac OS X과 공통된 커널을 가진다. 앱 개발에는 프로그래밍 언어로서 오브젝티브-C, IDE로서 Xcode, 앱의 API로서 Mac OS

X와는 다른 모바일 앱 개발용 API를 이용한다. 안드로이드와 달리 iOS의 앱은 클로즈드 소스 로 개발되며 개발한 앱은 기본적으로 앱스토어에서만 배포된다. 사용자는 앱스토어 외에서는 앱을 설치할 수 없다. 또한 애플이 현재 판매하는 Mac OS X이 설치된 기기의 CPU는 주로 x86 계열인 반면 iOS가 지원하는 CPU는 ARM이다. 세계 모바일 운영체제 시장은 iOS와 안드로이드로 양분된다. 2015년 3월 시점의 iOS 최신 버 전은 iOS 8이다. 하이브리드 앱을 크로스 플랫폼으로 개발할 수 있다고 해서 플랫폼별로 개발 환경을 준비하지 않아도 되는 것은 아니다. iOS 앱을 빌드하려면 [그림 2-2 ]처럼 iOS 앱을 위한 개발 환경이 필요하다.

2장 하이브리드 앱 개발의 기반

53

그림 2-2 Xcode와 iOS 시뮬레이터

2.3.1 iOS 앱 개발 환경 구축 코도바 등 개발 환경 일부를 만들어주는 프레임워크를 사용한다고 해도 iOS 앱 개발 환경을 알 아두는 것은 하이브리드 앱 개발에 도움이 된다. 여기서는 iOS 앱 개발 환경을 구축하고 실제 로 간단한 HelloWorld 앱을 실행해보기까지의 과정을 다음 순서에 따라 소개하고자 한다.

1 Xcode를 설치한다.

2 iOS 앱의 프로젝트를 생성한다.

3 Xcode로 프로젝트를 편집한다.

4 iOS 시뮬레이터로 앱의 동작을 확인한다.

54

1부 기초편

2.3.2 필요한 개발 환경 iOS 앱 개발 환경을 구축하기 전에 앱 개발에 미리 필요한 것을 확인해보자. ●●

Mac OS X가 설치된 맥킨토시 컴퓨터

●●

Apple ID

iOS 앱 개발 환경은 안드로이드 앱 개발 환경과 달리 Mac OS X에서만 구축할 수 있다. 윈도 우나 리눅스를 이용한 iOS 앱 개발은 지원하지 않는다. 앱 개발자는 개발 장비로 맥킨토시 컴 퓨터를 먼저 준비해야 한다. 다음으로 애플 ID를 만든다. 애플 ID는 Xcode 설치와 앱 개발자에 대한 서비스를 제공하는

iOS Dev Center에 로그인할 때 필요하다. 애플 ID가 없으면 아래 사이트에 접속해서 안내에 따라 애플 ID를 만든다.

Apple - My Apple ID

●

https ://appleid.apple.com/kr

애플 ID를 만들었으면 바로 iOS Dev Center에 로그인해보자. 아래 URL에 접속하여 ‘Sign

in’을 클릭하고 로그인 화면에서 애플 ID와 비밀번호를 입력한다. iOS Dev Center

●

https ://developer.apple.com/devcenter/ios

2.3.3 Xcode 설치 Xcode는 iOS 앱 개발에 이용하는 IDE다. Xcode를 이용하면 iOS 앱 외에도 Mac OS X용 GUI 애플리케이션과 커맨드라인 애플리케이션을 개발할 수 있다. Xcode는 Mac OS X용 앱 스토어에서 내려받아 설치할 수 있다. 앱스토어를 실행하여 우측 상단의 검색창에 ‘xcode’라 고 입력 후 검색 결과에서 Xcode를 찾는다(그림 2-3 ). 검색 결과 화면에서 ‘Xcode’를 클릭 하면 Xcode 페이지로 전환된다.

2장 하이브리드 앱 개발의 기반

55

그림 2-3 앱스토어의 Xcode 검색 결과

[그림 2-4 ]의 [App 설치] 버튼을 누른다. 설치 버튼을 누르면 애플 ID를 요구하므로 자신의

ID를 입력한다. 제대로 처리되면 다운로드가 시작된다. Xcode는 용량이 크므로 다운로드에 조금 시간이 걸린다. 그림 2-4 Xcode 설치

56

1부 기초편

2.3.4 Xcode 실행 앱스토어에서 내려받아 설치한 Xcode를 처음 실행하면 라이선스 동의를 묻는 창이 열린다.

[Agree ] 버튼을 누르고 다음으로 진행한다. 시스템 설정 변경을 위해 로그인 암호를 입력하면 컴포넌트를 설치하는 창이 열린다. [그림 2-5 ]처럼 [Install ] 버튼을 눌러 관련 컴포넌트를 추 가하면 Xcode 설치가 마무리된다. 그림 2-5 Xcode 관련 컴포넌트 설치

2.3.5 새 프로젝트 생성 iOS 앱을 만들려면 우선 Xcode에서 프로젝트를 만들어야 한다. 생성된 프로젝트 안에 iOS 앱용 코드와 리소스, 개발 관련 설정 등이 저장된다. Xcode를 실행하면 [그림 2-6 ]의 대화창 이 표시된다. 여기서 일단 [Create a new Xcode project ]를 클릭한다. 그림 2-6 Xcode를 열면 표시되는 대화창

2장 하이브리드 앱 개발의 기반

57

다음으로 프로젝트에서 무엇을 할 것인지 선택하는 대화창이 표시된다. iOS 앱을 개발할 것이 므로 iOS > Application > Single View Application을 선택하고 [Next ] 버튼을 누른다(그 림 2-7 ). 그림 2-7 프로젝트의 종류 선택

다음은 프로젝트 기본 설정을 할 차례로 [그림 2-8 ]처럼 설정한다. 중요한 설정은 다음과 같다. ●●

Product Name : HelloWorldExample

●●

Devices : iPhone

그림 2-8 프로젝트 기본 설정 입력

58

1부 기초편

대화창의 지시에 따라 진행하면 프로젝트가 생성되고, 드디어 Xcode의 프로젝트를 연 상태가 표시된다(그림 2-9 ). 그림 2-9 프로젝트를 연 상태

프로젝트를 생성할 때 Xcode 5.1 버전에서는 클래스 접두사를 설정하는 항목이 있었다. 클래스 접두사(class prefix )란 무엇일까? 오브젝티브-C는 자바와 달리 네임스페이스를 사용하지 않으므로 클래 스 이름에 프레임워크나 애플리케이션을 나타내는 두 글자로 된 접두사를 붙여서 네임스페이스를 대신했다.

UIKit 프레임워크에 속한 클래스는 UIButton, UIViewController, UIDevice처럼 대부분 ‘UI’라는 접두 사가 붙는다. 여기서 사용하는 프레임워크란 라이브러리와 같은 의미로 생각해도 상관없다. iOS에서는 앱에 서 이용하는 라이브러리를 가리켜 프레임워크라고 부른다.

2.3.6 프로젝트 편집 왼쪽 프로젝트 트리에서 ViewController.m을 클릭해서 Xcode 화면 중앙의 편집기를 연다 (그림 2-10 ).

2장 하이브리드 앱 개발의 기반

59

오브젝티브-C에서는 클래스 헤더 파일의 확장자로 ‘.h’를 사용하고, 소스 파일의 확장자로 ‘.m’을 사용한다. C나 C++처럼 헤더 파일에는 클래스의 선언을 기술하고, 소스 파일에서 선언 된 클래스를 구현한다. 다시 말해 .m 확장자를 가진 ViewController.m은 ViewController 클래스를 구현한 파일이다. 그림 2-10 ViewController.m

iOS 앱 개발은 Xcode를 통해서 이루어진다. 여기서는 ‘HelloWorld’라고 화면에 표시하는 코드를 추가해보자. ViewController.m의 viewDidLoad 메소드를 [리스트 2-1 ]처럼 수정 한다. 리스트 2-1 ViewController.m 수정 #import "ViewController.h"

@interface ViewController () @end @implementation ViewController - (void)viewDidLoad {

60

1부 기초편

[super viewDidLoad];

UILabel *label = [[UILabel alloc] init]; label.text = @"HelloWorld"; [label sizeToFit]; label.center = self.view.center; [self.view addSubview:label];} - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; }

@end

2.3.7 프로젝트 실행 프로젝트 편집이 끝났으면 이제 실행해보자. 테스트할 디바이스는 ‘iPhone 6 ’를 선택해보자 (그림 2-11 ). 그림 2-11 아이폰 시뮬레이터 선택

그런 다음 좌측 상단에 있는 [RUN ] 버튼(▶)을 누르면 프로젝트가 실행된다. 우선 프로젝트 내의 소스 코드 컴파일이 시작된다. 컴파일할 때 오류가 일어나면 오류 메시지를 잘 읽고 틀린 부분을 찾아서 수정한다. 컴파일을 성공적으로 마치면 마침내 iOS 시뮬레이터가 실행되고 화 면 가운데 ‘HelloWorld’라는 문구가 표시된다(그림 2-12 ).

2장 하이브리드 앱 개발의 기반

61

그림 2-12 HelloWorld

2.3.8 실제 디바이스로 테스트하기 iOS용 앱을 실제 디바이스에서 개발하려면 개발자 프로그램에 가입해야 한다. 이 책에서는 개 발자 프로그램 가입에 관한 설명은 생략한다.

2.4 안드로이드 개발 환경 안드로이드는 구글이 제공하는 모바일 디바이스용 내장 운영체제다. 스마트폰과 태블릿뿐만 아니라 TV의 셋톱박스와 웨어러블 컴퓨터인 구글 글래스Google Glass 등에서 이용된다.

62

1부 기초편

안드로이드의 역사는 2003년 모바일 단말용 운영체제를 개발하는 안드로이드 사의 설립에서 부터 시작되었다. 안드로이드는 다음과 같이 세 가지 특징이 있다. ●●

소스 코드가 오픈소스이다.

●●

운영체제 커널로 리눅스 커널을 채용했다.

●●

애플리케이션은 달빅 가상 머신에서 동작한다.

개발 초기부터 안드로이드 코드는 아파치 2.0 라이선스로 공개되었다. 소스 코드는 아래 웹 사 이트에 공개되어 있다.

Android Open Source Project

●

http ://source.android.com

운영체제 커널로 리눅스 커널을 이용하므로 리눅스 명령어 일부는 안드로이드 셸에서 사용할 수 있다. 안드로이드 애플리케이션은 CPU에 의해 직접 실행되지 않고, 안드로이드 달빅 가상 머신에서 동작한다. 달빅 가상 머신은 .dex 형식으로 빌드된 앱을 해석하여 실행한다. 안드로 이드는 앱을 실행하면 새 달빅 가상 머신을 실행해서 애플리케이션 패키지를 읽어들인다. 안드로이드 사는 2005년에 구글에 인수되었고 개방형 휴대전화 동맹 OHAOpen Handset Alliance에 소속한 업체, 하드웨어 제조사, 휴대전화 망사업자를 통해 전 세계로 뻗어나갔다. 안드로이드 앱을 개발할 때는 프로그래밍 언어로 자바를 추천한다. 안드로이드 앱 개발 도구인 안드로이드 SDK는 자바로 기술한 클래스 파일을 .dex 형식으로 변환하여 앱으로 빌드한다. 따라서 자바를 프로그래밍 언어로 이용하지만 안드로이드 내부에서는 클래스 파일이나 자바 가상 머신JVM을 이용하지 않는다. 개발한 앱은 기본적으로 구글 플레이 스토어에서 배포한다. 앱을 배포하는 조건은 iOS만큼 엄 격하지 않고 서드 파티 제품의 애플리케이션 마켓에서 앱을 설치할 수도 있다. 지원하는 CPU는 ARM과 MIPS, x86이지만 보급된 안드로이드 기기의 CPU는 대부분 ARM 이다. 안드로이드 기기에 설치되는 앱은 달빅 가상 머신이 해석할 수 있는 바이트코드라면 문 제없으므로 앱을 CPU별로 다시 빌드할 필요는 없다. 2014년 발표된 안드로이드 5.0은 달빅 을 안드로이드 런타임ART으로 대체했다.

2장 하이브리드 앱 개발의 기반

63

2.4.1 안드로이드( 안드로이드 SDK + 이클립스) 개발 환경 구축 안드로이드에 관한 기본적인 설명을 마쳤으니 다음은 안드로이드 앱 개발 환경(그림 2-13 )을 구축하는 순서를 살펴보도록 하겠다. 개발 환경 구축은 다음과 같이 다섯 단계로 진행된다.

1 안드로이드 SDK를 설치한다.

2 이클립스로 안드로이드 앱 프로젝트를 작성한다.

3 에뮬레이터를 실행한다.

4 프로젝트를 실행해서 에뮬레이터로 확인한다.

5 실제 디바이스로 확인한다.

이 책은 Mac OS X에서의 안드로이드 앱 개발 환경 구축에 대해 소개하지만 윈도우나 리눅스 에서도 설치 순서는 거의 다르지 않다. 그림 2-13 안드로이드 앱 개발 환경

64

1부 기초편

2.4.2 필요 환경 안드로이드 앱 개발 환경에 필요한 사항은 다음과 같다. ●●

리눅스, 윈도우, Mac OS X 중 한 운영체제

●●

JDK (Java SE Development Kit )

안드로이드는 iOS 앱 개발과 달리 리눅스나 윈도우, Mac OS X용 멀티 플랫폼 환경을 제공한 다. 안드로이드 앱 개발에는 자바와 그 컴파일러를 부분적으로 이용하고 개발 환경 대부분은 자바로 기술된다. JDK에는 자바로 기술한 앱의 동작에 필요한 자바 가상 머신과 자바 컴파일 러가 포함된다. 따라서 이들 운영체제와 JDK를 설치해두면 개발에 전혀 문제가 없다.

JDK를 설치하려면 아래 사이트에서 JDK를 설치하면 된다. 이미 JDK가 설치되어 있다면 다 시 설치할 필요는 없다.

Java SE Development Kit 7 Downloads

●

http ://www .oracle .com/technetwork/java/javase/downloads/jdk8 - downloads 2133151.html

iOS에서는 실제 디바이스로 개발할 때 개발자 라이선스를 구입해야 하지만 안드로이드에서는 그럴 필요는 없다.

2.4.3 안드로이드 SDK 설치 안드로이드 앱 개발 환경을 갖추기 위하여 안드로이드 SDK를 설치한다. 이 안에는 실행하면 바로 이용할 수 있는 안드로이드 앱 개발 환경인 IDE, 안드로이드 디바이스에 관련된 개발 도 구, 라이브러리, 안드로이드 디바이스를 컴퓨터에서 재현하는 에뮬레이터 등 안드로이드 앱 개 발에 필요한 모든 것이 한꺼번에 갖추어져 있다. IDE에는 안드로이드 앱 개발용으로 미리 개 별화된 이클립스가 포함되어 있다. 안드로이드 SDK는 아래 사이트에서 [Download the SDK ] 버튼을 누르면 압축 파일을 내려 받아 설치할 수 있다(그림 2-14 ).

Android SDK Download

●

http ://developer.android.com/sdk/index.html

2장 하이브리드 앱 개발의 기반

65

그림 2-14 안드로이드 SDK 다운로드

압축 파일을 다 내려받았으면 임의의 장소에서 압축을 푼다.

이클립스 시작하기 압축을 푼 안드로이드 SDK 의 이클립스 디렉터리로 이동하여 이클립스를 실행한다(그림

2-15 ). 그림 2-15 이클립스 아이콘

66

1부 기초편

이클립스는 IBM에서 개발한 오픈소스 IDE다. 이클립스에 플러그인을 설치하는 방식으로 다 양한 플랫폼을 대상으로 하는 IDE를 제공할 수 있다. 안드로이드에서는 ADTAndroid Development 라는 안드로이드 앱 개발 플러그인을 제공한다.

Tool

안드로이드 SDK에 들어 있는 이클립스에는 미리 ADT가 포함되어 있으므로 이클립스를 실행 하면 곧바로 안드로이드 앱 개발을 시작할 수 있다.

이클립스 초기 설정 이클립스를 시작하면 워크스페이스workspace 설정을 요구하는 대화창이 표시된다(그림 2-16 ).

‘Workspace’에 디렉터리를 지정하고 [OK ]를 누른다. 그림 2-16 워크스페이스 설정

워크스페이스란 이클립스가 프로젝트와 이클립스 자체의 설정 파일을 저장하는 장소를 가리킨 다. 지정한 디렉터리 안에 metadata 디렉터리가 만들어지고 그 안에 이클립스 설정 파일이 보 존된다. 새롭게 프로젝트를 작성할 때에도 지정한 워크스페이스 디렉터리 아래에 프로젝트가 생성된다.

‘Use this as the default and do not ask again’에 체크해두면 다음 실행 시에 이 설정창은 표시되지 않는다.

2.4.4 프로젝트 생성 워크스페이스를 지정하고 이클립스를 시작하면 [그림 2-17 ]과 같은 ‘Welcome!’ 화면이 표시 된다.

2장 하이브리드 앱 개발의 기반

67

그림 2-17 이클립스 시작을 나타내는 ‘Welcome!’ 화면

[New Android Application...] 버튼을 누르면 새로 작성할 프로젝트의 기본 설정을 하는 대화창이 표시된다(그림 2-18 ). Welcome 창이 보이지 않을 때는 메뉴에서 File > New >

Android Application Project 를 선택하면 프로젝트 설정창이 열린다. ‘Application Name ’에는 애플리케이션 이름, ‘Project Name ’에는 프로젝트 이름을 입력한다. 둘 다 ‘HelloWorldExample’이라고 입력한 후 [Next ] 버튼을 누른다. 그림 2-18 새 프로젝트의 기본 설정 대화창 (1)

68

1부 기초편

다음 대화창에서는 [그림 2-19 ]처럼 설정한다. 프로젝트의 양식에 아이콘이나 액티비티의 코 드를 넣을지 선택한다. ‘Create activity’에 체크하는 것을 잊지 말자. 그림 2-19 새 프로젝트의 기본 설정 대화창 (2)

다음 대화창에서는 시작 아이콘에 관한 초기 설정을 한다. [그림 2-20 ]처럼 특별히 설정하지 않고 그대로 두어도 괜찮다.

2장 하이브리드 앱 개발의 기반

69

그림 2-20 시작 아이콘에 관한 초기 설정

다음은 액티비티를 미리 프로젝트에 작성해둘지를 설정하는 대화창이다. 액티비티 원형을 선 택할 수 있지만 여기서는 필요가 없으므로 빈 액티비티 코드를 생성하는 ‘Blank Activity’를 선 택한다(그림 2-21 ). 그림 2-21 액티비티에 관한 설정

70

1부 기초편

다음 대화창에서는 액티비티와 레이아웃의 이름을 설정한다. 여기서는 특별히 변경할 필요가 없으므로 [Finish ] 버튼을 클릭하기만 하면 된다. 프로젝트 작성을 완료하면(그림 2-22 ) 이 클립스의 안드로이드 앱 프로젝트 화면이 열린다. 그림 2-22 프로젝트 설정 화면

에뮬레이터 실행 안드로이드 SDK에는 안드로이드 디바이스를 컴퓨터에서 재현하는 에뮬레이터가 들어 있다. 에뮬레이터를 이용하면 앱 개발자는 실제 디바이스가 없어도 다양한 버전의 안드로이드 디바 이스를 시험해볼 수 있다. 안드로이드 에뮬레이터를 이용하려면 Android Virtual Device Manager를 사용하여 가상 장치virtual device를 추가해야 한다. ‘가상 장치’란 에뮬레이터의 시작 설정을 의미한다. 이클립스의 왼쪽 상단의 메뉴에서 에뮬레이터 아이콘(그림 2-23 )을 클릭하면 Android Virtual Device

Manager 대화창이 표시된다. ‘가상 장치에 포함되는 설정’에는 안드로이드의 버전, 해상도, 메모리 크기, 그 밖의 각종 설정 항목이 포함된다(그림 2-24 ).

2장 하이브리드 앱 개발의 기반

71

그림 2-23 에뮬레이터 아이콘을 클릭한다.

그림 2-24 Android Virtual Device Manager

대화창 우측 상단에 있는 [New..] 버튼을 누르면, 에뮬레이터를 시작하기 위한 새로운 설정을 추가할 수 있다. 여기서는 [그림 2-25 ]처럼 NexusOne으로 에뮬레이터의 시작 환경을 설정 하기로 한다.

72

1부 기초편

그림 2-25 에뮬레이터 시작 설정 추가

추가한 NexusOne의 Android Virtual Device 항목을 클릭하여 우측에 있는 [Start..] 버튼 을 누른다(그림 2-26 ). 그림 2-26 에뮬레이터를 시작한다.

2장 하이브리드 앱 개발의 기반

73

새로운 창이 표시되고 안드로이드 에뮬레이터가 시작된다(그림 2-27 ). 그림 2-27 실행된 안드로이드 에뮬레이터

안드로이드 에뮬레이터는 장치의 사양이나 운영체제의 동작을 모두 정확히 에뮬레이션한다.

iOS 시뮬레이터와는 달리 안드로이드 에뮬레이터는 안드로이드 디바이스의 CPU 등을 통째로 에뮬레이션하므로 동작이 느리다는 단점이 있다.

프로젝트 실행 이클립스에서 프로젝트를 실행하여 실제로 앱을 동작시켜 본다.

HelloWorldExample 프로젝트 디렉터리 선택 후 이클립스 맨 위에 있는 실행 버튼을 클릭한 다(그림 2-28 ).

74

1부 기초편

그림 2-28 이클립스 프로젝트 실행

잠시 뒤에 에뮬레이터에 앱이 설치되고 실행된다(그림 2-29 ). 그림 2-29 HelloWorldExample 앱

실제 디바이스로 확인 에뮬레이터와 구별하는 의미에서 실제 모바일 기기를 ‘실제 기기’ 또는 ‘실제 디바이스’라고 부 르자. 이클립스에서 실제 기기에 앱을 설치하여 확인하는 과정을 간단히 살펴보도록 하겠다.

2장 하이브리드 앱 개발의 기반

75

개발자 옵션 설정 이클립스로 안드로이드 앱을 설치해서 실행하려면 먼저 개발자 옵션의 USB 디버그 옵션을 활 성화해야 한다. 안드로이드에서 ‘환경 설정’ 앱을 실행한다.

1. 개발자 옵션을 표시한다 안드로이드 4.2 계열부터는 초기 상태에서 개발자 옵션이 표시되지 않는다. ‘설정’ 화면에 개발 자 옵션을 표시하려면 ‘환경 설정’에서 ‘휴대폰 정보(디바이스 정보)’ 화면으로 이동한다. 화면 에서 ‘빌드 번호’라는 항목을 탭한다. 그러면 화면에 ‘개발자 모드가 실행되었습니다’라는 메시 지가 표시되고 개발자 옵션 표시가 활성화된다(그림 2-30 ). 그림 2-30 개발자 옵션 표시

안드로이드 4.2 계열보다 이전 버전은 처음부터 설정 화면에 개발자 옵션 항목이 표시되어 있 다. 설정 화면에서 개발자 옵션을 선택하고 ‘USB 디버깅’에 체크하여 활성화하면 개발 중인 컴 퓨터와 실제 기기를 USB 케이블로 연결해서 확인할 수 있게 된다(그림 2-31 ).

76

1부 기초편

그다음으로는 ‘알 수 없는 소스’에 체크하여 활성화한다(그림 2-32 ). 안드로이드 2, 3계열에 서는 설정 화면의 ‘애플리케이션’에서 유효하게 할 수 있다. 안드로이드 4 계열에서는 설정 화 면의 ‘보안’ 화면에서 활성화한다. 그림 2-31 개발자 옵션에서 USB 디버깅 활성화

그림 2-32 ‘알 수 없는 소스’ 선택

2. USB 케이블로 개발 컴퓨터와 안드로이드 기기를 연결한다. 윈도우 환경에서는 안드로이드 기기와 컴퓨터를 연결하는 드라이버를 설치할 필요가 있다. 기 기의 종류에 따라 설치할 드라이버가 달라진다. 필요한 드라이버는 해당 기기 제조사의 홈페이 지에서 찾아보자.

Mac OS X 환경에서는 그대로 USB 케이블로 안드로이드 기기와 컴퓨터를 연결한다. 개발 용 기기가 제대로 연결되었는지 커맨드라인에서 adb devices 명령으로 확인한다. 안드로이 드 SDK가 설치된 디렉터리의 sdk/platform-tools 디렉터리 안에 adb 명령이 있다. adb 명령은 안드로이드 에뮬레이터와 실제로 USB로 연결한 안드로이드 기기의 다리가 되어주는

2장 하이브리드 앱 개발의 기반

77

명령이다. adb 명령을 통해 디바이스에 명령을 내보내거나 디바이스의 정보를 가져올 수 있다. $ cd /sdk/platform - tools $ ./adb devices - l

List of devices attached 0146B55A1200E010 device usb:26200000 product:yatjusc model:Galaxy _ Nexus device:magro

adb devices 명령은 컴퓨터에 연결된 안드로이드 기기 목록을 표시한다. 앞에서 실행했던 에 뮬레이터를 닫고 adb devices 명령을 실행해보자.

3. 프로젝트를 실행한다 이클립스에서 프로젝트를 실행하면 자동으로 기기에 앱이 설치되고 실행된다(그림 2-33 ). 그림 2-33 HelloWorldExample의 실행 결과

78

1부 기초편

2.5 정리 이 장에서는 하이브리드 앱 개발의 기반 기술에 대한 기본적인 지식을 설명하고 플랫폼별 개발 환경 구축 방법을 설명했다. 기반 기술에 관한 이해는 일반 앱 개발뿐만 아니라 하이브리드 앱 개발에도 도움이 된다. 왜냐 하면 크로스 플랫폼 앱을 개발할 수 있다고 해도 각 플랫폼의 차이와 특징이 없어지는 것은 아 니기 때문이다. 또한 하이브리드 앱 개발뿐만 아니라 네이티브 앱 개발 환경을 알아두면 하이 브리드 앱 개발 환경을 어떻게 구축할지 원활하게 이해할 수 있게 된다.

2장 하이브리드 앱 개발의 기반

79

CHAPTER

3

하이브리드 앱 개발을 위한 프레임워크

HTML5 하이브리드 앱을 개발하는 간단한 방법은 하이브리드 앱 개발 프레임워크를 이용 하는 것이다. 이 장에서는 하이브리드 앱 개발 프레임워크의 역할과 어떤 프레임워크가 있 는지 살펴보도록 하겠다.

3장 하이브리드 앱 개발을 위한 프레임워크

81