오픈소스 프레임워크인 폰갭을 이용해 iOS, 안드로이드, 블랙베리 웹웍스에서 실행되는 크로스플랫폼 모바일 애플리케이션을 개발한다. 표준 웹 기술인 HTML5, CSS3, 모바일 자바스크립트를 사용해 개발하고, 웹 브라우저와 개발자 도구를 사용해 테스트와 디버깅을 하며, 폰갭을 통해 네이티브 모바일 앱을 빌드하는 전 과정을 예제를 통해 설명한다. 또한 각 모바일 플랫폼에 있어서 고려해야 할 사항과 모바일 앱에 필요한 실전 기법들을 제시한다.

● HTML5, CSS3, 모바일 자바스크립트의 전문 지식 습득
● 원격 서버 동기화와 오프라인 작동 가능한 앱 개발
● 센서, 카메라, 연락처 API를 사용한 기기 고유의 기능 이용
● 플러그인 사용과 개발을 통한 폰갭의 기능 확장


[ 소개 ]

폰갭 모바일 애플리케이션 프레임워크 실전 활용 가이드

『PhoneGap 한국어판』은 iOS, 안드로이드, 블랙베리 등의 멀티플랫폼을 대상으로 하는 단일 애플리케이션 개발을 위해 폰갭 모바일 개발 프레임워크를 사용하는 방법을 보여준다. 폰갭을 사용하면 업계에 있는 모든 플랫폼 개발 환경을 새로 배울 필요 없이 이미 보유 중인 웹 개발 기술을 활용해 앱을 개발할 수 있다.


[ 이 책에서 다루는 내용 ]

■ HTML5와 CSS3를 사용해 풍부한 상호작용이 가능한 앱 개발
■ 어디서나 사용할 수 있는 모바일 자바스크립트 전문 지식
■ 웹 개발 기술과 네이티브 코드를 활용해 원격 서버와 동기화하며 오프라인에서도 작동이 가능한 설치형 웹앱 개발
■ 실시간 센서 데이터를 이용한 애플리케이션 경험 증진
■ 애플리케이션에 카메라와 이미지를 연계함으로서 사용자 경험 증진
■ 완전한 네이티브 상호작용을 위한 기기 고유의 연락처 데이터에 접근
■ 정확하고 능숙하게 기기를 식별함으로써 점진적인 사용자 인터페이스 보강


[ 이 책의 대상 독자 ]

이 책은 모바일 웹이나 모바일 애플리케이션을 개발해본 경험이 없는 중급 수준의 웹 개발자에게 가장 적합하다. 네이티브 모바일 SDK 개발 경험은 필요하지 않다.


[ 이 책의 구성 ]

1장, 폰갭 설치에서는 iOS, 안드로이드, 블랙베리 플랫폼을 위한 다중 개발 환경을 구성하는 과정을 도와준다. 1장을 완료하면 폰갭 애플리케이션을 즉시 개발할 수 있는 환경이 갖춰진다.

2장, 멀티플랫폼 빌드와 디버깅에서는 1장에서 구성한 환경을 활용해 멀티 플랫폼을 위한 코드를 한 번에 신속하고 효율적으로 만들 수 있는 방법을 설명한다. 또한 모바일 개발에 데스크탑 브라우저를 활용하는 방법도 보여준다.

3장, 모바일 웹에서 모바일 앱으로에서는 폰갭 개발에 있어서의 핵심인 애플리케이션 설계와 아키텍처의 변경 방법을 설명한다. 특히 대부분의 상호작용을 웹 서버에 의존하지 않는 폰갭 애플리케이션을 작성하는 방법도 알아본다.

4장, 크로스플랫폼 기반 코드 관리에서는 특징 탐지와 브라우저 스니핑 등의 일반적인 웹 기술을 사용해 멀티플랫폼에 배포할 수 있는 코드의 관리 방법을 알아본다.

5장, HTML5 API와 모바일 자바스크립트에서는 HTML5를 지원하는 브라우저에서 작동 가능하며, 동시에 최신 모바일 기기에서도 일반적으로 지원되는 자바스크립트 API를 살펴본다. 또한 코드 관리에 유용한 모바일 자바스크립트 라이브러리도 알아본다.

6장, CSS3 트랜지션, 트랜스폼, 애니메이션에서는 폰갭 애플리케이션의 모양과 느낌을 맵시 있게 바꿔주는 CSS의 새로운 기법을 알아본다.

7장, 센서에서는 폰갭 애플리케이션에서 위치 정보나 가속도계 정보를 이용할 수 있게 폰갭의 센서 접근 기능을 알아본다.

8장, 카메라에서는 폰갭 API를 사용해 사용자의 사진 앨범과 카메라에 접근해 그 결과를 애플리케이션에서 이용할 수 있는 방법을 알아본다.

9장, 연락처에서는 폰갭의 연락처 API를 사용해 사용자의 기기에 저장돼 있는 주소록에 접근하고 폰갭 애플리케이션에서 이용하는 방법을 알아본다.

v10장, 폰갭 플러그인에서는 폰갭의 핵심 API에서 제공되지 않는 iOS, 안드로이드, 블랙베리의 고유 기능에 접근할 수 있는 플러그인을 제작해본다.

11장, 오프라인 동기화와 캐싱에서는 약간의 서버 코드를 작성하는 것만으로 폰갭 애플리케이션이 오프라인에서 얻은 데이터를 로컬이나 원격으로 관리하는 방법을 보여준다.

부록 A, iOS 배포 방법에서는 애플의 개발자 인증을 취득해 시뮬레이터에 머물러 있던 애플리케이션을 앱 마켓으로 보내는 방법을 설명한다.

[ 저자 서문 ]

이 책 『Phonegap 한국어판』에서는 모바일 애플리케이션 개발을 위한 오픈소스이며 크로스플랫폼 프레임워크인 폰갭을 소개한다. 폰갭을 사용하면 HTML, CSS, 자바스크립트 같은 이미 보유한 웹 개발 기술을 활용해, 하나의 기반 코드로 iOS, 안드로이드, 블랙베리 등 다수의 플랫폼을 위한 네이티브 애플리케이션을 개발할 수 있다. 폰갭을 사용하면 웹 사이트를 개발할 때 얻을 수 있는 이점, 예컨대 다양한 고객에게 배포할 수 있는 동일한 이점을 그대로 얻을 수 있다.


[ 저자 소개 ]

앤드류 루니 (Andrew Lunny)
캐나다 밴쿠버의 니토비 소프트웨어(Nitobi Software)에서 초보 팀장을 맡고 있는 소프트웨어 개발자다. 잔인한 상어의 공격으로 전도유망한 서퍼 생활을 접은 이후 니토비에서 4년 이상 근무했다. 또한 폰갭 빌드(PhoneGap Build) 웹 서비스의 수석 개발자이자 만능선수이자, 폰갭 팀의 멤버이며, 폰갭 관련 기술에 10년 이상의 경험이 있다. 루비, 자바스크립트, 유닉스, 깃(Git), 인터넷을 좋아한다.
니토비는 앙드레 샬랜드(Andre Charland), 데이브 존슨(Dave Johnson), 브라이언 르루(Brian Leroux)가 이끄는 소프트웨어 회사로, 크로스플랫폼 모바일 개발과 설계 분야의 전문 회사이며, 폰갭 오픈소스 프로젝트의 스폰서다. 2011년 10월에는 어도비(Adobe) 사에서 인수했다.
앤드류는 여가 시간에 사이클, 달리기, 걷기, 점프를 즐긴다. 브리티시 컬럼비아 주립대학교로부터 그와 별로 연관이 없을 것 같은 두 개의 학위를 받았다.


[ 옮긴이의 말 ]

최근 2~3년 사이 모바일 앱은 네이티브 앱(Native App)에서 웹앱(Web App)으로, 그리고 하이브리드 앱(Hybrid App)으로 경향이 바뀌어감을 느낍니다. 특히 2011년은 제이큐터치(jQTouch), 제이쿼리 모바일(jQuery Mobile), 센차터치(Sencha Touch) 등의 웹앱 프레임워크와 티타늄(Titanium), 폰갭(PhoneGap), 앱스프레소(Appspresso) 등의 하이브리드 앱 프레임워크가 많은 인기를 얻었습니다. 하이브리드 앱 프레임워크의 경우 HTML5, CSS3, 자바스크립트 등 이미 익숙한 표준 웹 기술을 사용해 완벽한 네이티브 앱을 만들 수 있는 폰갭이 가장 많은 사랑을 받는 듯합니다. 폰갭은 오픈소스이며, 7개의 모바일 플랫폼을 지원하고, 네이티브 API 접근이 가능하며, 플러그인을 통한 확장을 지원합니다.

한마디로, 웹으로 개발해 네이티브 앱을 만든다는 말인데, 이 경우 웹 표준, 모바일 브라우저, 모바일 OS, 각종 라이브러리 등의 빠른 발전으로 인해 개발도 개발이지만, 개발 환경 구성과 플랫폼 특성에 따른 설정과 개발 기법 등이 개발자에게 주된 장애물입니다. 이 책은 폰갭을 사용해 진정한 크로스플랫폼 앱을 만드는 데 필요한 사항들을 모두 설명합니다. 그러나 워낙 빠르게 발전하는 분야인지라 이 책을 번역할 당시에도 이미 원서에서의 상황과는 다소 달라져 있었으며, 지금 이 책을 볼 때에는 또다시 달라진 부분이 생겼을 것입니다. 하지만 이 책의 내용을 바탕으로 그런 달라진 부분을 스스로 해결하는 데는 큰 문제가 없을 것으로 생각되며, 에이콘 홈페이지를 통해 저와 여러분이 함께 극복해 갈 수 있다고 믿습니다.

여러분은 항상 최신 버전의 소프트웨어를 사용하기 바라며, 다만 참고로 제가 기준으로 삼은 주요 소프트웨어의 버전은 다음과 같습니다.

• 맥 OS X 10.7.2
• 사파리 5.1.2
• 폰갭 1.2.0
• 엑스코드 4.2(with iOS SDK 5.0)
• 안드로이드 SDK r15
• 블랙베리 웹웍스 2.1.1.38
• XUI 2.3.2
• 머스테쉬(Mustache) 0.5
• 아이스크롤(iScroll) 4.1.9
• 시내트라(Sinatra) 1.3.2

원서와는 다른 버전을 기준으로 번역을 진행함에 따라 원서의 내용뿐만 아니라 예제 코드도 변경된 부분들이 많습니다. 한국어판에 맞는 완성된 소스코드는 반드시 에이콘 홈페이지에서 다운로드하시기 바랍니다. 이 책의 예제 검증과 문제 해결에 도움을 주신 문혁찬 님께 감사드립니다.

이 책과 함께 폰갭으로 여러분의 모바일 개발에 날개를 달 수 있기를 바랍니다.


[ 옮긴이 소개 ]

이태상
생물정보학(bioinformatics)을 계기로 프로그래밍과 인연을 맺었다가 아예 IT 업계로 뛰어들었다. 다년간 교육과 컨설팅 등 JavaEE 전문가로 활동했으며, 금융권 차세대 시스템 구축 프로젝트의 총괄 업무를 거쳐, 현재 전자금융 시스템을 운영 중이다. 최근 개인적인 관심사는 모바일 앱 개발과 영상 편집이다. 두 아이의 아빠이며, ‘개념을 탑재한’ 기성 세대가 되고픈 평범한 컴쟁이다. 에이콘출판사에서 출간한 『톰캣 최종분석』(2005), 『JSF 인 액션』(2006), 『스프링 인 액션』(2006), 『자바 개발자를 위한 오브젝티브C』(2010), 『Professional iPhone and iPad Application Development 한국어판』(2011)을 번역했다.

목차

• 1 폰갭 설치
  • 운영체제
    • 필수 도구
    • iOS로 시작하기
      • 실습 예제 | 아이폰 시뮬레이터에서의 앱 실행
    • 아이폰용 폰갭
      • 실습 예제 | Hello World 폰갭 아이폰 애플리케이션
    • 안드로이드로 시작하기
      • 개발 환경에 대해
        • 실습 예제 | SDK 실행
      • 폰갭 안드로이드용
        • 실습 예제 | Hello World 폰갭 안드로이드 애플리케이션
      • 폰갭 안드로이드 애플리케이션 안에는?
    • 블랙베리 웹웍스로 시작하기
      • 실습 예제 | 첫 번째 폰갭 블랙베리 앱
    • 블랙베리 코드 서명
  • 정리
    
• 2 멀티플랫폼 빌드와 디버깅
  • 데스크탑 브라우저용 설계
    • 웹킷
  • 첫 번째 애플리케이션: You Are The Best
    • 실습 예제 | 초기 설계와 기능
  • 워크플로우
  • 스타일
    • 겸손한 CSS
    • 너비와 높이
    • -webkit-border-radius
  • 스크립트
    • 겸손한 스크립트
    • addEventListener
    • DOMContentLoaded
  • 웹 인스펙터의 사용
    • 웹 인스펙터의 실행
      • 실습 예제 | 간단한 로깅과 에러 확인
  • 네이티브 플랫폼으로의 이동
    • 실습 예제 | 아이폰용 You Are The Best
  • <meta name="viewport">
  • phonegap.js
  • deviceready
• 정리
  

3 모바일 웹에서 모바일 앱으로

• 웹 서버 기능 구현
  • 실습 예제 | 로컬 저장소 구현
• 다른 저장소
  • Web SQL
  • Indexed DB
• 뷰의 템플릿화
  • 실습 예제 | 음식 상세 보기
• 원격 자원 접근
  • 크로스 오리진 정책
    • 실습 예제 | 음식 이야기
• 원격 자원 접근
  • 원격 데이터 파싱
  • 이벤트 위임
  • 슬라이트: 폰갭 개발 서버
• 정리
  

4 크로스플랫폼 기반 코드 관리

• 플랫폼 고유의 차이
  • 단일 기반 코드 사용
    • 실습 예제 | 탐지와 대비
  • 브라우저 정보 알아내기
  • 특성 탐지
  • 미디어 쿼리
  • 코드 전처리
• 정리
  

5 HTML5 API와 모바일 자바스크립트

• 모바일 자바스크립트
  • XUI
    • 실습 예제 | XUI 다운로드, 빌드, 사용
  • 제이쿼리를 사용하지 않은 이유
• HTML5
  • 미디어 요소
    • 실습 예제 | 폰갭과의 만찬
  • 미디어 이벤트와 속성
  • 오디오 요소
• 캔버스 요소
  • 실습 예제 | 만찬 대시보드
• 캔버스 API
• 성능에 관한 첨언
• HTML5에 있는 기타 기능

정리

6 CSS3 트랜지션, 트랜스폼, 애니메이션

• 트랜지션을 사용한 변환
  • 실습 예제 | 모달 트윗 뷰
• 타이밍 함수
• 여타 트랜스폼

스크롤

• 뷰포트
• iScroll
  • 실습 예제 | 음식 목록 스크롤
• 다른 접근 방법

명시적 애니메이션

• 실습 예제 | 헤드라인 애니메이션

CSS와 HTML5

정리

7 센서

• 센서 소개
  • 실습 예제 | 엽서 쓰기
• 폰갭과 HTML5
• 다른 위치 정보 데이터

가속도 센서

• 실습 예제 | 흔들기 감지

기기의 방향과 모션

오리엔테이션 미디어 쿼리

• 실습 예제 | 가로 방향 엽서

다른 미디어 쿼리

자력계: 빼먹은 API

정리

8 카메라

• 실습 예제 | 카메라 API를 사용한 Hello World

브라우저는 에뮬레이터나 실제 기기와는 다르다

이미지 소스

기타 옵션

이미지를 얻은 이후의 일

• 실습 예제 | 파일 경로 보여주기

이미지 위치

원본 이미지 데이터

• 실습 예제 | 사진 저장

확실한 품질 설정

라이브 데이터의 사용

정리

9 연락처

• 실습 예제 | navigator.service.contacts.find

ContactFields

연락처 데이터 작성

• 실습 예제 | 친구 만들기

새로운 문제가 발생하면?

ContactField, ContactName 등과 같은 객체

책임을 져라

정리

10 폰갭 플러그인

• 폰갭 플러그인 얻기
  • 실습 예제 | ChildBrowser
• 플랫폼의 차이점
• 플러그인 찾기

폰갭 플러그인 작성

• 실습 예제 | 배터리 뷰

iOS용 폰갭 플러그인에서 알아두면 좋은 정보

플러그인 포팅

• 실습 예제 | 안드로이드와 블랙베리

크로스플랫폼 플러그인

무제한

정리

11 오프라인 동기화와 캐싱

• 루비와 시내트라
  • 실습 예제 | 뉴스 사이트
• 시내트라의 대안

뉴스 캐싱

• 실습 예제 | 로컬 데이터베이스에 뉴스 캐싱

애플리케이션 초기화 관리

정리

부록 A iOS 배포 방법

• 실습 예제 | 기기로 배포하기
  

부록 B 깜짝 퀴즈 정답

• 1장
  • 아이폰용 폰갭 기초
• 2장
  • 초기 설계
• 3장
  • 머스테쉬를 사용한 템플릿화
• 4장
  • 특성 탐지와 브라우저 정보 얻기
• 5장
  • XUI
  • 미디어 요소
• 6장
  • 스크롤
• 7장
  • 위치 정보
  • 방향 회전과 미디어 쿼리
• 8장
  • navigator.camera.getPicture
  • destinationType
• 9장
  • 연락처
• 10장
  • 폰갭 플러그인 사용하기
  • 폰갭 플러그인 만들기
• 11장