모바일 웹 앱 개발하기(스마트폰을 위한)(반양장)

'스마트폰을 위한 모바일 웹&앱 개발하기'는 모바일 웹 개발의 경이로운 가능성으로 안내하는 책으로, 최일선의 웹 디자이너와 웹 개발자들을 위한 실용 가이드이다. 여러분은 이 책에서 이전과 다른 흥미롭고 새로운 방식의 모바일 웹 디자인과 웹 개발 방법을 찾아나가면서 무한한 가능성을 보게 될 것이다.



모바일 웹 개발은 매우 빠른 속도로 변화하고 있으며, 그 중에서도 터치스크린 방식의 스마트폰에 대한 비중이 날로 높아지고 있는 중이다. 이 책의 지침을 따르면, 여러분은 이러한 새로운 기술의 상당부분에 대한 스킬을 거의 완벽하게 학습할 수 있을 것이다.



이 책을 통해서:



* 요즈음 스마트 장치들을 위한 효과적인 인터페이스 디자인 방법

* 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의 실용적인 철학을 가득히 담고 있다.

이 책을 읽게 될 웹 개발자와 웹 디자이너 모두 모바일 웹 개발에 대한 막연함을 버리고 자신감을 얻을 수 있기를 바란다.



남정현

Chapter1 모바일 웹 디자인 소개 1



모바일 웹 디자인은 무엇을 의미하는가? 2

왜 이러한 고려 사항들이 중요한가? 3

네이티브의 유동성 3

네이티브 앱을 만드는 것이 어려운 이유 5

출발점에 서기 8

앱 만으로는 충분하지 않다 9

첫 번째 선택: 아무것도 하지 않기 9

두 번째 선택: 변신하기 11

세 번째 선택: 독립된 모바일 웹의 구축 13

프레임워크에 대한 이야기 14

지금까지 한 이야기들 정리하기 16



Chapter2 모바일을 위한 디자인 17



더 나은 마우스 만들기 18

호버링 20

작은 화면 21

인지에 들이는 노력 22

높은 곳에서 내려다보기 23

캐러셀 24

탭 바 26

리스트 27

요약 29

실전에 적용하기 29

넓게 생각하기 29

사용자 프로필 30

핵심 기능 집합 정의하기 31

스케치 하기 32

연필과 종이 33

연예인이 나타난 위치로 찾기 35

개요와 상세 39

연예인 별로 나타났던 상황 찾기 40

연예인 발견 정보 추가하기 43

한 데 모으기 43

문제점으로부터 벗어나기 45

홈 스크린 45

스타일 반영하기 47

터치 가능한 인터페이스 48

인터페이스 아이콘 51

타이포그래피 53

성능 고려 사항 54

디자인 테스트 하기 57

디자인 검토하기 58

앱 아이콘 62

매력을 뽐낼 시간 65



Chapter3 모바일을 위한 마크업 67



본질 위의 스타일 69

탭 바 71

줄, 줄 그리고 줄 76

이미지와 추상 요소 83

뷰 포트에 대한 이해 89

(리소스에 대한) 제약 사항을 아는 것 93

점진적으로 나아가기 95

우리를 구원해줄 Modernizr 95

가볍게 만들기 98

확대 가능한 이미지 107

완벽한 픽셀 그리기 109

멀티미디어 다루기 110

단독 실행 모드 112

사용자들에게 알리기 115

앱의 아이콘 117

그 외에 더 고려할 사항들 122

줄임표를 사용해서 긴 텍스트를 줄여 표시하기 122

텍스트 크기 조절 125

터치를 위한 강조 색상 126

터치 부가 기능 126

사용자 지정 선택 127

성능상의 고려 사항들 127

더 나아가기 128



Chapter4 모바일 웹 앱 129



터전 만들기 129

프레임워크와 라이브러리 130

모바일 자바스크립트 디버깅하기 131

이벤트 133

간단한 터치 이벤트 136

기능 감지하기 137

빠른 구현 139

유용한 링크 139

폼 필드 속성 142

페이지 불러오기 145

페이지 바꾸기 146

WebKit의 애니메이션 효과 사용하기 149

슬라이딩 157

뒤로 돌아가기 160

Ajax 172

HTML 받아오기 173

Ajax 스타일로 링크 만들기 175

템플릿 178

템플릿을 이용한 트위터 통합 182

우리만의 앱을 만들다 186



Chapter5 웹 앱에서 장치의 기능 사용하기 187



위치 정보 188

오류 처리하기 198

가속도 센서: 장치의 방향 202

가속도 센서 203

흔들기 제스처 205

터치 제스처 207

포토 갤러리 넘기기 209

핀치와 확대 214

오프라인으로 이동하기 218

캐시 매니페스트 218

캐시 매니페스트 이벤트 223

NETWORK 섹션과 FALLBACK 섹션 226

유용한 장 228



Chapter6 웹 앱을 더 빛나게 만들기 229



웹 앱의 트릭 229

고정된 메뉴 230

빠르게 클릭하기 235

라이브러리 로딩하기 237

기능 점검하기 238

위젯 240

대화 상자 241

스피너 245

클라이언트에 데이터 저장하기 247

로컬 스토리지 247

웹 SQL 데이터베이스 251

모든 것을 한데 묶기 256

모듈 256

커스텀 이벤트 261

다른 프레임워크들 263

결론 264



Chapter7 PhoneGap 소개 267



네이티브 앱에 웹 페이지를 끼워넣기 268

PhoneGap 270

고려 사항 271

콜백에 친숙해질 것 271

디버깅의 어려움 272

언캐니 밸리 273

앱 마켓플레이스의 복잡성 274

대안 274

SDK 설치하기 275

Xcode(OS X) 277

MacPorts(OS X) 277

Git 278

자바 개발 킷 279

이클립스 280

Apache Ant 281

Apple iOS SDK 282

안드로이드 SDK 282

블랙베리 SDK 287

WebOS SDK 287

PhoneGap 설치하기 288

Xcode 288

안드로이드 290

블랙베리 293

webOS 294

리뷰 295



Chapter8 웹 앱을 네이티브 앱으로 만들기 297

PhoneGap 앱 해부하기 297

아이콘, 스플래시 스크린 그리고 이름 299

iOS 300

안드로이드 304

블랙베리 306

WebOS 307

이제 가다듬을 시간 307

PhoneGap 자바스크립트 도우미 308

준비되었는지 확인하기 308

경고 창 309

네트워크 상태 확인 310

지리 위치, 저장소, 그리고 장치의 방향 312

하드웨어 버튼 313

카메라 기능 사용하기 315

실제로 구동하기 319

iOS 320

안드로이드 322

블랙베리 323

WebOS 323

앱 판매하기 324

Apple 앱 스토어 324

안드로이드 마켓 327

블랙베리 앱 월드 329

팜 앱 카탈로그 330

축제의 시간 332



부록 A 테스트를 위한 서버 구축하기 335



파이썬을 이용하여 구축하기 336

루비를 이용하여 구축하기 336

내장된 서버 사용하기 337

Windows 환경에서 IIS로 서버 구축하기 337

리눅스에서 아파치로 서버 구축하기 338

Earle Castldine 저자 Earle Castledine은 정보 기술 석사를 취득하고, 웹 업계에서 고난을 거쳐 일생을 보내면서, Earle Castledine은 컴퓨터 분야에 관련된 모든 것에 관심을 두게 되었다. 8비트 아키텍처의 가정용 컴퓨터로 처음 시작하여, 90년대 중반에 인터넷에 발을 담근 이후로 지금껏 인터넷 업계의 일을 하고 있다. 그는 현재 자바스크립트 세계 정복 계획이라는 프로젝트를 위하여 공헌하고 있으며, 모바일 웹 애플리케이션을 만들고, 세련된 프레임워크를 개발하며, 종종 프랑스 파리에 위치한 Zenexity에서 일하는 유능한 친구들과 함께 뱅 루즈(적 포도주)를 마시며 일을 즐긴다. 클라이언트 중심의 프로젝트인 TurnTubelist(http://www.turntubelist.com/)의 공동 창업자이기도 한 그는 수많은 웹 기반의 실험으로 인터넷이 사회를 변화시켜줄 윤활유는 아니지만, 따분한 ECMAScript 기반의 물건들을 재미있게 만들고, 지루한 시간을 보내는 데 활용하고 있다.