저자소개박성진고려대학교에서학사, 석사, 박사학위를취득하고한국전자통신연구원선임연구원을거쳐 2000 년부터한신대학교컴퓨터공학부에서교수로재직중이며웹프로그래밍과데이터베이스관련교과목을강의하고있다. 저서로는 데이터베이스시스템 과 데이터웨어하우스 등이있다. ( 제이쿼리모바일 폰갭을

저자소개박성진고려대학교에서학사, 석사, 박사학위를취득하고한국전자통신연구원선임연구원을거쳐 2000 년부터한신대학교컴퓨터공학부에서교수로재직중이며웹프로그래밍과데이터베이스관련교과목을강의하고있다. 저서로는 데이터베이스시스템 과 데이터웨어하우스 등이있다. ( 제이쿼리모바일 폰갭을활용한 ) 모바일웹 + 웹앱 + 하이브리드앱입문 초판인쇄 2015 년 2 월 6 일 초판발행 2015 년 2 월 13 일 지은이박성진펴낸이김승기펴낸곳 ( 주 ) 생능출판사 / 주소경기도파주시광인사길 143 출판사등록일 2005년 1월 21일 / 신고번호제406-2005-000002호대표전화 (031)955-0761 / 팩스 (031)955-0768 홈페이지 www.booksr.co.kr 책임편집김민보 / 편집최일연, 신성민, 손정희 / 디자인유준범마케팅백승욱, 심수경, 최복락, 최권혁, 백수정, 이재원, 김민수, 최태웅인쇄 제본정성북앤북 ISBN 978-89-7050-826-9 13560 정가 28,000원 이도서의국립중앙도서관출판예정도서목록 (CIP) 은서지정보유통지원시스템홈페이지 (http://seoji.nl.go.kr) 와국가자료공동목록시스템 (http://www.nl.go.kr/kolisnet) 에서이용하실수있습니다. (CIP 제어번호 : CIP2014035572) 이책의저작권은 ( 주 ) 생능출판사와지은이에게있습니다. 무단복제및전재를금합니다. 잘못된책은구입한서점에서교환해드립니다.

P R E F A C E 머리말 우리주변에서점차모바일기기를이용하여인터넷에접속하는경우를흔히볼수있고실제그비율도가파르게증가하고있습니다. 어느틈엔가모바일은우리생활가운데깊숙이들어와있으며인터넷접근환경도자연스럽게변화되고있습니다. 현재국내스마트폰사용자는 4천만명을넘어서고있고모바일애플리케이션에대한요구와소비도증가하여이제는개인도자신의애플리케이션을모바일시장에손쉽게선보일수있는시대가되었습니다. 웹기술은비교적빠른시간에습득할수있는기술이며다양한응용환경에편리한인터페이스로활용할수있기에누구나알아야하는기본기술이기도합니다. 웹관련기술은최근모바일환경의변화와관련하여보다다양해지고강력해지고있습니다. 그에비해초심자가웹기술을배우고익히기에기술들이너무나광범위하고복잡해서상당한시간과노력을기울여야만합니다. 다양한기술에관한웹관련책들을쌓아놓고씨름하다보면전체적인흐름과핵심기술들의연관관계, 활용방법등을파악하기도전에지쳐포기하기쉽습니다. 이책은책한권으로다양한웹기술을빠른시간에이해하고습득할수있도록구성하였습니다. HTML5, CSS3, JavaScript, jquery, Ajax, XML, JSON, Database, jquery Mobile, PhoneGap 등현시점에서반드시알아야하는필수웹기술요소들에대해핵심적인내용들을예제를통해학습할수있도록하였습니다. 방대한내용이지만핵심적인개념과다양한마크업과스타일, 메소드, API 함수에대한간결한설명, 그리고이를적용한다양한예제를적용하고만들어가다보면초보자라도빠르게전문가가될수있을것입니다. 3 머리말

P R E F A C E 모바일웹앱의등장으로웹과네이티브앱의경계가무너지고있고다수의네이티브앱들은모바일웹앱으로도충분히개발할수있습니다. 이책은모바일웹앱과이에기반한하이브리드앱을쉽고빠르게개발하도록지원해주는프레임워크의활용방법에대해알기쉽게설명하였습니다. 특히, 안드로이드플랫폼기반의웹앱과하이브드리앱에초점을맞추고있습니다. 손쉽게모바일사용자경험 (UX) 를제공하는가장인기있는프레임워크인제이쿼리모바일과다양한플랫폼기반의애플리케이션개발을위한가장강력한프레임워크인폰갭의활용방법과이에기반한앱개발과정을배울수있습니다. 이책은핵심웹기술에대한소개와설명에그치지않고실제적용할수있는다양한구체적예제를통해웹활용능력을충분히습득할수있도록구성하였습니다. 이해를돕는간단한예제코드수준에그치지않고실제활용가능한소규모의프로젝트코드를제공하였습니다. 포트폴리오모바일웹, 도서관리웹앱, 지도관리하이브리드앱, 맛집관리하이브리드앱등실제로사용가능한수준의다양한예제와전체코드를제공하였습니다. 이책을통해서여러분누구나웹기반의앱을개발하고다양한플랫폼환경에서동작하도록패키징함으로써앱마켓이나스토어를통해배포할수있습니다. 모바일웹개발경험이없거나아직부족한개발자도모바일앱개발기술을단시간에빠르게습득하여실무에적용할수있는유용한학습서가될것입니다. 자 ~ 함께모바일웹의세계로떠나봅시다! 끝으로이책이만들어지기까지적극적으로지원해주시고출판에힘써주신생능출판사김승기대표님과편집부여러분께깊은감사를드립니다. 2015년 1월저자박성진 4 머리말

누구를위한책인가? 웹기초부터활용까지체계적으로공부하고자하는경우 웹관련기술들의개념과상호관계를빠른시간에습득하고자하는경우 IT 기본기술로서의웹을이해하고활용능력을얻고자하는경우 웹기초는이해하고있으나모바일활용방법을알고자하는경우 단순한예제코드가아닌실제활용가능한다양한응용예제를필요로하는경우 무엇에관한책인가? HTML5 기본마크업의의미와사용방법에관한설명과예제 CSS3의스타일명세방법과적용예제 jquery의핵심 API 활용방법과예제 XML, Ajax, JSON, SQLite 웹관련기술의이해와활용예제 jquery Mobile 프레임워크를활용한 UI 생성및예제 PhoneGap 프레임워크를활용한하이브리드앱변환과예제 어떤활용예제를포함하고있나? HTML5 + CSS3를활용한모바일웹개인포트폴리오모바일웹 : mportpolio (4장 4.1) jquery Mobile을활용한웹앱독도소개웹앱 : dokdoapp (8장 5.1) jquery Mobile + jquery를활용한웹앱관광지안내웹앱 : tourapp (11장 6.1) 도서관리웹앱 : bookapp (12장 1.1) PhoneGap API를활용한하이브리드앱장치관리앱 : deviceapp (14장 2.1) 사진관리앱 : cameraapp (14장 3.1) 연락처관리앱 : contactapp (15장 1.1) 구글맵지도활용앱 : mapapp (15장 2.2) jquery Mobile + jquery + PhoneGap API를활용한하이브리드앱맛집앱 : matzipapp (16장 1.1) 어떤소프트웨어를설치하여사용하고있나? Chrome Aptana Studio 3 standalone 버전 JDK 1.8.0 Eclipse ADT 번들 23.0.2 MDS AppLaud 폰갭이클립스플러그인 1.2 jquery Mobile 1.1.0 jquery 1.6.4. 1.7.2 PhponeGap 2.9.0 워낙빠르게발전하는분야이기때문에개발환경구성이나플랫폼설정및구현방법등이버전에따라조금씩변경될수있습니다. 책내용을충실히익히고나면이를토대로추후변경되는부분들을얼마든지스스로해결할수있을것으로생각됩니다.

C O N T E N T S 차례 첫째마당 HTML5 와 CSS3 를이용한모바일웹 Chapter 01 모바일웹환경 1. 웹의진화 18 1.1 웹환경의변화 18 1.2 웹기술의발전 19 2. HTML5 22 2.1 HTML5의등장 22 2.2 HTML5의특징 26 3. 플랫폼이된웹브라우저 28 3.1 웹브라우저 29 3.2 웹브라우저엔진 31 4. 모바일웹환경 34 4.1 데스크톱웹과모바일웹 34 4.2 모바일앱 35 4.3 모바일앱프레임워크 38 Chapter 02 HTML5 기초다지기 6 머리말 1. HTML5 개요 42 1.1 HTML5 문서 42 1.2 HTML5의기본요소 45 1.3 HTML5 마크업명세규칙 47 2. HTML5 태그 48 2.1 기본태그 48 2.2 글자태그 49 2.3 목록태그 52

C O N T E N T S 2.4 링크태그 53 2.5 테이블태그 54 3. HTML5 미디어태그 57 3.1 이미지관련태그 57 3.2 오디오관련태그 59 3.3 비디오관련태그 62 4. HTML5 공간분할태그와시맨틱태그 65 4.1 공간분할태그 65 4.2 시맨틱태그 67 4.3 HTML5 레이아웃의변화 69 4.4 시맨틱레이아웃작성하기 70 Chapter 03 CSS3 기초다지기 1. CSS3 개요 76 1.1 스타일시트기초 76 1.2 CSS3 스타일선언방법 78 2. 선택자 81 2.1 기본선택자유형 81 2.2 확장선택자유형 86 3. 스타일시트선언방식 88 3.1 스타일시트선언방식 88 3.2 스타일시트선언방식적용예 89 4. 스타일속성 92 4.1 CSS3의글자스타일속성 92 4.2 CSS3의색상 ( 배경 ) 스타일속성 97 4.3 CSS3의목록스타일속성 100 4.4 CSS3의테이블스타일속성 103 5. 박스모델 105 5.1 박스모델구조 105 5.2 박스모델스타일속성 106 6. CSS3 레이아웃 110 6.1 컨테이너 110 6.2 화면배치스타일속성 111 7 머리말

C O N T E N T S 6.3 float 모드관련스타일속성 114 7. 확장폰트 118 7.1 웹폰트 118 7.2 사용자정의폰트 120 Chapter 04 모바일웹개발 1. 뷰포트 128 1.1 뷰포트 128 1.2 뷰포트메타태그 130 2. 미디어유형 132 2.1 미디어유형 132 2.2 미디어유형종류 133 3. 미디어쿼리 136 3.1 미디어쿼리속성 136 3.2 미디어쿼리적용예 139 4. [ 실습 ] 모바일웹개발 142 4.1 개인포트폴리오모바일웹 : mportpolio 142 4.2 실습예제코드 143 둘째마당제이쿼리모바일을이용한웹앱 Chapter 05 제이쿼리모바일기초다지기 8 머리말 1. 제이쿼리모바일개요 156 1.1 모바일웹앱개발 156 1.2 프레임워크연결방식 159 1.3 프레임워크기본구성형식 161 2. 화면구성및페이지연결 164 2.1 웹앱화면구성 164 2.2 페이지연결방식 166 2.3 페이지도메인링크방식 167 3. 페이지전환 173

C O N T E N T S 3.1 페이지전환효과 173 3.2 외부프로그램링크 176 Chapter 06 제이쿼리모바일헤더바와푸터바 1. 헤더바 182 1.1 툴바 182 1.2 헤더바 182 2. 푸터바 190 3. 네비게이션바와툴바 193 3.1 네비게이션바 193 3.2 툴바위치설정 195 Chapter 07 제이쿼리모바일버튼과리스트뷰 1. 버튼 204 1.1 버튼생성 204 1.2 기본버튼종류 206 1.3 아이콘버튼의변형 212 1.4 확장버튼종류 216 2. 리스트뷰기초 220 2.1 기본리스트뷰 221 2.2 연결리스트뷰 222 2.3 중첩리스트뷰 224 2.4 순서리스트뷰 225 2.5 인셋리스트뷰 227 2.6 분할리스트뷰 228 3. 리스트뷰고급 231 3.1 카운트버블 231 3.2 리스트구분자 232 3.3 썸네일리스트뷰 234 3.4 아이콘리스트뷰 237 3.5 여러줄리스트뷰 238 3.6 검색필터리스트 240 3.7 제이쿼리리스트뷰활용예 241 9 머리말

C O N T E N T S Chapter 08 제이쿼리모바일대화상자와폼 1. 대화상자 250 1.1 대화상자 250 1.2 페이지테마 254 2. 콘텐츠영역의레이아웃 257 2.1 기본레이아웃형식 257 2.2 그리드레이아웃형식 259 3. 접이식패널레이아웃 264 3.1 기본접이식패널 265 3.2 중첩접이식패널 266 3.3 그룹접이식패널 268 4. 폼요소 269 4.1 HTML5 표준폼태그 270 4.2 네이티브폼컨트롤 272 4.3 모바일폼컨트롤 : 입력상자 274 4.4 모바일폼컨트롤 : 선택메뉴 285 5. [ 실습 ] 독도소개웹앱개발 289 5.1 독도소개웹앱 : dokdoapp 289 5.2 실습예제코드 290 셋째마당제이쿼리를이용한동적인웹앱 Chapter 09 제이쿼리기초다지기 10 머리말 1. 제이쿼리개요 300 1.1 제이쿼리 300 1.2 자바스크립트 302 1.3 제이쿼리연동 305 1.4 DOM 308 2. 제이쿼리함수 310 2.1 제이쿼리의기본기능 310 2.2 jquery( ) 함수 310

C O N T E N T S 3. 제이쿼리선택자 318 3.1 제이쿼리선택자 318 3.2 제이쿼리선택자유형 320 Chapter 10 제이쿼리응용다지기 1. 제이쿼리메소드 332 1.1 제이쿼리스타일관련메소드 332 1.2 DOM 트리관련메소드 335 1.3 기타메소드 339 2. 제이쿼리이벤트 342 2.1 제이쿼리이벤트 342 2.2 이벤트핸들러연결및해제 343 2.3 이벤트메소드 344 2.4 이벤트활용예 345 3. 제이쿼리효과 347 3.1 제이쿼리효과 347 3.2 사용자정의효과생성하기 348 3.3 제이쿼리효과활용 349 Chapter 11 XML, Ajax, 제이쿼리활용 1. XML 개요 356 1.1 XML 356 1.2 HTML5과 XML 357 1.3 XML의특성 360 2. XML 문서작성 361 2.1 XML 문서구조 361 2.2 XML 코딩규칙 363 2.3 XML 기본요소 363 2.4 XML 문서작성 366 3. 네임스페이스 369 3.1 네임스페이스 369 3.2 네임스페이스선언방법 369 4. XML 문서의 CSS 적용 372 11 머리말

C O N T E N T S 5. 제이쿼리 Ajax 374 5.1 제이쿼리 Ajax 375 5.2 $.ajax( ) 메소드의 XML 문서적용예 377 5.3 $.getjson( ) 메소드의 JSON 형식데이터적용예 381 5.4 $.load( ) 메소드의 HTML 문서적용예 384 6. 제이쿼리활용예제 386 6.1 관광지안내앱 : tourapp 386 6.2 예제코드 387 Chapter 12 데이터베이스와제이쿼리활용 1. [ 실습 ] 도서관리웹앱개발 394 1.1 로컬 DB 기반의도서관리앱 : bookapp 394 1.2 UI 화면구성 395 1.3 내부스크립트함수구성 399 1.4 데이터베이스관련함수정의 403 1.5 실습예제코드 407 넷째마당폰갭을이용한하이브리드앱 Chapter 13 하이브리드앱과폰갭 12 머리말 1. 하이브리드앱개요 422 1.1 하이브리드앱 422 1.2 하이브리드프레임워크 424 2. 폰갭개요 425 2.1 폰갭 426 2.2 폰갭개발절차 428 3. 폰갭안드로이드개발환경 429 3.1 안드로이드개발환경구축 429 3.2 폰갭프로젝트개발환경구축 429 4. 폰갭프로젝트생성및실행 430 4.1 폰갭기본프로젝트생성하기 430

C O N T E N T S 4.2 폰갭패키징 434 4.3 폰갭프로젝트실행하기 435 Chapter 14 폰갭 API 를활용한앱만들기 I 1. 폰갭 API 442 1.1 폰갭 API 개요 442 2. 장치관리하이브리드앱개발 443 2.1 장치관리앱 : deviceapp 444 2.2 단말기정보확인하기 445 2.3 진동시키기 448 2.4 방위각정보확인하기 449 2.5 배터리정보확인하기 451 2.6 네트워크연결정보확인하기 452 2.7 위치정보확인하기 453 2.8 실습예제코드 454 3. 사진관리하이브리드앱개발 458 3.1 사진관리앱 : cameraapp 458 3.2 사진촬영하기 460 3.3 사진불러오기 463 3.4 실습예제코드 464 Chapter 15 폰갭 API 를활용한앱만들기 II 1. [ 실습 ] 연락처관리하이브리드앱개발 470 1.1 연락처관리앱 : contactapp 470 1.2 연락처정보검색하기 472 1.3 연락처리스트뷰표시하기 476 1.4 연락처상세정보표시하기 479 1.5 연락처추가하기 484 1.6 실습예제코드 487 2. [ 실습 ] 지도 ( 맵 ) 활용하이브리드앱개발 494 2.1 jquery-ui-map 플러그인 494 2.2 구글맵지도활용앱 : mapapp 497 2.3 현위치지도표시하기 498 13 머리말

C O N T E N T S 2.4 검색위치지도표시하기 506 2.5 검색경로지도표시하기 510 2.6 실습예제코드 512 Chapter 16 실전프로젝트 : 맛집앱만들기 1. 맛집관리하이브리드앱개발 522 1.1 맛집앱 : matzipapp 522 1.2 맛집앱시작하기 525 1.3 맛집정보등록하기 528 1.4 맛집정보수정하기 536 1.5 맛집목록조회하기 540 1.6 맛집상세정보조회하기 542 1.7 맛집추가정보조회하기 544 1.8 실습예제코드 547 부록실습소프트웨어설치하기 부록A 크롬브라우저준비하기 566 부록B 앱타나스튜디오설치하기 567 부록C 안드로이드개발환경설치하기 576 부록D 폰갭설치하기 586 14 머리말

첫째마당 HTML5 와 CSS3 를이용한모바일웹 1 장모바일웹환경 2 장 HTML5 기초다지기 3 장 CSS3 기초다지기 4 장모바일웹개발

01 Chapter 모바일웹환경 * 학습목표 웹의발전과정을이해한다. HTML5의등장배경과특징, 지원기능들을알아본다. 플랫폼으로서의웹브라우저를이해하고내부엔진구성을살펴본다. 모바일환경에서의앱개발방식과프레임워크를이해한다. 1. 웹의진화 2. HTML5 3. 플랫폼이된웹브라우저 4. 모바일웹환경요약

Chapter 01 모바일웹환경 1. 웹의진화 웹 (web) 은월드와이드웹 (WWW 또는 W3; World Wide Web) 의줄임말로전세계를연결하는인터넷망을통해서로정보를공유하는정보서비스공간이다. 웹의모든정보는 HTML(Hyper Text Markup Language) 언어로표현되는웹문서로작성되고 HTTP(Hyper Text Transfer Protocol) 통신규약을통해전달된다. 전달된웹문서는웹브라우저에의해해석되어사용자에게제공된다. 최근모바일환경의등장으로많은변화가일어나고있다. 웹환경과관련기술의변화에대해살펴보자. 1.1 웹환경의변화웹이처음등장한것은 1991년이다. 웹개념의제안자이자 HTML의최초개발자는팀버너스리 (Tim Berners-Lee, 스위스 CERN 입자물리학연구소 ) 이다. 웹의선구자인팀버너스리는웹관련모든코드를공개하고 W3C를통해 HTTP, HTML 표준등을제안하였다. 또, 최초의웹브라우저 World Wide Web 도제공하였다. 그후, NCSA의모자익 (Mosaic) 브라우저가최초의 GUI 방식웹브라우저로등장하고상업용웹브라우저인넷스케이프 (Netscape) 가배포되면서웹이널리사용되기시작했다. 그후오랜기간동안마이크로소프트사의인터넷익스플로러 (Internet Explorer) 가웹브라우저시장을선도해왔으나최근크롬 (Chrome), 사파리 (Safari), 파이어폭스 (Firefox) 와같은다양한브라우저의개발과활용이증가하고있다. 이는 모바일 이라는새로운웹접근환경이등장했기때문이다. 현재웹은데스크톱환경에서모바일환경으로의이동과변화가진행중이다. 다음은전세계의데스크톱사용자와모바일사용자수의변화를예측한결과이다. 18 첫째마당 HTML5 와 CSS3 를이용한모바일웹

사용자수 ( 단위 : 백만명 ) 2,000 1,800 데스크톱모바일 1,600 1,400 1,200 1,000 800 600 400 200 0 2007 2008 2009 2010 2011 2012 2013 2014 2015 [ 그림 1-1] 데스크톱과모바일사용자수의변화 ( 출처 : Morgan Stanley Research, 2010 년기준 ) 실제야후를포함한많은웹서비스는 2014년을기점으로모바일접속자수가데스크톱의접속자수를넘어선것으로보인다. 새로운모바일웹환경이 PC를기반으로한데스크톱웹환경을빠르게대체하고있다. 속도나기능, 사양측면에서도거의같은환경이제공되고있다. 사용자들은이동하는중에도웹에접근할수있게됨으로써더자주빠르고다양한웹정보를요구한다. 반면에개발자는다양한모바일장치와모바일 OS, 모바일웹브라우저를지원하도록개발해야되는부담이커지고있다. 흥미로운것은모바일프로그래밍방식의변화이다. 초기네이티브방식으로앱을개발하기위해서는자바, Object-C 등의네이티브언어를배우고적용하는것에많은수고를해야만했다. 그러나, 이제는기존의웹프로그래밍방식으로도네이티브앱과비슷한수준의모바일프로그래밍이가능해지고있는데, HTML5 표준이제공하는기능이확장되고다양한모바일웹관련프레임워크가개발되어제공되기때문이다. 1.2 웹기술의발전웹은웹문서를하이퍼텍스트 (hypertext) 형식으로작성하며브라우저를통해손쉽게정보를이용할수있게만들어준다. 웹은인터넷을통해수많은네트워크와웹문서들이거미줄처럼연결되어있는것을의미한다. 브라우저를통해원하는정보를선택하면인터넷을통해마치자신의컴퓨터에저장된정보를보여주는것처럼편리한서비스를제 1 장모바일웹환경 19

공한다. 인터넷 하면 웹 을떠올리는이유는문자중심의인터넷서비스와는다르게그래픽위주의인터페이스가주는편리함때문이다. 웹방식웹을통해서비스를제공하고활용하는방식에도많은변화와발전이있었다. 초기에는대부분이 데이터중심의웹 방식이었으며일방적으로정보를제공하던정적인형태였다. 그러나점차 서비스중심의웹 방식으로발전하면서상호교류가가능하며양방향의정보이동이가능한동적인형태로발전하고있다. 이에따라웹을바라보는시각인웹패러다임도웹 1.0에서웹 3.0으로진화하고있다. 웹 1.0은일방적으로정보를제공하는포털 (portal) 중심의웹의시대를말한다. 웹 2.0은정보의생성, 공유, 참여가가능한플랫폼중심의웹시대를말한다. 유튜브나위키피디아처럼인터넷이점점사용자끼리뭉쳐새로운콘텐츠를개발할수있는공간으로발전하게된것이다. 진행중인웹 3.0은원하는정보를찾아개인별맞춤서비스가가능한웹이모든환경의플랫폼이되는시대를말한다. 비교 요약하면다음표와같다. < 표 1-1> 웹패러다임의변화 비교웹 1.0 웹 2.0 웹 3.0 시기 2000 년이전 2000~2010 년 2010 년이후 개념 포탈 (portal) 로서의웹웹사이트의집합체 플랫폼 (platform) 으로서의웹웹애플리케이션제공 시맨틱웹 중심 기술 인간 지능화된개인 콘텐츠특성 폐쇄성 개방성 ( 참여와공유 ) 맞춤형 실행환경 종속성 독립성 융합 개방형 정보교류 단방향 양방향 자유로운소통 기술 HTML, ActiveX Ajax, HTML5, CSS3, RSS, XML RDF, 시맨틱웹, RFID, USN 사용자역할 정보소비자 정보생산자 / 소비자 참여자 / 의사결정자 웹언어웹언어도많은발전이이루어졌다. HTML은웹에서사용하는대표적인마크업언어이다. 마크업 (markup) 이란문서내용자체가아닌내용에관한크기와모양, 표시위치와같은부가적인정보를말한다. 마크업언어는이러한문서의구조와표시방법을태그 (tag) 를사용하여표현한다. 20 첫째마당 HTML5 와 CSS3 를이용한모바일웹

웹관련대표적인마크업언어는다음과같다. < 표 1-2> 웹마크업언어의종류 마크업언어 SGML HTML XML XHTML HTML5 특징 Standard Generalized Markup Language HTML과모든마크업언어의기반이된마크업언어다양한전자문서들의구조와내용을명세하기위한표준 Hyper Text Markup Language 쉽고편리한웹페이지작성용마크업언어웹기술의출발점이된웹문서표준 extensible Markup Language 문서형식과의미를표현하는마크업언어문서나정보의교환을위한웹문서표준 extensible Hyper Text Markup Language HTML에 XML의장점을접목한마크업언어현재진행이중단된웹문서표준 HTML 4.01과 XHTML 1.1을계승한차세대웹기술웹페이지에서웹애플리케이션까지지원하는마크업언어이자플랫폼기술현재진행중인차세대웹문서표준 웹표준웹표준은나이나장애유무에상관없이누구나어떤환경에서도자유롭게웹에접근해서서비스를받기위해서반드시필요하다. 웹표준은액티브-X와같은비표준기술이아닌 W3C가정한표준기술만을사용하여웹문서의구조와표현, 기능을제공하는것을말한다. 웹표준은사용자뿐만아니라개발자에게도많은이점을제공한다. 웹표준을따라야하는이유는다음과같다. 다양한장치의접근성을지원한다. 구조와표현이분리되기때문에디자인, 기획, 개발업무가단순화된다. 개발을위해배워야하는내용이제한되어개발부담이감소한다. 웹브라우저상 하위버전간의호환성이유지된다. 다양한플랫폼에서실행가능한단일프로그램개발로개발및유지비용이감소한다. 장애인, 노약자등에대한보편적인웹접근성이지원된다. 유효성검사서비스 (W3C 제공 ) 를통해웹표준준수여부를쉽고빠르게검증할수있다. 1 장모바일웹환경 21

웹서비스웹서비스 (web service) 란 HTML 기반의다양한웹기술을적용하여유용한정보를브라우저로제공하는서비스이다. 초기정적인콘텐츠위주의웹문서에서동적인데이터처리위주의웹서비스로변화해왔다. 웹서비스를제공하기위해서는기본적으로웹서버와단말기, 데몬 (daemon) 이라부르는웹서버용프로그램이필요하다. 웹서버용데몬으로는아파치 (apache) 웹서버와윈도우계열의서버에포함된 IIS(Internet Information Server), 넷스케이프의엔터프라이즈서버등이있다. 웹페이지를보여주기위한웹브라우저의종류는매우다양하다. 웹서버를독자적으로구축하기힘든경우에는웹호스팅서비스를이용하면경제적일수있다. 2. HTML5 초기 HTML은정보전달을위한간단한웹문서를만들기위한언어였다. 기존 HTML이웹문서를만들기위한기술에한정되었다면 HTML5부터는웹애플리케이션을만들기위한웹플랫폼기술로확장되고있다. 현재모바일환경이확대되고있는상황에서핵심웹기술은바로 HTML5이다. HTML5의등장배경과주요기능및특징을살펴보자. 2.1 HTML5의등장 HTML5는스티브잡스의발언등으로인해큰관심을끌기도했지만플래시를대신할 <audio>, <video>, <canvas> 등 HTML5의새로운기능들이많은관심과기대를갖게만들었다. 최근에는 HTML5를이용하여웹애플리케이션을손쉽게만들수있어더욱주목받고있다. 단순마크업수준을넘어서는애플리케이션으로서의웹을실현하는강력한기능을제공한다. HTML5의발전과정 HTML5의주요발전과정을요약하면다음과같다. 22 첫째마당 HTML5 와 CSS3 를이용한모바일웹

HTML 1.0 1991 1 차웹브라우저전쟁 HTML 2.0 1995 1996 CSS1 Javascript 1998 HTML 4.01 1999 CSS2 XHTML 1.1 2001 2006 jquery 2 차웹브라우저전쟁 HTML 5 2014 CSS3 jquery Mobile PhoneGap [ 그림 1-2] 주요웹기술의발전과정 단순한기능중심이었던 HTML 1.0과 HTML 2.0은넷스케이프와익스플로러두상업용브라우저의경쟁으로빠르게발전했다. 이과정에서 웹브라우저전쟁 (1994~1998) 이라고할수있는두대표브라우저의기술과편의성경쟁은웹의비약적인발전계기가되었다. 그러나 HTML 3.2, HTML 4.0, HTML 4.01 등의규약은강제사항이아니어서표준으로서의위상이점차약화되었다. 한편, 업체가기술을선도하고표준이뒤따라수용하는상황이반복되면서점차표준화속도에불만인기업들이자체적으로플러그인기술을개발하기시작했다. 플러그인 (plug-in) 은웹브라우저와연동되는특정프로그램을컴퓨터에추가로설치함으로써브라우저의기능을확장하는개념이다. 대표적인예가마이크로소프트사의액티브-X(ActiveX) 와실버라이트 (Silverlight), 어도비사의플래시 (Flash) 등이다. 액티브-X 플러그인의비범용성문제는마이크로소프트사이외의웹브라우저제조사 ( 애플, 모질라, 오페라등 ) 들을하나로결집시켰고새로운표준화추진그룹이설립되었다.(2004년) 바로 WHATWG(Web Hypertext Application Technology Working Group) 으로기존 HTML 표준을계승하여발전시키려는노력을다시시작하였다. W3C는 HTML 3.2부터 HTML 버전을관리해오다 1999년 HTML의표준개발을중단했다. 이후, W3C와마이크로소프트중심의그룹에서는 XML 기술을접목한 XHTML 1.0 을차세대웹표준으로추진했지만시장의호응을얻는데실패했다. HTML의단순함을 1 장모바일웹환경 23

극복하고 XML의확장성을위해제시한 XHTML은복잡하고엄격한사용방식으로사용자들로부터외면받았기때문이다. XHTML 2.0 표준은마침내중단되었고 (2009년), W3C(2007년 ) 와구글크롬 (2008년) 도 WHATWG의표준화작업에함께참여하게되었다. 이로써 1999년이후 10여년동안양분되어있던 HTML 표준화노력들이다시결집하여새로운차원의표준을제시하게되었는데이것은바로 HTML5이다. 현재 HTML5는아직완성되지않았다. 2011년초안을발표한뒤, 2014년에정식최종권고안을발표할예정으로웹브라우저마다빠르게지원을확대하고있는중이다. 2015 년에는대부분의브라우저에서 HTML5가안정적으로지원될것으로예상된다. Note: HTML 표준화그룹 W3C(World Wide Web Consortium) 1994년에팀버너스리에의해설립된웹표준제정및보급단체이다. 웹사용을장려할목적으로만들어져각종통신규약과지침을제안하고개발한다. 웹의지속적인성장을위해전세계의주요 IT 관련회사와연구소등이참여하고있다. 지금까지 HTML, CSS, XML, DOM, HTTP, 시맨틱웹등을포함한다양한웹관련표준을제정해왔다. 비영리임의단체이지만웹관련해서는국제공인표준과동등하게중요한기준으로인정받고있다. 2009년 XHTML 2.0 표준이폐기된이후웹애플리케이션 1.0 표준을채택하고 WHATWG와함께 HTML W/G를구성하여 HTML5 표준을마련중에있다.(http://www.w3c.org) WHATWG(Web Hypertext Application Technology Working Group) 2004년에애플, 모질라, 오페라등의웹브라우저제조사들이마이크로소프트사의독주에제동을걸기위해만든웹표준그룹이다. 웹을통해애플리케이션을개발하고실행할수있는새로운기술을개발하고자웹애플리케이션 1.0 표준을제시하였다. 현재는 W3C도참여하여함께 HTML W/G를구성하고 HTML5 표준을작성중이다.(http://whatwg.org) HTML5는 HTML의최신버전이며웹변화의중심이다. 기존 HTML의기본토대위에새로운마크업과자바스크립트 API가추가되었다. 스타일시트역시 CSS3로향상되었다. 다음심벌은 2011년 1월 W3C에서발표한새로운 HTML5 로고이다. HTML5 표준과기술이진행중이기때문에웹사이트가 HTML5를적용하고있음을알리기위해사용된다. 24 첫째마당 HTML5 와 CSS3 를이용한모바일웹

[ 그림 1-3] HTML5 로고 HTML5는 Web on Everything 개념에기반한표준기술로스마트카, 스마트홈처럼모든스마트기기에적용되는차세대웹플랫폼형태로진화할예정이다. 또, HTML5를웹운영체제로사용하여웹과앱서비스를제공하는형태로발전할것이다. HTML5의사양다양한웹브라우저들이구현해야할공통된기능이 HTML5 사양 (spec) 이다. 모든브라우저는 HTML 페이지가동일하게실행되도록호환성을보장해야하며이를위해공통된사양을지원해야한다. 추가된주요 HTML5 API는다음과같다. 고급웹애플리케이션개발을위한기술들이다수포함되었다. 여기에는 HTML5 태그뿐아니라자바스크립트와브라우저엔진의확장도포함된다. < 표 1-3> HTML5 의주요기능 기능 내용 캔버스멀티미디어위치정보오프라인웹웹데이터베이스로컬저장소웹소켓웹워커 2차원그래픽을그리기위한캔버스 API 제공별도의미디어플레이어없이도실행가능한비디오와오디오 API 제공지리적위치정보를제공하는위치정보 API 제공인터넷연결없이도브라우저보관 HTML과자원을통해정상적인실행을지원하는어플리케이션캐시 API 제공브라우저를통해데이터관리를지원하는데이터베이스 API 제공브라우저를통해데이터를저장하기위한 API 제공서버와의실시간양방향데이터교환을위한 API 제공웹애플리케이션을위한스레드관련 API 제공 1 장모바일웹환경 25

이외에도플래시없이도다양한애니메이션효과를실행하는 CSS3 기능이나모바일화면에맞게 HTML을조절할수있는미디어쿼리등의기능등도공통적으로지원하는 HTML5 사양이다. 2.2 HTML5의특징 HTML5의발전방향은웹브라우저라는플랫폼위에서동작하는애플리케이션 ( 웹앱 ) 을 HTML과 CSS, 자바스크립트언어로만들수있도록하는것이다. HTML5는애플리케이션으로동작하기위해필요한기능들을 API 형태로제공하도록확장되었다. CSS3 도단순화면구성이아닌애플리케이션에맞는세련된화면과화면움직임을제공하도록확장되었다. 자바스크립트는단순한 HTML 문서의조작수준을넘어다양한 HTML5 API를활용하고제어하며통신하는역할로확대되었다. HTML5 ( 구조 ) CSS3 ( 표현 ) JavaScript ( 동작 ) [ 그림 1-4] 웹페이지의구성요소 HTML5는단순문서가아닌애플리케이션을지원하기위한다양한 API와 DOM 조작등을추가로지원한다. 따라서, 웹브라우저가실행되는클라이언트쪽의기능이강화되고중요해지고있다. HTML5의대표적인특징을살펴보자. 웹표준으로서의위상강화웹브라우저중마이크로소프트사의익스플로러점유율이아주높다. 익스플로러가표준이아닌자신만의독자기술을계속고집해온이유이다. 그결과 HTML 표준을충실히따르더라도브라우저종류와버전에따라실행이되지않는경우가많았다. 국내의경우에는액티브-X 활용도에비례해서익스플로러점유율이비정상적으로높기때문에윈도우즈운영체제에심각하게종속된상황에처해있다. HTML5에서는이러한웹브라우 26 첫째마당 HTML5 와 CSS3 를이용한모바일웹

저간의비호환성문제를해결함으로써웹표준으로서의위상을강화할예정이다. 앞으로는스마트폰등다양한장치뿐만아니라운영체제, 웹브라우저의종류에상관없이어떤환경에서도정상적으로동작하는웹페이지를위해웹표준을반드시준수해야한다. HTML5는그중심에있으며 HTML5 등장으로다양한 API를사용하여스크립트만으로도원하는기능을충분히구현할수있게되었다. 웹문서의의미구조화지원기존 HTML 표준은태그를이용해문서의구조를전달할수는있지만표현중심의구조만을정의할수있었다. 표현중심의문서는사람이읽고이해하기는좋지만검색엔진과같은프로그램에서문서를완벽히이해하고해석하는데어려움이있다. 따라서 XHTML에서 XML의의미구조개념을도입하고자했던시도가 HTML5에도적용되었다. HTML5는시맨틱태그를추가하고기존태그들도의미를강화함으로써 시맨틱웹 개념을지원하도록하였다. 시맨틱웹 (semantic web) 은검색엔진같은프로그램이정보의의미를분석하여검색하고처리하는지능형웹을말한다. 웹언어에서웹플랫폼으로의기능확장웹페이지는문자위주인보여주는문서형식에서다양한멀티미디어와화려한 UI를제공하는콘텐츠형식으로변화했다. 기존문서중심의 HTML 기술은다양한미디어와사용자와의복잡한상호작용을원하는현장의요구사항을충족시키지못했다. HTML5는웹페이지의기능확장을위해사용해오던플러그인이필요없도록다양한기능의 API 를추가로제공한다. 새롭게추가되는 API는 HTML을단순한웹표현언어에서웹어플리케이션개발플랫폼으로확장시킨다. 그결과로웹페이지자체가하나의애플리케이션이될수있는환경이되었다. 웹폼기능지원 HTML5는기존 <input> 태그에새로운 type 속성들을추가하여다양한유형의입력웹폼을지원한다. number, range, search, tel, url, color 등새로운폼유형들은편리한입력인터페이스를제공할뿐만아니라데이터가올바르게입력되었는지데이터의유효성까지검증해준다. 예를들어, url 유형은 http:// 로시작하는올바른 URL 주소문자열이입력되었는지검증하고올바르지않을경우오류메시지를표시한다. 1 장모바일웹환경 27

풍부한웹페이지 ( 미디어 ) 기능지원 HTML5는캔버스, SVG, 오디오, 비디오등의각종미디어관련태그를제공하기때문에다양한 2차원그래픽효과가가능하고내장비디오및오디오재생이지원된다. 모바일웹어플리케이션개발지원최근웹사용환경이 PC 환경에서모바일환경으로급속히전환되면서모바일웹을지원하기위한기능들이 HTML5에제공되었거나제공될예정이다. 인덱스, 키기반의내장저장소기능도지원되며오프라인웹애플리케이션수행기능과모바일장치들의제어기능그리고지리적위치정보를활용할수있는기능도제공한다. 이러한다양한지원 API를통해네이티브애플리케이션을어느수준까지는대체하는모바일웹애플리케이션을개발할수있다. Tip 사용중인브라우저의 HTML5 지원수준확인사용중인브라우저가어느수준까지 HTML5를지원하는지확인할수있는여러웹사이트들이있다. HTML5의현재사양을확인하려면? http://www.w3c.org 현재사용중인웹브라우저에서 HTML5 기능을어느정도지원하는지알고싶다면? http://html5test.com 특정기능의동작여부를확인하려면? http://html5please.com HTML5의기능지원현황이궁금하다면? http://caniuse.com http://html5readiness.com 웹페이지구현시다양한운영환경 ( 장치, OS, 브라우저, 화면해상도등 ) 에서완벽하게똑같이보여지는것은현실적으로불가능하기때문에유연성을갖도록개발되어야한다. 특정태그가지원되지않을경우에대체태그를통해보조페이지가보여지도록작성하는노력도필요하다. 3. 플랫폼이된웹브라우저 웹브라우저는이제단순한뷰어 (viewer) 가아니라프로그램을실행할수있는플랫폼 (platform) 으로간주된다. 마치윈도우운영체제위에서엑셀프로그램이실행되는것처럼 HTML 페이지 라는프로그램이 웹브라우저 라는운영체제에서실행되는것으로이해할수있다. 웹브라우저시장의변화와내부브라우저엔진의기능에대해살펴보자. 28 첫째마당 HTML5 와 CSS3 를이용한모바일웹

3.1 웹브라우저웹의목표는장비, 환경등의차이에도불구하고모든사용자가제약없이접근할수있는정보공간이되는것 (Web for All) 이다. 그러나, 1990년대중반웹브라우저들이각자고유기술을경쟁적으로도입함으로써비호환성이문제가되었다. 같은 HTML 문서라도웹브라우저마다다르게표현되거나동작하지못하는경우도발생했다. 인터넷익스플로러가시장의상당부분을점유하는동안비호환성문제가더욱심화되었다. 넷스케이프와익스플로러간의 1차웹브라우저전쟁에이어현재는 2차웹브라우저전쟁이진행중이다. 스마트폰, 태블릿등의모바일장치를통한웹에대한접근이급속히증가하면서새로운브라우저전쟁이진행중이다. 시장의우위를바탕으로웹브라우저표준을주도하려고했던익스플로러는 XHTML 2.0 표준이중단됨에따라주도권을잃고오히려새 HTML5 표준화과정에서한발뒤쳐진상황이다. 브라우저종류나버전마다각기다른맞춤형웹문서를만들경우, 모바일처럼장치플랫폼과운영체제, 브라우저등이다양한환경에서는더큰혼란과비효율이발생하게된다. 구글사의크롬 (Chrome), 애플사의사파리 (Safari), 모질라재단의파이어폭스 (Firefox) 그리고오페라 (Opera) 등이이러한모바일환경의변화를틈타반격을시도하고있다. 점유율을높이기위해발빠르게웹표준을수용하고연달아웹브라우저를갱신하고있다. 상대적으로모바일웹브라우저시장에서시장선점을위한경쟁이활발히이루어지고있다. 웹브라우저시장이어떻게변화하고있는지살펴보자. 대표적인브라우저들의최근 1년간의세계시장점유율변화는다음과같다. 1 장모바일웹환경 29

100% 90% 80% 70% 60% 50% other Nokia UC Browser Safari Opera iphone Android Firefox IE 40% 30% 20% Chrome 10% 0% 9월 2013년 10 월 11월 12월 1월 2014년 2 월 3 월 4 월 5 월 6 월 7 월 8 월 [ 그림 1-5] 웹브라우저의전세계점유율변화 ( 출처 : http://gs.statcounter.com, 2014 년 9 월기준 ) 크롬브라우저는점유율이가장높고지속적인증가추세를보이며익스플로러는반대로점유율이점차감소하고있다. 국내의경우에는아직까지도익스플로러사용빈도가절대적으로높지만크롬을비롯한여러브라우저점유율이빠르게성장하고있다. 최근 1 년간국내주요웹사이트를접속한사용자의웹브라우저사용현황은다음과같다. 모바일사파리 4.66% 네이버앱 7.78% 사파리 1.87% 기타 3.47% ( 단위 : %) 안드로이드기본브라우저 11.08% 마이크로소프트익스플로러 59.77% 구글크롬 11.37% [ 그림 1-6] 국내주요웹사이트접속브라우저의현황 ( 출처 : http://internettrend.co.kr, 2014 년 9 월기준 ) 30 첫째마당 HTML5 와 CSS3 를이용한모바일웹

현재점유율이가장높은익스플로러는 HTML5 기능지원수준이가장낮으므로이책에서는앞으로예제를작성하고실행할때크롬브라우저를사용한다. 현재모바일브라우저들이기존데스크톱브라우저에비해 HTML5를더충실히지원하기때문에이를고려하여웹프로그래밍할필요가있다. 주요웹브라우저의종류는다음과같다. < 표 1-4> 웹브라우저종류 브라우저 제조사 특징 가장범용적인브라우저 익스플로러 마이크로소프트 액티브-X 기술지원 보안이취약하고웹표준준수율이낮음 최신 HTML5 버전 지원율 11.0 69% 로고 크롬 구글 가볍고빠른브라우저안드로이드호환성으로최근점유율이향상됨 39.0 92% 파이어폭스 모질라 공개코드로개발중인브라우저빠른속도와보안, 프라이버시에강점 33.0 81% 사파리 애플 간결한디자인과독특한기능모바일용으로많이사용됨 8.0 72% 오페라 오페라소프트웨어 작은용량과빠른속도오랜역사, 모바일용으로사용됨 24.0 90% ( 출처 : http://www.w3schools.com/browsers/, 최신버전 2014. 10. 15 기준 ) 3.2 웹브라우저엔진웹브라우저는단순한번역기 (interpreter) 이상의역할을수행한다. 기본적으로 HTML, CSS, 자바스크립트코드를받아해석하고처리하는기능을수행한다. 이를위해브라우저는내부에웹브라우저엔진을가지고있다. 웹브라우저엔진은내부에다음과같은기본요소들로구성된다. 기본요소들은브라우저엔진, 렌더 ( 혹은레이아웃 ) 엔진, 자바스크립트엔진등을포함한다. 렌더링 (rendering) 은브라우저가 HTML 코드를해석하여화면에결과를보여주는것을말한다. 1 장모바일웹환경 31

웹브라우저의내부엔진에의해 HTML 문서가처리되는과정은다음과같다. 브라우저엔진 로더 (loader) CSS 파서 style, layout DOM 파서 렌더엔진 네크워크 브라우저 GUI DOM 트리 자바스크립트엔진 ( 번역기 ) 렌더트리 저장소 페인터 ( 배치, 그리기 ) [ 그림 1-7] 웹브라우저엔진구조 DOM 트리구성브라우저엔진은사용자인터페이스를통해전달된 HTML 문서를파서 (parser) 를통해파싱해서메모리에 DOM(Document Object Model) 트리 라는내부트리를구성한다. DOM 트리는브라우저엔진안의 DOM 파서가생성한다. HTML 문서의마크업즉, 각태그들은계층구조를갖기때문에엘리먼트들의상 하관계를표현한 DOM 트리구조를생성한다. <script> 태그로둘러싸인자바스크립트코드가존재할경우, 자바스크립트엔진에의해번역되어처리되며그결과로 DOM 트리의일부가동적으로변경될수도있다. 렌더트리구성 DOM 트리의노드중에서 <head> 태그나 display: none; 스타일처럼표시되지않도록지정된노드를제외하고화면에출력할노드만으로 렌더트리 (render tree) 가구성된다. 즉, DOM 트리중에서화면에보여지는엘리먼트만을선별해서만든내부저장구조가렌더트리이다. 렌더엔진에의해 CSS 스타일내용을분석하여렌더트리가완성된다. 레이아웃구성구성된렌더트리를웹브라우저화면의지정된영역에매핑하여배치함으로써레이아웃 32 첫째마당 HTML5 와 CSS3 를이용한모바일웹

(layout) 을구성한다. 렌더트리의엘리먼트들을화면의어느위치에어떻게표시할것인지를결정한다. 레이아웃구성과정에는 CSS 스타일이분석되어적용된다. 페인팅구성된레이아웃결과를페인터를통해서브라우저화면에출력한다. 구성된레이아웃을실제화면의브라우저창에표현하게됨으로써 HTML 문서가웹브라우저에나타나게된다. 웹브라우저의핵심은바로웹브라우저엔진이다. 개발난이도가높은다양한코드와기술요소들이결합된모듈소프트웨어로웹브라우저종류는다양하지만내부적으로는보통다음엔진중하나를사용한다. 게코 (Gecko): 모질라파이어폭스 (Firefox), 모질라파이어폭스모바일 (Fennac) 웹킷 (Webkit): 애플사파리 (Safari), 애플사파리모바일 (Safari Mobile), 구글크롬 (Chrome) 트라이던트 (Trident): 마이크로소프트의인터넷익스플로러 (IE), 익스플로러모바일 (IE Mobile) 프레스토 (Presto): 오페라소프트웨어의오페라 대부분의웹브라우저들은위핵심엔진에각기다른부속기능과스킨등을추가한것이다. 마치자동차엔진종류는같지만자동차모델은다양한것과같다. 웹킷엔진이시장의약 40% 를차지하고있으나현재구글이크롬의엔진을자체개발한블링크 (Blink) 엔진으로변경중이고오페라도도입예정이어서또한번의시장변화가예상된다. 웹브라우저의처리과정은 MVC(Model View Controller) 구조를그대로따르는특성을갖는다. 하나의 HTML 문서안에는 MVC 각요소가코드로포함되어있다. 각코드들은브라우저내부의각엔진들에의해번역되고처리되어그결과를브라우저창에표시한다. 1 장모바일웹환경 33

< 표 1-5> 웹브라우저의 MVC 구조 MVC 패턴요소처리대상 ( 코드 ) 기능브라우저구성요소 모델 (Model) HTML 코드 (<html>... </html>) 데이터 DOM 파서 뷰 (View) CSS 코드 (<style>... </style>) 레이아웃 렌더엔진 제어기 (Controller) JavaScript 코드 (<script>... </script>) 동적처리 자바스크립트엔진 Note: MVC 개발방식 MVC 개발방식은프로그램개발모듈을화면 (View), 데이터 (Model), 기능 (Controller) 영역으로분할하여분석, 설계하고, 이들간의상호작용을통해전체프로그램이실행되는구조로개발하는방식이다. 개발언어에상관없이프로그램을개발할때에일반적으로적용될수있는대표적인설계 / 아키텍처패턴중하나이다. 4. 모바일웹환경 웹환경을이야기할때웹은보통데스크톱웹 (desktop web) 을말한다. 모바일웹 (mobile web) 은태블릿, 스마트폰등의모바일브라우저로접속하도록만들어진웹페이지를말한다. 일반적인웹사이트를모바일환경으로그대로옮긴형태이다. 모바일웹환경에맞는개발방식과지원프레임워크에대해살펴보자. 4.1 데스크톱웹과모바일웹모바일장치에서데스크톱웹을그대로실행시키면화면해상도가달라서제대로보기가어렵다. 웹페이지를작성할때모바일장치의환경에맞춰화면을구성해야한다. 따라서, 데스크톱웹과모바일웹은구분되고각기다른관점에서개발되어야한다. 다음 [ 그림 1-8] 은두웹유형 (http://m.naver.com과 http://www.naver.com) 의차이를보여준다. 34 첫째마당 HTML5 와 CSS3 를이용한모바일웹

[ 그림 1-8] 모바일웹과데스크톱웹 [ 그림 1-8] 에서보는것처럼각기다른 URL 주소를통해모바일웹과데스크톱웹을제공하는것이일반적이다. 처음모바일프로그래밍이대두되었을때프로그래밍방식에큰변화가있었다. 기존서버중심의웹프로그래밍대신에새롭게안드로이드나아이폰프로그래밍기술을습득해야했기때문이다. ASP, JSP, PHP 대신에 Object-C나 Java를새로익혀야만모바일장치에맞는프로그램을개발할수있었다. 이를네이티브앱이라한다. 최근웹앱, 하이브리드앱기술이소개되면서다시 웹의반격 이시작되었다. 기존웹기술을가지고모바일장치의애플리케이션과유사한특성을갖는프로그램의개발이가능해진것이다. HTML5와 CSS3라는전통적인웹기술의발전과제이쿼리모바일, 폰갭과같은프레임워크기술이등장하였기때문이다. 4.2 모바일앱앱 (app) 은애플리케이션 (application) 의줄임말로모바일기기에서실행되는응용프로그램을말한다. PC와같은데스크톱환경의응용프로그램 ( 애플리케이션 ) 과구분하기위한용어이다. 모바일앱의개발방식에는크게 3가지방법이있다. 1 장모바일웹환경 35

네이티브앱네이티브앱 (native app) 은네이티브언어를사용하여개발된모바일장치에최적화된애플리케이션을말한다. 각플랫폼전용의개발도구 ( 언어 ) 와 SDK(Software Development Kit) 를이용하여개발한다. 아이폰은 XCode와 Object-C 언어를, 안드로이드폰은자바프로그래밍언어를, 윈도폰은 C# 언어를사용하여각각개발해야한다. 카메라, 스피커, GPS 등의장치들을직접제어할수있고효율성이높다. 각플랫폼별로다른프로그래밍언어를익혀서앱을개발해야하는점은큰부담이다. 장점 각플랫폼에최적화되어실행속도가빠르다. 스마트폰안의모든장치 ( 하드웨어, 소프트웨어 ) 접근이가능하며정교한 UI 개발이가능하다. 앱마켓을통해등록함으로써수익을얻기가쉽다. 단점 개발기간이길고많은비용이소요된다. 각플랫폼별로별도의버전을다른언어로매번개발해야한다. 앱마켓을통해배포되므로갱신이나유지보수가복잡하고어렵다. 웹앱웹앱 (web app) 은웹기술로개발하지만겉모양은네이티브앱처럼보이는애플리케이션을말한다. 모바일브라우저를통해서동작하면서도네이티브앱과비슷한화면과터치관련사용자경험 (UX) 을제공한다. 웹앱은기존의웹개발기술을그대로활용할수있고기기에상관없이한번개발하면어떤환경에도적용할수있는장점이있다. 장점 기존의표준웹기술을사용하므로단기간에빠르고쉽게개발할수있다. 웹브라우저만있으면다양한장치와플랫폼에서동일하게실행가능하다. 웹브라우저를통해배포되므로갱신이나유지보수가쉽다. 단점 웹페이지내용이많을경우, 성능문제가발생할수있다. 36 첫째마당 HTML5 와 CSS3 를이용한모바일웹

모바일장치에대한제어가제한적이며코드효율성이낮다. 적용할수있는 UI에한계가있다. 하이브리드앱하이브리드앱 (hybrid app) 은네이티브앱과웹앱의장점을결합한애플리케이션이다. 네이티브앱처럼모바일기기에설치해서사용하지만내부적으로는웹기술로구현한다. 먼저, 표준웹기술로웹앱을개발하고이를다시네이티브앱으로변환한다음배포하는형태이다. 대부분의기능은웹기술로개발하고최소한의기능만네이티브기술로구현한다. 웹앱은모바일기기에서모바일브라우저를통해웹페이지를애플리케이션처럼보이게할수는있지만마켓을통해판매할수는없다. 그러나, 최근크로스프레임워크 (cross framework) 를사용하면웹페이지를애플리케이션으로변환하거나애플리케이션처럼독립적으로실행할수있다. 장점 다양한플랫폼을위한앱개발및유지보수비용이낮다. 장치접근도가능하고앱마켓을통해등록, 배포할수있다. 단점 네이티브앱에비해실행속도가느리다. 자유로운 UI 구현에한계가있다. 모바일앱개발방식의비교네이티브앱, 웹앱, 하이브리드앱등 3가지종류의모바일앱방식의주요특징을요약하면 < 표 1-6> 과같다. 앱개발방식의미래에대해서다양한의견이있지만당분간은상호보완관계속에각방식마다특성을갖고함께발전할것으로보인다. 네이티브앱은각모바일장치와플랫폼의특성을최대한이용하는방향으로 기능 중심의영역에서제역할을할수있다. 반면, 웹앱, 하이브리드앱은개발생산성과비용을무기로동적인콘텐츠가핵심인 정보 중심의영역에서그나름의역할을할것으로예상된다. 1 장모바일웹환경 37

< 표 1-6> 앱개발방식의비교특징 네이티브앱 웹앱 하이브리드앱 실행속도 빠름 보통 보통 장치제어 높음 낮음 높음 마켓등록 가능 불가능 가능 개발비용 높음 낮음 보통 UI 접근성 높음 낮음 보통 플랫폼 단일 다중 다중 갱신 느림 ( 버전업 ) 빠름 ( 실시간 ) 보통 ( 버전업 ) 4.3 모바일앱프레임워크모바일앱을개발하기위해다양한프레임워크가사용된다. 프레임워크 (framework) 는애플리케이션의기본골격을말하며표준화된방식으로앱개발을쉽게할수있도록한다. 건축물의경우, 골격이있으면쉽고빠르게건축이가능한것처럼프레임워크를활용하면신속하고편리하게앱을개발할수있다. 표준 HTML 페이지를모바일화면에맞게표현하기위해서는 CSS와자바스크립트기술이필요한데프레임워크기술은많은부분들을자동화하여보이지않게처리해준다. 웹 UI 프레임워크글자그대로웹 UI를쉽고빠르게만들수있도록웹앱개발을지원하는프레임워크이다. 특히, 모바일환경에서앱은기존웹과는다른화면요소와레이아웃, 화면전환효과를갖기때문에이를효과적으로지원해주는웹 UI 프레임워크들이매우중요해졌다. 모바일앱을개발하는프레임워크로는제이쿼리모바일 (jquery Mobile) 이대표적이다. 표준 HTML 태그를기반으로커스텀데이터속성을통해확장하는방식이다. 크로스플랫폼프레임워크하이브리드앱개발을지원하는프레임워크로하나의원본코드를다양한플랫폼에서동작하는네이티브형태의여러애플리케이션들로변환한다. 다양한모바일플랫폼별로별도로개발하는수고를덜어준다. 외형은네이티브앱처럼보이지만내부는웹뷰 (webview) 라는컴포넌트를통해실제로는웹이동작하도록지원하는방식으로폰갭이대표적이다. 38 첫째마당 HTML5 와 CSS3 를이용한모바일웹

요약 1. 웹은데스크톱환경에서모바일환경으로의급속하게이동하며변화하고있다. 속도나기능, 사양측면에서도거의동일한환경이제공되며더빠르고다양한웹정보가요구된다. 2. HTML5는 API 추가를통하여웹이애플리케이션으로서실현되는강력한기능을제공한다. 캔버스, 멀티미디어, 위치정보, 오프라인웹, 웹데이터베이스, 로컬저장소, 웹소켓, 웹워커등의다양한기능들을지원한다. 3. 모바일환경의등장으로웹브라우저시장은전통적인기존인터넷익스플로러와크롬등의모바일브라우저간의치열한경쟁이이루어지고있다. 4. 웹브라우저는플랫폼의역할을수행하며내부에게코, 웹킷, 트라이던트, 프레스토등의웹브라우저엔진을가지고있다. 내부에는렌더링엔진, 자바스크립트엔진, DOM 파서, CSS 파서등이포함된다. 5. 웹환경은데스크톱웹환경과모바일웹환경으로구분된다. 화면크기나해상도등의차이로인해별도의모바일웹페이지를추가로개발, 운영하는것이일반적이다. 6. 앱은모바일기기에서실행되는응용프로그램을말한다. 모바일앱개발방식에는크게 3종류가있다. 네이티브앱, 웹앱, 하이브리드앱이다. 네이티브앱 : 네이티브언어를사용하는플랫폼에최적화된앱개발방식으로효율성 은좋으나높은비용과관리의어려움이약점이다. 웹앱 : 표준웹기술을사용한앱개발방식으로쉽고빠르게개발가능하지만성능이 나적용범위에많은한계를보인다. 하이브리드앱 : 내부적으로는웹기술을적용하고네이티브앱으로변환하여배포하는 방식으로장치제어가가능하지만네이티브앱에비해느린실행속도가약점이다. 7. 표준화된방식으로모바일앱을쉽게개발할수있도록다양한프레임워크기술이사용된다. 프레임워크는애플리케이션의기본골격으로표준화된방식으로앱개발을쉽게할수있도록많은부분들을자동화하여보이지않게처리해준다. 웹 UI 프레임워크 : 웹인터페이스를쉽고빠르게만들수있도록웹앱개발을지원한다. 크로스플랫폼프레임워크 : 여러플랫폼에맞는다양한네이티브애플리케이션으로의변환을지원한다. 1 장모바일웹환경 39