Do it! Beginning Web Apps & Hybrid Apps. 1~11p

Do it! 세상의 속도를 따라잡고 싶다면

쉽게 배우 는

웹앱&하 이브리드 앱 HTML5 , CSS3 부터 JQ uery 모 바일, 폰 갭, 앱 등 록까지 완전정복 김응석 지음

Do it! 세상의 속도를 따라잡고 싶다면

Do it! 쉽게 배우는 웹앱 & 하이브리드앱 초판 인쇄 • 2012년 3월 25일 초판 1쇄 발행 • 2012년 3월 29일 지은이 • 김응석 펴낸이 • 이지연 펴낸곳 • 이지스퍼블리싱(주) 출판사 등록번호 • 제313-2010-123호 주소 • 서울시 마포구 서교동 375-13 성지빌딩 301호 대표 전화 • 02-325-1722 / 팩스 • 02-326-1723 홈페이지 • www.easyspub.co.kr / 이메일 • service@easyspub.co.kr 기획 및 책임 편집 • 비스퀘어 / 디자인 및 전산편집 • 조서봉 / 교정교열 • 박명희 인쇄 및 제본 • 이펙P&B / 영업 및 강의 자료 PPT 문의 • 이주동(nlrose@easyspub.co.kr)

• 잘못된 책은 구입한 서점에서 바꿔 드립니다.

• 이 책에 실린 모든 내용, 디자인, 이미지, 편집 구성의 저작권은 이지스퍼블리싱(주)과 지은이에게 있습니다. 허락 없이 복제할 수 없습니다.

ISBN 978-89-97390-04-5 13560 가격 30,000원

꿈꿀 수 있다면 실현할 수 있습니다.

If you can dream it, you can do it.

월트 디즈니

Walt Disney

[머리말]

“나도 앱을 만들 수 있을까?” 불가능해 보였던 꿈이 현실이 된다! ‘스마트’ 세상 안에 나만의 앱을 하나쯤 가져볼 수 있다면? 스마트폰, 스마트 TV, 스마트 가전 등 대한민국은 ‘스마트’가 점령했다고 해도 과언이 아닐 정도로 날마다 새로운 제품과 광고를 접하는 것이 오히려 자연스러운 세상이 되었습니다. 특히 스마트 라이프를 견인한 스마트폰 덕분에 예전에는 옆에 있는 컴퓨터도 켜는 것이 귀찮아 포기했던 많은 것들이 스마트폰 덕분에 가능해져 우리의 생활을 180도 바꿔놓았습니다. 이런 스마트폰의 세상 속에서 남이 만든 앱(Application)만 쓰지 말고 나만의 앱을 손쉽 게 만들 수는 없을까? 내가 만든 앱을 앱스토어나 안드로이드 마켓에 올려 다른 사람들도 다운받을 수 있게 할 수 있 을까? 불가능해 보였던 그 꿈을 현실로 만들고 싶어 이 책의 출발점이 되었습니다.

‘모바일웹’에서 ‘웹앱’, 웹과 앱의 중간인 ‘하이브리드앱’까지 모두 체계적으로 배우기! 네이티브앱을 만드는 과정은 애플이나 구글에서 제공하는 SDK 기술을 사용하여 전문 개발자가 오랜 교육을 받아 야 하는 높은 장벽으로 둘러싸여 있어 금방 포기하게 됩니다. 특히 아이폰 하나만 대상으로 앱을 만드는 것도 힘든 데 점점 안드로이드, 블랙베리, 윈도우폰, 바다폰 등 스마트폰 플랫폼 수는 늘어가고 화면 크기는 제품마다 제각각 달라서 계속 새롭게 탄생하는 등, 이제 모든 스마트폰을 대상으로 예전처럼 동일한 서비스를 제공하는 것이 거의 불가능해졌습니다. 시간과 예산은 한정되어 있는 현실에서는 정말 속 타는 일이지요. 이러한 이유로 유일한 대안으로 평가받는 것이 HTML5 웹 표준입니다. 특히 스마트폰 브라우저에서 실행되는 모 바일웹은 앞의 모든 고민을 해결하였습니다. 더욱이 네이티브앱처럼 보이게 하는 웹앱 또한 좋은 대안입니다. 만 약 직접 앱 마켓에 올리고 싶다면 하이브리드앱 방식도 있습니다. 이것은 웹 기술과 네이티브 기술이 접목되어 HTML5로 손쉽게 네이티브 앱을 만들 수 있는 혁신적인 방법입니다. 이러한 HTML5로 만들 수 있는 모바일웹, 웹 앱, 하이브리드앱은 사실 각각 별개의 것이 아니라 모두 긴밀하게 연결되어 있습니다. 이 책은 그 점에 주목하며 세 가지 방법 모두 여러분의 것이 될 수 있도록 쉽고 재미있는 예제와 함께 핵심을 짚어가며 단계적으로 안내해 드 립니다.

여행을 떠나는 것처럼 설렘이 있다면? 여행을 떠나기 전날은 연애편지를 쓰는 것처럼 설렘이 있습니다. 특히 좋아하는 사람과 함께 떠나는 여행은 새로 운 여정 하나하나가 큰 추억으로 간직될 것입니다. 필자는 이 책을 쓰면서 HTML5를 전혀 모르는 웹 초보자의 마 음이 여행을 떠나는 사람의 마음과 같다는 것을 알았습니다. 캄캄한 밤에는 나침반 역할을 하고 구불구불한 길을 만날 때는 지팡이와 말벗이 되고 싶었습니다. 그래서 기초를 체계적으로 세울 수 있는 세심한 예제부터 실전에 사 용할 수 있는 프로젝트 응용 예제까지 함께 떠나며 경험하는 여정으로 구성하였습니다. 특히 실전 응용 능력을 기 르기 위해 ‘버추얼 대학교’라는 가상 대학의 하이브리드앱을 기획 단계부터 디자인, 구현, 배포 단계를 총망라하여 단계적으로 설명합니다.

[머리말]

또한 현재 아이폰과 안드로이드폰으로 양분되어 있는 상황에 맞게 각각의 에뮬레이터부터 실제 디바이스까지 테 스트하는 방법을 모두 설명하였습니다. 더구나 대부분 윈도우 PC 사용자임을 고려하여 아이폰용도 윈도우 PC에 서 실습할 수 있는 방법을 소개합니다.

현장의 개발자부터 기획자, 디자이너 모두 함께 볼 수 있도록 세심하게 배려 학교의 전공수업에 익숙한 학생들에게는 마치 강의시간처럼 학습목표부터, 본문, 실습, 핵심 정리를 위한 퀴즈, 응 용력 배양을 위한 미션까지 효과를 높이는 모듈식 학습법을 경험하게 됩니다. HTML5와 CSS3 등 최근 웹 표준 동향과 실무능력을 얻고자 하는 웹 디자이너에게는 기초부터 탄탄히 익힐 수 있는 철학과 드림위버를 통해 CSS3 를 빠르고 쉽게 익히는 방법을 알려드립니다. 특히 신기술을 습득하기 위해 항상 시간에 쫓기는 웹 개발자를 위해 HTML5, CSS3, 자바스크립트의 핵심 내용을 빠른 시간에 파악할 수 있게 도와드리고, 제이쿼리 모바일(JQuery Mobile)과 폰갭(PhoneGap)을 통한 손쉬운 웹앱, 하이브리드앱 개발 방법을 알려드립니다. 혹시 고급스런 이미지 갤러리, 동영상 플레이어, 위치기반 지도 표현 방 법이 이번 프로젝트에 필요하다면 이 책이 든든한 밑거름이 될 것입니다. 항상 새로운 아이디어가 필요한 웹 기획 자에게는 웹앱, 하이브리드앱을 통해 어떤 가능성이 열려 있고 무엇이 필요한지 파악할 수 있도록 성능 좋은 망원 경이 되어 드릴 것입니다.

감사함을 전하며… 정말 긴 시간 동안 원고와 씨름하면서 무사히 마칠 수 있게 된 것은 많은 분들의 배려 덕분이었습니다. 먼저 오랜 시간 동안 끝까지 믿고 훌륭한 책이 나올 수 있도록 힘써주신 이지스퍼블리싱의 이지연 대표님과 출판사 관계자 분들께 감사드립니다. 정말 수고 많으셨습니다. 더불어 저에게 관심을 가지고 많은 조언과 도움을 주신 친구, 동 료, 선후배님들께도 고마운 마음을 표합니다. 특히 저의 멘토가 되어 주셨던 홍진영, 정남현 집사님과 저에게 멋진 미디어아트의 세상을 열어주신 윤준성 교수 님과 MAAT랩 선생님들께도 진심으로 감사드립니다. 항상 옆에서 지켜보며 건강을 걱정해 주었던 가족들에게도 감사드립니다. 마지막으로 부족한 저에게 쓰임 받을 수 있는 기회를 허락하시고 무사히 마칠 수 있도록 은총을 내 려주신 하나님께 모든 영광을 드립니다. 모쪼록 이 책이 여러분의 갈증을 시원히 풀어드리는 소중한 존재가 되었 으면 하는 바람입니다. 김응석 드림 happyfree@netsgo.com

[추천사]

이제 일반인도 앱을 만들 수 있다! 앱을 만드는 데 필요한 기술을 모두 모아놓았다.

예제를 따라가기만 하면 누구나 쉽게 하이브리드앱 전문가가 되는 책 Professor

심영석 (안산대학교 멀티미디어디자인과 교수, 국제교류문화원 부원장)

지금 전 세계 IT 비즈니스의 관심은 모발일 콘텐츠에 집중하고 있다. 국내외 주류 콘텐츠 프로 바이더들은 점점 더 모바일웹과 하이브리드앱을 정답으로 인식하기 시작했다. 지금 콘텐츠 프로바 이더들에게는 성장의 기회를 잡을 수 있는 시기이고 또 기업들은 생존하기 위해 모바일웹과 하이브리드앱 전문가 가 절실히 필요하다. 모바일웹과 하이브리드앱 개발의 대표적인 솔루션은 HTML5, CSS3와 자바스크립트이다. 이 책은 풍부하고 실용적인 예제를 통해 당장 사용할 수 있는 앱을 개발할 수 있도록 해주는 것이 가장 큰 장점이 다. 특히 이 책은 학교 수업 현장에서 모바일웹과 하이브리드앱을 교육하기 적합하도록 꾸며져 있어 실전에서 활 용할 수 있는 법을 배우는 데 가장 적합하다고 생각한다.

이 책의 예제를 안드로이드 마켓과 애플 앱스토어에서 다운받았어요.

Developer

강현철(파이언넷 기술연구소장)

네이티브앱만 고집하던 한국의 모바일앱 개발 환경도 2011년 하반기를 기점으로 하이브리드앱 의 경제성과 개발의 용이성에 서서히 눈을 돌리고 있다. 이미 외국의 주요 뉴스, 포털, 쇼핑몰들이 하이브리드앱으로 개발되었고, 이런 세계적인 흐름은 우리나라에서도 빠르게 확산되고 있다. 최근 들어 기업들의 네이티브앱을 하이브리드앱으로 교체하는 프로젝트들도 눈에 많이 띈다. “하이브리드앱 개발 어렵지 않다!” 하지만 초보자가 접근하기에는 다양하게 알고 있어야 할 부분들이 많은데, 이 책은 초보자들에게 체계적으로 관련 지식을 쌓을 수 있도록 돕고 있다. 또한 실용적인 활용 내용들을 담고 있어서 ‘앱다운 앱’을 만들 수 있는 최적의 지침서가 될 것이다. 이 책에서 만든 샘플 하이브리드앱을 앱스토어에서 다운받 아 써봤는데, 다른 관련 도서의 샘플들에 비해 완성도 면에서 단연 최고다. 또한 20년이 넘는 저자의 IT 도서 집필 경력이 말해주듯, 저자의 꼼꼼하고 친절한 해설은 하이브리드앱이라는 무거운 주제를 지루하지 않으면서도 심도 있게 설명해 나가는 식의 전개 기법을 빛내주었다.

[추천사]

모바일웹 UI 기법을 쉽고 빠르게 배울 수 있다.

Designer

장미연(마이크로소프트의 ‘Expression Blend’ MVP, 전 SK C&C 인더스트리 사업개발팀 디자이너)

IT 트렌드가 시시각각 변화하면서 디자이너들이 디자인만 잘하면 되었던 시대는 이미 흘러간 지 오래다. 이제 디자이너에게는 웹 표준을 준수하는 코딩 실력은 물론, 다양한 IT 기기의 디자인 과 UI를 개발할 수 있는 역량을 요구하고 있다. 스마트폰의 혁명이 시작되면서 디자이너들에게 또 하나의 기회이 자 시장이 열리게 된 것이다. 이 책에서는 스마트폰 하이브리드앱을 개발하기 위한 언어인 HTML5와 CSS3의 기본기를 다질 수 있게 해주고, PC를 기반으로 한 웹 UI에 익숙했던 디자이너들과 모바일웹을 접해보지 않았던 초보자들도 쉽게 이해할 수 있도 록 모바일웹 UI 기법을 설명하였다. 또한 개발부터 배포까지 체계적인 순서로 구성되어 있어 실전에서 앱을 개발 을 하는 데 많은 도움이 된다. 스마트폰 앱 개발! 어렵다 생각하지 말고 지금 바로 선택하기 바란다. 이 한 권의 책 을 마스터하는 순간 당신의 경쟁력이 올라갈 것이다.

하이브리드앱으로 비즈니스를 계획하고 있는 기획자에게 추천 Planner

최승호(CJ E&M 정보전략팀 기획자)

가트너는 앞으로 기업에 큰 영향을 끼칠 2012년 10대 전략기술과 트렌드를 발표하면서 모바일 중심 애플리케이션과 인터페이스를 언급하였다. 다양한 모바일 디바이스의 등장과 보급률의 증가 로 이런 모바일 중심의 트렌드는 가속화될 것으로 보인다. 이런 현상에 대한 비즈니스 관점은 얼마나 빨리, 합리적 인 비용으로 다양한 디바이스에 맞는 앱을 개발, 보급하느냐가 중요한 이슈로 대두되고 있다. 이에 대한 솔루션으 로 하이브리드앱의 중요성이 크게 떠오르고 있다. 이 책은 하이브리드앱의 근간인 HTML5와 CSS3의 기본부터 다루고 있어, 초보자들도 스마트폰 하이브리드앱의 제작 방법을 쉽게 익힐 수 있다. 또한 책을 따라하다 보면 자연스럽게 기본 지식부터 실전에서 활용할 수 있는 응 용력까지 함께 갖출 수 있도록 배려한 체계적인 구성이 단연 돋보인다. 특히 하이브리드앱으로 비즈니스를 계획하 고 있는 기획자라면 이 책 한 권으로 앱 마켓의 궁금증을 시원하게 풀 수 있을 것이다.

[Contents MAP] 이 책의 최종 목표는 일반인도 앱을 만들 수 있게 만드는 것입니다. 하이브리드 앱 개발, 어렵지는 않지요. 하지만 다양하게 알아 야 합니다. 이 책은 앱을 만들기 위한 관련 지식을 체계적으로 담고 있습니다. 이 책의 전개과정을 다음과 같이 정리했습니다. 중급자라면 필요한 부분부터 보셔도 됩니다. 그러나 초보자라면 처음부터 하나하나 이 책이 이끄는 대로 따라가십시오. HTML 을 하나도 모르고 시작해도 좋습니다. 열정만 있다면 이 책이 끝나는 순간 여러분도 앱을 올릴 수 있게 될 테니까요.

첫째마당

HTML5+CSS3 배우기

모바일을 위한 HTML5와

웹 표준 이해하기

CSS3 기본기 익히기 _ 12~225쪽

JQuery Mobile 배우기

둘째마당 미디어쿼리와 제이쿼리 모바일로 모바일 UI 디자인하기 _ 226~319쪽 모바일 UI 만들기

실전 프로젝트 ‘가상 대학교’ 만들기

셋째마당 자바스크립트

동영상 플레이어

이미지 갤러리

구글 맵 활용하기

실전! 직접 만드는 모바일웹 프로젝트 _ 320~479쪽

이미지 전환 효과

웹앱 만들기

넷째마당 하이브리드앱 만들기

웹앱 & 하이브리드앱 만들기 _ 480~613쪽

앱스토어

안드로이드 마켓

등록/배포

등록/배포

[차례]

첫째마당 모바일을 위한 HTML5와 CSS3 기본기 익히기 01 웹 표준, 모바일 환경의 이해

14

01-1 웹 표준의 기본 지식

15

01-2 웹앱, 네이티브앱, 하이브리드앱

26

02 작업 환경 준비하기

36

02-1 개발 툴 준비하기

37

02-2 브라우저 / 에뮬레이터 / 웹 서버 준비하기

42

02-3 Hello World 예제 만들어 보기

56

03 HTML5 시맨틱 마크업 이론 익히기

66

03-1 시맨틱 마크업 개념 알아보기

67

03-2 기본적인 HTML5 마크업 사용법

71

03-3 W3C HTML 웹 표준 인증받기

91

04 CSS3 기본 기능 익히기

108

04-1 레이아웃 작업 순서

109

04-2 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 사용법

112

04-3 상속 개념 알아보기

128

05 CSS3 고급 기능 익히기

138

05-1 선택자를 잘 알아야 하는 이유

139

05-2 태그 선택자

141

05-3 클래스 선택자

146

05-4 아이디 선택자

151

05-5 하위 선택자

155

05-6 그룹 선택자

164

05-7 전체 선택자

167

05-8 하이퍼링크 사용법 : 앵커 유사 클래스 선택자

173

06 CSS3 좌표계 사용법 익히기

182

06-1 레이아웃 위치 개념 알아보기

183

06-2 컨테이너 안에서 자유롭게 위치 잡기

188

06-3 CSS3 단위 이해하기

195

06-4 BOX(상자) 모델을 이용한 위치 잡기

198

07 CSS3 레이아웃 사용법 익히기

204

07-1 float 사용법

205

07-2 clear 사용법

209

07-3 여러 개의 열 레이아웃 만들기

218

둘째마당 미디어쿼리와 제이쿼리 모바일로 모바일 UI 디자인하기 08 미디어쿼리로 N-스크린 스타일 준비하기

228

08-1 원하는 글꼴을 마음껏! 웹 폰트 사용하기

229

08-2 미디어쿼리로 디바이스 맞춤형 스타일 준비하기

236

08-3 실전에서 미디어 쿼리 응용하기

246

09 스마트폰 UI 기법 익히기

268

09-1 모바일 UI 프레임 워크

269

09-2 JQuery Mobile을 배워보자

275

09-3 JQuery Mobile로 스마트폰 UI를 시작하자 281 09-4 화면 구성을 위한 UI 작성하기

287

10 스마트폰 페이지 전환 효과 익히기

298

10-1 목록 만들기

299

10-2 다양한 페이지 링크 연결

302

[차례]

셋째마당 실전! 직접 만드는 모바일웹 프로젝트

넷째마당 웹앱 & 하이브리드앱 만들기

11 아이콘 메뉴 페이지 만들기 응용

322

17 무료 FTP 서버 등록 및 배포하기

482

11-1 웹앱 프로젝트 기획

323

17-1 무료 FTP 서버에 배포하기

483

11-2 메인 페이지 만들기

327

17-2 네이티브앱 같은 웹앱 만들기

491

12 내비게이션 메뉴 만들기 응용

340

18 폰갭을 사용하여 하이브리드앱 만들기

504

12-1 툴바 기본 사용법 익히기

341

18-1 폰갭으로 하이브리드앱을

12-2 PhotoSwipe 사용법 익히기

349

12-3 캠퍼스 이미지 페이지 만들기

357

18-2 폰갭으로 하이브리드앱을 아이폰에서 실행하기

520

368

18-3 iOS 개발자 등록하기

532

18-4 iOS 개발자와 배포자 인증받기

547

13 자바스크립트 기초 익히기 13-1 HTML5 시대에 떠오르는 언어 자바스크립트

369

13-2 자바스크립트 언어로 프로그래밍 기초 배우기

374

13-3 JQuery로 최신 스타일 자바스크립트 기초 배우기

14 이미지 전환 효과 만들기

389

400

14-1 CSS3 트랜지션으로 애니메이션 효과 만들기

14-2 대학교 소개 페이지 만들기

401 407

14-3 자바스크립트 JQuery로 터치 기능 생명 불어넣기

412

15 동영상 연결하기

424

15-1 HTML5로 동영상 연결하기

425

15-2 VideoJS를 이용하여 세련된 동영상 플레이어 만들기

431

16 지도에 내 위치 표시하기

444

16-1 구글 맵을 표시하기

445

16-2 현재 내 위치를 찾아보기

459

16-3 캠퍼스 맵 완성하기

469

안드로이드폰에서 실행하기

505

18-5 개발용 아이폰 디바이스 등록, 애플리케이션 ID 등록, 개발자 프로비저닝 준비 18-6 개발자 아이폰 디바이스에서 실행하기

558 564

19 안드로이드 마켓과 애플 앱스토어에 올리기 570 19-01 안드로이드 마켓에 올리기

571

19-02 애플 앱스토어에 올리기

586

부록 안드로이드폰 에뮬레이터 설치하기

614

[이 책은 이렇게 활용하세요]

■ 소스 및 무료 동영상 스터디 카페 안내 저자 김응석 교수님이 운영하는 HMAPS.net(HTML5 Mobile App Study) 카페에 방문하셔서 예제 소스와 동영상을 받아보세요.

http://www.hmaps.net

예제 다운로드 예제를 확인하려면 이 책의 카페인 http://www. hmaps.net의 [BOOK - 책 예제 다운로드]에서 받으 세요.

■ 이 책에서 만든 앱을 다운받으세요. 이 책의 예제가 앱스토어와 안드로이드 마켓의 심사 를 통과하여 공개되었습니다. 이 책을 따라하다 보면 여러분도 만들게 될 ‘가상 대학’ 앱을 미리 다운받아 체험해 보세요. 앱스토어 : ‘HTML5 mobile app study’로 검색.

저자 직강 무료 동영상 안내 책만 봐도 이해가 되겠지만 더 편하게 공부하고 싶다면 동영상을 들으며 책을 보는 것도 좋은 방법입니다. 멀 티미디어학과 교수인 저자가 한 학기 강의 분량에 달하 는 동영상을 무료로 제공합니다. EBS 방송을 통해 활 동했던 저자의 매끄러운 동영상은 더욱 쉽게 책의 내용 을 이해할 수 있도록 도와줄 것입니다. www.hmaps.net에서 만나보세요.

안드로이드 마켓 : ‘ HTML5 mobile app study’로 검색.