드림위버로 시작하는 모바일 웹앱과 폰갭
드림위버로 시작하는 모바일 웹앱과 폰갭
미래웹기술연구소 교육전문위원들이 2012년 최신 버전으로 업데이트
폰갭 최신 버전 PhoneGap:Build 활용법 부록으로 수록
HTML5 시대가 도래하면서 웹은 문서에서 애플리케이션으로 진화하고 있으며 이에 웹개발자들의 역할도 변화해야 하는 상황에 이르렀다. 웹개발자들은 웹을 정보의 집합체인 문서로 바라보는 생각에서 벗어나 데스크탑웹, 모바일웹의 UI를 만드는 Web UI 개발자로서의 인식의 전환이 필요한 시점이다. 이러한 시대의 변화는 텍스트 에디터 중심의 개발에서 벗어난 생산성이 높은 웹개발을 필요로 하며 지금 이 시점에서 드림위버가 다시 필요한 이유이기도 하다. 또한 이제 웹개발자들은 더 이상 웹개발에만 머무르지 않고 제이쿼리 모바일과 같은 UI 프레임워크와 폰갭을 이용하여 아이폰, 안드로이드앱개발에 손쉽게 다가갈 수가 있다. 다가오는 멀티 디바이스 시대는 웹개발자들에게 기회의 시대라고 할 수 있다. 이 책은 그런 미래를 준비하는 웹개발들을 위한 책이다.
이책에서 다루는 주요내용
- HTML5, CSS3 탄생과 역사에 대한 소개
- 드림위버에서 지원하는 HTML5, CSS3 기능들
- 드림위버의jQuery Mobile 개발지원기능
- 복잡한 프로그래밍이 필요없는 손쉬운 모바일웹앱 화면 개발
- 아이폰, 안드로이느 SDK 설치가 필요없는 손쉬운 앱개발
- 실전 예제를 통해 하나의 완성된 웹기술 기반의 앱을 개발
이책의 주요 독자층
- HTML/CSS 개발자로서 자신의 개발영역을 확장시키고 싶으신 분
- 웹앱개발에 도전하려다 복잡한 프로그래밍 용어에 책을 덮으신 분
- HTML5 및 크로스플랫폼 앱개발을 어디서부터 손대야 할지 모르겠다는 앱개발자들
오해할 수도 있지만, 드림위버 CS5.5의 ‘.5’라는 표현이 소폭 개정된인상을 주기는 해도 실제로는 전혀 그렇지 않다. 드림위버 개발자들이 5.5 버전에 놀라운 양의 새로운 기능을 집어넣었기 때문이다. 그중 몇 가지만 언급하자면, 개발자들이 많이 사용하는 제이쿼리 자바스크립트 라이브러리를 위한 코드 힌트 기능, 문서창을 닫지 않은상태에서 여러 화면 해상도에 따라 페이지가 어떻게 나타나는지 볼수 있는 기능, 제이쿼리 모바일위젯 지원 기능, 안드로이드나iOS(아이폰, 아이패드, 아이팟 터치에 사용되는 운영체제) 용 네이티브앱을 만드는데 사용되는 폰갭의 통합 기능 등이다.드림위버 CS5.5에서 강조하는 기능은 모바일 개발과 멀티 스크린지원이지만 그 외에도 많은 기능이 추가되었다. HTML5와 CSS3에대한 향상된 지원 기능에는 둥근 모서리 효과와 이미지 없는 그림자효과 생성을 간단하게 해주는 툴도 포함된다. 이전 버전에서는 CSS선택자를 제한적으로 지원했지만, 이제는 모든 CSS 선택자가 라이브뷰에서 지원된다. 놀라운 것은 드림위버 CS5.5에서 웹 폰트도 지원한다는 점이다.
새로 공부할 내용이 많지만, 이 책의 목적은 세 가지 사례연구를 통해 새로운 기능들을 알리는데 있다. 먼저 HTML5, CSS3, 미디어 쿼리를 사용하여 데스크톱, 태블릿, 스마트폰 화면에서 보이는 웹사이트를재디자인할 것이다. 다음으로 모든 주요 모바일 플랫폼에서 일관되게 실행되도록 만들어진 제이쿼리 모바일, 정교한 자바스크립트, CSS 프레임워크를 사용하여 동일한 사이트의 하위 버전을 모바일 전용 버전으로 만들어볼 것이다. 마지막으로는 데이터베이스에정보를 저장하고 모바일폰의 GPS 센서에 접근하여 지도를 보여주는 간단한 앱을 개발해 볼 것이다.
Chapter 1 이제 모바일에도드림위버!
HTML5와 CSS3 평가하기
드림위버 CS5.5로 HTML5와 CSS3 사용하기
다양한 기기를 위한 개발
Section II HTML5와 CSS3
Chapter 2 HTML5와 CSS3로 이루는 점진적 향상
기존 사이트 개선
동일한 모양 포기
Chapter 3 미디어 쿼리로 모바일 페이지 개선하기
미디어 쿼리 이해하기
토자이 호텔 사이트 개선
미디어 쿼리 평가하기
Chapter 4 오프라인에서도 사용할 수 있는 사이트 만들기
오프라인 사이트의 작동 원리
토자이 호텔 사이트 오프라인에서 사용 가능하게 만들기
오프라인에서도드림위버!
Section III 제이쿼리 모바일과폰갭
Chapter 5 제이쿼리 모바일의 세계로
제이쿼리모바일로 기본 사이트 만들기
탄탄한 기초 세우기
Chapter 6 제이쿼리 모바일 더 자세히 알아보기
제이쿼리모바일 사용자 지정 데이터 속성 안내
제이쿼리모바일위젯을 이용한 빠른 배포
사례 연구: 예약 폼 만들기
폼을 제출하고 응답 결과 보여주기
코드 공부에 푹 빠져 보자
Chapter 7 폰갭을 활용한 네이티브앱 개발
드림위버에서폰갭 설정하기
사례 연구: Travel Notes 앱
미래에도드림위버!
부록.드림위버와PhoneGap:Build를 이용한 네이티브앱 개발
셀프스터디 정답 및 해설
1
