• 실전! 하이브리드 앱 개발을 위한 폰갭 프로그래밍

  • 정우진, 윤동원 지음

  • 임베디드 & 모바일 시리즈 _ 021
  • ISBN: 9788992939652
  • 25,000원 | 2012년 03월 30일 발행 | 416쪽



최신 버전의 폰갭을 활용한 실전 하이브리드 앱 개발!

폰갭은 HTML5, CSS, 자바스크립트와 같은 웹 기술을 이용해 최대 7가지 모바일 플랫폼에서 동작하는 앱을 만들 수 있는 하이브리드 앱 프레임워크이다.

이 책은 폰갭을 처음 대하는 초보자도 Objective-C나 자바에 대한 지식 없이 폰갭의 설치부터 애플리케이션의 개발, 앱스토어와 안드로이드 마켓 등록까지 손쉽게 따라 할 수 있도록 구성돼 있다. 또한 가장 최근 버전인 폰갭 1.5.0(Cordova)의 변경 사항을 반영하여 가장 최신 정보를 제공하고, 언제든 폰갭 API의 사용법을 찾아볼 수 있는 폰갭 API 레퍼런스 가이드로도 유용하게 사용할 수 있다.

또, 폰갭 기능의 확장을 위한 플러그인의 설정 방법과 트위터, 인스타그램 인증 절차의 구현 과정을 통해 플러그인의 실제 사용 방법을 살펴보고, 폰갭을 이용한 Photo Onit! 애플리케이션을 개발하는 과정과 소스 코드에 대해 설명한다. 더불어 개발된 애플리케이션을 앱스토어와 안드로이드 마켓에 실제 등록하는 방법까지 살펴볼 수 있도록 구성하였다.

폰갭은 HTML5, CSS, 자바스크립트와 같은 웹 기술을 이용해 아이폰, 안드로이드뿐 아니라 윈폰, 블랙베리, 웹오에스, 심비안과 삼성 바다용 앱을 만들 수 있는 하이브리드 앱 프레임워크입니다. 폰갭은 모든 소스코드와 수많은 플러그인의 소스코드가 공개돼 있어 전 세계의 수많은 개발자들이 선호하고 있습니다.

이 책은 폰갭을 처음 접하는 초보자도 오브젝티브-C나 자바에 대한 지식 없이도 폰갭의 설치부터 애플리케이션 개발, 앱스토어와 안드로이드 마켓 등록까지 손쉽게 따라 할 수 있게 구성돼 있습니다. 최신 버전인 폰갭 1.5.0(Cordova)의 변경사항을 반영해 최신 정보를 제공하며, 언제든 폰갭 API의 사용법을 찾아볼 수 있는 폰갭 API 레퍼런스 가이드로도 유용하게 활용할 수 있습니다.

★ 이 책에서 다루는 내용

  • 폰갭 사용을 위한 아이폰, 안드로이드 개발 환경 설정
  • 폰갭 API 사용법
  • 폰갭 플러그인 설정 방법 및 사용 예제
  • 차일드브라우저 플러그인을 이용한 트위터, 인스타그램 인증 절차
  • 페이스북 플러그인 설정 및 사용 예제
  • 폰갭을 이용한 Photo Onit! 애플리케이션 개발 및 앱스토어, 안드로이드 마켓 등록 절차

정우진

한양대학교에서 전자통신공학을 전공했고 삼성전자에서 CDMA 모바일 소프트웨어를 개발하며 사회생활을 시작했다. 피처폰, 스마트폰의 개발을 경험하였고 앞으로는 HTML5와 하이브리드 앱 프레임워크가 새로운 기술적 진보를 이루어낼 것이라 생각하고 있다. 현재는 트루모바일의 대표이사로 새로운 하이브리드 앱 프레임워크 개발을 진행하고 있다.

윤동원

한양대학교에서 전자통신공학을 전공했고, 현재 한양대학교 융합전자공학부 교수로 재직하고 있다.

 

서문

아이폰이 발표되면서 모바일 세상이 통째로 바뀌고, 뒤이어 안드로이드가 합세하면서 모바일 제조업체의 운명마저 바꿔 놓았습니다. 지난 몇 년간 이런 엄청난 변화의 한 가운데서 개발자는 새로운 언어를 배우고 자기가 만든 애플리케이션을 앱스토어에서 직접 판매해서 수익을 얻을 수 있다는 사실에 새로운 전의(!)를 불태웠습니다. 아이폰과 안드로이드의 등장은 이처럼 개발자의 의지를 불태우는 좋은 기회가 되었을 뿐더러 새로운 창업의 열기도 다시 뜨겁게 만드는 긍정적인 효과를 보여줬습니다.

기업의 입장에서 본다면 스마트폰이 대세가 된 환경에서 자기 회사가 제공하는 서비스를 스마트폰을 통해 더 확산하고 새로운 소비자를 만들어낼 수 있을 뿐 아니라 모바일의 실시간, 즉시성이라는 특성을 잘 이용하면 기존의 서비스를 더욱 확대할 절호의 기회라 생각할 것입니다. 많은 서비스의 사례를 살펴봐도 스마트폰 환경을 적극적으로 활용하고 접목하는 서비스와 그렇지 못한 서비스의 운명은 극명하게 대비되고 있습니다.

이렇게 아이폰과 안드로이드가 기업의 서비스를 확대할 수 있는 기회를 제공하지만 개발자 입장에서 보면 아이폰 애플리케이션을 개발하기 위해 Objective-C를 알아야 하고 안드로이드용 애플리케이션을 개발하기 위해서는 자바를 공부해야 하는 수고가 뒤따르는 것이 사실입니다. 또 기업 입장에서는 각 플랫폼별로 별도의 애플리케이션을 유지하는 것은 비용 측면에서 이중의 투자를 해야 하는 것이 현실입니다.

폰갭은 HTML5, CSS, 자바스크립트와 같은 상대적으로 쉬운 웹 기술을 이용해 아이폰, 안드로이드, 윈폰, 블랙베리, 웹오에스, 심비안뿐 아니라 삼성 바다용 애플리케이션까지 동시에 만들어낼 수 있는 하이브리드 앱 프레임워크입니다. 이러한 하이브리드 앱 프레임워크는 개발자가 좀 더 손쉽게 다양한 플랫폼을 지원하는 애플리케이션을 빠른 시간 내에 만들어낼 수 있을뿐더러 기업 입장에서도 원소스 멀티유즈(one source, multi use)를 실현하기 때문에 유지보수 비용을 획기적으로 절감할 수 있습니다. 또한 개발자나 기업이 기술이 아니라 사용자에게 제공하려는 서비스의 본질에 좀 더 집중할 수 있는 기회를 제공하기도 합니다.

올해부터는 이미 많은 분들이 이야기하듯 HTML5가 또 한 번 모바일 비즈니스의 변화를 가져올 거라고 예측하고 있습니다. HTML5의 확산은 또한 하이브리드 앱 프레임워크의 기술에도 많은 영향을 주고 이 영향은 곧바로 개발자와 IT 업계에 다시 한번 변화를 일으킬 것으로 생각합니다. 그리고 폰갭이 그러한 변화의 중심에 있을 것입니다.

개발자들에게 새로운 환경과 기술의 등장은 개발자 본연의 전의를 불태우는 계기가 되기도 하지만 가끔은 "아, 또야? 이번엔 또 뭐냐?"라는 걱정 반 근심 반의 한숨이 가슴속 깊은 곳에서 터져 나올 수도 있을 것입니다. 하지만 다행스럽게도 폰갭을 포함한 대부분의 하이브리드 앱 프레임워크는 HTML5. CSS, 자바스크립트같은 비교적 쉬우면서도 조금은 고전적인 기술을 사용한다는 측면에서 오히려 개발자들이 쉽게 접근할 수 있을 것입니다. 더군다나 이렇게 익숙한(!) 기술로 개발한 코드로 수많은 플랫폼을 동시에 지원할 수 있다니 더더욱 다행입니다. 새로운 플랫폼이 등장하더라도 플랫폼에 대한 지원은 프레임워크 개발자나 개발사에서 하게 될 것이고 애플리케이션 개발자는 그저 이미 개발된 코드를 조금 다듬기만 하면 될 테니 새로운 플랫폼을 이해하고 똑같은 앱을 다시 개발하는 에너지를 쏟아붓지 않아도 될 것입니다. 따라서 개발자라면 하이브리드 앱 프레임워크 기술을 "이 또한 지나가리라!"라고 여기며, 놓쳐버리지 말고 적극적으로 기술의 장점을 파악하고 실무에 적용해보는 노력을 기울이길 당부합니다.

이 책이 이러한 개발자의 노력에 작은 도움이 되길 바랍니다.

  • 01장 소개
    • 모바일 웹앱? 하이브리드 앱?
    • 하이브리드앱 개발을 위한 폰갭 소개
    • 이 책의 구성
    •  
  • 02 폰갭 내려받기 및 설치
    • 폰갭 내려받기
    • iOS용 개발환경 설정
      • 1단계. Xcode 설치
      • 2단계. 폰갭 설치
      • 3단계. 폰갭 기반 프로젝트 만들기
      • 4단계. 시뮬레이터에서 실행하기
      • 5단계. www 폴더 추가하기
      • 6단계. 시뮬레이터에서 실행하기
      • 7단계. 외부 서버 접속을 위한 화이트리스트 추가
      • 8단계. iOS디바이스에서 실행하기
    • 안드로이드용 개발 환경 설정
      • 1단계. 안드로이드 개발 환경 내려받기 및 설정
      • 2단계. 안드로이드용 폰갭 파일 확인
      • 3단계. 새로운 프로젝트 만들기
      • 4단계. 폴더 추가하기
      • 5단계. 자바스크립트 파일 복사
      • 6단계. jar 파일 복사하기
      • 7단계. xml 폴더 복사
      • 8단계. 프로젝트 메인 자바 파일 수정하기
      • 9단계. jar 파일 추가하기
      • 10단계. AndroidManifest.xml 수정하기
      • 11단계. index.html 만들기
      • 12단계. 시뮬레이터에서 실행하기
      • 13단계. 안드로이드 단말기에서 실행하기
    •  
  • 03장 폰갭에서 지원하는 API
    • 폰갭 API 요약
    • 폰갭 API 예제 - 모바일 앱 만들기
      • 모바일 앱 UI를 위한 jQuery Mobile
      • jQuery Mobile 내려받기와 적용
      • jQuery Mobile을 이용한 페이지 구성
      • 폰갭 API 예제 모바일 애플리케이션 폴더 구성
      • 폰갭 API 예제 모바일 앱의 HTML과 자바스크립트 파일
      • 폰갭 API 모바일 애플리케이션의 index.html
    • 단말기 정보(Device)
      • 단말기 정보 API 및 관련 객체
      • 단말기 정보 API 사용 예
    • 카메라
      • 카메라 API 및 관련 객체
      • 카메라 API 사용 예
    • 위치 정보(Geolocation)
      • 위치 정보 API 및 관련 객체
      • 위치 정보 API 사용 예
    • 가속도 센서(Accelerometer)
      • 가속도 센서 API 및 관련 객체
      • 가속도 센서 API 사용 예
    • 캡처(Capture)
      • 캡처 API 및 관련 객체
      • 캡처 API 사용 예
    • 방향 정보(Compass)
      • 방향 정보 API 및 관련 객체
      • Compass API 사용 예
    • 네트워크 연결(Connection)
      • 네트워크 연결 API 및 관련 객체
      • 네트워크 연결 API 사용 예
    • 연락처(Contacts)
      • 연락처 API 및 관련 객체
      • 연락처 API 사용 예
      • 파일(File)
      • 파일 시스템 객체, 파일 시스템 접근의 시작
      • 디렉터리 객체
      • 디렉터리 내용 읽기
      • 파일 객체
      • 개별 파일 정보 객체
      • 개별 파일 내용 읽기 및 쓰기
      • 파일 전송하기
      • 파일 API 사용 예
    • 미디어(Media)
      • 미디어 API 및 관련 객체
      • 미디어 API 사용 예
    • 알림(Notification)
      • 알림 API 및 관련 객체
      • 알림 API 사용 예
    • 저장소(Storage)
      • 저장소 API 및 관련 객체
      • 저장소 API 사용 예
    •  
  • 04장 이벤트
    • 폰갭이 지원하는 이벤트
    • 이벤트 처리 예제
    •  
  • 05장 폰갭 플러그인
    • 폰갭 플러그인 소개
    • iOS용 플러그인 설치 절차
    • 안드로이드용 플러그인 설치 방법
    • 차일드브라우저 플러그인 설치 및 사용 예
      • iOS용 차일드브라우저 플러그인 설치
      • 안드로이드용 차일드브라우저 플러그인 설치
      • 차일드브라우저 플러그인 메서드
    •  
  • 06장 폰갭을 이용한 SNS 인증 및 매쉬업 개발
    • 트위터 매쉬업 애플리케이션 개발
      • 트위터의 oAuth 인증 절차
      • jsOAuth와 차일드브라우저를 이용한 트위터 인증 구현
      • jsOAuth 자바스크립트 라이브러리
    • 차일드브라우저를 이용한 인스타그램 oAuth 인증 방법-
    •  
  • 07장 폰갭을 이용한 하이브리드 앱 실전 개발
    • 페이스북 커넥트 플러그인을 이용한 페이스북 인증
      • 안드로이드용 페이스북 커넥터 플러그인 적용하기
      • 아이폰용 페이스북 커넥터 플러그인 적용하기
    • Photo Onit!의 기능 및 구현
    • Photo Onit! 동작 흐름
    • Photo Onit! 프로젝트 폴더 구성 및 소스 파일
    • Photo Onit! 소스코드
    • Photo Onti! 서버 스크립트 소스코드
    •  
  • 08장 애플 앱스토어 등록 및 판매 절차
    • 애플 앱스토어 등록 준비
      • Xcode에서 시작 이미지(Launch Images) 변경
      • 애플리케이션 아이콘 변경
      • 애플리케이션 이름 변경
    • 애플 앱스토어 등록 절차
    •  
  • 09장 안드로이드 마켓 등록 및 판매 절차
    • 안드로이드 마켓 등록을 위한 준비
      • 애플리케이션 이름 변경
      • 패키지 이름 변경
      • 화면 세로 모드만 지원하기
      • 애플리케이션 론처 아이콘 바꾸기
    • 안드로이드 마켓 등록 절차
      • One more thing...

관련 글


엮인 글

엮인 글 주소: http://wikibook.co.kr/phone-gap/trackback/