DO IT 입문자도 쉽게 배우는 웹앱 & 하이브리드앱 (전면 개정2판)

▣ 출판사서평

비전문가도 앱을 만들 수 있다!
전국 대학 인기 교재! 최신 기술을 담고 전면 개정 2판으로 돌아오다!
모바일 분야 4년 연속 베스트셀러인 ‘Do it! 쉽게 배우는 웹앱&하이브리드앱’은 초판 발행 이후 꾸준히 학생들의 교재로 사용되어 왔다. 개정 2판에서는 4년 간, 독자와 카페 회원들의 질문에 답하며 쌓인 해결책과 노하우를 담아 누구나 앱을 쉽게 만들 수 있는 책으로 완성도를 높였다.

☆이런 사람에게 추천한다☆
① 웹앱을 만드는 데 필요한 HTML+CSS3 기초 프로그래밍 기법이 무엇인지 궁금한 입문자
② 최신 하이브리드앱을 제작할 때 어떤 기술이 필요한지 알고 싶은 입문자
③ 대학·학원에서 사용할 웹앱&하이브리드 교재를 찾는 교수님
④ 워드프레스, 플리커를 앱에 연결하는 JSON 활용 기술에 관심 있는 현역 개발자
⑤ 미디어쿼리와 JQuery 모바일을 활용한 반응형 웹 디자인 제작에 관심있는 현역 개발자

☆이 책의 특징☆
하이브리드앱 제작에 필요한 최신 기술을 한 권에 담았다. 실습 예제를 통해 앱 제작 과정을 쉽게 이해하고 각 장별로 학습한 내용을 응용해 볼 수 있는 심화 문제를 통해 학습 성과를 높일 수 있다. 특히, 19장에서는 JSON으로 워드프레스와 플리커를 앱에 연결해 DB처럼 사용하는 비법을 공개했다.

① 하이브리드앱 최신 경향을 체계적으로 배운다 NEW!
― 모바일 웹, 웹앱 그리고 하이브리드앱을 공부하는 가장 좋은 방법
이 책은 입문자가 모바일 웹, 웹앱, 하이브리드앱으로 이어지는 전 과정을 쉽게 이해하고 기초를 착실히 다질 수 있도록 다양한 실습을 세밀하게 설계했다. 웹앱&하이브리드앱 기술의 궁극적인 목표는 이미 익숙한 웹 기술을 이용하여 쉽게 앱을 만드는 것이다. 이를 위해 HTML5와 CSS3의 개념을 초급자의 눈높이로 정리했고 드림위버(Dreamweaver)를 통해 직접 실습하는 방법까지 친절하게 담았다.

② 자체 DB가 없어도 워드프레스, 플리커를 내가 만든 앱에 연결한다 NEW!
― PHP, JSP 등 복잡한 DB 기술을 몰라도 워드프레스를 DB처럼 사용하는 비법 공개
매시업(Mashup, 기존의 콘텐츠나 서비스를 융합해 새로운 웹서비스를 만들어 내는 기술)을 활용하면 다양한 앱 개발이 가능하다. 그동안 그 방법을 궁금해 한 독자들의 요청을 반영해 이 책에서는 워드프레스나 플리커를 앱에 연결하는 JSON 활용 기술을 소개한다. 이 분야는 워낙 자료가 없는 희귀한 분야인 만큼 독자들의 이해를 돕기 위해 꼼꼼히 기술했다.

③ 실제 전문가는 이렇게 개발한다
― 미디어쿼리와 JQuery 모바일 사용 방법 소개
반응형 웹을 지원하는 미디어쿼리, 화려하고 효과적인 모바일 화면 UI를 제공하는 최신 JQuery 제이쿼리 모바일(Jquery Mobile), 모바일 웹을 웹앱으로 전환하는 과정 그리고 모바일 기기에 GPS를 연동하는 방법까지 상세히 소개한다. 이러한 개발 방법은 다양한 기능을 복합적으로 사용하기 위해 필요한 개발 방법이다. 이 책에서도 실제 개발자들이 사용하는 방법을 그대로 설명한다.

④ 펜션 사장님도 이 책을 따라하고 앱을 만들었다
― 연속적인 실습 과제, 저자의 교수 노하우로 쉬운 것을 더 쉽게
이 책은 앱이 완성되는 과정을 일련의 실습 과제들로 구성해 독자들이 이를 따라하기만 하면 앱을 만들 수 있도록 했다. 또한 조금만 응용하면 얼마든지 다양한 앱도 직접 만들 수 있으며 EBS 강사 경력과 현재 대학에서 학생들을 가르치고 있는 저자의 노하우가 반영되어 놀라운 학습 효과를 보장한다. 앱에는 문외한이며 초판의 독자인 어느 펜션 사장님도 이 책을 보고 자신의 펜션을 홍보하는 앱을 만들 정도이다!

⑤ 초보자를 위한 개발 환경 설정
― 개발자가 된 것처럼 실습하는 재미가 쏠쏠
처음 입문하는 독자들이 가장 어렵게 느끼는 복잡한 S/W 설치 대신, 폰갭 데스크톱을 사용하여 폰갭 CLI에 익숙하지 않은 초보자도 쉽고 편리하게 개발하고 테스트할 수 있다.

☆공부가 쉬워지는 4가지 활용 팁!☆
저자 김응석 교수님이 운영하는 HMAPS.net(HTML5 Mobile App Study) 카페에 방문해서 저자의 무료 동영상 강좌, 학습 진도표 엑셀 파일, 예제 소스 파일, 질의응답을 활용해 더욱 쉽게 공부할 수 있다.

활용 하나! 독학용 학습 진도표 활용하기
초급자는 6주 30일 과정, 중급자는 3주 15일 과정을 선택해 책을 끝까지 완독할 수 있다. 초급자 학습 진도표는 하루 2시간을 기준으로 6주 간, HTML5를 처음 공부하는 독자를 위해 작성되었다. 중급자는 HTML을 어느 정도 알고 있으면서 전체적인 내용을 빠르게 익힐 수 있도록 하루 1시간 기준 3주 완성을 목표로 작성된 권장 진도표다.

활용 둘! 저자 직강 동영상 보기
각 장의 앞 부분에 있는 QR 코드를 찍으면 해당 장에 관련된 저자 동영상을 볼 수 있다. 각 장에서 중요 부분을 뽑아 저자가 직접 설명한다. EBS에서 활동했던 저자의 매끄러운 동영상 강좌는 내용을 더욱 쉽게 이해할 수 있도록 도와준다. 동영상 강좌는 저자가 운영하는 카페에도 올려져 있으며 유튜브(Youtube)와 팟캐스트(iTunes Store . Podcast)에서도 볼 수 있다.

카페 | http://www.hmaps.net
유튜브 | http://www.youtube.com/easyspub
팟캐스트 | ‘웹앱’으로 검색해 보세요.

활용 셋! 전체 소스 파일 내려받기
실제 소스 파일을 보면서 공부할 수 있다. 책의 모든 예제는 한꺼번에 압축 파일로 받을 수 있도록 준비했다. http://www.hmaps.net의 [책 예제 다운로드] 메뉴에서 다운로드할 수 있다.

활용 넷! 이 책에 대한 애프터서비스!
질의응답은 물론 책에서 업그레이드된 부분이 있을 때마다 주요한 내용을 PDF 파일로 공개한다. 저자의 카페(http://www.hmaps.net)와 이지스퍼블리싱 홈페이지(http://easyspub.com) 자료실에서 확인할 수 있다.

▣ 작가 소개

저자 : 김응석
안산대학교 멀티미디어디자인과 부교수, andrew.niel@gmail.com

최장수 베스트셀러, 100여 개 대학 교재 채택의 신기록을 지닌 IT 현장 지향형 교수.
1990년대 초 베스트셀러였던 《안녕하세요 컴퓨터 길라잡이》의 저자이면서 치밀한 구성으로 찬사를 받았던 《r 한글 비주얼 베이직 6》으로 전국 100여 개 대학에서 강의 교재로 채택되는 기록을 세우기도 한 자타 공인 국내 최고의 테크니컬 라이터이다.
안산대학교에서도 교수들에게 학습방법론을 지원하는 교수학습지원 센터장을 맡아 학생들을 잘 가르치는 방법, 더 많은 것을 효율적으로 배울 수 있는 방법에 관심을 기울여왔다.
또한 강단의 교수이기 전에 (주)파이언소프트 개발팀 팀장과 (주)소프트뱅크 웹인스티튜트 기술이사(CIO)를 거치며 산업현장의 전장을 그 누구보다 뼛속 깊숙이 경험해 봤던 IT 분야의 전문가이다. 그래서 학생들에게 산업현장에 필요한 따끈따끈한 지식을 알기 쉽게 가르쳐 바로 결과물로 확인할 수 있는 방법을 태생적으로 고민할 수밖에 없었다.
한양대학교 전자계산학과를 졸업했고, 같은 대학원에서 멀티미디어를 전공하여 석사학위를 받았다. 숭실대학교 대학원(미디어아트... MAAT랩)에서 박사학위를 받은 후 지금은 인문학과 예술의 감성이 IT 테크놀로지와 결합될 때 놀라운 창조력이 나올 수 있음에 매료되어 새로운 신세계 탐구에 몰두하고 있다.

대표 저서
《구글 완전 활용법》, 《안녕하세요 컴퓨터 길라잡이》, 《인터넷 홈페이지 만들기》, 《액티브 홈페이지 만들기》, 《한글 비주얼 베이직 2005 익스프레스》, 《新 한글 비주얼 베이직 6》 외 10여 종

▣ 주요 목차

첫째마당
모바일을 위한 HTML5와 CSS3 기본기 익히기

01 웹 표준, 모바일 환경의 이해
01-1 웹 표준의 기본 지식
01-2 웹앱, 네이티브앱, 하이브리드앱

02 작업 환경 준비하기
02-1 개발 툴 준비하기
02-2 브라우저 준비하기
02-3 Hello World 예제 만들어 보기

03 HTML5 시맨틱 마크업 이론 익히기
03-1 시맨틱 마크업 개념 알아보기
03-2 기본적인 HTML5 마크업 사용법
03-3 W3C HTML 웹 표준 인증받기

04 CSS3 기본 기능 익히기
04-1 레이아웃 작업 순서
04-2 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 사용법
04-3 상속 개념 알아보기

05 CSS3 고급 기능 익히기
05-1 선택자를 잘 알아야 하는 이유
05-2 태그 선택자
05-3 클래스 선택자
05-4 아이디 선택자
05-5 하위 선택자
05-6 그룹 선택자
05-7 전체 선택자
05-8 하이퍼링크 사용법 : 앵커 유사 클래스 선택자

06 CSS3 좌표계 사용법 익히기
06-1 레이아웃 위치 개념 알아보기
06-2 컨테이너 안에서 자유롭게 위치 잡기
06-3 CSS3 단위 이해하기
06-4 BOX(상자) 모델을 이용한 위치 잡기

07 CSS3 레이아웃 사용법 익히기
07-1 float 사용법
07-2 clear 사용법
07-3 여러 개의 열 레이아웃 만들기

둘째마당
미디어쿼리와 제이쿼리 모바일로 모바일 UI 디자인하기

08 반응형 웹 디자인하기
08-1 원하는 글꼴을 마음껏! 웹 폰트 사용하기
08-2 반응형 웹 디자인 준비하기
08-3 실전에서 미디어 쿼리 응용하기

09 스마트폰 UI 기법 익히기
09-1 모바일 UI 프레임워크
09-2 JQuery Mobile을 배워보자
09-3 JQuery Mobile로 스마트폰 UI를 시작하자
09-4 화면 구성을 위한 UI 작성하기

10 스마트폰 페이지 전환 효과 익히기
10-1 목록 만들기
10-2 다양한 페이지 링크 연결

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

11 아이콘 메뉴 페이지 만들기 응용
11-1 웹앱 프로젝트 기획
11-2 메인 페이지 만들기

12 내비게이션 메뉴 만들기 응용
12-1 툴바 기본 사용법 익히기
12-2 Fotorama 사용법 익히기
12-3 캠퍼스 이미지 페이지 만들기

13 자바스크립트 기초 익히기
13-1 HTML5 시대에 떠오르는 언어, 자바스크립트
13-2 자바스크립트 언어로 프로그래밍 기초 배우기
13-3 JQuery로 최신 스타일 자바스크립트 기초 배우기

14 이미지 전환 효과 만들기
14-1 CSS3 트랜지션으로 애니메이션 효과 만들기
14-2 대학교 소개 페이지 만들기
14-3 자바스크립트 JQuery로 터치 기능 생명 불어넣기

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

16 지도에 내 위치 표시하기
16-1 구글 맵 표시하기
16-2 현재 내 위치를 찾아보기
16-3 캠퍼스 맵 완성하기

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

17 무료 FTP 서버 등록 및 배포하기
17-1 무료 FTP 서버에 배포하기
17-2 네이티브앱 같은 웹앱 만들기

18 폰갭을 사용하여 하이브리드앱 만들기
18-1 폰갭으로 하이브리드앱을 안드로이드폰에서 실행하기
· NodeJS 설치하기, 폰갭과 코르도바 설치, 폰갭 디벨로퍼 앱(Developer App) 설치와 Hello phonegap 만들기
· 안드로이드 앱 제작 - Virtual University 프로젝트 시작
· SplashScreen, GeoLocation 플러그인 설치 및 터치속도 300ms UP!
· 아이콘 및 시작화면 리소스 준비하기
· 안드로이드 네이티브앱 빌드
· 안드로이드 기기에서 실행

18-2 폰갭으로 하이브리드앱을 아이폰에서 실행하기
· iOS 개발자 등록하기, Xcode와 Command Line Tools 설치, Node.js 설치, Phonegap 설치
· Phonegap Developer App, Phonegap Hello 프로젝트
· 폰갭과 Xcode를 사용하여 하이브리드앱 제작하기
· StatusBar, SplashScreen, GeoLocation 플러그인 설치 및 터치속도 300ms UP!
· 아이콘 및 시작화면 리소스 준비하기
· iOS 네이티브앱 실행
· iOS 인증받기, 앱 ID 등록/iOS 디바이스 등록/프로비저닝 프로파일 준비하기
· iOS 디바이스에서 실행하기, 프로비저닝 프로파일 배포하기

19 실전 응용 하이브리드앱 만들기
19-01 JQuery를 이용하여 JSON 사용하기
19-02 플리커를 이용한 포토스트림 앱 만들기
19-03 워드프레스를 이용한 하이브리드앱 만들기

부록·Appendix
01 드림위버 CC에서 CSS 디자이너 사용하기
02 폰갭 데스크톱으로 결과 확인하기
03 안드로이드앱 APK 배포파일 만들기, 환경 준비
04 폰갭(아파치 코르도바) CLI 설치 및 실행 시 오류 메시지 대처법