한빛출판네트워크

재미, 놀라움, 유머까지 갖춘 센스만점 모바일 웹 가이드

큼직큼직하고 풍성한 그림, 친근한 대화식 문체의 설명, 다양한 전개 방식으로 지루할 틈 없이 모바일 웹을 재미있게 배운다.

체계적이고 과학적인 학습 원리를 통해 누구보다 빠르게, 남들과는 다르게 모바일 웹을 마스터한다.
인지과학, 신경생물학, 교육심리학 분야의 최신 연구 결과를 바탕으로 구성된 두뇌 정복 학습법을 따라 한다면 빠른 시간 안에 가장 효율적으로 모바일 웹을 마스터할 수 있다.

어떤 독자를 위한 책인가?

• 반응형 웹 개발자
• HTML, CSS, javascript 등 웹 기술을 기본적으로 알고 있는 웹 개발자

다음의 질문에 모두 "예"라고 대답한다면, 이 책은 바로 여러분을 위한 책입니다.

① 웹 디자인이나 웹 개발 경험이 있나요?
② 중요한 모바일 웹 개념을 배우고, 이해하고, 외우고, 적용해서 여러분의 모바일 웹 페이지를 더욱 흥미로운 대화식 페이지로 만들고 싶은가요?
③ 재미없고 따분하고 학구적인 강의보다는 활기 넘치는 대화식 커뮤니케이션을 더 좋아하나요?

"네이티브가 좋은지 웹이 좋은지 실랑이 벌이느라 시간 허비하지 말고, 모바일 프로그램 개발의 기본부터 고급까지 완벽히 설명하는 이 책부터 읽어보세요."
- 안드레아 트라사티, DeviceAtlas 프로젝트 리더, WURFL 공동개발자

곧 PC보다 스마트폰이나 태블릿에서 웹에 접근하는 비율이 높아지리라 예상됩니다. 따라서 이제는 웹사이트 개발에도 모바일 전략이 필요합니다. 그럼 무엇부터 시작할까요? 여러분에게 익숙한 HTML, 자바스크립트, CSS 등의 웹 기술로 디바이스에 상관없이 잘 동작하는 웹사이트와 웹 앱 제작법을 『Head First Mobile Web』에서 학습할 수 있습니다. 모바일 퍼스트 전략으로 모바일에 최적화된 사이트를 만들고 반응형 웹 디자인을 만들 수 있습니다. 또 WURFL을 이용한 장비 추적 기술을 익힐 수 있습니다. 게다가 폰갭을 이용한 웹앱 개발법까지 배울 수 있습니다. 이제 『Head First Mobile Web』으로 놀이하듯 재미있고 빠르게 모바일 웹 개발을 학습해봅시다. 웹 서버 구축과 WURFL 및 안드로이드 SDK 설치는 물론이고, 퍼즐과 퀴즈까지 덤입니다.

서문
모바일 웹에 빠져 보세요. 여러분은 무언가를 배우기 위해 이 책을 보고 있지만 여러분의 두뇌는 배운 내용을 받아들이려 하지 않습니다. 아마 "어떤 야생 동물을 피해야 하는지에 대한 정보나, 불이 났을 때 블랙베리 볼드폰으로 스프링클러를 작동시키는 방법 같은 더 중요한 것을 위해 자리를 남겨 두어야 해"라고 생각하고 있을 겁니다. 모바일 웹을 알아야만 더 나은 삶을 살 수 있다고 믿도록 만들려면 어떻게 해야 할까요?

1장 모바일 웹 시작하기: 반응형 웹 디자인
그럼 모바일에 빠져들 준비가 되었나요? 모바일 웹 개발은 아주 재미있는 분야입니다. 매력적이고 흥미진진하며, "바로 이거구나!"라고 느끼는 순간을 많이 만나게 될 겁니다. 물론 힘들거나 까다로운 부분도 있습니다. 모바일 기술은 정신없을 정도로 빠르게 발전하며 알아야 할 내용도 무척 많습니다. 서두르지 마세요. 우선 반응형 웹 디자인(Responsive Web Design, RWD)이라 부르는 웹사이트를 만드는 것부터 시작하겠습니다. 여러분이 이미 알고 있는 웹 기술에 이것을 더하면 어느 모바일 장치에서도 멋지게 출력되는 웹사이트를 만들 수 있습니다.

2장 제대로 반응하기: 모바일 우선(Mobile First)의 반응형 웹 디자인
아름다운 모바일 사이트군요. 그런데 화장발이네요. 한 겹 벗겨내면 완전히 다릅니다. 겉으로 보기엔 모바일 사이트이지만, 이건 모바일 화장을 한 데스크톱 사이트에 불과합니다. 이 사이트가 모바일에서도 빠르게 동작하도록 만들려면 모바일 우선 전략을 써야 합니다. 먼저 현재 사이트를 해부해서 모바일 안에 숨어 있는 데스크톱 골격을 찾아내야 합니다. 그런 다음에 모바일에 맞는 기본적인 화면부터 시작해서 데스크톱 화면까지 이끌어내는 점진적 향상 방법을 적용하는 겁니다. 그렇게 하면 화면 크기와 상관없이 최적화된 페이지를 만들어낼 수 있습니다.

3장 별도의 모바일 웹사이트: 그리 환상적이지 않은 현실과 만나기
하나의 반응형 웹은 아름다운 환상일 뿐입니다... 모바일 우선의 접근 방법으로 구성된 하나의 레이아웃으로 어디에서나 문제없이 출력된다면 정말 좋을 겁니다. 그러나 짜증나는 현실에서 과연 그럴 수 있을까요? 구형 시스템, 오래된 장치, 또는 고객의 예산이 부족한 경우에는 어떻게 할까요? 심지어 데스크톱과 모바일을 모두 지원하도록 만들기는커녕 일부러 분리해야 할 때도 있습니다. 이 장에서는 모바일 사용자를 알아내는 방법과 구형 전화기를 지원하는 방법 그리고 별도의 모바일 사이트를 구축하는 방법에 대해 알아봅니다.

4장 무엇을 지원할지 결정하기: 어느 장치를 지원해야 할까요?
모든 장치를 테스트해 볼 시간은 없습니다. 어디까지 지원할지 선을 그어야 합니다. 그런데 어떻게 결정해야 할까요? 테스트해 볼 수 없는 장치를 사용하는 사람들은 어떻게 하죠? 들어본 적도 없는 장치에서도 웹사이트를 문제없이 출력하도록 만드는 게 가능할까요? 이 장에서는 고객들이 원하는 기능과 사이트 개발에 필요한 사항을 적절히 보완하여 어느 장치를 지원할 것인지 그리고 지원하지 않는 장치는 어떻게 할지 알아봅니다

5장 장치 데이터베이스와 클래스: 그룹으로 만들기
어느 장치를 지원할지 범위를 정하더라도 여전히 해결하기 힘든 문제가 있습니다. 콘텐츠를 사용자의 장치로 전송하기 전에 사용자의 모바일 브라우저가 콘텐츠를 제대로 출력할 수 있는지 어떻게 알 수 있을까요? 구형 장치에서도 문제없는 멋진 콘텐츠를 만들려면 어떻게 해야 할까요? 어떻게 하면 수많은 장치 정보를 헷갈리지 않도록 정리할 수 있을까요? 이 장에서는 장치의 기능에 대해 알아보고 장치 데이터베이스를 이용하여 원하는 정보를 가져오는 방법에 대해 배웁니다. 그리고 장치들을 분류해서 장치 클래스를 만드는 방법도 알아봅니다.

6장 프레임워크를 이용하여 모바일 웹앱 만들기: 타탄 만들기
"앱이 필요합니다!" 몇 년 전만 해도 이 말은 지원하고자 하는 플랫폼에 맞는 네이티브 코드 개발과 운용을 의미했습니다. 그러나 요즘에는 모바일 브라우저를 위한 웹 기반 앱이 대세가 되었으며, 특히 HTML5와 그의 동료인 CSS3, 자바스크립트가 뜨거운 관심을 받고 있습니다. 이제 모바일 웹앱을 쉽게 개발하도록 돕는 코드 툴인 모바일 프레임워크를 이용하여 모바일 웹앱의 세계로 발을 내디뎌 봅시다!

7장 모바일 웹앱의 진면목: 슈퍼 모바일 웹앱
모바일 웹앱은 철없는 천재와 비슷합니다. 아주 매력적이고 놀라운 것을 만들어내는 능력은 있지만, 이해하기 힘들고 예측할 수 없는 문제를 야기하기도 합니다. 그 동안 범위를 정하고 문제점을 상기하면서 에너지 넘치는 천재를 제어해 왔지만, 이제 모바일 웹의 타고난 재능을 발휘할 때가 되었습니다. 점진적 향상 방법을 통해 어느 브라우저에서나 깔끔한 인터페이스를 갖도록 만들고, 불안정한 연결 문제는 오프라인 모드로 멋지게 해결합시다. 그리고 지오로케이션으로 모바일의 진수를 느껴보세요. 이제 슈퍼 모바일 웹앱을 만들어 봅시다!

8장 폰갭으로 하이브리드 모바일 앱 만들기: 타탄 찾기, 네이티브 이용
때로는 네이티브 앱이 필요합니다. 모바일 브라우저에서 아직 지원되지 않는 작업을 해야 할 때도 있고, 고객이 반드시 앱스토어에 앱을 올려야 한다고 요청할 때도 있기 때문입니다. 누구나 브라우저 상에서 모든 일을 처리하고, 모바일 웹앱을 매혹적인 네이티브 앱처럼 즐기는 환상적인 미래를 원합니다. 하지만 현재로서는 하이브리드 개발 방법이 최선의 해결책입니다. 즉, 계속해서 웹 표준을 따르는 코드를 작성하되, 이 코드와 장치의 네이티브 기능 간의 차이를 이어주는 라이브러리를 이용하는 겁니다. 웹 기술로 플랫폼 간에 호환되는 네이티브 앱을 만든다? 꽤 괜찮은 협상 아닌가요?

9장 미래 지향적인 자세: 불확실한 미래 인정하기
반응형 웹 디자인, 장치 추적, 모바일 웹앱, 폰갭, 이 중에서 무엇을 사용해야 할까요? 모바일 웹을 개발하는 방법은 수없이 많습니다. 어떤 프로젝트에서는 여러 가지 기술을 섞어서 사용하기도 합니다. 정답이 없다고 걱정할 필요 없습니다. 흐름에 맞춰 계속 배워나가면 됩니다. 불확실한 미래를 인정하세요. 미래 지향적인 마음으로 대세를 따르고, 미래가 어떻게 변하든 잘 맞추어 나갈 수 있다는 확신을 가지세요.

부록 1. 6가지 중요한 이야기
부록 2. 웹 서버 환경 구축
부록 3. WURFL 설치하기
부록 4. 안드로이드 SDK와 도구 설치