Search

[쉽게 배우는 웹앱 & 하이브리드앱(Do it!)]은 전공자가 아닌 일반인도 따라할 수 있도록 HTML5과 CSS3의 개념을 설명해주고 드림위버에서 쉽게 실습하게 하였고, 반응형 웹을 지원하는 미디어쿼리, 화려하고 효과적인 모바일 화면 UI를 제공하는 최신 제이쿼리 모바일(Jquery Mobile)을 자세히 설명한다. 이렇게 만들어진 모바일 웹을 웹앱으로 전환하는 과정, 그리고 모바일 기기의 GPS와 연동하여 지역 정보를 제공하는 지오로케이션(GeoLcation) API를 이용하여 현재 위치와 원하는 위치를 표시할 수 있는 방법을 소개한다.

모바일 베스트셀러의 전면 개정판!
하이브리드 방식의 앱, 이렇게 만든다! -‘최신 JQuery 모바일 수록’
모바일 분야의 베스트셀러인 [Do it! 웹앱&하이브리드앱]가 전면 개정판으로 새로 태어났다. 이 책은 비전문가도 앱을 만들 수 있도록 하이브리드앱을 만들기 위해 알아야 할 모든 내용이 담겨있다. 이 책은 HTML5+CSS3와 JQuery 모바일을 이용하여 모바일 웹을 만드는 방법부터 구글 플레이와 애플 앱스토어에 등록하는 방법까지 친절하게 설명한다. 또한 각 장의 주요 내용을 뽑아 저자 직강 동영상을 무료로 제공한다는 혜택도 있다. 이제 초보자도 컴퓨터 한 대만 있으면 누구나 쉽게 하이브리드앱 전문가가 될 수 있다. 이번 개정판에서는JQuery 모바일과 폰갭(코르도바)의 최신판을 다루었다.

[자세한 책 소개]
이 책은 ‘Do it! 쉽게 배우는 웹앱&하이브리드앱’ 초판 이후 베스트셀러로, 2년 이상 꾸준히 학생들의 교재로 사용되며, 독자들과 소통해온 결과를 반영하고 최신 내용으로 거듭나 완성도를 더욱 높인 책이다.

모바일웹, 웹앱, 하이브리드앱의 최신 경향을 체계적으로 배운다!
최근 스마트 뱅킹 앱과 같은 업무용 앱은 하이브리드앱 방식으로 개발되고 있다. 자바나 오브젝트 C를 알아야하는 네이티브앱보다 쉽게 앱을 만들 수 있는 방법도 바로 하이브리드앱 방식이다.
이 책은 전공자가 아닌 일반인도 따라할 수 있도록 HTML5과 CSS3의 개념을 설명해주고 드림위버에서 쉽게 실습하게 하였고, 반응형 웹을 지원하는 미디어쿼리, 화려하고 효과적인 모바일 화면 UI를 제공하는 최신 제이쿼리 모바일(Jquery Mobile)을 자세히 설명한다. 이렇게 만들어진 모바일 웹을 웹앱으로 전환하는 과정, 그리고 모바일 기기의 GPS와 연동하여 지역 정보를 제공하는 지오로케이션(GeoLcation) API를 이용하여 현재 위치와 원하는 위치를 표시할 수 있는 방법을 소개한다.

펜션 사장님도 이 책을 따라하고 앱을 만들었다!
이 책은 실제 등록된 앱을 만들어가는 과정을 하나하나 보여주며 진행되므로 앱이 완성되는 과정을 보며 성취감을 느낄 수 있고, 변형하여 자신만의 앱을 만들 수도 있다. 이미 이 책의 초판 독자인 어느 펜션 사장님이 자신의 펜션을 소개하는 앱을 만들어서 카페에 자랑하기도 하였다.

초보자를 위한 환경 설정! - 개발자가 된 것처럼 실습하는 재미 쏠쏠~
대부분의 책들이 바로 모바일 개발로 시작하는 반면 이 책은 자신의 PC에 필요한 HTML 편집기와 모바일 브라우저 설치 및 이용 방법, 테스트를 위한 웹 서버를 구축할 수 있도록 설명하고 있어서 실제 개발자가 된 것처럼 PC 브라우저와 모바일 브라우저의 결과를 확인하며 재미있게 실습할 수 있다.

실제 개발 방법을 이용한 미디어쿼리와 Jquery 모바일 소개
모바일 개발은 다양한 화면을 지원하도록 개발되어야 한다. 그러기 위해선 미디어쿼리가 필수! 미디어쿼리와 FTP 환경설정으로 PC와 스마트폰에서 쉽게 테스트할 수 있도록 설명했다. 이 방법은 기존의 웹과는 다른 개발 방법이며 실제 모바일 웹을 개발하는 방법이다. 모바일 웹 개발에서는 하나의 툴만 사용하지 않으며 다양한 툴을 복합적으로 사용하기 때문이다. 이 책에서도 실제 개발자들이 사용하는 방법을 그대로 설명한다.

앱 기획부터 구글 플레이와 앱스토어 심사 통과까지 구체적으로 볼 수 있다.
이 책은 실제 앱을 설계하는 과정부터 직접 코딩하고 디자인하여 앱스토어에 등록하는 방법까지 실제로 앱을 만드는 모든 과정을 낱낱이 소개하였다. 이 책에서 실습하는 앱은 안드로이드 마켓인 구글 플레이와 애플의 앱스토어에 올려져있다. 이 앱을 만드는 프로젝트를 진행하면서 자바스크립트, 동영상 플레이, 이미지 갤러리, 모바일 신문 스타일의 이미지 효과, 구글 지도 적용을 차례로 배울 수 있다. 특히 자바스크립트와 모바일 구글 지도 적용은 어렵게 여겨지던 개념을 도식화하여 쉽게 이해할 수 있도록 구성했다.
특히 많은 사람들이 어려워하는 애플 개발자 등록과 앱 등록 과정은 한 권의 소책자로 만들어도 손색이 없을 정도로 자세하다.

책 핵심 내용 동영상 강의 무료 제공! 저자 직강으로 더 쉽게 배운다.
저자는 현직 대학교수이며 안산대학교 교수학습지원 센터장을 역임하면서 익힌 다양한 교수법을 책에 쏟아 부었다. 책만 봐도 충분하겠지만 더 편하게 공부하고 싶다면 동영상을 들으며 책을 보는 것도 좋은 방법이다. EBS 방송을 통해 활동했던 저자의 매끄러운 동영상은 더욱 쉽게 책의 내용을 이해할 수 있도록 도와준다.
저자 직강 동영상을 볼 수 있는 곳 HMAPS.net (HTML5 Mobile App Study) : http://www.hmaps.net

[전문가의 추천사]

Professor 추천사
예제를 따라가기만 하면 누구나 쉽게 하이브리드앱 전문가가 되는 책
이 책은 풍부하고 실용적인 예제를 통해 당장 사용할 수 있는 앱을 개발할 수 있도록 해주는 것이 가장 큰 장점이다. 특히 이 책은 학교 수업 현장에서 모바일웹과 하이브리드앱을 교육하기 적합하도록 꾸며져 있다.
심영석 (안산대학교 멀티미디어디자인과 교수, 교무처장)

Developer 추천사
완성도 높은 예제, 이 책의 예제를 구글 플레이와 애플 앱스토어에서 다운받으세요.
이 책은 초보자들에게 체계적으로 관련 지식을 쌓을 수 있도록 돕고 있다. 또한 이 책에서 만든 샘플 하이브리드앱을 앱스토어에서 다운받아 써봤는데, 다른 관련 도서의 샘플들에 비해 완성도 면에서 단연 최고다.
강현철(파이언넷 기술연구소장)

Designer 추천사
개발부터 배포까지 체계적인 순서로 구성하여 실전에 큰 도움을 준다.
이 책에서는 HTML5와 CSS3의 기본기를 다질 수 있게 해주고, 초보자들도 쉽게 이해할 수 있도록 모바일웹 UI 기법을 설명하였다. 또한 개발부터 배포까지 체계적인 순서로 구성되어 있어 실전에서 앱을 개발을 하는 데 큰 도움이 된다.
장미연(마이크로소프트의 ‘Expression Blend’ MVP , 전 SK C&C 인더스트리 사업개발팀 디자이너)

Planner 추천사
하이브리드앱으로 비즈니스를 계획하고 있는 기획자에게 추천
책을 따라하다 보면 자연스럽게 기본 지식부터 실전에서 활용할 수 있는 응용력까지 함께 갖출 수 있도록 배려한 체계적인 구성이 단연 돋보인다. 특히 하이브리드앱으로 비즈니스를 계획하고 있는 기획자라면 한 권으로 앱 마켓의 궁금증을 시원하게 풀 수 있을 것이다.
최승호(CJ E&M 정보전략팀 기획자)

첫째마당 모바일을 위한 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 폰갭으로 하이브리드앱을 안드로이드폰에서 실행하기
18-2 폰갭으로 하이브리드앱을 아이폰에서 실행하기

19 구글 플레이와 애플 앱스토어에 올리기
19-1 구글 플레이에 올리기
19-2 애플 앱스토어에 올리기

부록 안드로이드폰 에뮬레이터 /CSS 디자이너/Chorme To Mobile

01 안드로이드폰 에뮬레이터 설치하기
02 드림위버 CC에서 CSS 디자이너 사용하기
03 Chrome To Mobile 사용법