자료검색

『Do it: 쉽게 배우는 웹앱 하이브리드앱』은 HTML5+CSS3와 JQuery 모바일을 이용하여 모바일 웹을 만드는 방법부터 웹앱으로 변환하는 방법, 그리고 폰갭을 이용하여 안드로이드 마켓과 애플 앱스토어에 등록하는 방법까지 친절하게 설명한다. 특히 아이폰용 앱의 경우, 매킨토시가 없어도 윈도우 PC 환경에서 실습할 수 있는 방법으로 소개하므로 기획자나 디자이너, 학생 등의 일반인도 특별한 장비의 구입 없이 앱 개발자가 되는 데 도전할 수 있도록 구성하였다. 현재 멀티미디어학과 교수인 저자가 한 학기 강의 분량에 달하는 동영상을 무료로 제공한다.

“나도 앱을 만들 수 있을까?”
불가능해 보였던 꿈을 현실로 만들어 주는 책.

이 책은 HTML5+CSS3와 JQuery 모바일을 이용하여 모바일 웹을 만드는 방법부터 웹앱으로 변환하는 방법, 그리고 폰갭을 이용하여 안드로이드 마켓과 애플 앱스토어에 등록하는 방법까지 친절하게 설명한다. 이 책에는 특별한 혜택도 있다. 현재 멀티미디어학과 교수인 저자가 한 학기 강의 분량에 달하는 동영상을 무료로 제공한다는 점이다.
HTML이나 CSS에 대해 문외한이라도 컴퓨터 한 대만 있으면 누구나 쉽게 하이브리드앱 전문가가 될 수 있다. 특히 아이폰용 앱의 경우, 매킨토시가 없어도 윈도우 PC 환경에서 실습할 수 있는 방법으로 소개하므로 기획자나 디자이너, 학생 등의 일반인도 특별한 장비의 구입 없이 앱 개발자가 되는 데 도전할 수 있다.

모바일웹, 웹앱, 하이브리드앱까지 체계적으로 배운다!

이 책은 HTML5를 통해 웹 기술과 네이티브 기술이 접목되어 HTML5로 손쉽게 네이티브 앱을 만들 수 있는 혁신적인 방법을 제시한다. 이러한 HTML5로 만들 수 있는 모바일웹, 웹앱, 하이브리드앱은 사실 각각 별개의 것이 아니라 모두 긴밀하게 연결되어 있다. 이 책은 그 점에 주목하며 세 가지 방법 모두 배울 수 있도록 쉽고 재미있는 예제와 함께 핵심을 짚어가며 단계적으로 안내해 준다.
이 책은 초보도 따라할 수 있도록 HTML5과 CSS3을 드림위버에서 실습하는 것부터 시작하여, N스크린에 대응하는 미디어쿼리, 화려하고 효과적인 모바일 화면 UI를 제공하는 제이쿼리 모바일(Jquery Mobile)을 자세히 설명한다. 이렇게 만들어진 모바일 웹을 웹앱으로 전환하는 과정, 그리고 모바일 기기의 GPS와 연동하여 지역 정보를 제공하는 지오로케이션(GeoLcation) API를 이용하여 현재 위치와 원하는 위치를 표시할 수 있는 방법을 소개한다.
책은 입문자가 실제 마켓과 앱스토어에 등록할 앱을 만들어가는 과정으로 진행되므로 하나하나 완성하는 성취를 느끼며 재미있게 배울 수 있다.

HTML5, CSS3 개념 잡고 개발 환경 설정! - 실습하는 재미 쏠쏠~

대부분의 책들이 바로 모바일 개발로 시작하는 반면 이 책은 자신의 PC에 필요한 HTML 편집기와 에뮬레이터 설치 및 이용 방법, 테스트를 위한 웹서버를 구축할 수 있도록 설명하고 있어서 실제 개발자가 된 것처럼 아이폰 화면과 안드로이드 화면 에뮬레이터로 결과를 확인하며 재미있게 실습할 수 있다.

실제 개발 방법을 이용한 미디어쿼리와 Jquery 모바일 소개

모바일 개발은 다양한 화면을 지원하도록 개발되어야 한다. 그러기 위해선 미디어쿼리가 필수! 미디어쿼리와 다양한 환경을 지원하는 어도브 디바이스 센트럴을 이용하여 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 태그 선택자(tag selector)
05-3 클래스 선택자(class selector)
05-4 아이디 선택자(ID Selector)
05-5 하위 선택자(Descendant Selector)
05-6 그룹 선택자(Grouping Selector)
05-7 전체 선택자(Universal Selector)
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 미디어쿼리로 N스크린 스타일 준비하기
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 PhotoSwipe 사용법 익히기
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 폰갭으로 하이브리드앱을 아이폰에서 실행하기
18-3 iOS 개발자 등록하기
18-4 iOS 개발자와 배포자 인증받기
18-5 개발용 아이폰 디바이스 등록, 애플리케이션 ID 등록, 개발자 프로비저닝 준비
18-6 개발자 아이폰 디바이스에서 실행하기

19 애플 앱스토어와 구글 마켓에 올리기
19-01 안드로이드 마켓에 올리기
19-02 애플 앱스토어에 올리기

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