남정현의 Windows Azure 블로그

이 책을 통해서:

* 요즈음 스마트 장치들을 위한 효과적인 인터페이스 디자인 방법
* HTML5와 CSS3를 사용하여 어떤 장치에서나 빠르고 유동적인 레이아웃을 만드는 방법
* 전환 효과, 터치, 문지르기 이벤트, 애니메이션 등 네이티브 앱과 같은 효과를 자바스크립트를 사용하여 만드는 방법
* API를 응용하여 내장된 장치의 기능들을 최대한 활용하는 방법
* PhoneGap을 이용하여 여러분의 웹 앱을 iOS, 안드로이드, 블랙베리 등의 모바일 플랫폼에서 실행되는 네이티브 앱으로 만들고 이를 마켓플레이스에서 판매하는 방법

등 많은 내용들을 얻을 수 있을 것이다.

머리말

대강 15년 전 즈음의 기억을 더듬어보자. 여러분은 당시의 최신 사양을 뽐내던 486 기종 컴퓨터에 E-MAIL 메시지를 다운로드 하기 위하여 기다리던 때가 있었다. 수백 메가바이트의 저장 공간, 16메가바이트 정도의 메모리, 그리고 256색의 찬란한 스크린이 떠오를 것이다. 그러던 어느 날, 갑자기 방 한구석에서 미래로부터 타임머신을 타고 찾아온 것만 같이 불빛이 반짝이기 시작했고, 손에 들고 다닐 수 있는 장치를 여러분의 삶 속에 조용히 등장시킨다. 여기에 고해상도의 디스플레이 패널을 본 순간 여러분은 감탄사를 연발했다. 이것이 지금의 인터넷의 모습으로, 항상 켜져 있고 언제나 여러분의 곁에 있다. 높은 대역폭, 부드러운 애니메이션, 화려한 시각적 효과를 보여주었고, 태그를 역사의 뒤안길로 보내버렸다.
웹은(적어도, 우리의 경험으로 보았을 때) 지난 세기 후반에 처음으로 큰 조류를 세상에 가져다준 이후로 느리지만 꾸준히 진화하고 발전해 나아가고 있다. 그러나, 지난 몇 년 동안은 우리가 정보를 얻거나 생산하는 방법을 모바일 웹이라는 것을 통해서 획기적으로 바꾸어놓았다. 이는 좀 더 ‘작은’ 휴대용 웹으로 불리며, 사람들 사이에 의사소통 하는 방법을 바꾸고 여러분의 제품을 사용하는 방법에 변화를 가져다 주었다. 웹의 개방성과 광범위하게 결합한 모바일 장치는 소비자와 발명가 모두에게 상상력의 불을 지폈다.
모바일 웹 이전의 웹에 대한 이점은 아직도 유용하다. 티켓을 구입하거나, 비용을 지불하는 것을 달리는 열차 안에서나 욕실에서 처리할 수 있다. 그러나 더욱 새롭고 흥미로운 가능성이 우리에게 열렸다. 우리가 오늘날의 하드웨어 위에 재미난 HTML5 API와 몇 가지 기존 웹에서의 경험을 결합시키게 될 때, 우리의 실생활과 인터넷을 서로 엮을 수 있게 되고, 이를 통해서 적절한 시점에 꼭 필요한 정보를 손바닥 위에 올려놓는다거나, 응답과 피드백을 기다리지 않고 즉석에서 보낼 수 있게 되는 등의 일이 가능해질 것이다.
이 책을 통해서, 예전에 만들어진 웹 사이트를 멋지고 세련된 모바일 웹 사이트로 전환시킬 수 있는지에 대해서 살펴볼 것이다. 그 다음, 여러분의 웹 사이트를 HTML5를 통해서 우리에게 제공될 API들(가령 위치 정보, 로컬 저장소, 가속 센서 등)을 이용하여 App처럼 꾸미는 방법을 살펴보면서 마치 모바일 애플리케이션처럼 작동하는 모바일 웹 사이트도 만들 것이다. 그리고 이렇게 만들어진 모바일 웹 사이트가 개방된 웹 표준과 보통의 App이 보여주는 미려한 디자인이라는 두 마리 토끼를 잡을 수 있도록 도울 것이며 어쩌면 이를 통해 수익성이 뛰어난 웹 사이트를 만들 수 있을 것이다.
이 책을 읽고 나면, 여러분은 단순히 모바일 웹 앱을 제작할 수 있는 능력만을 가진 것이 아니라, 역사상, 그리고 인터넷 세계에서 가장 흥미롭고 중요한 컴퓨팅 기술이라고 할 수 있는 모바일 웹에서 중요한 역할을 맡을 수 있게 될 것이다. 미래 지향적인 성향을 가진 위치 기반 App과 자이로센서를 사용하는 가젯(gadget)이 나날이 발전하고 있는 지금 이 순간에도 최고의 아이디어와 혁신적인 앱들에 대한 요구는 끝나지 않는다. 이를 발굴할 수 있는가는 전적으로 여러분의 몫이다.

누가 이 책을 읽어야 하는가

이 책은 스마트폰이나 태블릿 PC와 같은 최신 모바일 장치의 기능을 이용하는 웹 사이트나 App을 개발하기 원하는 웹 개발자들을 위하여 맞추어져 있다. 독자 여러분은 적어도 HTML, CSS 그리고 자바스크립트와 같은 기술에 대해 중급 이상의 기술을 가지고 있어야 하며 이 책에서 이러한 기술들의 기본 내용은 다루지 않을 것이다. 대신, 모바일 분야에서 이러한 기술들이 적용될 수 있는 내용을 주로 다룬다. 여기에는 HTML5, CSS3와 같은 최신 표준을 일부 포함하나, 이러한 최신 표준에 대해서 익숙하지 않더라도, 가능한 자세히 설명할 수 있도록 책을 저술하였으므로 큰 걱정은 하지 않아도 된다.

이 책에서 다루는 내용

이 책은 총 8개의 장으로 구성되어 있고 1개의 부록을 수록하고 있다. 각 장은 순차적으로 읽을 수 있도록 구성되어 있으나, 특정한 주제만 따로 읽어보고 싶다면 임의로 특정 장을 따로 참조할 수도 있다.

1장: 모바일 웹 디자인에 대한 소개모바일 장치를 위한 디자인이라는 것이 어떤 내용인지 살펴보는 것으로 이 책을 시작한다. 모바일 환경에서 사용할 수 있는 웹 사이트를 설계하고 디자인 하기 위하여 고려해야 할 사항들을 단계별로 살펴보게 될 것이다. 비록 여기서는 주로 스마트폰을 위한 내용을 다루게 될 것이지만 언급하는 모든 조언들은 다양한 형태의 모바일 장치에서 널리 통용할 수 있는 내용들이다.

2장: 모바일을 위한 디자인당연한 이야기이지만, 고객들에게 항상 최상의 콘텐츠를 제공할 수 있도록 노력하는 것이 우리의 목표이다. 그러나, 어떤 부분에 역점을 두어 고객들이 이러한 정보를 쉽게 찾을 수 있도록 맥락을 구성해야 하는지에 대한 것이 문제가 될 수 있다. 이 장에서는 웹 개발자와 웹 디자이너로서 할 수 있는 일과, 그러한 일들을 통해서 어떤 영향을 줄 수 있는지에 대한 이야기를 해보고자 한다.

3장: 모바일을 위한 마크업이번 장에서는 표준을 준수하는 웹 개발 기술을 사용하는 모바일 웹 애플리케이션을 만들기 위해서 HTML 5와 CSS 3의 기능들을 살펴보고자 한다. 정확하게 작성한 HTML 페이지와 잘 정돈된 마크업을 사용하면 데스크톱이나 모바일 등에 관계없이 모든 장치에서 자유자재로 디스플레이가 가능한 웹 페이지를 작성할 수 있다.

4장: 모바일 웹 앱이 장에서는 우리가 작성하려는 모바일 웹 사이트를 모바일 마켓플레이스에 내다 팔 수 있도록 좀 더 사용자 친화적인 형태의 모바일 애플리케이션으로 바꾸는 방법을 살펴보고자 한다. 기술의 한계점과 우리가 활용할 수 있는 기술의 범위를 정확히 판정하면서도, 웹 방식으로 네이티브 앱만의 고유한 기능들을 구현하여 우리가 작성하려는 모바일 웹 사이트를 마치 네이티브 앱과 같이 변화시켜 재미있게 사용할 수 있도록 하는 방법을 알아볼 것이다.

5장: 웹 앱에서 장치의 기능 사용하기스마트폰 사용량의 증가에 따라 네이티브 앱에서만 사용할 수 있을 것이라 생각했던 고급 기능들이 구현되기 시작하였다. 다행히, 최근에 개발중인 표준들을 지원하는 모바일 웹 브라우저들의 발 빠른 지원 덕택에 웹 앱에서도 이러한 기능을 특별한 노력 없이 쉽게 사용할 수 있게 되었다. 이 장에서는 새 하드웨어가 제공하는 이벤트 기반의 API를 어떻게 사용할 수 있는지 그 방법을 살펴볼 것이다.

6장: 웹 앱을 더 빛나게 만들기이제 기본적인 작업을 마쳤다면, 우리들이 만든 앱을 꾸며서 광택을 낼 차례이다. 이 장에서는 웹과 네이티브 앱 사이에 존재하는 불연속성 혹은 부자연스러움을 어떻게 관리할 수 있는지 그 방법을 살펴보고 마켓플레이스에 내놓을 수 있을 만큼 재치 있는 앱을 만들어볼 것이다.

7장: PhoneGap 소개이 장에서는 우리가 만든 웹 앱을 PhoneGap 프레임워크를 이용하여 여러 플랫폼에서 원활하게 실행되는 네이티브 앱으로 어떻게 변환할 수 있는지에 대해 초점을 맞추고자 한다. iOS, Android, BlackBerry, webOS, 그리고 PhoneGap을 사용하기 위해서 필요한 소프트웨어들을 설치하는 과정 역시 살펴볼 것이다.

8장: 웹 앱을 네이티브 앱으로 만들기마지막으로, 우리들이 만든 웹 앱을 네이티브 환경에서 실행되는 네이티브 앱으로 만드는 것을 해보려고 한다. 각각의 플랫폼에 맞게 커스터마이징된 앱에서 어떤 기술이 활용되었는지 살펴보고, 또한 마켓플레이스 등재 심사에 영향을 줄 수 있는 비효율성이나 부자연스러움을 제거하는 과정도 살펴보려고 한다. 그리고 이 장의 마지막에서는 시뮬레이터를 통하여 모든 중요한 테스트를 진행하는 과정을 살펴보고자 한다.

부록 A: 테스트를 위한 서버 구축하기모바일 장치에서 웹 사이트를 테스트 하는 것은 보통의 데스크톱 웹 사이트를 테스트 하는 것보다는 조금 더 복잡하다. 이 장에서는 여러분이 구축한 개발자 컴퓨터로부터 휴대 전화로 웹 페이지를 전송할 수 있는 간단한 웹 서버들 몇 종류를 살펴볼 것이다.

옮긴이의 글

‘프로 SQL 애저 입문’ 책을 내면서 동시에 제안받았던, 개인적으로는 모바일 웹 기술에 대한 시선을 다시 고칠 수 있었던 멋지고 실용적인 책의 번역을 또 한번 끝내게 되어 개인적으로는 매우 기쁘다.
한 여름에 시작하여 번역을 끝내고 보니 어느새 크리스마스를 지나 새해가 왔다. 그 동안 웹 기술에는 많은 변화가 있었으며 이 책이 다루지는 않지만 HTML5, CSS3를 지원하는 주류 플랫폼에 드디어 PC 운영체제들도 합류하기 시작하였다. 이 책이 여러분에게 가져다 줄 의미는 더 클 수밖에 없고, 나 또한 매우 큰 보람을 느낀다.
웹 브라우저의 기술이 날이 갈수록 빠르게 진보하고 있다는 사실을 모르는 사람들은 아무도 없다. 그러나 최근 그 동향이 심상치 않다는 것도 부정할 수 없을 것이다.
HTML5를 필두로 네이티브 환경에서만 가능하다고 여겨졌던 여러가지 새로운 기술 스택이 날이 갈수록 불어나고 있으며 재미 있는 사실은 이러한 기술들을 상용 소프트웨어 개발 업체이든 오픈 소스 프로젝트이든 어디서나 경쟁적으로 먼저 수용하려고 최대한 노력을 기울이고 있다는 사실이다.
그리고 이제는 컴퓨터를 이용하여 사람들이 좀 더 일상적이고 생활에 도움이 되는 일을 하기 원한다는 트렌드와 맞물려 콘텐츠의 중요성 또한 날이 갈수록 증대되고 있다.
이러한 모든 현상들을 결집하여 하나의 완전한 마스터피스를 만들고 싶다면 여러분이 이 책을 고른 것은 매우 탁월한 선택일 것이라고 본다. 이 책에는 여러분의 이러한 고민을 쉽게 풀어줄 수 있는 멋진 솔루션들이 가득 담겨 있기 때문이다. 또한 이 책은 SITEPOINT의 실용적인 철학을 가득히 담고 있다.
이 책을 읽게 될 웹 개발자와 웹 디자이너 모두 모바일 웹 개발에 대한 막연함을 버리고 자신감을 얻을 수 있기를 바란다.