Microsoft Word - 실전HTML5가이드.doc

Transcription

1 1

2 서문 HTML5는웹개발생산성향상및차세대웹애플리케이션플랫폼으로서더나은사용자경험을위해함께만들어나가는개방형웹표준입니다. 2004년부터전세계웹개발자들이직접참여하여만들어온표준이기도합니다. 2005년부터국내에웹표준을정착시켜온웹표준커뮤니티에서는과거국내웹표준기술도입시정보부족경험을토대로국내웹종사자들에게새로운웹표준인 HTML5을소개하기위해이가이드를준비하였습니다. 본가이드에는 HTML5의배경과소개웹개발방식의변화, 새로운마크업과웹폼기능, 다양한웹애플리케이션부가 API 그리고 CSS3와모바일기반웹앱개발에대한내용을두루넣었습니다. HTML5 오픈콘퍼런스의강사들이직접집필하였으며누구나읽을수있도록크리에이티브커먼즈라이센스하에무료로제공합니다. 본가이드는 2005년무료배포된 ' 실전웹표준가이드 ' 를잇는공개자료로서많은관련책들이출판되겠지만처음공부를시작하시는분들게부담없이도움이되기위해만들었습니다. 기꺼이집필을맡아준커뮤니티멤버들에게감사드리고다른참여자에의해더욱개선된자료로거듭날수있기를바랍니다. 대표저자윤석찬 2

3 저자소개 윤석찬 2002 년부터한국 Mozilla 커뮤니티리더및 Firefox 한국어버 전개발에관여하고있다. 다음커뮤니케이션에서사내기술전략및오픈 API 서비스를담당했으며, 현재서울대박사과정에재학중이다. Me2day: channy 신현석 2005 년경부터웹표준을적용한사이트를구축하면서이를효과 적으로적용하는방법에대해서고민해왔다. 현재는 Opera Software에서웹에반젤리스트로활동하면서웹표준과웹접근성의중요성을알리는노력을하고있다. Me2day: hyeonseok 정찬명웹표준, 웹접근성, 유니버설디자인에관심이많고현재 NHN 에서오픈소스 XE 의 UI 개발업무를담당하고있다. Me2day: naradesign 경준호 firejune.com 을운영중인블로거, 프론드 - 엔드엔지니어, 자바스 크립트를중심으로한리치웹애플리케이션개발에관심과흥미를가지고있다. 권정혁 xguru.net 을운영중인블로거. 아이폰 / 안드로이드와같은모 바일환경에서의다각적인웹활용에대해연구중이다. 3

4 목차 1. HTML5 소개 HTML 5 의배경 HTML5 개요 HTML5 표준문서들 HTML5와웹개발방법론의변화 FAQ HTML5 마크업 구조와문법 요소와속성 HTML5 예제 HTML 4.01과의비교 CSS3 소개 CSS2와차이점 CSS3 브라우저지원현황 CSS3 실전적용 CSS3 명세읽는법 FAQ HTML5 API HTML5 미디어요소 HTML5 API 리치웹 API FAQ HTML5와모바일

5 5.1 모바일에서의 HTML 아이폰기반 HTML5 앱개발 실전예제 부록 [ 블로터포럼 ] HTML5가개발자에게 기회의땅 인이유 [ 읽을꺼리 ] HTML5 동영상에대한전망 국내웹표준커뮤니티목록

6 1. HTML5 소개 HTML5는웹표준기구인 W3C에서만들고있는차세대웹표준안으로서마이크로소프트, 모질라, 애플, 구글, 오페라등모든웹브라우저벤더가참여하고있는산업표준이다. 2004년웹브라우저벤더와개발자커뮤니티가주축이된웹하이퍼텍스트애플리케이션워킹그룹 (WHATWG) 의초안으로부터시작된이표준안은웹브라우저호환성, 구조적이고의미적마크업및편리한웹폼기능을제공하여웹개발자들의생산성을높임과동시에리치웹애플리케이션을개발할수있는다양한자바스크립트 API를포함하고있다. 2007년부터 W3C의 HTML W/G에서 HTML5 표준안으로개발되고있는동시에최신버전의웹브라우저에서빠르게탑재되고있어차세대웹서비스개발의주요기술로서각광받을전망이다. 이장에서는 HTML5가만들어질수밖에없었던배경과간단한스펙소개그리고웹개발자로서향후접근방법및웹개발의방향에대해공유하고자한다. 6

7 1.1 HTML 5 의배경 HTML5 표준안의가장큰목적은과거 HTML의호환성을유지하면서웹개발자들이실질적으로부딪히는문제를해결하는것이다. 웹을통한정보공유가폭발적으로성장할수있었던것은 HTML을통해정보 ( 컨텐츠 ) 와의미 ( 마크업 ) 을함께손쉬운텍스트로편집하도록함으로서쉽게배우고쓸수있었기때문이다. HTML의이런단순함은웹상에사람이참여하는토대를낳게하기에충분했다. 하지만이러한장점에도불구하고 90년대후반웹브라우저업체의점유율전쟁중에상용브라우저벤더들의비표준태그들이남발되면서 HTML의기본정신을훼손되었다. 실질적으로 IE vs. Netscape의사이에서피해를본것은 웹개발자 들이었다. 크로스브라우징 (Cross Browsing) 라는기법때문에고생을했는가하면 IE 의독주상태때문에웹서비스의혁신이늦어졌고사실상프론트엔드의기술혁신은플래시같은서드파티플랫폼으로넘어가버렸다. 게다가웹표준기구인 W3C는견고한웹문서를제공한다는꿈을가지고 XML을기반으로하는 XHTML로의전환을꾀하였다. 따라서 HTML은 4.01 버전을끝으로더이상업그레이드되지않는낡은표준으로남았다 웹표준과웹 년대중반부터혁신의단초를제공하게된것은바로웹표준과웹2.0이다. 우선구글같은검색엔진과검색광고의성장과특히, 블로그와 7

8 같은사용자생산콘텐츠를잘검색하기위하여 HTML과 CSS 레이아웃을통한웹표준기법이각광받기시작했다. 이른바구조 (Structure) 와표현 (Presentation) 그리고동작 (Behavior) 를분리하여검색크롤러 ( 기계 ) 가콘텐츠를읽고쓸수있도록하는것은매우중요한시작점이되었다. 특히이러한방식은웹개발에있어서개발자와디자이너간의역할분담을명확히하고코드유지보수및생산성에큰영향을미쳤다. 게다가장애인을위한웹접근성에도매우뛰어난개발방법론이되었다. 2004년부터실리콘밸리의많은웹2.0 스타트업들이웹표준기법을기반으로다양한웹서비스를선보이기시작하였고국내에서도많은영향을미쳤다. 웹 2.0의주개념인 플랫폼으로서웹 은웹그자체를소프트웨어로보는웹애플리케이션시대를열었다. 대표적인기술이바로 Ajax(Asynchronous JavaScript and XML) 로서지메일과구글맵이그시초를이루었다. 기존의문서형식의정보의제공이라는틀에서벗어나데스크톱소프트웨어와같은사용자경험을제공하는것 8

9 이다. 또한, 오픈API라는데이터기반서비스는전문개발자뿐만아니라전문사용자까지웹플랫폼에끌어들였다. 오픈 API를이용하면자신의블로그나홈페이지에네이버나다음의검색결과나구글맵의위성지도, 이베이의중고상품목록같은것을쉽게추가할수있다. 이미데스크톱소프트웨어플랫폼벤더들은공개웹기술을웹애플리케이션에접목하는시도를계속하고있다. XML과 (X)HTML, CSS, 자바스크립트같은웹표준기술들을리치인터넷애플리케이션 (Rich Internet Application) 을만드는데사용하기시작한것이다. 대표적으로모질라의파이어폭스확장기능, 야후! 위젯, 마이크로소프트의실버라이트 (Silverlight), 어도비의플렉스 (Flex) 및 AIR 등이여기에속한다. 애플의경우, Mac OS의대시보드위젯과사파리에서구동가능한웹애플리케이션을아이폰 (iphone) 에서도실행할수있도록하고있다. 이들응용소프트웨어의대표적인특징은 XML 혹은 (X)HTML 로사용자인터페이스를만들며 CSS로디자인및스타일을정의하고자바스크립트로기능을제어하는전형적인웹기술의성공을벤치마킹했다는데있다 HTML5의시작이러한웹의기술적혁신은웹브라우저업계에도역시시작되었다. 오픈소스프로젝트인모질라 (Mozilla) 커뮤니티에서개발한파이어폭스와애플의사파리, 오페라그리고구글크롬에이르기까지 2004년부터다양한웹브라우저들이시장에쏟아져나오기시작했다. 9

10 2004년비IE 브라우저세계점유율이 5% 안팎이던것이 2010년현재거의 40% 에육박하고있으며유럽의경우는이미 50% 를넘었다. 웹기술의변화에는이러한마이너웹브라우저업체의혁신과사용자들의선택에힘입은바컸으며마이크로소프트가 2007년 IE 개발팀을다시만들정도였다. 그러나, 웹표준화기구인 W3C는이러한변화를수용할준비를하고있지못했다. 2004년 W3C의한워크샵에서생긴의견차이때문에모질라, 애플, 오페라등은 W3C 밖에서새로운버전의 HTML 표준을준비하기시작했다. W3C의다른표준화기구보다는상대적으로개방되어있었지만, 다양한웹브라우저환경에서의웹개발자의고충과웹애플리케이션이라는현실적인변화를받아들이지못했다. 10

11 이들은 2006년 6월웹하이퍼텍스트워킹그룹 (WHATWG) 이라는공개그룹을형성하여자신들이만드는새로운표준안에누구나참여할수있도록개방하였다. W3C의회원사중심표준안이아닌웹개발자가진정원하는표준을만들기위해서였다. 누구나표준안논의에참여할수있었으며이들은오랜공개토론을거쳐 Web Form 2.0과 Web Applications 1.0이라는표준안을만들어냈다. 이들표준안의철학은당시전세계웹사이트의 90% 가넘는언어인 HTML을혁신하자는것이다. 웹브라우저업체입장에서 W3C가만들고있던 XML기반웹표준 (XHTML2.0, XPath, XML Events등 ) 은기존웹브라우저를새로작성해야할정도로어려운작업이라는측면도있었다. 무엇보다중요한것은기존 HTML이가진가치를인정하고장점을그대로살리면서웹브라우저업체간불명확했던처리방식을재정의하고새로운마크업과 API를통해웹개발자들이콘텐츠중심의웹어플리케이션개발을손쉽게하려는것이다 Of the Web Developer, by the Web Developer and for the Web Developer WHATWG 활동의성공은즉각 W3C에영향을주기시작했다. 작년 10월웹의창시자이자 W3C를이끌고있는팀버너스리 (Tim Berners-Lee) 는 Reinventing HTML 이라는글에서 XHTML의전환실패와더불어새 HTML 작업을시작할것을천명하였다. 이에제 3지대에서활동하고있던 WHATWG의웹개발자들과벤더들은 W3C의결정에환영하면서 2007년 3월새로운 HTML 워킹그룹에하였다. 이워킹그룹활동에는몇가지고무스러운점이있다. 먼저전직 IE 개발자이며최근마이크로소프트의 IE7 이후의개발을총책임을 11

12 맡은크리스윌슨 (Chris Wilson) 이워킹그룹의장이되었다는점이다. 또한, WHATWG의표준작업을사실상주도한이안힉슨 (Ian Hickson) 이첫표준초안의편집자가된것이다. 이안은넷스케이프와오페라를거쳐지금은구글에서풀타임표준작성가로활동중인젊은인재이다. 뿐만아니라 WHATWG에서활동하던 500 여명의웹개발자들이 W3C의초빙전문가 (Invited Expert) 라는제도를활용해서참여할수있게되었고메일링리스트도완전공개로바뀌었다. 이러한과감한변화를통해 W3C의새 HTML 워킹그룹은새표준의이름을 HTML5 라고명명하고 WHATWG가작업하던대부분의표준안을그대로수용하기에이른다. 사실상웹개발자의웹개발자에의한웹개발자를위한표준으로거듭나게된순간이다. 많은사람들이 HTML5에대해서회의적인시각을가지고있는것을자주본다. 그대표적인이유가 W3C 표준안이되는과정이매우길뿐만아니라실제로웹브라우저에적용되는시기는매우오랜기간이걸릴것이라는이유에서다. 12

13 현실은그렇지않다. 이미 HTML5의많은기능들이파이어폭스, 오페라, 사파리와크롬에이미탑재되고있으며 IE8과 IE9에서도대거포함될것이기정사실화되고있기때문이다. 본가이드에서앞으로소개할 HTML5 관련기술들이실제로다양한웹브라우저에서볼수있게된다는것이다. 이러한변화에도불구하고현재국내에는플래시나실버라이트등각종리치인터넷기술이웹애플리케이션의미래인듯포장되고있는감이없지않다. 특히아이폰이나안드로이드같은스마트폰애플리케이션이모바일의대세가될것처럼여겨지는부분도존재한다. 하지만웹이가지고있는가장큰자산은콘텐츠를기반한정보공유의수단으로기본에충실하면서웹애플리케이션기능을제공할수있는 HTML5의등장으로새로운변화를맞고있다는점이다. RIA에비해덜풍부한사용자경험이나낮은개발생산성으로인해웹의낡은애플리케이션기술로치부되어서는안된다. 누구나정보공유와애플리케이션기능을쉽게만들고제공할수있도록웹컨텐츠를만들고생산하는고급사용자와웹개발자들이웹을잘가꾸어나가야할책임을느껴야할시점이다. HTML5가중요한것은이러한표준웹의근본적인변화가시도되고있기때문이고지금이야말로우리가함께만들어왔던웹의미래를직면하게되는순간이다. 1.2 HTML5 개요 HTML5가인터넷업계에서알려지게된계기는바로 2009년구글의웹개발자콘퍼런스인 구글 I/O 에서자사의서비스가아닌 HTML5를데모로시연하면서차세대웹기술로지원하겠다는천명 13

14 을하면서부터이다. 특히, 스티브잡스가애플아이폰에플래시탑재를거부하면서대응기술로 HTML5를홍보하기시작하였다. 또한, 수많은 HTML5 데모들에서기존의 RIA 기술을능가할만한것을보여줌으로써마치구글과애플이자사의이익을위해플러그인기반 RIA 기술의대체수단으로홍보하고있다는생각이널리퍼져있다. 우리가앞서살펴보았듯이 HTML5는 2004년당시시장점유율 5% 미만이었던마이너웹브라우저들이웹개발자들과의토론을통해만들어온개방형웹표준으로서웹개발자의생산성과가치를높이기위한다양한기술들을담았다. 이러한점을간략하게살펴보고자한다 디자인원칙 W3C HTML5 W/G에서는기존표준문서외에도웹개발자의이해를돕기위한다양한문서를함께만들고있다. 그중 HTML5 디자인원칙이라는문서에는웹표준을만드는데있어, 의사결정의기본원칙이되는사항을제시하고있다. 첫째, 기존의 HTML 문법이랑사용법을최대한지원하고단계적기능축소 (Graceful degradation) 이가능하도록한다. <b>, <i> 같은기존의비표준태그의사용도용법을정해가능하게했으며 <embed> 같은이미사용하던표준도재사용하도록하여웹개발자들이너무문법에억매이지않도록하는 호환성 (Compatibility) 을제공한다. 14

15 웹브라우저별로 <p><strong>a<em>b</strong>c</em> 대한상이한처리방법 둘째, 실제웹개발자들이겪고있는가장중요한문제를순위에따라나누되문제점을분리해서독립적으로해결하는유용성 (Utility) 의원칙이다. 예를들어, 웹폼 (Web Form) 에 , number, date 같은새로운속성을추가함으로써사용자입력값의유효성확인에드는 ( 항상하는 ) 삽질을줄일수있도록하였다. <input> 태그에 datetime 속성을넣어주면웹브라우저가자동으로달력을표시해준다. 또한 IE에서만사용가능했던 contenteditable 속성이표준화되어모든 HTML 요소를사용자가직접편집할수있게함으로서위지윅에디터의호환성문제도사라질것이다. 특히, 이미웹콘텐츠의일부가되어버린비디오와오디오콘텐츠재생을웹브라우저에서내부적으로구현하여보편적접근이가능하고캔버스 (Canvas) 와벡터그래픽 (SVG) 를통해 2차원도표와같은콘텐츠도마크업으로표현할수있도록멀티미디어의보편적접근성을높혔다. 셋째, 상호호환성 (Interoperability) 으로웹브라우저가상호호환을위해최대한자세하게기술하되오류처리방법을명시하도록하였다. HTML5의기본표준문서첫부분은웹브라우저간 HTML 문법오류에대한자세한사례와이에대한브라우저의처리방법을명시해두었다. 따라서웹브라우저간이러한문법적오 15

16 류로인해웹개발자들이실질적인어려움을겪는문제를해결하였다 주요기능 HTML5를판별하는기준은바로새로운문서형식 (Doctype) 에있다. <!doctype html> 을선언함으로서 HTML5 문서로인식할수있으며, 웹브라우저에서는가장최신의렌더링엔진을이용하게된다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>html5 마크업 </title> </head> <body> <p> 차세대웹표준으로서 HTML5 </body> </html> 새로운마크업 HTML5에서는기존의 HTML4 보다확장된태그들을지원한다. 특히, 문서구조에적합하게 header, footer, nav, section 같은구조화마크업을사용할수있다. ( 자세한내용은 2장에서다룬다.) 16

17 HTML5 의새구조적마크업 ( 출처 : 특히, progress, time, mark, meter 등과같은의미기반태그들이추가로지원된다. 콘텐츠의시맨틱표현 (Annotation) 이가능하도록마이크로데이터 (Microdata) 와 RDFa라는시맨틱웹기법도포함하였다. 앞서말한대로비표준문법이었으나여전히이용하고있는 <b> 는키워드,<i> 는학명에사용하도록하는등최대한기존의태그들을그대로이용할수있다. 대신 CSS로완전대체가능한 big, center, font, s, strike 같은스타일기반요소는완전히없어진다다. 또한, frame과 applet, acronym 같은부정적인요소들도사용하지않는다. 편리한폼 (Form) 속성 HTML5는개발자의수고를덜어줄 Form 기능개선을담고있다. input 태그의각종 type 속성이추가되어다양한기능을제공해준다. datetime 속성값을사용하면달력을웹브라우저에서제공해주며, range 속성은스크롤바를, url은웹사이트목록, 은메일주소유효성확인을해준다. color 속성은색상표를별도개발없이사용할수있다. 17

18 Form 양식은모두유효성확인기능을켜거나끌수있고, 정규식표현을사용할수있도록하여유효성검증에드는자바스크립트코드개발시간을현저히줄여줄것으로기대한다. 리치웹애플리케이션 HTML 5는웹어플리케이션작성에도움을줄다양한 API를제공한다. 이는새로규정된마크업요소와폼속성들과함께더좋은애플리케이션개발에사용할수있다. 2차원그래픽 API에사용할수있는 canvas 요소와내장비디오및오디오재생을위한 video, audio 요소를통해멀티미디어기능을강화할수있다. 오프라인웹애플리케이션지원을위한웹페이지내부저장소 (AppCache). 키 (Key)/ 값 (Value) 기반데이터저장소 (DOM Storage 및 IndexedDB) 나 SQL 기반데이터베이스지원기능 (Web Databases API) 를이용하면웹기반애플리케이션을만들수있다. 또한, 웹애플리케이션이독립적으로특정프로토콜및미디어형 18

19 식을등록할수있는통신 (Web Socket) API와문서간알림기능 (Sever-sent Event) 등으로다양한서버통신을처리할수있다. 사용자경험을증대시키기위한 contenteditable 속성과함께지원되는편집 API 및 draggable 속성과함께지원되는드래그앤드롭 API 기능, 페이지앞 / 뒤네비게이션을지원할방문기록표시용 API 및지역정보활용을위한지오로케이션 (Geolocation) API 등은 HTML5 지원 API로서알려져있다 HTML vs. XHTML 2009년 7월 W3C에서는 XHTML2.0 W/G의활동을완전히접었다. XHTML2는 XHTML1.0을더발전시키기위해작업해온표준안으로 HTML과 DOM, Form, Frames, Event 등다양한웹요소들을 XML로대체하기위한가장큰시도였다. 이에따라 XForm, XFrames, XEvents 등의표준도함께만들어졌다. 가장큰문제점은 HTML4와 XHTML1.0과전혀다른새로운표준이어서하위호환성에대한보장이거의없는루비콘강을건너는 19

20 작업이었다는것이다. XHTML2.0은사라졌지만 XHTML이사라진것은결코아니다. XHTML이가지고있는견고한 (well-formed) 문서규격은대형웹서비스에서이용되는마크업의개발자생산성및유지보수에도움이되고있는점이입증되었기때문이다. HTML5에서도여전히 XHTML을지원하며 application/xhtml+xml의형식을선언한다면 XHTML5로렌더링한다. <html xmlns=" <head> <title> </title> </head> <body> <h1> </h1> <p> </p> </body> </html> 아래코믹은 DOM Scripting의저자인 Jeremy Keith가작성하고 Brad Colbow가그린 " 마크업의오해 "(Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip) 라는만화로서 XHTML5에대해소개하고있어독자들의이해를돕기위해게재하였다. 20

21 21

22 22

23 23

24 필자에의해번역되었으며 Creative Commons License 하에서사용하도록허가받았다. 출처 : 2-comic-strip/ 24

25 1.3 HTML5 표준문서들 HTML5인것과아닌것최근업계에서 HTML5를일종의마케팅용어처럼쓰고있지만, 이에대한명확한구분을해야할필요가있다. 현재 HTML5와연계표준은 W3C의 HTML W/G과 WebApps W/G 그리고 WHATWG에서각각진행하고있다. HTML5는초기에 WHATWG에서작업한것을받아들이면서다양한기능들을모두포함하고있었다. W3C에서부터표준안제정과정에서기능별로모듈화되어여러표준안으로나누어지게되었고, 일부자바스크립트 API표준안들은 WebApps W/G으로넘겨져작업하고있다. 그러나, W3C에참여하지못하는일반웹개발자들을대상으로 WHATWG의스펙은 W3C의분리된스펙을합쳐서그대로제공하고있을뿐만아니라정치적이유로제공되기어려운샘플코드나구현권고등을포함하고있으며메일링리스트를통해의견을받고있기도하다. 이장에서는 W3C가만들고있는웹표준문서들을간략히소개하고자한다. W3C의표준문서는대체로읽기어려운것으로알려져있다. 따라서웹개발자가표준을쉽게이해할수있도록다양한관점에서각기다른표준문서를제공하고있다. 2009년 4월이전에는아래소개된문서가 HTML 5 표준안에함께담겨있었으나분량이많고기존마크업기반내용과혼란을준다는측면에서분리해서관리하고있습니다. 25

26 1.3.2 HTML5 인것 HTML W/G에서는 HTML5 그자체를다루는표준안을만들고있으며렌더링호환성제공방법, HTML5 마크업과그속성에대한용법정리그리고콘텐츠의의미적표현및문서간데이터알림등의스펙을다룬다. HTML 5 : A vocabulary and associated APIs for HTML and XHTML HTML 5의원래표준안으로 800여페이지분량으로주로내용이웹브라우저개발자를위해서만들어져있다. 따라서, 가급적웹개발자용문서를따로보는것이좋다. HTML5 표준안을설명하는문구에서 Vocabulary는사전과마찬가지로마크업및속성에대한정의, 용법에대해상세한설명을포함하고있으며이를지원하는 Associated API로구성되어있다는 26

27 것은기억하면좋겠다. HTML5 differences from HTML4 이문서는기존 HTML에익숙하던사람들이 HTML5에서무엇이바뀌었는지알수있도록만든소개문서이다. 이문서는 HTML 5 입문자들이읽기에적당하며연도별주요변경내용도담고있으며본가이드의부록에포함되어있다. HTML: The Markup Language 기존 HTML 5 스펙은웹브라우저개발회사를위해기술된표준안이다. 개발자관점에서무엇이어떻게바뀌었고어떻게사용할수있는지보여줄수있는문서가필요하다. 과거 W3C 표준안들의문제점이바로이용자가아닌개발자위주로만들어져있어읽기어려웠다는것이다. 이문서는바로이용자즉, 웹개발자를위한스펙이다. 이문서는 HTML5 표준안 ( 웹개발자관점 ) 의하부문서로서 HTML 문서를주로저작하는웹퍼블리셔혹은 HTML 코더를위해만들어진문서이다. HTML+RDFa 1.1 XHTML2 워킹그룹이해산되고나서가장애매해진것이 RDFa 라는표준이다. 시맨틱웹에서콘텐츠의의미적표현을위해사용하는 RDF를 HTML에서도사용할수있도록만든것이 RDFa인데 HTML5에포함시켜야한다는주장이나온이후논쟁이뜨거웠다. 전반적으로 HTML5에 RDFa를추가하는것에반대하는기류가강했는데그이유로 1) RDFa는여전히어렵다 2) XML namespace 가필요한데 HTML5에는없다 3) 그러한이유로복사해서붙여넣 27

28 기를해도 RDFa 사용선언이없으면쓸수없다. 하지만, 시맨틱웹과의연결고리를위해수용되었고백악관웹사이트나크리에이티브커먼즈등에서채용하는등데이터웹을위한방법으로이용가능하다. HTML Microdata RDFa가여전히어렵고이에반해태그의 id나 class를이용해의미적표현을하는마이크로포맷 (Microformat) 은제한적이므로이를대체해줄수있는 Microdata가제안되었다. 쓰임새는마이크르포맷과거의유사하고 item과 itemprop라는별도속성을통해의미를표현할수있다. HTML Canvas 2D Context Canvas 태그내각종객체를회전및변환하고그레디언트, 이미지생성등각종효과를주는기능부분을기술하고있다. 태그내각종객체를그리고생성하는데필요한 API도포함한다. HTML5: Techniques for providing useful text alternatives 범용적으로사용하는 alt를통해콘텐츠특성을작성하는방법을규정한규격이다. 원래 4장에기술되어있는 alt 컨텐트속성에대해좀더자세하게예제를포함하여이해하기쉽도록작성되었다. Polyglot Markup: HTML-Compatible XHTML Documents HTML5문서를 XML로구문오류없이함께같이쓰는방법을알려준다. HTML과 XML 모두유효한 (valid) 복합 (Polyglot) 문서를만들수있다. 문서형식선언은 <! DOCTYPE html> 이며대소문자를구별한다. table 요소는tbody 요소를마크업하고, 요소와속성은일부예외를제외하고는소문자로표기하며, 빈요소에는종료 28

29 슬래시를넣는다. ( 예 : <br/>) 또한, 콘텐트속성값은따옴표로꼭하고엔터티참조로서 &amp, &lt, &gt, &apos, &quot 전용를넣는등 XHTML의구문을그대로이용하면된다 HTML5가아닌것 HTML5 주요스펙에포함되어있었거나차후에분리된표준안으로서웹애플리케이션개발을지원하기위해만들어진것으로 HTML5의범주안에포함된다고간주되는것들이다. Server-Sent Events 이문서는웹서버로부터전달 (Push) 되는데이터예를들어 SMS 같은것을받을수있도록 EventSource를정의하고이벤트를기다릴수있도록하는 API를기술하고있고 HTML5 표준안에서분리중이다. Communications 이문서은기존 Ajax의단점으로알려진크로스도메인문서접근을가능하게해주는스펙이다. 마이크로소프트의 XHR 때문에약간논의가지지부진한면이있지만텍스트를위한서버통신을지원해준다. 물론보안사항에대한부분도중요하게다루어지고있다. Web SQL Database 자바스크립트를이용해웹브라우저내장데이터베이스에 SQL을통해질의하는 API이다. 오프라인웹애플리케이션개발이나모바일에서로컬데이터캐싱이필요할때유용하게사용할수있으며, 일반적인 DB 라이브러리수준의메소드를지원해준다. 29

30 Web Sockets API 한웹페이지에서서로다른서버에있는웹페이지에양방향통신을할수있는별도프로토콜을정의할수있는 API이다. Web Workers 웹애플리케이션이주문서와병렬적으로스크립트를백그라운드로수행할수있게해주는 API. 쓰레드기반메시지처리를가능하게해준다. CPU 부하를많이잡는작업을여러워커 (worker) 로나누어작업하거나클라이언트 DB를업데이트하거나나누어서작업이가능한자바스크립트 API를제공해준다. 그밖의표준들 HTML5와관련되표준안에는 Content-Type Processing Model, The Web Concept, Geolocation API, SVG, MathML, XMLHttpRequest 등이있으며, W3C와별개로 WHATWG에서는자막을위한 WebSRT 기술및 <device> 요소를통한카메라나 USB제어같은기능도준비하고있다. 1.4 HTML5 와웹개발방법론의변화 이장에서는 HTML5 가가져올웹개발기술및방법론의변화에 30

31 대해알아보고자한다. 지금까지의웹개발플랫폼변천과정을통해현재의변화를확인해보고자한다. 웹문서시대 (1990 년대 ) 웹서버와웹브라우저간정적 HTML문서를주로보내거나 CGI(Common Gateway Interface) 를이용하여개발하는경우, 마크업과프로그램코드가섞여있는개발방식을사용했다. 이때는개발직군간의업무분담이전혀이루어지지않는상태였다. 웹표준시대 (2000 년대초반 ) 2000년대초반으로오면서백엔드개발에서는이른바 MVC 모델이라는기법을통해데이터모델과템플릿그리고비즈니스로직이분리된코드를통해개발생산성을높이게된다. 프론트엔드에서도웹표준개발방법론을통해구조 (HTML), 표현 (CSS), 동작 (DOM Script) 를분리하고 CSS 레이아웃과 W3C 기반 DOM을통한웹개발방식을많이이용하게된다. 31

32 국내에서는대략 2004년부터웹표준기반프론트엔드개발방식이도입되기시작했으며주요포털을비롯하여민간기업및공공웹사이트에웹접근성과더불어확산되게된다. 이를통해국내에서도웹퍼블리셔를중심으로한직군이형성되었다. Ajax 시대 (2000년대후반 ) 2004년지메일과구글맵스가소개되면서프론트엔드부분의웹기술의혁신이일어나게된다. 즉, 프론트엔드웹콘텐츠가고객의 PC에일단로딩이된후, 웹서버에 Ajax 호출을통해데이터를받아온후기존 DOM을갱신하는개발방법이다. 이방법을통하면백엔드개발자가 json과같은데이터기반응답만하게되므로더간단한웹개발이이루어진다. 이에반해프론트엔드개발자는다양하고풍부한사용자경험을제공하는웹애플리케이션개발이가능해졌다. 32

33 하지만, 이방식의경우도여전히웹서버에종속적으며독립적인웹애플리케이션개발은가능하지않다. HTML5시대 (2010년대초반 ) HTML5가가져올가장큰변화는서버와독립적인웹애플리케이션의개발이가능하다는대목이다. 특히, 모바일환경에서오프라인기능과로컬데이터베이스의지원은웹서버와독립할수있는여건을만들어준다. 특히, HTML5 의 Canvas, 드래그앤드롭, 지오로케이션, 파일 API 33

34 등을통한사용자경험을확대해줄수있다. 구글의경우, 웹스토어라는새로운웹애플리케이션마켓플레이스를준비하고있기도하다. 게다가백엔드부분의기술적변화도눈에띈다. 기존의 RDBMS 와 MVC 기반플랫폼에서늘어나는데이터를잘처리하기위해 RESTful한데이터통신을제공하고, 데이터는좀더빠른분산파일스토리지에저장하는방법이다. 구글, 아마존, 페이스북, 트위터가이미이러한방식으로웹서비스를제공하고있기도하다. 향후 5년간다양한웹기술요소들이웹개발방법론및플랫폼을변화시킬것으로예상된다. 간단한프로토타입을자사의서비스에조금씩도입함으로서새로운변화가연착륙할수있도록하는노력이필요하다. 1.5 FAQ HTML5를현재당장사용할수있는가? 구글및애플닷컴사이트의첫소스코드는 HTML5 Doctype을이용하고있다. 즉, 지금당장여러분의웹사이트에 HTML5 마크업을이용할수있다는이야기다. 물론 IE와같이오래된브라우저의경우호환스크립트로기능추가 (Fallback) 을하는방법을사용하면된다. HTML5 Shive, Modnizer, IE-CSS3 같은스크립트를통해하위호환성을보장해줄수있다. 단, HTML5를통한웹사이트제작이여러분의회사의개발생산성을높히고고객의요구와비지니스에부합한다는전제하에서말이다. 미래웹기술을미리선도적으로도입함으로서부가이익도누릴수있다. 2004~2005년도에웹표준기반 CSS 레이아웃도입에많은토론이있었지만현재결국많이도입되어있다. 34

35 HTML5를지향할때국내 IE 사용자가현저히줄어들것인가? IE 사용자도고객이다. IE6 고객도충분히지원해야한다. 다행히윈도7의판매증가및마케팅으로인해 IE8 혹은앞으로나올 IE9 으로의전환은잘이루어질것같다. 또한, 국내모바일단말기시장에서아이폰및안드로이드고객의증가로인해비 IE 브라우저점유율도높아질것이다. 혁신은빨리온다. 미리준비하는사람에게기회가올것이다. HTML5가현시대에비해너무과포장되어않나? 과포장은스티브잡스와어도비의논쟁이서일정부분그렇게된바가있다. 하지만웹표준을 100% 준수하는웹브라우저도없을것이고그런시대가오지도않는다. 다만상위호환성 (Forward Compatiblity) 를염두해두고특정웹브라우저고객에게좀더나은서비스를제공할수있다면, 고객은바보가아니기때문에더많은사람들이향상된기능을사용할것이다. HTML5의단점에는어떤것들이있나? 단점은역시새로운웹기술이기때문에학습비용 (Learning Cost) 가든다는것이다. 투자의관점에서접근해야한다. 또한, 프론트웹개발방식에많은자바스크립트 API가제공되기때문에마크업개발자들의경우도어느정도는자바스크립트언어를다룰줄알아야한다는점이다. 무론백엔드개발자들이이전해올수도있지만프론트엔드개발자들이어느정도자신의역할을넓혀야한다고본다. 35

36 웹브라우저벤더들희망사항외에실제사용자요구가어떻게반영되는가? W3C안에서표준안이만들어지고있기때문에일반웹개발자들이의사결정에직접참여하기는어렵다. 하지만각워킹그룹이운영하는공개메일링리스트인 등에가입하여충분히의견교환을할수있다. HTML5가이슈이다보니고객들이제작요청을하고있다. 어떻게접근해야할까? HTML5를통한콘텐츠웹서비스와웹애플리케이션서비스를분리하여접근할필요가있다. 각부분에맞는 HTML5 기술셋을정하여고객이나기획자에게제시하고이를설득하는것이좋겠다. 예를들어, 모바일광고에서 HTML5를적용하는경우동영상 (video) 요소및캔버스 (Canvas) 를이용하는방법이있다. 또한, 아이폰앱대용으로제공하는웹앱의경우오프라인캐싱과웹스토리지를이용하는방법등이다. 만약콘텐츠웹서비스를 HTML5로제공하려면 CSS3와함께접근하는것도좋은접근이다. HTML5에서애니메이션이된다면플래시개발자와업무분담은? HTML5의멀티미디어기능은초기의플래시프로토타입과유사하다. 따라서이기능을이용할수있는분야는플래시가오용되는부분즉, 메뉴네비게이션, 광고, 메인페이지애니메이션, 이벤트페이지애니메이션같은것들이다. 이들은플래시개발자들이가진영역이기도하나실질적으로창조적은콘텐츠로분류되기는어렵다. HTML5 멀티미디어기능은플래시개발자와 UI 개발자의업무분담을더욱확실히하여각자고유영역에더욱매진할수있게해줄수있을것이다. 36

37 참고사이트 W3C HTML Working Group HTML5 specification HTML5 differences from HTML / HTML: The Markup Language / HTML+RDFa HTML Microdata HTML Canvas 2D Context / HTML5: Techniques for providing useful text alternatives Polyglot Markup: HTML-Compatible XHTML Documents HTML5Rocks 구글이만든사이트 HTML5Test 브라우저별지원현황파악가능 HTML5Doctor HTML5 마크업관련블로그및 Q&A HTML5gallery HTML5 기반웹사이트모음 Mozilla Hacks Mozilla 기반웹기술블로그 37

38 2. HTML5 마크업 현재 HTML 는아직초안상태이다. 기존에표현의용도로사용되었던요소들에의미를부여하는작업이나, alt나 summary와같은접근성기능들은아직논의중에있다. HTML5는브라우저개발사를위한문서와웹저작자를위한문서가나눠져있다. 또한기존표준에서명확하지않았던부분들을새롭게정의하면현재브라우저들의동작방식을표준화하는데노력했다. 결과적으로새롭게변경되거나추가된부분들도하위호환성을가지고있기때문에조금만신경을쓰면과거의브라우저에서도 HTML5를사용할수있다. HTML5는웹디자이너와웹개발자로하여금마크업언어를쓰기쉽게만드는목적을가지고있다. 38

39 2.1. 구조와문법 HTML5는 HTML4와 XHTML1과거의완벽하게호환할수있다. HTML 구문을따르는문서는언제나 text/html 형식으로배포할수있다. 또한오류복원기능도현재가장많이사용되고있는방식을참고로상세하게포함할것이다. HTML 형식의문서 <!doctype html> <html> <head> <meta charset="utf-8"> <title>example document</title> </head> <body> <p>example paragraph</p> </body> </html> iframe과같은요소가외부콘텐츠를포함할때 text/htmlsanboxed 형식을선언할수있게할것이다. XML 형식으로의구성도가능하다. XML로구성된문서는반드시 application/xhtml+xml나 application/xml로배포되어야한다. XML 형식의문서 <?xml version="1.0" encoding="utf-8"?> <html xmlns=" <head> <title>example document</title> </head> <body> <p>example paragraph</p> </body> </html> 39

40 2.1.1 문자인코딩문서에사용된문자인코딩의인식은다음의우선순위에따라서결정된다. 1) HTTP 헤더에서선언 2) 유니코드 BOM에서선언 3) meta 태그사용 HTML5에서는새로추가된간소화된구문을포함한아래두가지의 meta 태그를모두사용할수있다. <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta charset="utf-8"> DOCTYPE 기존의 HTML DOCTYPE은 SGML 기반이었기때문에 DTD를명시할필요가있었다. 하지만 HTML5에서 DOCTYPE은브라우저가표준모드로작동되게하는역할만하면되기때문에아주간소해졌다. 이미브라우저들은 HTML5 DOCTYPE을표준모드로작동되게하고있다. HTML 4.01 Transitional DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML 1.0 Strict DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " HTML5 DTD <!DOCTYPE html> 40

41 2.1.3 콘텐츠모델 HTML5의각요소들은특성에따라분류된다. 한요소가어떤분류에도속하지않을수도있고여러분류에속해있을수도있다. 분류는아래이미지와같이분포하고있다. 분류특성예 메타데이타콘텐츠 (metadata content) 콘텐츠의모양, 동작을설정하거나다른문서와의관계를나타낸다. base, command, link, meta, noscript, script, style, title 플로우콘텐츠 (flow content) 대부분의 body 요소안의요소들이포함된다. 플로우콘텐츠는하위에텍스트나임베디드콘텐츠를포함한다. a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr 41

42 분류특성예 섹셔닝콘텐츠 (sectioning content) 헤딩콘텐츠 (heading content) 헤딩과푸터의범위를결정하는요소이다. 모든섹셔닝콘텐츠는헤딩과아웃라인을가지고있다. 섹션의헤더를의미한다. article, aside, nav, section h1, h2, h3, h4, h5, h6, hgroup 프레이징콘텐츠 (phrasing content) 임베디드콘텐츠 (embedded content) 인터액티브콘텐츠 (interactive content) 트랜스패런트콘텐츠 (transparent content) 문서의텍스트를의미한다. 프레이징콘텐츠는하위에텍스트나임베디드콘텐츠를포함한다. 이미지, 비디오, 플래시등외부콘텐츠를문서내에표현한다. 사용자와상호작용하는요소들이다. 부모요소의콘텐츠에따라포함하는콘텐츠의분류가바뀌는요소를말한다. a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr audio, canvas, embed, iframe, img, math, object, svg, video a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu, object[usemap], select, textarea, video[controls] MathML 와 SVG HTML5에서는 MathML이나 SVG를문서안에서사용할수있다. <!doctype html> <title>svg in text/html</title> <p> A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p> 42

43 2.1.5 문법검사 W3C에서는이미 HTML5 문법에대한검사기능을제공하고있다. HTML4나 XHTML1의문법검사를위해서사용했던 W3C Markup Validation Service( 를사용하면 HTML5의문법검사도수행할수있다 요소와속성 구조를나타내는요소 HTML4에서는문서의구조를만들때 div, span 요소를 id, class 와함께사용하였다. 문서의구조를나타내는요소가풍부하지않아서복잡한페이지의경우많은중첩된 div요소를사용하였다. HTML5에서는문서의구조를만드는새로운개념과요소들이추가되어서보다구조적인문서를만드는것이가능해졌다. 새로추가된요소들은현재파이어폭스3, 사파리3.1, 크롬2, 오페라 9.6 등최신의브라우저에서문제없이사용할수있다. 단인터넷익스플로러는이러한요소를제대로표현해주지못하기때문에 createelement 메서드를이용해서활성화해주는과정이필요하다. 예를들어서인터넷익스플로러에서 header 요소를사용하기위해서는아래와같은스크립트를 head 요소에서먼저실행해주어야한다. document.createelement('header'); 이렇게 HTML5에서새로추가된요소들을인터넷익스플로러에서사용할수있도록미리제작되어진스크립트를사용하는것도가능하다. HTML5 Enabling Script: 43

44 IE Print Protector: section 문서나어플리케이션의섹션을나타내는 section 요소가추가되었다. 이요소는문서의구조를나타내기위해 h1, h2, h3, h4, h5, h6 요소들과같이사용될수있다. 책의 1장, 2장이나탭형식으로되어있는콘텐츠의각탭에 section 요소를쓸수있다. 만약스타일링이나스크립트를위해서감싸는요소가필요하다면이론용도로는 section을사용해서는안된다. 이러한용도로는문서구조상으로특별한의미가없는 div 요소를사용해야한다. <article> <hgroup> <h1>apples</h1> <h2>tasty, delicious fruit!</h2> </hgroup> <p>the apple is the pomaceous fruit of the apple tree.</p> <section> <h1>red Delicious</h1> <p>these bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>granny Smith</h1> <p>these juicy, green apples make a great filling for apple pies.</p> </section> </article> 하나의섹션안에서는그섹션이전체문서구조에서같는단계와상관없이 h1 요소를사용할수있다. nav 네비게이션을위해구성된섹션을나타낸다. 44

45 페이지않에있는모든링크의그룹이 nav 요소로기술될필요는없다. nav 요소로는그페이지의주요네비게이션링크들만묶어주는것이좋다. 일반적으로푸터에서그사이트의주요페이지로이동하는링크를제공하는경우가많은데이러한링크는푸터안에표시하는것만으로도그목적을가늠할수있기때문에 nav 요소를사용할필요는없다. 그렇다고한페이지안에서 nav 요소를하나만사용해야하는것은아니다. 사이트전반적인이동을위한네비게이션과페이지전체를이동하는네베게이션이있는경우각각을 nav 요소로기술할수있다. article 문서내의독립적인글을 article로표시할수있다. 블로그글이나뉴스본문등이이에해당한다. article 요소안에 article 요소가들어갈경우안쪽의 article 요소는밖의 article 요소의내용과관련이있는내용이라는것을의미한다. 예를들어서블로그의글과사용자가작성한댓글이있는경우하나의댓글은안쪽 article로기술하고전체블로그글은바깥쪽 article로기술할수있다. aside 문서의주내용이아닌관련성이낮은내용들은 aside로표시할수있다. 본문과직접적으로상관이없는관련사이트링크나광고, nav 요소의그룹등이 aside 요소로기술될수있다. hgroup 섹션의제목을나타낸다. 45

46 섹션의제목이여러단계를가지고있을때이를 hgroup 요소로기술할수있다. 문서의구조를나타낼때에는 hgroup 안에있는가장높은레벨의헤딩을사용하고나머지요소들은문서의구조에서는타나나지않는다. header 소개나네비게이션기능들의묶음을나타낸다. header 요소는보통섹션의제목 (h1, h2, h3, h4, h5, h6) 을포함하지만반드시포함할필요는없다. 또한 header 요소는목차나검색창, 로고등을포함할수도있다. header 요소는섹션으로간주되지않는다. header 요소를썼다고문서구조상새로운섹션이생기지않는다. footer 섹션의푸터를나타내고저자나저작권등을포함할수있다. footer 요소는가장가까운선행하는섹션의푸터를의미한다. 섹션의저자나관련문서로의링크, 저작권정보등을나타낼수있다. 저자나편집자의연락처는보통 footer 요소안의 address 요소로표현이된다. 대부분의푸터정보는섹션의마지막에위치하지만반드시마지막에위치할필요는없다. footer 요소도 header 요소와마찬가지로섹션으로간주되지않는다. footer 요소를썼다고문서구조상새로운섹션이생기지않는다. 46

47 figure 그래픽이나 비디오를 위한 캡션을 표시할 수 있게 한다. figcaption 요소로캡션을표시한다. 본문에서참조가되지만내용의흐름에크게영향을미치지않는 일러스트, 다이어그램, 사진, 코드등을표시할수있다. <figure> <video src="ogg"></video> <figcaption>example</figcaption> </figure> 헤딩과섹션 h1, h2, h3, h4, h5, h6, hgroup 요소들은헤딩을의미한다. 섹셔닝콘텐츠의첫번째헤딩콘텐츠는그섹션의헤딩을의미한다. 그이후의같거나더높은레벨의헤딩은새로운섹션을의미한다. 낮은레벨의섹션은새로운하위섹션을의미한다. blockquote, body, details, fieldset, figure, td는섹셔닝루트 (sectioning root) 요소들로, 이요소들은자기자신만의아웃라인을가지고상위요소문서의아웃라인에영향을미치지않는다. <body> <h1>foo</h1> <h2>bar</h2> <blockquote> <h3>bla</h3> </blockquote> <p>baz</p> <h2>quux</h2> <section> <h3>thud</h3> </section> <p>grunt</p> </body> 47

48 위와같은문서의구조는다음과같다. 1. Foo (Grunt 문단을가지고있는 body 섹션의헤딩 ) 1. Bar (Baz 문단과 blockquote 요소포함한섹션의헤딩 ) 2. Quux ( 내용이없고헤딩만있는섹션의헤딩 ) 3. Thud (section 요소로표시된섹션의헤딩 ) 섹션헤딩의단계는크게상관없지만되도록 h1 요소를사용하거나섹션구조에맞는단계의헤딩을사용할것을권장한다. <body> <h4>apples</h4> <p>apples are fruit.</p> <section> <h2>taste</h2> <p>they taste lovely.</p> <h6>sweet</h6> <p>red apples are sweeter than green ones.</p> <h1>color</h1> <p>apples come in various colors.</p> </section> </body> 즉, 이렇게헤딩의단계가순차적이지않아도유효한구조적인문서로판단할수있다. 하지만아래와같이섹션을명시적으로지정해주는것이더좋다. <body> <h1>apples</h1> <p>apples are fruit.</p> <section> <h2>taste</h2> <p>they taste lovely.</p> <section> <h3>sweet</h3> <p>red apples are sweeter than green ones.</p> </section> </section> <section> <h2>color</h2> <p>apples come in various colors.</p> </section> </body> 48

49 섹션을구성하는요소의아웃라인은포함된섹션의목록으로이루어진다. 각각의섹션은하나의헤딩을포함할수있고다수의다른섹션을포함할수있다. <body> <h1>a</h1> <p>b</p> <h2>c</h2> <p>d</p> <h2>e</h2> <p>f</p> </body> 이렇게구성된마크업은다음과같은아웃라인을생성한다. body 요소로부터하나의섹션이만들어지고이섹션은헤딩 A와문단 B를갖는다. 이섹션은다은두개의섹션을포함한다. h2 요소로부터하나의섹션이만들어지고헤딩 C와문단 D를갖느다. 그다음 h2 요소로부타하나의섹션이또만들어지고헤딩 E와문단 F 를갖는다 그밖의요소 video, audio 비디오나오디오콘텐츠를넣기위해사용된다. 스크립트로제어할수있게끔스크립트 API가제공된다. source 요소로여러개의미디어를추가할수있다. embed 플러그인콘텐츠를넣을때사용된다. mark 중요텍스트를표기할때사용된다. 예를들어원저자는중요하 49

50 다고표현하지않았지만이글을따왔을때중요한부분이변경되거나추가된다면이텍스트를 mark 요소로표현할수있다. progress 다운로드상태바처럼작업의진행상황을나타낼때사용된다. meter 분량이나수량을나타낼때사용된다. time 날짜나시간을나타낼때사용된다. ruby, rt, rp 일본어에서한문에음을다는것과같은루비주석 (ruby annotation) 을달때사용된다. canvas 그래픽이나게임과같이동적인비트맵이미지를구현할때사용된다. command 사용자가행할수있는명령기능을나타낼때사용된다. details 사용자의필요에의해서사용할수있게제공되는추가적인정보나기능을나타낼때사용된다. summary 요소를이용해서요약, 제목, 캡션을나타낼수있다. 50

51 <section class="progress window"> <h1>"really Achieving Your Childhood Dreams" 복사중...</h1> <details> <summary> 복사중... <progress max=" " value=" "></progress> 25% </summary> <dl> <dt> 초당전송량 :</dt> <dd>452kb/s</dd> <dt> 복사할파일명 :</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt> 대상파일명 :</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt> 걸린시간 :</dt> <dd>01:16:27</dd> <dt> 컬러프로파일 :</dt> <dd>sd (6-1-6)</dd> <dt> 영상크기 :</dt> <dd> </dd> </dl> </details> </section> datail 요소를이용해서상세한내용을사용자의선택에의해서보이거나감출수있다. datalist 미리정의되어있는 option의묶음을나타낸다. input의 list, datalist의 id로서로연결된다. keygen 서버에공개키를보내고로컬의키저장소에개인키를저장하는데사용된다. output 서식이나스크립트를통해생성된결과물을나타낼때사용된다. input input 요소의 type 속성으로다음과같은다양한형식을사용할 51

52 수있게되었다. tel, search, url, , datatime, date, month, week, time, datetime-local, number, range, color. 이러한속성을사용해서달력이나컬러픽커와같은기능을브라우저에서제공할수있다. type 속성값에따른다양한콘트롤형식 값상태테이터타입콘트롤타입 hidden 감춰짐임의의문자열 n/a text 텍스트줄바꿈없는텍스트텍스트필드 search 검색줄바꿈없는텍스트검색필드 tel 전화번호 줄바꿈없는텍스트 텍스트필드 url URL 절대 IRI 텍스트필드 이메일 이메일주소나이메일주소리스 트 텍스트필드 password 비밀번호 줄바꿈없는텍스트 데이터입력이나타나지않는텍스트필드 datetime 날짜와시각 UTC 날짜와시각 날짜와시각콘트롤 date 날짜시간대없는날짜날짜콘트롤 month 달시간대없는년과달달콘트롤 week 주시간대없는주번호주콘트롤 time 시각시간대없는시각시각콘트롤 datetimelocal 로컬날짜와시각 시간대없는날짜와시각 날짜와시각콘트롤 number 숫자숫자값텍스트나스피너콘트롤 52

53 값상태테이터타입콘트롤타입 range 범위 숫자값이나정확한숫자가필요 없는의미상의값 슬라이더콘트롤 color 색 8-bit 적녹청 srgb 칼라컬러웰 checkbox 체크박스 이미설정된리스트값의 0 또는다른값 체크박스 radio 라디오버튼 지정된값 라디오버튼 file 파일입력창 MIME type 과파일명이있는파일목록 레이블과버튼 submit 전송버튼 폼서식을전송하는지정된값 버튼 image 이미지버튼 폼서식을전송하는이미지좌표값 클릭가능한이미지나버튼 reset 리셋버튼 해당사항없음 버튼 button 버튼해당사항없음버튼 style, script style 요소와 script 요소의 type 속성이생략가능해졌다. style 요소의기본 type 값은 "text/css", script 요소의기본 type 값은 "text/javascript" 이기때문에둘다 type 요소를생략할수있게되었다. <style> #myelement { width: 100px; } </style> <script> function myfunction() { return 'Hello world'; 53

54 } </script> 새로운속성 HTML4에서사용되던속성을보다넓게사용할수있도록확장하였다. media a와 area 요소에는 link 요소와마찬가지로 media 속성을지정할수있다. ping a와 area 요소에는링크를따라갔을때참조될 ping 속성을지정할수있다. ping 속성을지정하면사용자클릭정보수집과같은곳에사용할수있고사용자는이를옵션에서제어할수있게된다. hreflang, rel area 요소에는 link와 a 요소와마찬가지로 hreflang과 rel 속성을지정할수있다. target base 요소에는 a 요소와마찬가지로 target 속성을지정할수있다. HTML4에서 strict DTD를사용할때에는 target을쓸수없었지만 iframe과같이웹에서이미유용하게사용하고브라우저에서지원도많이되고있기때문에 HTML5에서는사용할수있다. value, start: li 요소의 value 속성과 ol 요소의 start 속성은구조 54

55 와관련된속성이기때문에더이상폐지된속성이아니다. charset meta 요소의 charset 속성이추가되었다. 이미많이사용되고잘지원되고있는속성이다. autofocus input 요소의 type 속성이 hidden일때를제외하고 input, select textarea, button 요소에 autofocus 속성이추가되었다. 이속성은문서가로드되었을때폼에포커스가되게한다. 사용자는이러한동작을옵션에서끌수있어야한다. placeholder input 요소와 textarea 요소에 placeholder 속성이추가되었다. placehoder 속성의값은 input이나 textarea 요소에값이입력되기전에힌트정보로표시된다. 포커스를받기전까지 placeholder 값이표시되고포커스를받거나값이입력되면표시된값이사라진다. 긴힌트를위해서는 placeholder 대신에 title 속성을사용해야하며, placeholder는 label을대시할수는없기때문에 label은별도로지정이되어있어야한다. <input type=" " name="address" form input, output, select, textarea, button, fieldset 요소에 form 속성을지정하여 form 요소의밖에콘트롤을위치할수있게되었다. 55

56 required input 요소의 type 속성이 hidden, image 이거나 button 요소의속성이 submit인경우를제외하고 input과 textarea 요소에 required 속성이추가되었다. 이속성은사용자가반드시값을입력해야한다는것을의미한다. HTML5는폼값유효성검사 (validation) 와같이자주사용되는폼관련기능을표준화하여더욱강력하고풍부한웹폼을만들수있게하고있다. <h1> 회원등록 </h1> <form action="/newaccount" method=post> <p> <label for="username"> 이메일주소 :</label> <input id="username" type= required name=un> <p> <label for="password1"> 비밀번호 :</label> <input id="password1" type=password required name=up> <p> <label for="password2"> 비밀번호확인 :</label> <input id="password2" type=password onforminput="setcustomvalidity(value!= password1.value? ' 비밀전호가일치하지않습니다.' : '')"> <p> <input type=submit value=" 계정생성 "> </form> 이메일주소와비밀번호를필수요소로지정하였고, 비밀번화확인필드에서는입력된값이비밀번호와일치하는지를추가적으로확인한다. disable fieldset 요소에 disable 속성을지정하여전체필드셋을비활성화할수있다. 56

57 autocomplete 등 input 요소에 autocomplete, min, max, multiple, pattern, step 속성이추가되었다. 또한 datalist와함께사용될때 list 속성을지정할수있다. formaction 등 input과 button 요소에 formaction, formenctype, formmethod, formnovalidate, formtarget 속성을지정할수있다. 이러한속성들은 form 요소의 action, enctype, method, novalidate, target 속성을재정의하게된다. type, label menu 요소에 type과 label 속성을지정할수있다. 이속성들을이용해서브라우저에서지원하는컨텍스트메뉴와같은기능을제작할수있다. scoped style 요소에 scoped 속성을지정하여문서의특정부분에만스타일이적용되도록할수있다. async style 요소에 async 속성을지정하여스크립트의로딩과실행타이밍을조절할수있다. manifest html 요소에 manifest 속성을지정하여오프라인애플리케이션 API에서캐시정보를사용할수있다. 57

58 sizes link 요소에 sizes 속성을지정하여아이콘의기본크기정보를표시할수있다. reversed ol 요소에 reversed 속성을지정하여번호순서를바꿀수있다. sandbox 등 iframe 요소에 sandbox, seamless, srcdoc 속성을지정하여샌드박스로지정할수있다 글로벌속성 HTML4의글로벌속성 (class, dir, id, lang, style, tabindex, title) 을모든요소에지정할수있게되었다. contenteditable 사용자가내용을수정할수있는요소를표시할수있다. contextmenu 컨텍스트메뉴를지정할수있다. data-* 저작자가새로운속성을지정할수있다. draggable 새로운드래그앤드롭 API 를사용할수있다. 58

59 hidden 특정요소가존재하지않는것임을표시할수있다. 마크업으로속성을주는것과 CSS의 display로화면에보이지않게하는것은엄연히다르다. hidden 속성이지정되면그요소는문서상에서없는것과같은효과를가진다. role, aria-* 보조기기에서접근성을향상시키는데사용할수있게한다. spellcheck 맞춤법기능을적용되거나적용되지않게할수있다. 이속성이지정되어있으면사용자가맞춤법기능을제어할수있게된다. onclick, onfocus 등의 event HTML4의 on{ 이벤트이름 } 속성을사용할수있고 video나 audio 요소의 play와같은추가적인이벤트속성을사용할수있다 변경된요소 a href 속성이없는 a 요소를사용하여링크자리 (placeholder link) 를표시할수있다. a 요소는안에버튼과같은상호작용하는요소가없다면전체문단, 리스트, 표, 섹션등을모두포함할수있다. <aside class="advertising"> <h1> 광고 </h1> <a href=" <section> 59

60 <h1>html5 오픈컨퍼런스!</h1> <p> 차세대웹서비스를위한새로운웹표준!</p> <p> 최초 HTML5 오픈컨퍼런스가열립니다.</p> </section> </a> <a href=" <section> <h1>html5 가이드북!</h1> <p> 가이드북을함께나눠드립니다.</p> <p> 핵심만잘뽑은핸드북!</p> </section> </a> </aside> 전체섹션을하나의 a 요소로감싸고배너로활용할수있다. address address 요소가문서구조 (sectioning) 상에서특정범위에적용된다. b b 요소는문서상에서중요한의미는없지만문체적으로다르게나타내어져야하는텍스트를위해서사용된다. 예를들어서상품설명안에서의상품의이름이나문서에특정키워드를나타낼때사용할수있다. hr hr 요소는문단수준의나눔을의미하게되었다. i i 요소는어조나분위기또는다른일반텍스트와구분을해야하는텍스트를표시하는데사용된다. 예를들어서특정구분이나기술적인용어, 다른언어표현, 생각, 배의이름등과같은것을표현할 60

61 때사용된다. 사용언어에따라서많은차이가있을수있다. label label 요소를클릭했을때포커스를이동하는기능이플랫폼수준에서의표준이아닌이상더이상포커스를콘트롤로이동시켜서는안된다. menu menu 요소가툴바나컨텍스트메뉴를위해서개선되었다. small small 요소는추가적인코멘트나법적인표현등과같이작게출력되어야하는내용을나타낸다. strong strong 요소는강한강조가아니라중요함을나타낸다 변경된속성기존의속성들중에변경된것들이있다. 되도록이면이러한속성들은다른대안을활용해기술하는것이더바람직하다. border img 요소의 border 속성은 "0" 값을지정해야한다. CSS를사용하는것이더권장된다. 61

62 language script 요소의 language 속성은 "Javascript" 값 ( 대소문자구분없음 ) 을지정해야해고 type 속서의값과일관되어야한다. 특별한목적이있지않은한 language 속성은생략할수있다. name a 요소의 name 속성보다는 id 속성을사용하는것이권장된다. summary table 요소의 summary 속성은 HTML5의다른대안을이용해서표시하는것이더권장된다 빠진요소 basefont, big, center, font, s, strike, tt, u 이요소들은표현에관련된요소이기때문에 HTML5에정의되지않았다. frame, frameset, noframes 이요소들은콘텐츠를네비게이션할때사용성과접근성에영향을미치기때문에 HTML5에정의되지않았다. acronym 이요소는많이사용되지않고있고혼동되는경우가많기때문에정의되지않았다. 대신 abbr 요소를사용할수있다. 62

63 applet 이요소는 object 요소로대체되었다. isindex 이오래된요소는다른폼콘트롤요소로대체되었다. dir 이요소는 ul 요소로대체되었다 빠진속성 HTML5에서없어진속성 속성 적용요소 rev, charset shape, coords longdesc target nohref profile version name(id 사용권장 ) scheme archive, classid, codebase, codetype, declare, standby valuetype, type axis, abbr link, a a img, iframe link area head html img meta object param td, th 63

64 속성 적용요소 scope td 표현에관련된없어진속성 속성 적용요소 align alink, link, text, vlink background bgcolor border cellpadding, cellspacing char, charoff clear compact frame frameborder height hspace, vspace marginheight, marginwidth noshade nowrap rules scrolling size caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr body body table, tr, td, th, body table, object table col, colgroup, tbody, td, tfoot, th, thead, tr br dl, menu, ol, ul table iframe td, th img, object iframe hr td, th table iframe hr 64

65 속성 적용요소 type valign width li, ol, ul col, colgroup, tbody, td, tfoot, th, thead, tr hr, table, td, th, col, colgroup, pre 표현에관련된속성들은 CSS를활용하여대체하는것이권장된다. 2.3 HTML5 예제 블로그샘플블로그사이트의첫페이지예제코드이다. 가장최신에작성된글의목록과사이트헤어, 푸터가있는간단한페이지이다. <body> <header> <h1>html5 의세계로!</h1> <nav> <ul> <li><a href="news.html"> 새소식 </a></li> <li><a href="blog.html"> 블로그 </a></li> <li><a href="example.html"> 예제 </a></li> </ul> </nav> </header> <div> <article> <header> <h1>html5 오픈컨퍼런스가열립니다.</h1> </header> <p>2010 년 7 월 2 일...</p> <!-- 블로그글내용 --> <footer> <p> <time pubdate datetime=" t14:36-08:00"> 어제 </time> 작성되었음 </p> </footer> </article> 65

66 <article> <!-- 생략 --> </article> <article> <!-- 생략 --> </article> </div> <footer> <p> <a href="about.html"> 이블로그에관하여 </a> <a href="policy.html"> 개인정보보호정책 </a> <a href="contact.html"> 연락처 </a> </p> </footer> </body> 블로그글의모음을 div 요소로묶어주었다. 이러한경우에새로추가된 section 요소를사용하는경우가많은데, section 요소는하나의주제에대한섹션을표시하는것이기때문에이경우와같이하나의주제가아닌여러주제의글을단순히묶은경우에는적절하지않다. 이렇게단순히그루핑만을하기위한목적으로는 div 요소를사용하는것이더욱적절하다. 푸터의링크모음에 nav 요소를사용하지않고그냥 p 요소만을사용하였다. footer 요소로페이지의마무리부분이라는것을명시했기때문에굳이 nav 요소를사용하지않아도의미전달이가능하기때문에이렇게표현하는것이가능하다 블로그글본문 블로그사이트의본문페이지의분문영역예제코드이다. 레이아웃이동일하다면이전섹션의메인페이지코드에있는중앙 div 요소대신에아래의 article 요소가들어가게될것이다. <article> <header> <h1>html5 오픈컨퍼런스가열립니다.</h1> </header> <p>2010 년 7 월 2 일...</p> <!-- 블로그글내용 --> <section> 66

67 <h1> 댓글 </h1> <article> <footer><!-- footer 요소가섹션의처음에위치할수도있다. --> <p> 김민석님의댓글 </p> <p><time pubdate datetime=" t19:10-08:00"></time></p> </footer> <p>... 댓글내용...</p> </article> <article> <footer> <p> 이명호님의댓글 </p> <p><time pubdate datetime=" t19:15-08:00"></time></p> </footer> <p>... 댓글내용...</p> </article> <!-- 생략 --> </section> <footer> <p> <time pubdate datetime=" t14:36-08:00"> 어제 </time> 작성되었음 </p> </footer> </article> 블로그의글본문은독립적인글섹션이기때문에 article 요소를사용하였다. 전체섹션의제목인 h1 요소를 header 요소로표시하였고글본문과댓글섹션과글의작성일시를표시한 footer 요소를사용하였다. 하나의댓글또한독립적인글섹션이기때문에 article 요소를사용하였다. 이와같이 article 안에또다른 article 요소나 section 요소를포함하는것이가능하고반대로 section 요소도또다른 section 요소나 article 요소를포함할수있다. 댓글의 article 요소를보면헤딩도없고 footer 요소가가장처음에나온것을볼수있는데, 이와같이적절하다고판단될경우 67

68 footer 요소를가장먼저표시할수도있다. 물론 header 요소를사용할수도있지만이는전적으로저작자의표현의도에달려있다 블로그사이드바블로그사이트의본문옆부분에본문과직접적인관련은없지만링크나관련정보를표현하는경우에대한예제코드이다. <aside> <nav> <h1> 최근글 </h1> <ol reversed> <li><a href="conference.html">html5 오픈컨퍼런스가열립니다.</a></li> <li><a href="accessibility.html">html5 의접근성 </a></li> <li><a href="browser.html">html5 브라우저지원현황입니다..</a></li> </ol> </nav> <nav> <h1> 최근댓글 </h1> <ol reversed> <li><a href="article/accessibility/cmt3384"> 표에 summary 속성도바뀐것같더라고요.</a></li> <li><a href="article/accessibility/cmt2452">longdesc 속성이없어진이유가뭘까요?</a></li> <li><a href="article/browser/cmt1562"> 브라우저지원현황을보니저도조금씩시도를해봐야겠네요.</a></li> </ol> </nav> <nav> <h1> 이웃블로그 </h1> <ul> <li><a href=" Blog</a></li> <li><a href=" <li><a href=" <li><a href=" Blog</a></li> 68

69 <li><a href=" Blog</a></li> <li><a href=" 삐돌이의웹접근성 </a></li> </ul> </nav> </aside> <aside> <section> <h1> 미투데이 </h1> <blockquote cite=" 와정말오래기다렸어요! </blockquote> <blockquote cite=" 기대됩니다! </blockquote> <blockquote cite=" 빨리신청해야겠네요. </blockquote> </section> <section> <h1> 트위터 </h1> <blockquote cite=" 규모가꽤큰 HTML5 행사가열리네요. </blockquote> <blockquote cite=" 규모가꽤큰 HTML5 행사가열리네요. </blockquote> <blockquote cite=" 이런일정이겹치네요. </blockquote> </section> </aside> 블로그글본문과직접적인관련이없기때문에 aside 요소를이용하여콘텐츠를표현하였다. 글이나댓글링크의모음을 nav 요소로표현하였고, SNS 서비스사이트의글들은 blockquote를사용하여다른곳에서가져온글이라는것을표현하였다. aside 요소도섹션을구성하는요소이기때문에하위에단일한주 69

70 제를표현할필요가있다. 다시말해서 aside를사용할때에는단순히레이아웃에서의사이드바영역을 aside로표현하는것이아니라주콘텐츠와직접적으로연관이없는내용을 aside로표현하는것이다. 따라서 HTML5 요소를사용할때에는콘텐츠의내용을먼저파악해야한다. 사이드바영역의콘텐츠들이서로다른주제를가지고있는내용이어서섹션이나눠져야할필요가있을때는위와같이두개의 aside 요소를사용할수도있다. 이 aside 요소들을 div 요소로묶어서사이드바영역으로그루핑을해주게되면레이아웃일제작할때에활용할수있다. 구조를구성하는 HTML5 요소들은위치나영역을기준으로사용하는것이아니라표현하고자하는콘텐츠의내용을고려하여적절한요소를선택하고사용해야한다. 2.4 HTML 4.01 과의비교 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 a strict yes 하이퍼링크 abbr strict yes 약어 acronym strict - 두문자어 address strict yes 연락정보 applet transitional - 자바애플릿 area strict yes 이미지맵의영역 article - yes 독립적인섹션 aside - yes 보조섹션 audio - yes 오디오 b strict yes 굵은텍스트 70

71 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 base strict yes 문서의기본 URI basefont transitional - 기본폰트스타일 bdo strict yes 텍스트방향설정 big strict - 큰글자 blockquote strict yes 긴인용 body strict yes 문서본문 br strict yes 줄바꿈 button strict yes 버튼콘트롤 canvas - yes 비트맵캔바스 caption strict yes 표캡션 center transitional - 가운데정렬 cite strict yes 인용 code strict yes 코드 col strict yes 표컬럼 colgroup strict yes 표컬럼그룹 command - yes 사용자커맨드 datalist - yes 기설정콘트롤값 dd strict yes 정의설명 del strict yes 삭제 details - yes 상세정보 dfn strict yes 용어정의 dir transitional - 디렉토리 71

72 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 div strict yes 블록그루핑 dl strict yes 정의목록 dt strict yes 정의용어 em strict yes 강조 embed - yes 외부콘텐츠 fieldset strict yes 서식그룹 figcaption - yes figure 요소의캡션 figure - yes 캡션있는그림 font transitional - 폰트서식 footer - yes 섹션푸터 form strict yes 서식 frame frameset - 프레임 frameset frameset - 프레임셋 h1 strict yes 제목1 h2 strict yes 제목2 h3 strict yes 제목3 h4 strict yes 제목4 h5 strict yes 제목5 h6 strict yes 제목6 head strict yes 문서헤드 header - yes 섹션헤더 hr strict yes 문단구분 72

73 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 html strict yes 문서루트 i strict yes 이탤릭텍스트 iframe transitional yes 인라인프레임 img strict yes 이미지 input strict yes 입력콘트롤 ins strict yes 삽입 isindex transitional - 사용자폼생성 kbd strict yes 사용자입력 keygen - yes 암호화키콘트롤 label strict yes 서식레이블 legend strict yes 설명적인캡션 li strict yes 목록항목 link strict yes 자원링크 map strict yes 이미지맵 mark - yes 표시된텍스트 menu transitional yes 메뉴 meta strict yes 숨은정보 meter - yes 수량포현 nav - yes 네비게이션 nobr - - 줄바꿈금지 noembed - - 플러그인대체콘텐츠 noframes frameset - 프레임대체콘텐츠 73

74 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 noscript strict yes 스크립트대체콘텐츠 object strict yes 외부콘텐츠삽입 ol strict yes 순서있는목록 optgroup strict yes 선택상자옵션그룹 option strict yes 선택상자옵션 output - yes 출력내용 p strict yes 문단 param strict yes 파라메터 pre strict yes 형식유지텍스트 progress - yes 처리상태 q strict yes 인라인인용 rp - yes 루비괄호 rt - yes 루비텍스트 ruby - yes 루비표현식 s transitional - 취소선 samp strict yes 프로그램예제출력 script strict yes 스크립트 section - yes 섹션 select strict yes 선택상자 small strict yes 작은활자 source - yes 미디어의소스정보 span strict yes 인라인그루핑 74

75 요소 HTML 4.01/XHTML 1.0 HTML 5 설명 strike transitional - 취소선 strong strict yes 중요함 style strict yes 스타일시트 sub strict yes 아래첨자 sup strict yes 위첨자 summary - yes detail 요소의캡션 table strict yes 표 tbody strict yes 표본문 td strict yes 표셀 textarea strict yes 여러줄입력콘트롤 tfoot strict yes 표푸터 th strict yes 표헤더셀 thead strict yes 표헤더 time - yes 날짜나시각 title strict yes 문서제목 tr strict yes 테이블줄 u transitional - 밑줄 ul strict yes 순서없는목록 var strict yes 변수 video - yes 동영상 wbr - yes 줄바꿈 xmp - - 형식유지텍스트 75

76 76

77 3. CSS3 소개 CSS3는 HTML5와더불어최신웹브라우저들이함께채용하고있는스타일표준이다. CSS3는 HTML5와크게관계있는부분은없지만현대적웹기술에있어서꼭알아야할웹기술요소이다. CSS3는현재표준작업중이고선택자에대한부분은거의완료되었다. 이장에서는 CSS3를이용하여다양한스타일기능을제공할수있는방법을중심으로향후 HTML5 마크업을작성하거나애플리케이션을개발할때유용한것들만모아서제공하고자한다. 77

78 3.1 CSS2 와차이점 CSS2와 CSS3의가장큰차이점은 CSS3가모듈기반으로개발되고있다는점이다. 이것은각종브라우저나디바이스가필요에따라원하는 CSS 모듈만을탑재하거나또는필요한모듈만을빠르게자주업데이트하는것을돕는다. CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와같은종류의모듈들을추가로개발하고있다. CSS3는기존의 CSS2 가갖지못했던화려하고역동적인면모를추가하여포토샵과자바스크립트및서버측기술에만완전히의존하던영역들을개척했다. 상자의크기에따른말줄임표시, 투명한배경, 그림자효과, 둥근모서리, 그라디언트, 도형의회전과비틀기, 애니메이션효과등이가능해진것이다. 특히그래픽디자인에만의존하던영역이 CSS3만으로도상당부분가능해지면서웹사이트의성능향상에크게기여할수있게되었다. 3.2 CSS3 브라우저지원현황 CSS3는아직개발이완료되지않은초안이기때문에현재시점 (2010년 7월 ) 을기준으로 12 종류의속성 (CSS3의모든속성을다루지않았다 ) 및 CSS level 1~3 선택자지원현황을파악했다 CSS3 주요속성들아래항목은앞으로소개할 CSS3의유용한속성에대한웹브라우저지원현황을정리한도표이다. 78

79 Module Properties CR 5 SF 4 FF 3.6 OP IE 8 IE 7 IE 6 Fallback for IE 6, 7, 8 Text text-shadow yes Yes yes yes textoverflow yes Yes no Yes filter Yes filte r Yes filte r Yes -oyes yes yes DropShadow Filter word-wrap yes Yes yes yes yes yes yes yes Yes yes yes yes yes yes IE를위한 'eot' 포멧필요 color opacity yes Yes yes yes yes filter Yes filte r Yes filte r Alpha Filter backgr ounds & border s box-shadow yes borderradius background( s) Yes - webkit- yes - webkit- Yes -webkit- Yes -webkit- Yes -moz- Yes filter Yes filte r Yes filte r Yes -mozyes no no no yes Yes yes yes no no no Shadow Filter gradient Yes - webkit- Yes -webkit- Yes -mozno Yes filter Yes filte r Yes filte r Gradient Filter transfo rms transform Yes - webkit- Yes -webkit- Yes -moz- Yes -o- Yes filter Yes filte r Yes filte r Matrix Filter transiti ons transition Yes - webkit- Yes -webkit- No -moz- (3.7 or later) Yes -ono no no animat ions animation Yes - webkit- Yes -webkitno no no no no 한편 fetchak.com은 ie-css3.htc(11.8kb) 파일을사용하여 IE 6~8 브라우저에서 text-shadow, box-shadow, border-radius 렌더 79

80 링을흉내내는스크립트를제안하고있다. 이스크립트를사용하면 IE 브라우저에서도 border-radius 표현이가능해지고 text-shadow, box-shadow 표현은더욱풍부해진다. 이스크립트를사용하면 DropShadow, Shadow filter를사용할필요가없다. htc 포멧은 IE 브라우저에서만기능하는벤더확장자바스크립트파일이다 CSS 선택자들아래항목은각종 CSS 버전에서사용하고있는 42가지의유용한선택자에대한웹브라우저지원현황을정리한도표이다. 42 CSS3 Selectors CR:Chrome, SF:Safari, FF:Firefox, OP:Opera, IE:Internet Explorer CSS level Selectors CR 5 SF 5 FF 3.6 OP IE 8 IE 7 IE 6 Meaning CSS3 E[attr^=val] Yes yes yes yes yes yes no E[attr$=val] yes yes yes yes yes yes no E[attr*=val] yes yes yes yes yes yes no E:root yes yes yes yes no no no E:nth-child(n) yes yes yes yes no no no 'attr' 속성의값이 'val' 으로시작하는요소를선택 ( 공백으로분리된값이일치해야한다 ) 'attr' 속성의값이 'val' 으로끝나는요소를선택 ( 공백으로분리된값이일치해야한다 ) 'attr' 속성의값에 'val' 이포함되는요소를선택 ( 공백으로분리된값과정확하게일치하지않아도선택 ) 문서의최상위요소 (html) 를선택 앞으로부터지정된순서와일치하는요소가 E 라면선택 (E 아닌요소의순서가계산에포함됨 ) E:nth-lastchild(n) yes yes yes yes no no no 뒤로부터지정된순서와일치하는요소가 E 라면선택 (E 아닌요소의순서가계산에포함됨 ) 80

81 42 CSS3 Selectors CR:Chrome, SF:Safari, FF:Firefox, OP:Opera, IE:Internet Explorer CSS level Selectors E:nth-oftype(n) E:nth-last-oftype(n) CR 5 SF 5 FF 3.6 OP IE 8 IE 7 IE 6 yes yes yes yes no no no yes yes yes yes no no no E:last-child yes yes yes yes no no no E:first-of-type yes yes yes yes no no no E:last-of-type yes yes yes yes no no no E:only-child yes yes yes yes no no no E:only-of-type yes yes yes yes no no no E:empty yes yes yes yes no no no E:target yes yes yes yes no no no E:enabled yes yes yes yes no no no E:disabled yes yes yes yes no no no Meaning E 요소중앞으로부터순서가일치하는 E 요소를선택 (E 요소의순서만계산에포함됨 ) E 요소중끝으로부터순서가일치하는 E 요소를선택 (E 요소의순서만계산에포함됨 ) 마지막에등장하는요소 가 E 라면선택 (E 아닌 요소의 순서가 계산에 포함됨 ) E 요소중첫번째 E 를선택 (E 요소의순서만계산에포함됨 ) E 요소중마지막 E 를선택 (E 요소의순서만계산에포함됨 ) E 요소가유일한자식이면선택 (E 아닌요소가하나라도포함되면선택안함 ) E 요소가유일한타입이면선택 (E 아닌요소가포함되어도 E 타입이유일하면선택 ) 텍스트및공백을포함하여자식요소가없는 E 를선택 E 의 URI 가요청되면선택 ( 따라서 E 는 ID 가지정되어있어야한다 ) 사용가능한폼콘트롤 (input, textarea, select, button) E 를선택 사용불가능한폼콘트롤 (input, textarea, select, button) E 를선택 E:checked yes yes yes yes no no no 선택된폼콘트롤 (input 81

82 42 CSS3 Selectors CR:Chrome, SF:Safari, FF:Firefox, OP:Opera, IE:Internet Explorer CSS level CSS2 Selectors CR 5 SF 5 FF 3.6 OP IE 8 IE 7 IE 6 Meaning checked="checked") 을선택 E:not(s) yes yes yes yes no no no S 가아닌 E 요소를선택 E~F yes yes yes yes yes yes no E 요소가앞에존재하면 F 를선택 (E 가 F 보다먼저등장하지않으면선택안함 ) * yes yes yes yes yes yes yes 모든요소를선택 E[attr] yes yes yes yes yes yes no E[attr=val] yes yes yes yes yes yes no E[attr~=val] yes yes yes yes yes yes no E[attr =val] yes yes yes yes yes yes no E:first-child yes yes yes yes yes yes no E:lang(en) yes yes yes yes yes no no E:before yes yes yes yes yes no no E:after yes yes yes yes yes no no E>F yes yes yes yes yes yes no E+F yes yes yes yes yes yes no 'attr' 속성이포함된요소 E 를선택 'attr' 속성의값이정확하게 'val' 과일치하는요소 E 를선택 'attr' 속성의값에 'val' 이포함되는요소를선택 ( 공백으로분리된값이일치해야한다 ) 'attr' 속성의값이 'val' 또는 'val-' 으로시작되는요소 E 를선택 첫번째등장하는요소 가 E 라면선택 (E 아닌 요소의 순서가 계산에 포함됨 ) HTML lang 속성의값이 'en' 으로지정된요소를선택 E 요소의시작지점에생성된요소를선택 E 요소의끝지점에생성된요소를선택 E 요소의자식인 F 요소를선택 E 요소를뒤따르는 F 요소를선택 (E 와 F 사이에다른요소가존재하면선택안함 ) 82

83 42 CSS3 Selectors CR:Chrome, SF:Safari, FF:Firefox, OP:Opera, IE:Internet Explorer CSS level CSS 1 Selectors CR 5 SF 5 FF 3.6 OP IE 8 IE 7 IE 6 Meaning E yes yes yes yes yes yes yes E 요소를선택 E:link yes yes yes yes yes yes yes 방문하지않은앵커 E 를선택 E:visited yes yes yes yes yes yes yes 방문한앵커 E 를선택 E:hover yes yes yes yes yes yes yes E:active yes yes yes yes yes yes yes E:focus yes yes yes yes yes yes yes E:first-line yes yes yes yes yes yes no E:first-letter yes yes yes yes yes yes no.class yes yes yes yes yes yes yes #id yes yes yes yes yes yes yes E F yes yes yes yes yes yes yes E 요소에마우스가올라가있는동안 E 를선택 E 요소에마우스클릭또는키보드엔터가눌린동안 E 를선택 E 요소에포커스가머물러있는동안 E 를선택 E 요소의첫번째라인을선택 E 요소의첫번째문자를선택 클래스이름이 class 로지정된요소선택 아이디이름이 id 로지정된요소선택 E 요소의자손인 F 요소를선택 3.3 CSS3 실전적용 text-shadow 83

84 text-shadow:5px 5px 0 #ccc; filter:progid:dximagetransform.microsoft.dropshadow(offx=5, OffY=5, Color=#cccccc, Positive=true); display:inline-block; zoom:1; text-shadow:x_offset y_offset blur_radius color 지원브라우저 : IE 브라우저를제외한모든브라우저가이미 text-shadow 속성을지원하고있다. blur 값은생략할수있는데생략하는경우기본값은 blur 스타일이전혀지정되지않은 '0' 이다. IE는 DropShadow Filter를사용할수있지만그림자의 blur 값이 '0' 과같은표현으로처리되고 blur 값을지정할수없는단점이있다. IE 브라우저버전간호환 ( 버그해결 ) 을위해 display 속성을 block 또는 inlineblock 으로지정하고 zoom:1 속성을추가로부여해야한다. 문법 Name: Value: Initial: Applies to: Inherited: Percentages: Media: Computed value: text-shadow none [ <color>? <length> <length> <length>? <length> <length> <length>? <color>? ] None all elements and generated content Yes N/A Visual a color plus three absolute <length>s CSS Text Level 3 text-shadow - MSDN DropShadow Filter

85 3.3.2 text-overflow text-overflow:ellipsis; -o-text-overflow:ellipsis; 지원브라우저 : Firefox 브라우저는아직지원하지않고있지만 IE는이미 IE6 버전부터지원하고있다. Firefox 브라우저는 overflow-hidden 속성에의하여넘치는부분이말줄임표없이잘린다. 문법 Name: Value: Initial: Applies to: Inherited: Percentages: Media: Computed value: text-overflow clip ellipsis <string> Clip block-level, inline-block elements and table cells No N/A Visual as specified 85

86 CSS Text Level 3 text-overflow word-wrap word-wrap:break-word; 지원브라우저 : 1byte 문자열이공백없이등장하는경우모든브라우저들은이를하나의단어로해석하기때문에개행하지않는다. 이것을강제로개행할수있다. 모든브라우저가이속성을지원한다. 문법 Name: Value: Initial: Applies to: Inherited: Percentages: word-wrap normal break-word normal all elements yes N/A Media: visual Computed value: specified value CSS Text Level 3 word-wrap

87 3.3.4 font-family:ngttf; font-family:ngeot; src:url(nanumgothic.eot);} body, input, textarea, select, button{ font-family:nanumgothic, 맑은고딕, ngttf, ngeot;} 지원브라우저 : ttf 파일과 eot 파일을함께준비한다. 비 IE 브라우저는 ttf 포멧과 otf 포멧을지원하지만 eot 포멧을지원하지않는다. 반면 IE 브라우저는 eot 포멧만지원하기때문에두가지포멧이모두필요하다. 나눔고딕글꼴을이미설치한사용자는웹폰트를내려받지않고로컬글꼴을사용할수있도록 NanumGothic을먼저선언한다. 한국어글꼴인경우오페라브라우저는 font-family 이름에반드시한글을사용해야한다. font-family 문법 Name: Value: Initial: font-family <family-name> N/A src 문법 Name: src Value: [ <uri> [format(<string> [, <string>]*)] <font-face-name> ] [, <uri> 87

88 Initial: N/A [format(<string> [, <string>]*)] <font-face-name> ]* CSS Fonts Module Level - fonts/#the-font-face-rule opacity opacity:0.5; filter:alpha(opacity=50); 지원브라우저 : IE 브라우저를제외한모든브라우저가이미 opacity 속성을지원하고있다. IE는 MS전용 Alpha Filter를적용하여동일한표현이가능하다. 문법 Name: Value: opacity <alphavalue> inherit Initial: 1 Applies to: Inherited: Percentages: Media: all elements no N/A visual Computed value: The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0]. CSS Color Module Level 3 opacity -

89 color/#transparency MSDN Alpha Filter _ box-shadow box-shadow:10px 10px 10px silver; -moz-box-shadow:10px 10px 10px silver; -webkit-box-shadow:10px 10px 10px silver; filter:progid:dximagetransform.microsoft.shadow(color=silver,d irection=135, strength=10); box-shadow:x_offset y_offset blur_radius color 지원브라우저 : 값은 'X좌표, Y좌표, blur값, 그림자색 ' 순으로선언한다. blur 값은생략할수있는데생략하는경우기본값은 blur 스타일이전혀지정되지않은 '0' 이다. IE 브라우저는 Shadow Filter를적용할수있으나그림자를한방향으로만표현할수있고사방으로표현할수없는제약이따른다. inset 값을추가하면그림자가상자안쪽으로발생하는데 IE filter 로는이런표현이불가능하다. Safari4는 inset 값을지원하지않지만 Safari5는지원한다. 문법 Name: box-shadow Value: none <shadow> [, <shadow> ]* Initial: none Applies to: all elements 89

90 Inherited: Percentages: Media: no N/A visual Computed value: any <length> made absolute; any color computed; otherwise as specified CSS Backgrounds and Borders Module Level 3 box-shadow - MSDN Shadow Filter border-radius 지원브라우저 : border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; 네방향모두적용하는경우. border-radius:30px 0; -moz-border-radius:30px 0; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; 원하는방향에만적용하는경우. 웹킷브라우저가운데사파리 4 는단축속성을지원하지않아현재로써는단축속성을사용할수없다. 문법 90

91 Name: Value: Initial: 0 Applies to: Inherited: Percentages: Media: border-radius [ <length> <percentage> ]{1,4} [ / [ <length> <percentage> ]{1,4} ]? all elements, except table element when 'border-collapse' is 'collapse' no Refer to corresponding dimension of the border box. visual Computed value: see individual properties CSS Backgrounds and Borders Module Level 3 border-radius background(s) background: url(bg.gif) no-repeat left top, url(bg.gif) no-repeat right top, url(bg.gif) no-repeat left bottom, url(bg.gif) no-repeat right bottom; 지원브라우저 : 하나의요소에이런배경이미지가 4번적용되었다. 속성의값을쉼표 (,) 로분리하면배경이미지의사용횟수를무한대로늘릴수있다. 문법 Name: background 91

92 Value: Initial: Applies to: Inherited: Percentages: [ <bg-layer>, ]* <final-bg-layer> see individual properties all elements no see individual properties Media: visual Computed value: see individual properties CSS Backgrounds and Borders Module Level 3 background gradient background:#3eaf0e -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3eaf0e), to(#fff)); background:#3eaf0e -moz-linear-gradient(top, #3EAF0E, #fff); filter:progid:dximagetransform.microsoft.gradient(startcolorst r=#3eaf0e, endcolorstr=#ffffff); 지원브라우저 : 웹킷 ( 크롬, 사파리 ) 과파이어폭스및 IE의속성및값선언방식이모두다름에유의한다. 웹킷은 ( 타입, X시작점 Y시작점, X종료점 Y 종료점, 시작색, 종료색 ) 형식으로선언하고파이어폭스는 ( 시작점, 시작색, 종료색 ) 순으로선언한다. gradient를지원하지않는브라우저를위하여기본배경색을지정해두어야함에유의한다. IE는 IE 전용 Gradient Filter를사용한다. Safari CSS Visual Effects Guide gradients

93 ual/safarivisualeffectsprogguide/gradients/gradients.html Mozila Developer Center -moz-linear-gradient - MSDN Gradient Filter transform -o-transform:rotate(90deg);-o-transform-origin:0 100%; -moz-transform:rotate(90deg);-moz-transform-origin:0 100%; -webkit-transform:rotate(90deg);-webkit-transform-origin:0 100%; filter:progid:dximagetransform.microsoft.matrix(m11= e-17, M12=-1, M21=1, M22= e-17, sizingmethod='auto expand'); 지원브라우저 : 시계방향으로 90도회전시키는코드. translate( 이동 ), scale( 크기 ), rotate( 회전 ), skew( 비틀기 ) 가가능하다. transform-oriain 속성은 transform의축을지정하는속성으로써값은기본값이 50%(X축 ) 50%(Y축 ) 이기때문에기본값을따르는경우생략할수있다. IE의경우 IE 전용 Matrix Filter를사용할수있으나사용법이다소복잡하다. 93

94 transform 문법 Name: transform Value: none <transform-function> [ <transform-function> ]* Initial: Applies to: Inherited: Percentages: Media: Computed value: none block-level and inline-level elements no transform-origin 문법 Name: Value: refer to the size of the element's box visual Initial: 50% 50% Applies to: Inherited: Percentages: Media: Computed value: Same as specified value. transform-origin [ [ <percentage> <length> left center right ] [ <percentage> <length> top center bottom ]? ] [ [ left center right ] [ top center bottom ] ] block-level and inline-level elements no refer to the size of the element's box visual For <length> the absolute value, otherwise a percentage CSS 2D Transforms Module Level 3 transform - MSDN Matrix Filter transition 94

95 a{padding:10px 15px; margin:0; -o-transition:0.2s; -webkit-transition:0.2s; } a:hover{padding:15px 20px; margin:-6px; opacity:0.8;} 지원브라우저 : 메뉴버튼에마우스를올리면플래시메뉴와같은부드러운움직임이발생한다. transition 속성의값으로는어떤속성을몇초간진행할것인지정의한다. 어떤속성을 transition 할것인지지정하지않으면기본값 all이지정되어모든속성을 transition 시킨다. 파이어폭스브라우저는 3.7 버전부터지원을기대할수있다. 문법 Name: Value: Initial: Applies to: Inherited: Percentages: Media: Computed value: transition [<'transition-property'> <'transition-duration'> <'transition-timing-function'> <'transition-delay'> [, [<'transition-property'> <'transition-duration'> <'transition-timing-function'> <'transition-delay'>]]* see individual properties all elements, :before and :after pseudo elements no N/A interactive Same as specified value. CSS Transitions Module Level 3 transition - transitions/#the-transition-shorthand-property- 95

96 animation.ani { -webkit-animation:webkitfire infinite 1s 'webkitfire'{ from{ -webkit-transform:rotate(0deg);} to{-webkit-transform:rotate(360deg);} } 지원브라우저 : 'webkitfire' 라는사용자정의에니메이션이실행된다. 일정한 (linear) 속도로 1초 (1s) 에한바퀴 (0~360deg) 씩영원히 (infinite) 돌게된다. 문법 Name: Value: Initial: Applies to: Inherited: Percentages: Media: Computed value: animation [<animation-name> <animation-duration> <animation-timingfunction> <animation-delay> <animation-iteration-count> <animation-direction>] [, [<animation-name> <animationduration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>] ]* see individual properties block-level and inline-level elements no N/A visual Same as specified value. 96

97 CSS Animations Module Level 3 animation - animations/#the-animation-shorthand-property- 3.4 CSS3 명세읽는법 CSS3 명세읽는법 용어 Value 해설 유효한값또는문법 Initial 기본값 ( 값을지정하지않은경우의 ) Applies to Inherited Percentage Media Computed value <...> a b && 속성을적용할수있는요소 (block, inline, inline-block... all elements) 속성이자손에게상속되는지의여부 (yes, no) 퍼센티지값을적용할수있는지의여부 (N/A 는 not applicable 또는 not available 으로써적용할수없다는의미 ) 어떤미디어그룹에적용할수있는속성인지의여부 (visual, interactive...) 절대값이어떻게계산되는지 [...] 값을그룹핑한다 포함되는데이터유형을변수형식으로설명 ( 예를들면 <length>, <percentage>) 공백으로분리되어나열된값들은모든값이반드시필요하고순서를지켜야한다 둘이상의값이이것으로분리되어있으면하나의값은반드시필요하고하나만필요하다 둘이상의값이이것으로분리되어있으면하나또는하나이상반드시필요하고순서는지키지않아도된다 둘이상의값이이것으로분리되어있으면모든값이반드시필요하고순서는지키지않아도된다 * 선행되는유형의값은생략하거나한번이상등장할수있다 + 선행되는유형의값은반드시필요하고한번이상필요하다? 선행되는유형의값은생략하거나한번만필요하다 {a,b} (...) / 선행되는유형의값은적어도 'a' 번필요하고최대한 'b' 번필요하다. ( 예를들면 border-color 속성의 Value 는 <color>{1,4} 이다 ) 인용부호밖에있는괄호는값의묶음을위해사용되므로문자그대로출력해야한다 ( 예 background:url(...);) 인용부호밖에있는슬러시는값의연결을위해사용되므로문자그대로출력해야한다 ( 예 font:12px/1.2 Sans-serif;), 인용부호밖에있는쉼표는값의연결을위해사용되므로문자그대로 97

98 CSS3 명세읽는법 용어 해설 출력해야한다 ( 예 font-family:tahoma, Geneva, sans-serif;) 3.5 FAQ CSS3 는언제지원되나? CSS의경우공식표준 (de facto standard) 보다사실표준 (de jure standard) 이더욱의미가있다. 그이유는현존하는웹브라우저들이권고후보 (CR:Candidate Recommendation) 단계에머물러있는 CSS 2.1 명세의대부분을이미잘지원하고있기때문. CSS 2.1은공식표준 (REC:Recommendation) 이되기위하여권고제의 (PR:Proposed Recommendation) 라는단계를한번더거쳐야하지만이미현실세계에서는사실상의표준이되어있는샘이다. 따라서 CSS3가공식표준이될때까지기다릴필요가없다. 웹브라우저들이지원하기만한다면 CSS3의새로운기술명세를현재의실무에즉시적용할수있다. 이미현존하는최신웹브라우저들은앞다투어 CSS3의유용한명세들을지원하기시작했다. CSS3를사용하면이를잘지원하지못하는하위버전브라우저를선택한사용자를차별하는것이아닌가? 전혀그렇지않다. CSS는 HTML 문서의화면표시스타일을기술하는언어로써 HTML 구조를변경하거나의미를교정하는언어가아니다. 따라서 CSS는의도하지않은상황에서도자연스럽게우아한낮춤 (Graceful Degradation) 과점진적향상 (Progressive Enhancement) 원칙에충실하다. 최신웹브라우저를선택한사용자에게는더세련되고화려하면서역동적인모습을보여줄것이다. 그러나오래된웹브라우저를선택한사용자도 HTML 문서를읽거 98

99 나듣는데전혀문제가되지않는다. 이것은상호운용성 (interoperability) 또는웹접근성 (web accessibility) 의어느측면에서보더라도차별에해당하지않는다. 더좋은도구를선택한사용자에게더좋은사용자경험을제공하는것은당연한이치로써이것은차별을의미하지않는다. CSS3를사용하면 CSS 문법유효성검사를만족할수없지않나? 그렇다. CSS3를사용하면 CSS 문법유효성검사를만족시킬수없다. 그러나그것은문제가되지않는다. CSS 문법유효성검사결과는현실세계에서중요하지않다. CSS의사용에있어서중요한것은사실상의표준이고이것은현존하는웹브라우저들의지원여부에따른다. 만약누군가 CSS의문법유효성을완벽하게지켜야한다고주장한다면 W3C 웹사이트의 CSS 소스코드를열어보라고권해줄수있다. W3C 공식웹사이트 (w3.org) 는이미 CSS3 속성을사용하여그래픽이미지를최소화하면서도웹페이지를화려하게디자인했다. CSS3를지원하지않는 IE 브라우저사용자에게는조금씩다르게보이는디자인이존재한다. 그러나누구도 W3C가 IE 브라우저사용자를차별했다고말하지는않는다. CSS3의명세를지금부터공부해야하나? 2010년현재 CSS3는아직모든명세가확정되지않았고웹브라우저들이모든명세를잘지원하는것도아니다. 따라서최신브라우저에서지원하는유용한몇가지속성들을먼저사용해보면서자연스럽게점진적으로익혀가는것이좋다. 또한 CSS2 버전에서지원하던거의모든속성과선택자사용법을계승하고있기때문에새표준에서추가된명세들가운데브라우저들이지원하는명세들을먼저익히면된다. 여러분이 CSS를처음배울때에도아마이런방식으로접근했을것이다. 99

100 CSS3 명세가갑자기바뀌면어떻게하나? CSS3 명세가바뀌는것은중요한사실이아니다. 웹브라우저가바뀐 CSS3 명세를지원하는지의여부가중요하다. 보통의웹브라우저들은하위호환성을중요하게여기기때문에새표준을수용하면서낡은명세의지원을차단해버리는어리석은일은하지않을것이다. 예를들어 CSS3 명세는상자의한쪽귀퉁이에둥근모서리효과를지정할때 border-top-left-radius 라는속성을사용할것을제시하고있지만파이어폭스브라우저는둥근모서리를표현할때 -moz-border-radius-topleft 라는속성을사용해야한다. 만약 border-top-left-radius 속성이최종권고안으로확정되더라도파이어폭스브라우저는 -moz-border-radius-topleft 속성의지원을멈추지않을것이다. CSS3 공부했지만대부분의브라우저들이지원하지않는것같다. 지원하지않는것이아니라사용방법이조금다를뿐이다. 웹브라우저들은 CSS3 명세를지원하지만미처발견하지못했던매우특이한경우의문제점이나개선사항을수집하기위해보다안전한방법으로 CSS3를지원하는방법을선택했다. 그것이바로벤더확장 (Vendor Extensions) 속성이다. 벤더확장속성이란 CSS 속성앞에벤더표시를위한접두사 (prefix) 를붙인상태의속성표기법이다. 오페라브라우저는 -o-, 파이어폭스는 -moz-, 웹킷엔진을사용하는사파리와크롬은 -webkit- 이라는접두사를붙임으로써현재지원하는속성이공식적인표준과다를수있고변경의여지가있을수있다는점을암시하고있다. 예를들면 CSS3의 box-shadow 속성을작성할때파이어폭스는 -moz-box-shadow 라고작성해야한다. 파이어폭스가이속성을공식지원하기시작한다면 box-shadow와 -moz-box-shadow 표기법을병행지원할것이다. 다른벤더들도마찬가지다. 100

101 고객들이 IE 브라우저에서도 CSS3 기법들이적용되길원한다. 안타깝게도현재 (IE8) 및하위버전의 IE 브라우저는 CSS3를지원하지않는다. IE9부터 HTML5와함께 CSS3를지원할계획이발표되었고 IE9 브라우저는 Windows Vista, Windows 7 이후의운영체제에만설치가능하다. IE9 브라우저는아직 (2010년 7월현재 ) 공식출시일을밝힌적이없지만빠르면 2011년에출시가될것으로전망하고있다. CSS3가최신기술이기때문에하위버전의브라우저에서똑같이구현하려면그래픽이미지또는자바스크립트를추가로사용해야한다. 때문에무리하게적용하는경우웹페이지의성능을떨어뜨리는결과를감수해야한다. 평균적으로웹페이지로딩속도의 80% 는이미지와자바스크립트를내려받는데소요된다. 트래픽이높은웹사이트일수록이러한성능문제는치명적으로작용하기때문에낮은버전의웹브라우저에는우아한낮춤전략으로접근하는것이좋다. 예를들면낮은버전의웹브라우저에서는둥근모서리대신각진모서리표현을사용하는것이다. 이것은고객이나디자이너의욕심을포기하라는의미가아니라성능과타협할수있도록합의를이끌어야한다는뜻이다. 결과적으로모든사용자들에게높은성능을제공할수있고최신웹브라우저를선택한사용자에게는보다향상된경험을제공할수있다. 낡은브라우저때문에계속해서시대에뒤떨어진낡은기술만을사용해야한다면향상된경험도제공할수없게된다. 참고자료 W3C Standards & Draft About the CSS 2.1 Specification - CSS3.info - CSS3 Working Group Editor's Draft - Selectors Level CSS Text Level

102 CSS Fonts Module Level CSS Color Module Level CSS Backgrounds and Borders Module Level CSS 2D Transforms Module Level CSS 3D Transforms Module Level CSS Transitions Module Level CSS Animations Module Level animations/ ALL STANDARDS AND DRAFTS CSS - Safari CSS Reference - erence/safaricssref/introduction.html Mozilla CSS Extensions - Opera Web specifications support - MSDN Cascading Style Sheets - MSDN Visual Filters and Transitions Reference

103 4. HTML5 API HTML5에서공식으로채택한자바스크립트 API들에대하여이해하고예제를통한사용방법을알아보자. 여기에소개된예제들은참고사이트에서제공하는내용을번역또는실정에맞게의역한것이다. 그리고대부분의현대브라우저들이지원하거나개발진행중인내용들만을다루고있어본인이직접개발하는데에는어려움이없을것으로생각된다. 지면관계상세세한명세까지는모두다루지못한점양해바라며, 응용력을십분발휘하여보다성능이좋고네이티브애플리케이션다운웹애플리케이션을개발하는데도움되길바라는취지로작성했다. 103

104 4.1 HTML5 미디어요소 Audio 와 Video 요소 지원브라우저 : HTML5에서는새로운미디어요소인 <audio> 와 <video> 요소를지원한다. 이요소들을이용하여별도의브라우저플러그인을이용하지않고미디어를웹페이지에쉽게추가할수있다. 그리고스크립트를이용하여미디어를직접제어할수있다. HTML5를지원하지않는브라우저라라도크게걱정할필요없다. 종전과같이플래시등과같은플러그인을이용하여미디어를재생할수있기때문이다. 특히, <canvas> 요소를결합하면영상의실시간비드맵연산이가능하기때문에다양한그래픽효과를부여하거나일종의영상판독기와같은애플리케이션을오픈웹기술만으로개발할수있다. 미디어를스크립트로다루는일은 <video> 요소와 <audio> 요소를구분할필요없이동일하게취급할수있다. HTML 문서에 <video> 요소를삽입해보고스크립트를이용한제어방법에대하여간단히알아보자. 104

105 <video> 요소의마크업 웹페이지에비디오요소와외부컨트롤을위한요소를작성한다. 만약, 요소의속성으로 "controls" 을지정하면브라우저에서제공하는기본컨트롤러를사용할수있다. <video autoplay> <source src="foo.ogg" type="video/ogg"> <source src="foo.mp4" type="video/mp4"> <source src="foo.webm" type="video/webm"> 당신의브라우저는 <code><video></code> 요소를지원하지않습니다. </video> <input type="button" onclick="playpause()" value="play/pause"> 스크립트를이용한미디어제어 playpause 함수의내용은다음과같다. function playpause() { var myvideo = document.getelementsbytagname('video')[0]; if (myvideo.paused) myvideo.play(); else myvideo.pause(); } 다양한이벤트를등록하여미디어의재생상황을모니터링하고대응할수있다. 105

106 myvideo.addeventlistener('ended', function () { alert('video playback finished') }); 데모 : 만약, 스크립트만으로오디오를재생하고싶다면다음과같이작성해도무방하다. var audio = new Audio("song.mp3"); audio.play(); 브라우저에서비디오요소를지원하는지를검사하는방법은다음과같다.!!document.createElement('video').canPlayType 그리고브라우저가지원하는코덱을검사할수도있다. var v = document.createelement('video'); var supported = v.canplaytype('video/mp4; codecs="avc1.58a01e, mp4a.40.2"'); if ( supported == 'probably') { return true; } 미디어요소의이벤트들 Event name abort canplay canplaythrough canshowcurrentframe dataunavailable durationchange Description Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent. Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the CAN_PLAY readystate. Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. The current frame has loaded and can be presented. This corresponds to the CAN_SHOW_CURRENT_FRAME readystate. Sent when the ready state changes to DATA_UNAVAILABLE. The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known. 106

107 emptied empty ended error loadeddata loadedmetadata loadstart pause play progress ratechange seeked seeking suspend timeupdate volumechange waiting The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. Sent when an error occurs and the media is empty. Sent when playback completes. Sent when an error occurs. The element's error attribute contains more information. The first frame of the media has finished loading. The media's metadata has finished loading; all attributes now contain as much useful information as they're going to. Sent when loading of the media begins. Sent when playback is paused. Sent when playback starts or resumes. Sent periodically to inform interested parties of progress downloading the media. The progress event has three attributes: lengthcomputable true if the total size of the media file is known, otherwise false. loaded The number of bytes of the media file that have been received so far. total The total number of bytes in the media file. Sent when the playback speed changes. Sent when a seek operation completes. Sent when a seek operation begins. Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason. The time indicated by the element's currenttime attribute has changed. Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed). Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). 위표는 Mozilla Developer Center로부터발췌한이벤트목록이다. 미디어요소에는매우다양한상황별이벤트를제공하는것을확인할수있다. HTML5 미디어요소들의명세는아직도진행중이며코 107

108 덱, 스트리밍등여전히다양한이슈들을안고있다 Canvas 요소 지원브라우저 : 사실, <canvas> 요소는 HTML5가나오기전부터존재했었고다양한용도로사용되어왔었지만이제서야 HTML5의공식명세로자리잡았다. 이요소를사용하면 2차원의비트맵이미지프로세싱이가능하고동적인그래픽렌더링을스크립트로제어할수있다. 이는웹페이지에인터랙티브한그래픽컨텐츠를만들어제공할수있음을뜻한다. 화려한그래픽기반의개임이나, 다양한종류의그래프, 이미지합성또는변형, 드로잉애플리케이션등마치플래시로생성된것과같은컨텐츠를제공할수있게되는것이다. 간단한예제 <canvas> 요소에빨간색사각형을그려보자. 아래코드는 HTML 문서에 <canvas> 요소를작성한것이다. <canvas id="example" width="200" height="200"> 이메시지는사용자의브라우저에서 HTML5 캔버스를지원하지않는경우표시됨 </canvas> 스크립트를사용하여 <canvas> 요소에사각형을그려넣는다. var example = document.getelementbyid('example'); var context = example.getcontext('2d'); context.fillstyle = "rgb(255,0,0)"; context.fillrect(30, 30, 50, 50); 다음과같은결과를얻을수있다. 108

109 데모 : SVG 요소 지원브라우저 : HTML5 명세에포함되면서부터표준으로자리매김한 SVG는확장가능한백터그래픽 (Scalable Vector Graphics) 의줄임말이다. 2 차원백터그래픽만을표현하며, XML형식으로작성되고, SVG 뷰어를이용하는등다양한삽입방법으로사용자가조회할수있다. SVG의작성은 HTML과매우유사하다. <circle>, <rect> 등과같은그래픽태그들을이용하여작성하면된다. SMIL 또는스크립트를이용하여동적인변화를주거나 CSS를지정하여모양을꾸밀수도있다. SVG와스크립트를접목하여상호작용이발생하는차트, 다이어그램, 일러스트레이트등선명한화질을가진확대가능한자료를웹페이지에삽입할수있으며, 마인드맵, 목업과같은애플리케이션을개발할수있다. SVG 요소의마크업 보통아래와같은형식으로 HTML 문서에마크업한다. <svg xmlns=" xmlns:xlink=" <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> 109

110 </svg> 또는리소스를지정하는형식으로도삽입할수있다. 경우에따라서는 svg 뷰어브라우저플러그인을필요로하기도한다. <!-- object 요소사용 --> <object data="/svg/examples.svg" width="300" height="100" type="image/svg+xml" codebase=" /> <!-- embed 요소사용 --> <embed src="/svg/examples.svg" width="500" height="200" type="image/svg+xml" pluginspage=" /> <!-- iframe 요소사용 --> <iframe src="/svg/examples.svg" width="300" height="100"></iframe> 삽입결과는다음과같다. 데모 : SVG 와스크립트 SVG에스크립트로애니메이션을하거나변화를주는일은 DOM 을스크립트로다루는것과별반다르지않다. 다음은 SVG가가진특정한요소를스크립트와 SMIL을이용하여애니메이션하는예제이다. var svgdocument; var svgns = ' var xlinkns = ' 110

111 function startup(evt){ P=document.getElementById("P") CL=document.getElementById("CL") animate() stop("s") stop("l") } limit=720 blu=4 speed=6 running=true function animate(){ if (!running) return B="rotate("+blu+" )" C="rotate("+(-blu/2)+" )" CL.setAttribute ("transform", B); P.setAttribute ("transform", C); blu=blu+speed if ((blu<0) (blu>limit)) speed=-speed window.settimeout("animate()",10) } runanim=new Object runanim["s"]=false runanim["l"]=false function stop(id){ if (runanim[id]) { document.getelementbyid(id).firstchild.nextsibling.endeleme nt() document.getelementbyid("e"+id).endelement() } else{ document.getelementbyid(id).firstchild.nextsibling.beginele ment() document.getelementbyid("e"+id).beginelement() } runanim[id]=!runanim[id] } 데모 : 111

112 4.2 HTML5 API Offline Application Cache 지원브라우저 : HTML5는오프라인환경을고려한 API들 (Storage, Database) 이있다. 하지만이 API들이오프라인에서정상적으로작동하기위해서는결국 CSS, 이미지, 자바스크립트등과같은리소스를필요로한다. 이러한환경를궁극적으로충족시켜주는것이바로 Application Cache API이다. 오프라인상태에서도웹애플리케이션으로의접근을가능케하는매우중요한기능이다. 이것은기존브라우저들이사용하던캐싱메커니즘과는차이가있다. 오프라인상태에서개발자의예상대로작동하고신뢰할수있는새로운인터페이스인것이다. 이것은다음과같은 3가지장점을가진다 : 오프라인브라우징 - 오프라인상태에서도사용자가사이트에접근할수있다. 속도향상 - 로컬영역에저장된리소스들은매우빠른로드속도로호출된다. 서버부하감소 - 브라우저는오직리소스가변경된경우에만다운로드를시도한다. 캐시파일목록참조하기 <html> 태그에 manifest 속성을지정하여캐시할파일들의목록을지정할수있다. 여기에지정되는파일은간단한텍스트파일이며, 파일의절대또는상대경로를기입하여참조한다. <html manifest=" </html> 그리고.manifest 파일의 mime-type 은반드시 "text/cache- 112

113 manifest" 이어야한다. manifest 파일의구조 다음은간략하게 manifest 를구성한파일이다. CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js manifest를사용할때몇가지주의해야할점이있다. "CACHE MANIFEST" 문자열은항상첫번째라인에위치해야하며, 사이트당최대 5MB까지캐시할수있다. 만약에 manifest 파일이나또는 manifest에명시된파일의다운로드가실패할경우브라우저는가장최근에성공적으로다운로드한파일을그대로사용하며, 실패이벤트를발생한다. 이제조금더복잡하게구성해보자. CACHE MANIFEST # v2 # 명시적으로캐시된항목 CACHE: index.html stylesheet.css images/logo.png scripts/main.js # 사용자가온라인상태가되었을때필요한리소스들 NETWORK: login.php /myapi # static.html 파일은 main.py 파일에접근할수없을때보여짐 FALLBACK: /main.py /static.html 113

114 '#' 으로시작하는문자열은주석을뜻한다. "CACHE:" 문자열아래로명시된파일들은간략하게구성했을때와마찬가지로로컬영역에파일을캐시하는것이다. "NETWORK:" 문자열아래로명시된파일들은온라인상태가되었을때에만접근을허용하고그렇지않은경우우회한다. "FALLBACK:" 문자열아래로명시된파일들은해당파일에접근할수없는경우대체페이지를지정한것이다. 첫번째 URI는리소스이며, 두번째는대체되는파일이다. 주의해야할점은색션들을임의의순서로나열해도무방하지만각섹션은하나이상의항목이존재해야한다는점이다. manifest에명시된파일들은오직 manifest파일이서버에서갱신된경우에만다운로드를시도한다. 그러나스크립트를이용하여수동으로갱신할수도있다. 이는 ' 스크립트로캐시갱신하기 ' 에서자세한사용법을다루도록한다. 다음예제는모든페이지를정의한것이다. offline.html은오프라인상태에서루트 ("/") 로접근한경우보여지게될것이다. 그외다른리소스들은몇몇이미지파일을제외하고모두인터넷연결을필요로한다. CACHE MANIFEST # v3 # 명시적으로캐시된항목 index.html css/style.css # offline.html 파일은사용자가오프라인이되었을때보여짐 FALLBACK: / /offline.html # 사이트의모든리소스는온라인을필요로함 NETWORK: * # 추가적인리소스캐시 114

115 CACHE: images/logo1.png images/logo2.png images/logo3.png 스크립트로캐시갱신하기 오프라인이되는순간이벤트가발생하며, 이러한경우는다음중하나이다. 사용자가당신의사이트에대한브라우저의데이터스토리지를삭제한경우.manifest 파일이수정된경우 프로그램에의해캐시가갱신된경우 window.applicationcache 개체를이용하여캐시를프로그램적으로접근하여관리할수있다. 그리고 status 프로퍼티를확인하면다음과같이현재캐시상태를확인할수있다. var appcache = window.applicationcache; switch (appcache.status) { case appcache.uncached: // UNCACHED == 0 return 'UNCACHED'; break; case appcache.idle: // IDLE == 1 return 'IDLE'; break; case appcache.checking: // CHECKING == 2 return 'CHECKING'; break; case appcache.downloading: // DOWNLOADING == 3 return 'DOWNLOADING'; break; case appcache.updateready: // UPDATEREADY == 5 return 'UPDATEREADY'; break; case appcache.obsolete: // OBSOLETE == 5 return 'OBSOLETE'; break; 115

116 default: return 'UKNOWN CACHE STATUS'; break; }; 프로그램적으로캐시를갱신하려면 applicationcache.update() 를호출하면된다. 이명령은사용자의캐시를업데이트하려고시도할것이다. 단, manifest파일이변경되었을경우이다. applicationcache.status를확인한결과가 "UPDATEREADY"( 갱신준비 ) 상태라면 applicationcache.swapcache() 를호출하여오래된캐시를새로운파일로교체할수도있다. var appcache = window.applicationcache; appcache.update(); // 사용자의캐시를갱신하도록시도함... if (appcache.status == window.applicationcache.updateready) { appcache.swapcache(); // 가져오기에성공한경우새로운캐시로교체 } 그리고이벤트리스너에다음과같은다양한이벤트를할당하여캐시파일을프로그램적으로관리할수있다. function handlecacheevent(e) { //... } function handlecacheerror(e) { alert('error: 젠장! 캐시갱신을실패하였습니다.'); }; // 최초 manifest 의캐시가완료된경우이밴트발생 appcache.addeventlistener('cached', handlecacheevent, false); // 갱신확인, 항상이벤트가순차적으로발생 appcache.addeventlistener('checking', handlecacheevent, false); // 갱신이필요함. 브라우저가리소스를가져올때발생 116

117 appcache.addeventlistener('downloading', handlecacheevent, false); // manifest 에서 404 또는 410 로응답시발생, 다운로드실패 // 또는다운로드진행중에 manifest 가변경된경우 appcache.addeventlistener('error', handlecacheerror, false); // 최초 manifest 다운로드시발생 appcache.addeventlistener('noupdate', handlecacheevent, false); // manifest 파일에서 404 또는 410 으로응답시발생 // 이러한경우애플리케이션캐시에서삭제된다. appcache.addeventlistener('obsolete', handlecacheevent, false); // manifest 로부터각각의리소스를가져올때발생 appcache.addeventlistener('progress', handlecacheevent, false); // manifest 의리소스가새롭게다시다운로드된경우발생 appcache.addeventlistener('updateready', handlecacheevent, false); 다시한번언급하지만, manifest에명시된리소스들중하나라도다운로드에실패하면전체업데이트역시실패한다. 이때브라우저는기존의애플리케이션캐시를이용하여실행되고실패이벤트를발생하게된다는사실을기억하자. 데모 : Web Storage 지원브라우저 : Web Storage는일종의클라이언트-사이드데이터베이스이다. 이데이터는서버가아닌각사용자의브라우저에보관된다. 일반데이터베이스와의두드러진차이점은우리에게익숙한 key-value 형식으로보관 / 갱신 / 호출한다는것이다. 이것은 Web Storage를사용하기위해별도의쿼리문법이나복잡한메커니즘을이해하지않아도 117

118 됨을의미한다. 그렇기때문에우리는한가지만기억하면된다. Web Storage는 Web Database와마찬가지로브라우저에서제공하는저장공간을사용한다는것이다. 만약에사용자가사파리에서파이어폭스로전환하는경우동일한데이터를가져올수없다는것을유념하자. Web Storage는 localstorage와 sessionstorage로구분된다. 이들의차이점은브라우저가완전히종료되고난후에도데이터가유지되느냐마느냐이다. 데이터의용도에따라서적절한방식을선택하면된다. 간단한사용법 자, 이제간단한몇가지코드를살펴보자. 다음은 localstorage의기본적인사용법이다. localstorage.setitem("name", "Hello World!"); // key-value 형식으로저장 document.write(localstorage.getitem("name")); // 저장된값호출 localstorage.removeitem("name"); // 스토리지로부터일치하는아이템삭제 첫번째라인에서 "name" 이라는키에 "Hello World!" 라는새항목을 Web Storage에저장한것이다. 여기에서주의해야할점은 setitem의두번째인자는항상문자 (String) 형식으로전달해야한다. 두번째라인에서는 Web Storage로부터 "name" 키에저장된값을 document.write로출력한것이다. 세번째라인은 Web Storage에서 "name" 키에해당하는데이터를삭제한것이다. 만약, 할당량을초과한경우첫번째라인에서오류가발생하며데이터가저장되지않을것이다. 다음은이오류를대처하는방법이다. try { 118

119 localstorage.setitem("name", "Hello World!"); // key-value 형식으로저장 } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(' 할당량초과!'); // 할당량초과로인하여데이터를저장할수없음 } } 이제브라우저에서 localstorage를지원하지않는경우를구분하자. if (typeof(localstorage) == 'undefined' ) { alert(' 당신의브라우저는 HTML5 localstorage 를지원하지않습니다. 브라우저를업그레이드하세요.'); } else { try { localstorage.setitem("name", "Hello World!"); // key-value 형식으로저장 } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert(' 할당량초과!'); // 할당량초과로인하여데이터를저장할수없음 } } document.write(localstorage.getitem("name")); // 저장된값호출 localstorage.removeitem("name"); // 스토리지로부터일치하는아이템삭제 } 이상으로 Web Storage에데이터를저장하고, 호출하고, 삭제하는간한한사용법에대하여알아보았다. 데모 : demo/storage.html 쿠키대신 Web Storage 사용하기 쿠키는수년동안사용자의고유데이터를추적하는데사용되어왔지만심각한단점들이있다. 그중에도가장큰결함은모든쿠키데이터가 HTTP 요청헤더에포함되어버린다는점이다. 이는결국응답시간에나쁜영향을미친다. 특히, XHR이많은웹애플리케이 119

120 션은더더욱그렇다. 가장좋은사례는역시쿠키의크기를줄이는것이지만 HTML5에서는쿠키를대체할수있는 Web Storage를사용할수있다. localstorage와 sessionstorage 이두개의웹저장소개체는클라이언트-사이드에사용자데이터를세션이유지되는동안또는무기한으로유지하는데사용할수있다. 또한개인자료가 HTTP 요청에전송되지도않는다. 만약에사용자데이터를쿠키에저장하고있다면다음과같이개선해보자. // 브라우저의 localstorage 지원여부를판단 if (('localstorage' in window) && window.localstorage!== null){ // 개체에프로퍼티를할당하는쉬운방법을사용 localstorage.wishlist = '["Unicorn","Narwhal","Deathbear"]'; } else { // 브라우저에서 Web Storage 를지원하지않는다면 // document.cookie 를이용한다. var date = new Date(); date.settime(date.gettime()+(365*24*60*60*1000)); var expires = date.togmtstring(); var cookiestr = 'wishlist=["unicorn","narwhal","deathbear"];'+ ' expires='+expires+'; path=/'; document.cookie = cookiestr; } Web SQL Database 지원브라우저 : Web Database는 HTML5와함께새로생겨난것이다. 이제부터클라이언트웹개발자들은풍부한쿼리능력을가진웹애플리케이션을만들수있게되었다. SQL 쿼리를별도로익혀야하는노고가 120

121 뒤따르지만온라인또는오프라인여부에상관없이사용가능하며, 클라이언트의저장소에영구히보존할수있고, 리소스점유율이많은덩치큰데이터를체계적으로관리할수있다. 지금소개할예제코드들은아주간단한할일목록관리애플리케이션을만드는과정을다룬다. 변수선언 예제에사용될데이터베이스로직은아래와같은네임스페이스를사용한다. var html5rocks = {}; html5rocks.webdb = {}; 비동기와트랜잭션의이해 Web Database를사용하는대부분의사례가비동기 API를사용한다. 비동기 API는 non-blocking 시스템이다. 그리고리턴값을통해서는데이타를얻지못한다. 때문에정의된콜백함수에데이터를전달하게된다. Web Database는 HTML을통한트랜잭션이다. 이것은외부에서 SQL 문을실행할수없다. 트랜잭션은두종류로구분되는데, 읽고쓰기위한트랜잭션 (transaction()) 과읽기전용트랜잭션 (readtransaction()) 이다. 그리고주의해야할점은데이터를읽고쓸때전체데이터베이스가잠겨버린다는점이다. 데이터베이스열기 데이터베이스에접근하기전에먼저해야할일은데이터베이스를개설하는것이다. 개설하기위해서는데이터베이스의이름, 버전, 설명그리고크기를정의한다. 121

122 html5rocks.webdb.db = null; html5rocks.webdb.open = function() { var dbsize = 5 * 1024 * 1024; // 5MB html5rocks.webdb.db = opendatabase('todo', '1.0', 'todo manager', dbsize); } html5rocks.webdb.onerror = function(tx, e) { alert(' 예기치않은오류가발생하였습니다 : ' + e.message ); } html5rocks.webdb.onsuccess = function(tx, r) { // 모든데이터를다시그림 html5rocks.webdb.getalltodoitems(tx, r); } 테이블생성하기 "CREATE TABLE SQL" 쿼리문을 transaction 안에실행하여테이블을만들수있다. OnLoad 이벤트가발생하는지점에테이블생성함수를정의했다. 테이블이이미존재하지않는경우에는테이블이생성된다. 이테이블의이름은 "todo" 이고아래와같은 3개의컬럼을가진다. ID - 순차적으로증가하는 ID 컬럼 todo - 아이템의몸체가되는텍스트컬럼 added_on - 아이템이만들어진시간컬럼 html5rocks.webdb.createtable = function() { html5rocks.webdb.db.transaction(function(tx) { tx.executesql('create TABLE IF NOT EXISTS ' + 'todo(id INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)', []); }); } 122

123 테이블에데이터추가하기할일목록을관리하기위한테이블이준비되었다. 이제테이블에아이템을추가하는중요한작업을진행해보자. transaction 내부에서 todo 테이블에 INSERT 쿼리를수행해야한다. 이때 executesql은다수의파라미터를가진다. 그리고 SQL은이파라미터의값을컬럼에입력하는쿼리를수행한다. html5rocks.webdb.addtodo = function(todotext) { html5rocks.webdb.db.transaction(function(tx){ tx.executesql('insert INTO todo(todo, added_on) VALUES (?,?)', [todotext, addedon], html5rocks.webdb.onsuccess, html5rocks.webdb.onerror); }); } 테이블에서테이터선택하기 이제데이터베이스에데이터가존재한다. 이데이터를다시밖으로꺼내보자. Web Database는표준 SQLite SELECT 쿼리를이용하면된다. html5rocks.webdb.getalltodoitems = function(renderfunc) { html5rocks.webdb.db.transaction(function(tx) { tx.executesql('select * FROM todo', [], renderfunc, html5rocks.webdb.onerror); }); } 여기에사용된명령예제는모두비동기이다. 이러한경우 transaction 또는 executesql 호출시데이터가반환되지않는다. 데이터는반드시콜백을통해전달된다는사실을기억하자. 가져온데이터처리하기 데이터를성공적으로가져왔다면 loadtodoitems 함수가호출 123

124 되게하자. onsuccess 콜백은두개의파라미터를가진다. 첫번째는쿼리트랜잭션이고두번째는결과묶음이다. 결과묶음은배열이며데이터가담겨있다. function loadtodoitems(tx, rs) { var rowoutput = ""; for (var i=0; i < rs.rows.length; i++) { rowoutput += rendertodo(rs.rows.item(i)); } var todoitems = document.getelementbyid('todoitems'); todoitems.innerhtml = rowoutput; } function rendertodo(row) { return '<li>' + row.id + '[<a onclick="html5rocks.webdb.deletetodo(' + row.id + ');"'>X</a>]</li>'; } 그리고 ID가 "todoitems" 인 DOM 요소에할일목록들이그려지는일을수행한다. 테이블에서데이터제거하기 html5rocks.webdb.deletetodo = function(id) { html5rocks.webdb.db.transaction(function(tx) { tx.executesql('delete FROM todo WHERE ID=?', [id], loadtodoitems, html5rocks.webdb.onerror); }); } 초기화및 HTML 구성하기 페이지로드가완료되면, 데이터베이스를열고, 테이블을생성하고 ( 필요한경우 ), 데이터를가져와할일항목이그려지게하자. <script>... function init() { html5rocks.webdb.open(); html5rocks.webdb.createtable(); html5rocks.webdb.getalltodoitems(loadtodoitems); } 124

125 </script> <body onload="init();"> <form type="post" onsubmit="addtodo(); return false;"> <input type="text" id="todo" name="todo" placeholder="what do you need to do?" style="width: 200px;" /> <input type="submit" value="add Todo Item"/> </form> <input> 요소로부터작성된값을가져와전달하기위한함수가필요하다. html5rocks.webdb.addtodo 메서드를호출할함수를만들자. function addtodo() { var todo = document.getelementbyid('todo'); html5rocks.webdb.addtodo(todo.value); todo.value = ''; } 데모 : Web Sockets 지원브라우저 : Web Socket은꾸준한성장과인기를얻고있는 Comet의대안으로고안되었다. 이것은웹애플리케이션이 full-duplex 단일소켓연결을가능케한다. 이는서버와브라우저사이에진정한양방향통신채널을제공하는것을의미하며, 연결관리를단순화한다. 하지만서버에서 Web Sockets 프로토콜을지원하는환경에서만작동하며, 추가적으로서버에모듈을설치하거나독립적으로이를지원하는서버에서정상적으로작동한다. 125

126 XHR보다적은대역폭을가진빠른송 / 수신 WebSocket은매우가볍게구성되어 XHR보다대역폭소모가적다. 일부보고서에따르면전송대역폭의 35% 의절감효과가발생하는것으로조사되었다. 또한, 메시지전달비교실험에서 XHR이 WebSocket보다 3500% 느린것으로측정되상당수준의성능차이가있는것으로밝혀졌다. 끝으로, Ericcson 연구소에서만든 WebSockets와 HTTP 비교동영상은 WebSockets보다 HTTP가 ping 당 3-5배나느린것으로밝혀져실시간상호작용이빈번하게발생하는웹애플리케이션개발에사용하기적합한것으로결론내렸다. 지금부터서버와클라이언트간메시지를주고받는간단한예제를살펴보자. 클라이언트-사이드 클라이언트-사이드의 Web Socket은매우간단하게사용할수있도록고안되었다. 다음코드가하는일은서버의 9876 포트에접속하고수신한데이터를 alert으로출력한다. <!DOCTYPE html> <html xmlns=" <head> <title>web Socket Example</title> <meta charset="utf-8"> <script> window.onload = function() { var s = new WebSocket("ws://localhost:9876/"); s.onopen = function(e) { alert("opened"); } s.onclose = function(e) { alert("closed"); } s.onmessage = function(e) { alert("got: " + e.data); } }; </script> </head> <body> <div id="holder" style="width:600px; height:300px"></div> </body> 126

127 </html> 서버 - 사이드 이제서버차례다. 그리고서버단언어는파이선으로작성되었다. 서버는 1초간격으로두개의메시지를보낸다. 단순성과명확성을위해서버측응답은 hard-coding된것으로한다. 이를실제로구현한다면유효성을검사하고동적인응답이이루어지도록해야할것이다. #!/usr/bin/env python import socket, threading, time def handle(s): print repr(s.recv(4096)) s.send(''' HTTP/ Web Socket Protocol Handshake\r Upgrade: WebSocket\r Connection: Upgrade\r WebSocket-Origin: WebSocket-Location: ws://localhost:9876/\r WebSocket-Protocol: sample '''.strip() + '\r\n\r\n') time.sleep(1) s.send('\x00hello\xff') time.sleep(1) s.send('\x00world\xff') s.close() s = socket.socket() s.setsockopt(socket.sol_socket, socket.so_reuseaddr, 1) s.bind(('', 9876)); s.listen(1); while 1: t,_ = s.accept(); threading.thread(target = handle, args = (t,)).start() To run the above, start the Web Socket server (./server.py) and start a web server on port 8888 serving index.html:./server.py & python -m SimpleHTTPServer 8888 실행해보면 "hello" 와 "world" 라는메시지가 1 초간격으로수신되 127

128 는모습을확인할수있다 Web Workers 지원브라우저 : Web Worker는두가지중요한장점을가지고있다. 첫번째는빠르다는것이고, 두번째는브라우저에부담을주지않고백그라운드에서스크립트연산을수행하는것이다. 이것이가능한이유는브라우저가 OS-래밸의스레드를생성하기때문이며, 동시다발적으로사용하는경우더욱흥미로운결과를기대할수있다. 이제부터 Web Worker 기본적인사용법에대하여알아보자. Worker 생성하기 Worker를생성하는것은간단하다. 백그라운드에서작업할스크립트를별도의파일에작성하고새로운인스턴스에 URI를기입하여생성한다. 그리고 onmessage 속성에함수를대입하여작업결과를돌려받을수있다. var myworker = new Worker('my_worker.js'); myworker.onmessage = function(event) { alert("worker 에의해실행된콜백!\n"); }; Worker 종료하기실행중인 Worker를즉시종료하려면 terminate() 메서드를호출하여즉시종료할수있다. 이러한경우, Worker는남은작업을마무리하거나메모리에서찌꺼기를청소한후자발적으로사라진다. myworker.terminate(); 128

129 백그라운드에서피보나치수열계산하기다음예제는 Worker를이용하여피보나치수열을계산하는데사용된다. 이것은사용자인터페이스의스레드를차단하지않고프로세서집약적인계산을수행할수있도록하는것이다. 다음은 "fibonacci.js" 에저장된내용이다. var results = []; function resultreceiver(event) { results.push(parseint(event.data)); if (results.length == 2) { postmessage(results[0] + results[1]); } } function errorreceiver(event) { throw event.data; } onmessage = function(event) { var n = parseint(event.data); if (n == 0 n == 1) { postmessage(n); return; } for (var i = 1; i <= 2; i++) { var worker = new Worker("fibonacci.js"); worker.onmessage = resultreceiver; worker.onerror = errorreceiver; worker.postmessage(n - i); } }; onmessage 함수는 postmessage() 를호출한다. 이렇게하므로써반복적인계산의새로운복사본을만들어수행하게된다. <!DOCTYPE html> <html> <title>test threads fibonacci</title> <body> 129

130 <div id="result"></div> <script language="javascript"> var worker = new Worker("fibonacci.js"); worker.onmessage = function(event) { document.getelementbyid("result").textcontent = event.data; console.log("got: " + event.data + "\n"); }; worker.onerror = function(error) { console.log("worker error: " + error.message + "\n"); throw error; }; worker.postmessage("5"); </script> </body> </html> id가 "result" 인 <div> 요소에그결과가표시되며 worker.postmessage에의해 Worker에작업을지시할수있다. 데모 : CPU 부하를줄이기위한 Web Worker를적용할상황들스크립트를이용하여무거운연산을실행하면브라우저는먹통 ( 응답없음 ) 상태가된다. 이러한경우이벤트리스너가제대로작동하지않아오작동이발생하거나제때콜백이호출되지않거나짧은시간동안상호작용이발생하는프로그램로직에치명적인오류를안겨줄수있다. 이러한상황은 Web Worker를이용하여우회할수있다는사실을기억하자. 130

131 긴문서의문자서식지정 문법강조기능 이미치프로세싱 이미지합성 덩치큰배열처리 Server-Sent Event 지원브라우저 : Server-sent Event는일종의푸시테크놀로지이다. 이것은브라우저가서버로부터지속적으로데이터를스트림하는상태가되는것을말한다. 서버에서클라이언트로전달할이벤트가발생한경우즉시전달하여사용자에게알릴수있게된다. 다음예제는서버로부터이벤트를스트림하는방법을다룬다. 현재브라우저별로사용법이조금씩다르기때문에웹킷계열브라우저를중심으로설명한다. 스크립트작성하기 EventSource에이벤트를스트림받을 URL을입력한다. var source = new EventSource('event.php'); source.onmessage = function (event) { alert(event.data); }; event.php 작성하기 서버단언어는 PHP이며, 서버의시간을스트리밍하도록작성한것이다. 이때 mime-type은 "text/event-stream" 이어야한다. <?php header("content-type: text/event-stream"); echo "data: ". time(). "\n";?> 131

132 "\n" 은라인변경을의미한다. 수신받은데이터는아래와같다. data: \n 실행해보면 alert에 " " 문자가출력될것이다. 그리고이과정은계속반복된다. 때문에서버는 long-poll 형식으로응답해주는것이효과적이다. 오페라브라우저역시이기능을지원하지만 <event-source> 요소에 "src" 와이벤트를할당하는방법으로사용해야하며, mimetype은 "application/x-dom-event-stream" 이어야하고반드시수신데이터에 "Event: server-time" 과같은이벤트를명시해야한다. 데모 : 리치웹 API Selector API 지원브라우저 : HTML5에는새로운 Selector API인 queryselector, queryselectorall 메서드가추가되었다. 이메서드들을이용하여 DOM으로부터요소를빠르고쉽게찾아낼수있다. 기존자바스크립트라이브러리 (Prototype, jquery 등 ) 들이지원하던 DOM Selector의네이티브구현이라할수있겠다. queryselector 메서드는인자로받은선택조건을 DOM 트리로부터검색하여첫번째일치하는요소노드를반환한다. 그리고노드가발견되지않으면 null을반환한다. queryselectorall 메서드는인자로받은선택조건을 DOM 132

133 트리로부터검색하여일치하는모든요소노드를반환한다. 일치되는노드가없는경우, 비어있는목록을반환한다. 그리고우리가그토록바라던 getelementbyclassname도추가적으로사용할수있게되었다. Selector API 사용법두메서드모두인자로전달되는검색조건에는우리가일반적으로많이사용하는 CSS 선택문법을그대로사용할수있으며, 쉼표 (',') 로구분하여하나이상의검색조건을추가할수있다. // 클래스이름이 'warning', 또는 'note' 인단락요소 (<p>) 를모두찾음 var special = document.queryselectorall("p.warning, p.note"); // id 가 'main', 'basic', 'exclamation' 인요소들중첫번째발견된요소를찾음 var el = document.queryselector("#main, #basic, #exclamation"); // HTML 문서의 <body> 에속한 <style> 요소들중 // 'type' 속성이없거나, 'text/css' 인첫번째발견된요소를찾음 var style = document.body.queryselector("style[type='text/css'], style:not([type])"); // id 가 'fruits' 인요소의 <input> 요소 ( 체크박스 ) 들중선택된 (checked) 요소를찾음 var list = document.queryselectorall("#fruits input:checked"); // 또는 var list = document.getelementbyid('fruits').queryselectorall("input:check ed"); Drag and Drop 지원브라우저 : Drag and Drop API가없던시절에도 "mousemove", "mousedown", "mouseup" 이벤트를이용하여요소를특정한요소 133

134 에끌어다놓는수준은구현할수있었다. 그러나잡다한뒤처리를해야했기때문에자바스크립트라이브러리를추가적으로이용해야했고이벤트이상증식현상이나 CPU 부하로인한오작동이빈번하게발생하여널리사용되고있지는않았다. HTML5에서새롭게지원하기시작한 Drag and Drop API는더욱향상된끌어다놓기경험을제공한다. 특히, File API를함께이용하면, 바탕화면혹은탐색기의파일을브라우저로직접끌어나놓는방식으로도파일을업로드할수있게되었다. 이예제는로컬에위치한파일을특정한 HTML 요소에끌어다놓고해당파일을직접액세스하고미리보기를보여주는예제이다. 드랍영역마크업하기 아이템을드래그할수있는영역과미리볼수있는이미지를등록한다. <div id="dropbox"> <span id="droplabel"> 이곳에파일을드랍해주세요... </span> </div> <img id="preview" alt="[ preview will display here ]" /> 드랍영역이벤트등록하기 그리고아래와같이이벤트를할당한다. var dropbox = document.getelementbyid("dropbox") // 이벤트핸들러할당 dropbox.addeventlistener("dragenter", dragenter, false); dropbox.addeventlistener("dragexit", dragexit, false); dropbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); 134

135 위코드는얼핏보면복잡해보이지만 dragenter, dragexit, dragover 핸들러는아래와같은이벤트의이상증식현상을중지시키는역할을할뿐이다. event.stoppropagation(); event.preventdefault(); drop 이벤트헨들러작성하기 반환된이벤트로부터 datatransfer.files 개체로접근한후파일이 1개이상존재하면 handlefiles 함수를호출한다. event.stoppropagation(); event.preventdefault(); var files = event.datatransfer.files; var count = files.length; // 오직한개이상의파일이드랍된경우에만처리기를호출한다. if (count > 0) handlefiles(files); handlefiles 함수작성하기 전달받은개체로부터파일들선택하고, 파일이름을표시하고, FileReader(File API) 인스턴스를생성하여파일을처리한다. var file = files[0]; document.getelementbyid("droplabel").innerhtml = "Processing " + file.name; var reader = new FileReader(); // 파일리더의이베트핸들러정의 reader.onloadend = handlereaderloadend; // 파일을읽는작업시작 reader.readasdataurl(file); readasdataurl 메서드는파일을 data URL 형식으로만들어 135

136 준다. 이는파일을서버에업로드하지않고도조작할수있음을의미한다. 포멧을변환하거나, 데이터를분석하여변조하는일이가능해진다. 예를들면, 이미지의특정한영역을클라이언트-사이드에서크롭한후서버에업로드하는것이가능하다. 보다자세한내용은 '4.3.5 File API' 에서다루도록한다. handlereaderloadend 함수작성하기 handlereaderloadend 함수의내용은아주간단하다. 미리보기할이미지요소에소스를대입한다. var img = document.getelementbyid("preview"); img.src = event.target.result; 데모 : Geolocation 지원브라우저 : Geolocation API는브라우저가사용자의지리적위치를찾아내고그정보를애플리케이션에서이용할수있도록하는기능이다. 사용자의위치정보를이용하기위해서는먼저승인절차를거쳐야하며, 승인이완료된상태라면사용자컨텐츠가생성될때지오-태깅 (geo-tagging) 기능을제공할수있고근처에서촬영된사진등에대한정보를유기적으로연결시켜서비스할수있다. 그리고사용자의위치가변경될때마다콜백메서드로전달되어항상최신의위치정보를유지하는것이가능하다. 이러한지리정보는기본적으로 GPS 장치로부터얻어지는것이가장정확하지만그외지리정보를얻을수있는수단들을단계적으로이용하여최소한수도또는국가단위의지리정보를취득할수있다. 136

137 다음예제는이동거리측정기를만드는과정을소개한다. 이예제를통해 Geolocation API의자세한사용방법을알아보자. 브라우저호환성확인 geolocation 개체의존재를확인하는방법으로브라우저가이를지원하는지의여부를쉽게확인할수있다. // check for Geolocation support if (navigator.geolocation) { console.log('geolocation 을지원합니다.'); } else { console.log(' 이브라우저또는 OS 는 Geolocation 을지원하지않습니다.'); } 측정기의 HTML 마크업 아래는이동거리측정기를구성하는 HTML 을마크업한것이다. <div id="tripmeter"> <p> 시작위치 ( 위도, 경도 ):<br/> <span id="startlat"></span>, <span id="startlon"></span> </p> <p> 현재위치 ( 위도, 경도 ):<br/> <span id="currentlat"></span>, <span id="currentlon"></span> </p> <p> 시작위치로부터의거리 :<br/> <span id="distance">0</span> km </p> </div> 사용자의현재위치확인 getcurrentposition() 메서드를이용하여사용자의현재위치를찾아낼수있다. 이것은페이지로드가완료되는시점에실 137

138 행된다. window.onload = function() { var startpos; navigator.geolocation.getcurrentposition(function(position) { startpos = position; document.getelementbyid('startlat').innerhtml = startpos.coords.latitude; document.getelementbyid('startlon').innerhtml = startpos.coords.longitude; }); }; 만약, 처음으로위와같은과정이발생하는경우브라우저는사용자에게위치정보사용을허용할지에대한여부를확인한다. 브라우저에따라서는환경설정에서항상허용또는거부할수있는기능을제공하기도하기때문에이과정이무시될수도있다. 위코드를실행해보자. 반환되는 position 개체에서시작위치의좌표를확인할수있어야한다. position 개체는위도 (latitude) 와경도 (longitude) 외에도많은정보가포함되어있는데, 사용자의지리정보를수신하는기기환경에따라서는고도 (altitude) 와방향 (direction) 정보까지얻어낼수있다. console.log를이용하여이값들의포함여부를살펴보자. 오류처리 불행하게도위치조회를성공하지못하는경우가발생한다. 어쩌면갑자기 GPS를찾을수없거나위치정보사용권한을박탈당한경우일것이다. getcurrentposition() 메서드의두번째인자로넘긴콜백은이러한오류가발생한경우호출되어사용자에게이사실을전달할수있다. window.onload = function() { var startpos; 138

139 navigator.geolocation.getcurrentposition(function(position) { // 상기와동일 }, function(error) { alert(' 오류발생. 오류코드 : ' + error.code); // error.code 는다음을의미함 : // 0: 알수없는오류 // 1: 권한거부 // 2: 위치를사용할수없음 ( 이오류는위치정보공급자가응답 ) // 3: 시간초과 }); }; 사용자위치모니터링 getcurrentposition() 의호출은페이지가로드되고난다음딱한번만하면된다. 이후의위치변동사항을추적하려면 watchposition() 을사용한다. 이것은사용자의위치변동이감지될때마다인자로받은콜백을호출한다. navigator.geolocation.watchposition(function(position) { document.getelementbyid('currentlat').innerhtml = position.coords.latitude; document.getelementbyid('currentlon').innerhtml = position.coords.longitude; }); 이동한거리측정 이예제는 Geolocation API와직접적인관계는없다. 하지만당신이얻어낸위치데이터를조금더구체적으로이용할수있는방법에대하여제시한다. navigator.geolocation.watchposition(function(position) { // 상기와동일 document.getelementbyid('distance').innerhtml = calculatedistance(startpos.coords.latitude, startpos.coords.longitude, position.coords.latitude, position.coords.longitude); }); 139

140 지금부터작성하게될 calculatedistance() 함수는두좌표사이의거리를확인하는기하학적알고리즘을수행한다. 아래의스크립트코드는 Moveable Type에서제공하는것으로 Creative Commons 라이센스에따라이용할수있다. function calculatedistance(lat1, lon1, lat2, lon2) { var R = 6371; // km var dlat = (lat2 - lat1).torad(); var dlon = (lon2 - lon1).torad(); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; } Number.prototype.toRad = function() { return this * Math.PI / 180; } 이이동거리측정기예제는페이지가로드된시점으로부터일정한거리를이동해봐야작동여부를확인할수있다. 실질적으로 GPS가장착된최신스마트폰에서무난히테스트할수있을것이다. 데모 : IndexedDB 지원브라우저 : IndexedDB(Indexed Database API) 는구조적데이터저장소이다. 이는 Web Storage나 Web Database와마찬가지로온 / 오프라인상태에서사용할수있는클라이언트-사이드데이터베이스이다. IndexedDB는최초 Oracle에서처음제안된것으로사용측면에서는 Web Database와상당부분겹친다. Web Database에비하여 IndexedDB는스크립트를이용한데이터베이스를다루하기에최적화된인터페이스를제공하며, 알고리즘방식의입 / 출력을지원하고 140

141 비동기 / 동기처리모두 API차원에서제공하고있으며커서까지지원하여관계형데이터베이스 (RDB) 형식으로데이터구조를설계할수있다. indexeddb 사용예 var db = indexeddb.open('books', 'Book store', false); if (db.version!== '1.0') { var olddb = indexeddb.open('books', 'Book store'); olddb.createobjectstore('books', 'isbn'); olddb.createindex('bookauthor', 'books', 'author', false); olddb.setversion("1.0"); } // db.version === "1.0"; var index = db.openindex('bookauthor'); var matching = index.get('fred'); if (matching) report(matching.isbn, matching.name, matching.author); else report(null); Notifications 지원브라우저 : 구글크롬은새로운방식의독자적알림수단인 Notifications API 를제시했다. 이것은사용자에게특정한상황의메시지를전달하여즉시알릴수있는기능으로소프트웨어업데이트알림, 메신저의메시지도착또는친구접속알림기능을연상하면이해하기쉽다. 윈도혹은맥 OS의작업표시줄근처에풍선말이출력되면서이벤트발생사실을문자로알리는것과매우흡사하기때문이다. 그래서새이메일이도착하거나트위터에답변이작성되거나혹은캘린더의일정과같은알림성컨텐츠를 Server-Sent Event로부터받아처리하기에적합하다. 특히, 브라우저의탭또는윈도의활성화여부에상관없이작동하기때문에페이지로의접근을용이하게한다. 현재 Notifications는아직기초단계에있는사양이며표준안으로채택될지는불분명하다. 141

142 Notifications API 지원여부확인 Notifications API가지원되는브라우저인지확인하는방법은다음과같다. // notifications 를지원하는지확인 // 'window' 키워드는생략가능 if (window.webkitnotifications) { console.log("notifications are supported!"); } else { console.log(" 이브라우저또는 OS 는 Notifications 기능을지원하지않습니다."); } 알림인스턴스생성하기 알림에들어가는컨텐츠는일반텍스트또는 HTML 형식으로작성할수있다. 이것을옵션화하여두종류모두사용할수있게했다. function createnotificationinstance(options) { if (options.notificationtype == 'simple') { return window.webkitnotifications.createnotification( 'icon.png', 'Notification Title', 'Notification content...'); } else if (options.notificationtype == 'html') { return window.webkitnotifications.createhtmlnotification(' rl.com'); } } 사용자승인여부구분하여출력하기 이기능은사용자의승인을얻어야만작동하는기능이다. 최신브 142

143 라우저들은팝업이기본으로막혀있는데, 이를사용자가승인해주어야지만작동하는모습과비슷하다. 만약, 사용자가이를승인하지않았다면오류가발생한다. 물론 try-catch를사용할수도있지만 checkpermission 메서드를사용하여승인여부를구분할수있다. 그리고 ondisplay 또는 onclose 프로퍼티에상황에따른콜백함수를정의할수도있다. document.getelementbyid('show_button').addeventlistener('click', function() { // 값이 "0" 이면승인을얻어낸것이다. if (window.webkitnotifications.checkpermission() == 0) { // 다음단계에서함수를정의한다. notification_test = createnotificationinstance({ notificationtype: 'html' }); notification_test.ondisplay = function() {... do something... }; notification_test.onclose = function() {... do something else... }; notification_test.show(); } else { window.webkitnotifications.requestpermission(); } }, false); 데모 : File API 지원브라우저 : File API는웹애플리케이션이로컬파일에프로그램적으로접근할수있게한다. 파일을업로드하기위해웹사이트의특정영역으로파일을드래그하거나 <input> 요소로부터전달받은파일에접근하여파일의이름, 경로, 크기, 종류등에대한정보를취득할수있다. 물론, 읽기전용상태로접근된것이기때문에실제파일의물리적변형은일어나지않는다. 그러나 Drag and Drop에서언급했듯이 <canvas> 요소를응용하면파일을서버에업로드하지않고도 143

144 포멧을변환하거나, 변조한후서버로업로드하는일이가능하다. 또한 FileReader개체를이용하면바이너리데이터를분석하여 JPEG 파일의 EXIF 정보, MP3의 ID3 태그를가져오는등의작업을수행할수있다. 다음에소개할예제는 <input> 요소에선택된파일의정보를분석하는과정을설명할것이다. HTML 구성하기 <input type="file"> 요소는일반적으로단하나의파일만을선택할수있지만 "multiple" 속성을사용하면여러개파일을선택할수있게된다. 그러나 "multiple" 속성을지원하지않는브라우저들이있으므로호환성을위해서는플래시의 File I/O와연동하는방법이사용되기도한다. <h3> 파일 ( 들 ) 을선택하세요.</h3> <!-- multiple 속성을이용하면파일을다중으로업로드할수있음 --> <input id="files-upload" type="file" multiple> <h3>uploaded files</h3> <ul id="file-list"> <li class="no-items">( 파일이선택되않음 )</li> </ul> 스크립트구성하기 <input> 요소에변동사항이발생하면 traversefiles함수가호출되며, 이함수는파일의정보를 <ul> 요소에출력할것이다. var filesupload = document.getelementbyid("files-upload"), filelist = document.getelementbyid("file-list"); function traversefiles (files) { var li, file, fileinfo; filelist.innerhtml = ""; 144

145 for (var i=0, il=files.length; i<il; i++) { li = document.createelement("li"); file = files[i]; fileinfo = "<div><strong>name:</strong> " + file.name + "</div>"; fileinfo += "<div><strong>size:</strong> " + file.size + " bytes</div>"; fileinfo += "<div><strong>type:</strong> " + file.type + "</div>"; li.innerhtml = fileinfo; filelist.appendchild(li); }; }; filesupload.onchange = function () { traversefiles(this.files); }; WebGL 데모 : 지원브라우저 : WebGL은브라우저가플러그인의도움을받지않고 3D 웹그래픽을표현하기위한 OepnGL ES 2.0의자바스크립트바인딩이다. 이것은하드웨어가속이되는실시간 3D 그래픽을표현하는것이가능하다. AMD, 구글, 모질라, 엔비디아등의굵직한벤더들이워킹그룹에참여하고있다. 현재 WebGL은개발버전의브라우저에서만사용할수있으며, <canvas> 요소위에그려지도록설계되었다. 지금부터하나의정육면체를생성하고간단한애니메이션효과를부여하는예제를작성할것이다. 3차원공간에서정육면체를생성하는과정을학습해보자. 145

146 정육면체의버텍스위치정의 첫번째로정육면체의버텍스 ( 꼭지점 ) 위치를정의해야한다. 아래와같이총 24개의버텍스위치의배열을만든다. var vertices = [ // 전면 -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // 후면 -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, // 윗면 -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, // 아랫면 -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // 우측면 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // 좌측면 -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0 ]; 146

147 버텍스의색상정의 생성된 24개의버텍스에색상을정의한다. 아래의코드는정육면체의각면단위로색상을정의할것이다. var colors = [ [1.0, 1.0, 1.0, 1.0], // 전면 : 하양 [1.0, 0.0, 0.0, 1.0], // 후면 : 빨강 [0.0, 1.0, 0.0, 1.0], // 윗면 : 초록 [0.0, 0.0, 1.0, 1.0], // 아랫면 : 파랑 [1.0, 1.0, 0.0, 1.0], // 우측면 : 노랑 [1.0, 0.0, 1.0, 1.0] // 좌측면 : 보라 ]; var generatedcolors = []; for (j=0; j<6; j++) { var c = colors[j]; for (var i=0; i<4; i++) { generatedcolors = generatedcolors.concat(c); } } cubeverticescolorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, cubeverticescolorbuffer); gl.bufferdata(gl.array_buffer, new WebGLFloatArray(generatedColors), gl.static_draw); 요소배열정의 앞서버텍스배열을생성했다. 이제구성요소들을구축해야할단계이다. cubeverticesindexbuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, cubeverticesindexbuffer); // 이배열은두개의삼각형으로하나의면을정의한다. // 각삼각형의버텍스위치를정의하여순차적으로지정한다. var cubevertexindices = [ 0, 1, 2, 0, 2, 3, // 전 4, 5, 6, 4, 6, 7, // 후 147

148 8, 9, 10, 8, 10, 11, // 위 12, 13, 14, 12, 14, 15, // 아래 16, 17, 18, 16, 18, 19, // 우측 20, 21, 22, 20, 22, 23 // 좌측 ] // 이제요소의배열을 GL 에보낸다. gl.bufferdata(gl.element_array_buffer, new WebGLUnsignedShortArray(cubeVertexIndices), gl.static_draw); cubevertexindices 배열은한쌍이삼각형으로구성되어있고삼각형두개로하나의면을형성하는구조로정의한다. 삼각형은세개의버텍스를순차적으로지정한다. 결국하나의정육면체는 12 개의삼각형의집합인것이다. 정육면체그리기 bindbuffer() 을추가하고 drawelements() 메서드를호출한다. gl.bindbuffer(gl.element_array_buffer, cubeverticesindexbuffer); setmatrixuniforms(); gl.drawelements(gl.triangles, 36, gl.unsigned_short, 0); 한면당 2개의삼각형, 6개의버텍스로구성된다. 즉정육면체는총 36개의버텍스로이루어지며, 대부분중복되는위치에있다. 그리고이버텍스들의배열은간단한정수로구성되어있다. 148

149 데모 : demo/webgl.html 4.4 FAQ 자바스크립트 API 의브라우저지원은언제쯤? 크로스-브라우저이슈가사라지는그날이과연올것인가? 대답은 ' 아니오 ' 이다. 이이슈는지금까지도줄곧이어져왔고앞으로도계속될것이다. 왜냐하면브라우저를만드는집단이한곳이아니기때문이다. 물론웹표준화단체에서권고사항을문서화하고표준이라는단어를앞세워노력하고는있지만새로운웹기술을제시하는쪽은대부분브라우저개발업체이거나관련업계여서선 / 후발주자가생기고또한같은기능을만들어도자신들만의특징을집어넣고싶어하기마련이다. 결국, 표준화단체로부터기술을인증받고공식화된다음에야비로소모든브라우저개발사들이새로운기술을구현하는이과정은지속적으로반복될것이다. 그래서, 이러한정책적인문제는웹개발자들이고민할일도아니고한다고해서해결되지도않는다. 일찌감치포기하고실현가능성만을바라보는것이훨씬현실적이다. 149

150 예를들어 Web Sockets 라는멋진 API가생겨났지만일부브라우저에서는지원되지않기때문에사용할수없다고판단해버릴문제가아니라는것이다. COMET이라는대안이있잖은가. 브라우저의알파버전은어디에서다운로드하나? 대부분의브라우저개발사는개발하는과정에서공개테스트를거친후안정적인버전을내놓는다. 우리는이과정에서배포된버전을베타버전이라고한다. 최근들어서는그이전내부개발단계에서빌드된버전들까지도배포하는풍토가생겨났으며, 이버전을알파또는나이틀리버전이라한다. 알파버전은곧탑재될새로운기능단위테스트가이루어지는경 우가많아서개발자들이새로운 API를미리테스트하여향후계획을설계하는데사용되곤한다. 여기에소개한내용의일부역시알파버전에서만작동하는것이있다. 브라우저별알파버전을다운로드하는주소는다음과같다 : IE9 - ie.microsoft.com/testdrive/ Firefox: ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/ Chrome(Chromium): build.chromium.org/buildbot/continuous/ Safari: nightly.webkit.org/ 클라이언트 - 사이드의개발분야가너무광범위하지않나? 광범위해진것이사실이다. 웹프론트-엔드개발자가생각치도못했던 SQL, OpenGL을다루게생겼고심지어로컬파일의바이너리까지분석할수있게되었다. 이러한멋진기능들중에무엇부터공부해야할지, 어떠한애플리케이션을만들수있는지, 정신을못차릴정도의행복한고민에빠져들게한다. 정말눈부신발전속도다. 이상태라면다음세대 HTML 은과연 150

151 어떤모습으로다가올지두렵기까지하다. 그렇다고너무걱정할필요는없지않을까? 프로젝트를혼자서구축하지않는이상은여럿이협업하여분담할수있고, 그러면서각분야의전문가가차차나타나게될것이분명하다. 오프라인을고려하는이유는무엇인가? HTML5에새롭게추가된 API들중상당부분이오프라인을염두하고있음을눈여겨보지않아도알수있다. 데스크탑컴퓨터에서 24시간인터넷을무제한으로사용할수있는환경이라면선뜻이해할수없는부분이기도하다. 그러나긍정적으로생각하면기존웹이가진특성상서버나브라우저모두자원소모가심한비효율적인통신로직을보완하여성능향상을꾀할수있고, 상대적으로통신요금이비싼모바일인터넷사용자또는인터넷인프라가발전하지못한국가에는패킷을절약하여요금부담을줄일수도있으며, 구글이강력하게밀고있는웹 O/S기반에서오프라인의의미는곧애플리케이션을설치한개념으로통할수있게된다. 이정도만으로도오프라인을고려하려는의지를설명하기에충분치않겠는가. 향후웹개발풍토는어떻게변하나? 프론트-엔드개발자의시각으로볼때 HTML5의등장으로두드러진업무적변화는바로스크립트로하는뒤치닥거리가많이줄었다는점이다. CSS3의등장으로마우스행동을동반한애니메이션을스크립트없이만들어낼수있고, Web Forms 2.0을이용하면유효성검사및오류메시지출력, 인풋의레이블바꿔치기, 포커싱등을스크립트의도움을받지않고 HTML 마크업만으로작성할수있게된것이다. 151

152 그러나새로운스크립트 API들이대거추가되면서서버에의지하여처리하던작업들을스크립트만으로처리할수있게되었다. 예를들면, 프로파일이미지의크롭및리사이즈, 서버에서생성한데이터차트이미지등의리소스를많이잡아먹는작업은이제클라이언트- 사이드에서도가능하다. 그리고 Server-Sent Event, Web Sockets 등의출현으로서버-사이드에는새로운개념의통신프로토콜이마련되어야하며, 실시간상호작용을위해잦은양방향통신이발생하는웹애플리케이션개발에어울리는설계를모색하게될것이다. 참고자료 - HTML5 Working Draft dev.w3.org/html5/ - W3C HTML5 html5doctor.com/ - HTML5 Doctor diveintohtml5.org/ - DIVE INTO HTML 5 html5demos.com - HTML5 Demos and Examples - HTML5 guides developer.mozilla.org/en/html/html5 - MDC - HTML5 Canvas Demos tutorials.jenkov.com/svg/index.html - SVG Tutorial srufaculty.sru.edu/david.dailey/svg/svganimations.htm- SVG Animation 152

153 5. HTML5 와모바일 본장에서는 HTML5에대한가장최적의적용환경이라할수있는모바일환경에서의상황에대해알아보고, 아이폰에서의 HTML5 웹어플리케이션개발방법을예제와함께살펴본다. 5.1 모바일에서의 HTML5 HTML5 를이용한많은 Web Application( 웹어플리케이션, 웹앱 ) 들이만들어지고있지만, 데스크탑환경에선아직이슈가남아있다. 현재브라우저점유율에서가장큰위치를차지하고있는 Internet Explorer (6.0 ~ 8.0) 이아직 HTML5 지원이미진하기때문이다. 이때문에 HTML5 웹어플리케이션들은 Firefox, Chrome, Safari 같은타브라우저를통해서만확인이가능하다. 153

154 하지만모바일환경으로오면얘기가달라진다. 현재모바일웹트래픽의대부분을차지하고있는것이 iphone, Android 이고이두개의플랫폼이 HTML5 를잘지원하고있는 WebKit 기반의브라우저를사용하기때문이다 모바일브라우저들의 HTML5 대응현재모바일폰에서 HTML5 를가장잘지원하고있는것은아이폰 OS 4.0 ( ios4 ) 에포함된 Mobile Safari 이다. Apple 은 HTML5 에대한지원을공공연히드러내기전부터 Mobile Safari 에조용히 HTML5 의스펙을지원하기시작했다. 아래는 에서제공하는 HTML5 테스트결 154

155 과점수로살펴본모바일 / 데스크탑브라우저들의 HTML5 지원현황이다. (160 점만점으로되어있으며, 현재는좀더항목을세분화하여 300점만점으로개편되었다. 완벽한기능테스트가아니기때문에브라우저별로개체만만들고기능은구현안한경우도있을수있다. ) OS or Browser Version Score (? / 160 ) IE ( Win ) IE ( Win ) Opera Mini iphone ( Mobile Safari ) Android iphone ( Mobile Safari ) Maemo microb 5 PR Firefox Mobile Firefox ( Win ) Palm WebOS iphone ( Mobile Safari ) iphone ( Mobile Safari ) Safari ( Mac ) ipad ( Mobile Safari ) Android Android iphone ( Mobile Safari ) 4.0 Beta

156 Safari ( Mac ) Chrome ( Win, Mac ) 현재로선 Android 2.2 와 ios 4.0 의브라우저가거의모든 HTML5 스펙을다지원하기때문에, HTML5 를이용한어플리케이션작성에있어선모바일이좀더나은환경이라고볼수있다 모바일웹에서의 HTML5 Key Elements 모바일에서 HTML5 가특별히다른태그를활용하는것은아니다. 다만 API 중몇개가모바일에더욱쓰기좋은형태일뿐이다. Offline 지원 : LocalStorage, Web Database, App Cache 미디어처리 : Video, Audio, Canvas 입력지원 : Advanced Forms 위치정보 : GeoLocation ( 연계표준 ) Offline 지원의경우항상인터넷에연결되어있는데스크탑과달리모바일환경은꼭 3G 와같은네트웍에항시연결되어있지않은 WIFI 전용기기 ( ipod Touch, ipad ) 들도있으며, 3G 환경이라할지라도네트웍트래픽을최소화하는것이아주중요하다. 또한 HTML5 의중요스펙중몇가지는아직주요브라우저에서도지원되지않는다, WebSocket FileReader IndexedDB Web Workers 현재로선모바일에서의 HTML5 사용은주로 Offline 지원을통한 Local App 으로서의동작및트래픽최적화, Geo Location 을 156

157 통한위치정보연동이가장많이쓰이고있다 Web App vs. Native App Web App ( 웹앱 ) 이라고하면, 웹기술을이용하여만들어진어플리케이션을말한다. 즉, 컨텐츠리딩을위해사용되던단방향성이던웹사이트와달리사용자와의인터랙션을통하여데스크탑에서의 Application 같은사용성을주는앱을말한다. 위젯이라는단어도종종사용되는데웹앱은이위젯을포함한좀더넓은범위로보는게맞다. HTML5 를이용해서만들어진 Web App 과 iphone / Android 환경에서의 Native App 을비교해보자. Web App Native App 모바일디바이스에최적화된웹사이트 모바일디바이스전용앱 HTML, CSS, Javascript Objective-C ( iphone ), Java ( Android ) 기존에사용하던웹개발환경 XCode ( iphone ), Eclipse ( Android ) 웹표준컨트롤, iui, JQTouch.. 꼭 Mac 이필요하지는않음 App 개발자등록필요없음 1) Cocoa Touch (iphone), UI Framework (Android) Mac 이필요 ( iphone ) Android 는멀티플랫폼 ( Win, Mac, Linux ) 개발자등록 년 $99 (iphone) or $35 (Android) 제한적인디바이스사용 - 카메라 / 마이크.. 2) 디바이스의모든기능을활용 자체결제시스템구축필요또는광고 App Store/Market 를통한판매 / 수익 & 광고 157

158 서버에서바로바로업데이트가능업그레이드할때마다검수 ( iphone ) Android / Blackberry 등으로도바로변환가능 실행속도가빠르다 1) PhoneGap 등 Hybrid App Framework 사용하여앱만든후등록시필요함 2) honegap, QuickConnect 를통하여카메라 / 연락처정보등사용가능. 따로진행중인 W3C DAP, OMTP BONDI, JIL 등의스펙으로디바이스접근가능 ( 차후 ) Mobile Web App 의종류 Web App 이라고해서특별한것은아니지만, 모바일관점에서볼때다음과같이나눠볼수있다. Online Web Application 기존의모바일웹페이지를포함한웹앱을의미한다. HTML5, CSS3 등을통하여모바일에서의 UI / UX 를향상한다. GeoLocation API 를이용하여위치가고정되지않는모바일의장점을활용한다. 주로포털이나컨텐츠를리딩하는형태의앱이많다. 158

159 Offline Enabled Web Application Application Cache, LocalStorage, Web SQL Database 를활용하여오프라인에서도사용이가능한웹앱을의미한다. 처음접속시에주요데이타를캐쉬하여재접속시에네트웍트래픽을최소화한다. 오프라인상태에서행한동작들에대해서온라인시서버의데이터와싱크한다. 이메일어플리케이션과같은컨텐츠리딩 & 작성앱에적절하다. 모바일 Gmail 사이트는이미완벽한오프라인메일앱으로동작한다. Offline Web Application 한번서버에접속해서다운받으면계속오프라인으로사용가능한앱. Application Cache 와 Web SQL Database 를활용 서버와의동기화를필요로하지않는게임, 유틸리티, EBook 159

160 Hybrid Web Application Native App 과 Web App 을합친형태의앱. 앱스토어를통한다운로드가능. 모바일디바이스로다운로드후에는앱속성에따라서버와의 AJAX 통신도가능 Native 수준의다양한앱작성가능 모바일웹앱이이렇게 4가지로명확하게분리되는것은아니지만, 이를통해모바일에서어떤종류의웹앱이만들어질수있는지를알수있다. 5.2 아이폰기반 HTML5 앱개발 앞서언급한대로현재 Web App 을가장잘지원하는것은아이폰이다. 이는아이폰OS의 1.0 버전때에는 App Store 가없었기에애플측에서 Web App 의사용을권장했었기때문이고, 아이폰 OS 2.0 버전부터 App Store 가런칭되면서사용용도가많이줄기는했지만, 아직도애플웹사이트의 Web App Directory ( 에는약 5천개정도의 Web App 들이등록되어있다. 아이폰상에서어떻게 HTML5 Web App 을만드는지를알아보자 iphone 환경에서의 Web App 지원먼저, iphone 환경에서는데스크탑과달리사이트에접근하는방 160

161 식이차이가있기때문에특이한사항이몇개있다. HTML5 지원과는조금다른얘기이지만, HTML5 를이용한 Web Application 을만든다면알아둬야것중의하나다. 아이폰사파리는웹사이트에대해 홈화면에추가 ( Add to Home Screen ) 이라는기능을제공한다. 사파리브라우저에서맨아래 + 버튼을누르면 책갈피추가 / 홈화면에추가 선택팝업이뜨고, 이를통해아이폰메인화면에웹사이트에대한바로가기기능을추가할수있다. ( 안드로이드에서도비슷한기능을제공하긴하지만단계가조금복잡하다 ) 이렇게 + 를눌러 홈화면에추가 후실행하면 iphone 에서는 Web App 으로동작하게된다. 이때 Web App 의지원을위해모바일사파리는몇가지태그를지원한다. <head> 섹션에아래의 4가지태그를추가할수있다. 161

162 <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 각각은다음과같은기능을지원한다. <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> 등록되는웹사이트의아이콘을지정할수있다. apple-touchicon.png 가기본이름이며일반적으로웹사이트아이콘을추가하게되면웹사이트화면을캡쳐한내용을아이콘으로사용하는데 apple-touch-icon 이라는링크를추가하여아이콘을내가지정한것으로사용할수있다. favicon 의아이폰버전이라고생각하면된다. iphone 은 57x57, ipad 는 72 x 72 사이즈의 png 이미지를사용한다. 이아이콘은기본적으로아이폰이제공하는 UI 처리 ( 모서리를둥글게하고반원형의밝은부분을추가해주는것 ) 가된다. 원하지않을때는파일이름을 apple-touch-icon-precomposed.png 라는이름으로저장하여사용하면된다. <link rel="apple-touch-icon" href="/apple-touch-iconprecomposed.png"/> 이아이콘기능은안드로이드에서도지원된다. 단 precomposed 만사용가능 (48x48) <link rel="apple-touch-startup-image" href="/startup.png"> 화면이로딩될때스타트업이미지를지정할수있다. Web App 이지만앱처음로딩시로고화면같은걸보여줄수있다. 아이폰기본앱에들어있는 Default.png 와비슷한역할이다. 162

163 <meta name="apple mobile web app capable" content="yes" /> Web App으로선언하여브라우저의 UI (URL 바 ) 를안보이도록할수있다. 즉, Web App 이마치일반 Native App 처럼화면전체 ( 최상단상태바 20px 제외 ) 를활용할수있도록한다. <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 상태바의색상을지정할수있다. 바탕화면이검정색인어플리케이션의경우상태바만회색인이질감을줄이기위해사용한다. 3가지스타일 : default ( 회색 ), black, black-translucent ( 반투명 ) 이렇게 4가지기능을지원함으로써 HTML5 기반의 Local 또는 Online Web Application 들이마치 Native App 처럼실행하는효과를지원할수있다 아이폰개발환경꾸미기 Web App 은아이폰 Native App 과달리개발환경으로꼭 Mac 을필요로하지않는다. 기존의웹개발할때와마찬가지로손에익은툴을이용하여개발할수있다. 아이폰상에서의동작화면을테스트하기위해서는 XCode 에포함된 iphone Simulator 가테스트용으로아주적절하지만, Mac 사용자가아니라면사용이어렵다. 또한 Web App 개발시 iphone Simulator는디버깅을하는용도로는적합하지않다. Safari 의개발자도구활용하기 Webkit 기반의브라우저최신버전들에는개발자도구가들어있다. 이를활용해보자. Safari 의메뉴에서편집-> 기본설정또는 Ctrl +, 를눌러서설정창을연다. 우측끝고급탭을선택하여맨밑에 메뉴막대에서개 163

164 발자용메뉴보기 를활성화한다. 활성화하면아래와같이개발자용메뉴가추가된다. 이개발자도구는같은 WebKit 기반인 Chrome 브라우저에도비슷한기능이있지만, Safari 가더많은기능을가지고있다. 164

165 개발자용메뉴중주요기능을몇개살펴보자. 사용자에이전트만들고있는웹사이트를 iphone / ipad 및각브라우저별로어떻게표시되는지를테스트해보기위해 UserAgent 를쉽게바꾸는기능을제공한다. Chrome 이나 Firefox 에서는확장기능을설치해야가능했던동작인데기본으로포함하고있다. Mobile Safari 로설정시거의아이폰화면과비슷한화면을보여주기때문에아이폰용 Web App 개발후테스트시아주유용하다. 165

166 아래는사파리브라우저사이즈를아이폰과비슷하게맞춘후, UserAgent 를 iphone 으로설정하고, 아이폰용 UI 라이브러리인 jqtouch 데모사이트를불러온화면이다. 거의비슷한형태의화면을볼수있으며, Webkit 애니메이션들도그대로볼수있다. 아이폰용 Web App 을만든다면꼭알고있어야할필수테스트방법이다. 웹속성보기 Web Inspector ( Ctrl - Alt - I, - - I ) 현재웹페이지의상세속성을보는창이다. 166

167 요소 : 현재페이지의 HTML 소스를보여준다. 리소스 : 현재페이지에서로딩한리소스파일들 ( CSS, JS, 이미지등 ) 및각리소스의로딩에걸린시간을보여준다. 스크립트 : 현재페이지내의 Javascript 소스를확인하고디버깅할수있다. 타임라인 : 리소스로드 / 스크립트수행 / 렌더링시간들의타임라인을볼수있다. 프로파일 : 현재페이지내의스크립트가 CPU 자원을얼마나소모하는지프로파일링 스토리지 : Database, Local/Session Storage, Cookie 들을일목요연하게볼수있다. 콘솔 : 에러확인및자바스크립트실행이가능한커맨드라인창 마치 Firefox 에서의 Firebug 플러그인을보는것처럼잘만들어져있다. 다른부분은기존의툴들과비슷하니 HTML5 에관련된스토리지메뉴만살펴보도록하자. 167

168 스토리지메뉴의좌측엔데이터베이스 / 로컬스토리지 / 세션스토리지 / 쿠키로나뉘어져있으며현재사이트에대해저장된값들을확인할수있다. 데이터베이스 : HTML5 API 중 Web SQL Database 를활용하여작성된 Database / Table 을확인할수있다. 각테이블에들어있는컬럼및데이터를볼수있지만편집은불가능하다. 로컬 / 세션스토리지 : HTML5 API 중 LocalStorage/SessionStorage 를통해저장된 Key/Value 쌍들을확인할수있다. 직접추가 / 수정 / 삭제도가능하다. 쿠키 : 쿠키의이름 / 값 / 도메인 / 만료일자등을확인할수있다. 삭제는가능하지만편집은불가능하다. Database 와 Storage 의내용들을콘솔창을이용하여아래와같이직접컨트롤이가능하다. 168

169 Windows 용 iphone Simulator MobiOne 또다른방법으로 Genuitec 이라는회사에서제공하는 MobiOne 이라는프로그램을이용하는것이다. MobiOne 은아이폰상에서의 Web App 을디자인하기위한 Design Center 와테스트를위한 Test Center 두가지어플리케이션을제공한다. ( 다운로드 : Design Center Visual Designer (WYSIWYG layout) 30+ UI components Design templates 60+ free iphone app icons Code generation (currently HTML5) Test on Test Center iphone emulator Test on your iphone via cloud service Test Center iphone emulator Palm Pre emulator Multi-touch, gestures, orientation PhoneGap API Geolocation Live edit & update of local & remote resources Inspector: DOM, local data, JavaScript, CSS Design Center Design 센터에서는 GUI Drag & Drop 방식으로 iphone Web App 의 UI 를생성할수있게해준다. 169

170 이렇게작성된 UI 는 HTML5 형태로 CSS/JS/HTML 파일로저장되어바로 Web App 작성에이용할수있다. Test Center Test Center 는 Design Center로만든 UI 를테스트하는아이폰에뮬레이터이다. URL 입력이가능하기때문에사파리와비슷하게아이폰웹앱테스터로유용하다 웹기반아이폰스타일 UI 만들기아이폰은터치기반의 CocoaTouch 프레임워크를제공하여터치에최적화된 UI 컨트롤셋을제공한다. 주로사용하는네비게이션바 / 탭바 / 테이블뷰같은것이있는데, 이런 UI 를 Web App 에서도제공하기위한다양한 UI 라이브러리 / 프레임워크들이출시되어있다 170

171 JQTouch - jquery 를사용하며, 터치기반의 UI 컨트롤을제공하는라이브러리. Native WebKit 애니메이션효과를지원하며, 성능이좋아서가장많이쓰인다. jqtouch 개발자가 Ext JS & Raphael 개발자와같이 Sencha Touch 라이브러리로발전중이다. Sencha Touch 는아이폰만이아닌아이패드 / 안드로이드 / 데스크탑까지동시지원을목적으로하는 HTML5 기반의 UI 프레임워크이다. iui - 아이폰출시초기부터지원되었던라이브러리. 주로네비게이션 / 테이블뷰의사용에초점이맞춰져있다. WebApp.Net - 최근에출시된라이브러리로 jqtouch 와 iui 중간정도의기능을제공한다. 171

172 현재가장많이사용되는것은 jqtouch 이므로간단히사용방법을알아보자. jqtouch 설치및초기화 jqtouch 최신버전을 에서다운받는다. 초기 index.html 파일에아래코드를삽입하여 jqtouch 라이브러리를인클루드한다. <head>... <style type="text/css" "jqtouch.min.css"; </style> <style type="text/css" "themes/apple/theme.min.css"; </style> <script src="jquery min.js" type="text/javascript"> </script> <script src="jqtouch.min.js" type="text/javascript"> </script> <script type="text/javascript" > $.jqtouch();</script> </head> jquery 에기반하고있기때문에먼저 jquery 를인클루드해야한다. jqtouch의초기화함수는 $.jqtouch() 이다. 아래와같이초기화옵션을줄수있다. $.jqtouch({ icon: "path/to/apple-touch-icon.png", 추가시아이콘으로지정 startupscreen: "path/to/startup-image.png", statusbar: "default black black-translucent", 색상 addglosstoicon: true false, Precomposed 인지설정 // 홈스크린 // 시작스크린 // 상태바의 // 아이콘이 앞에서살펴봤던아이폰에서의 Web App 지원을위한 <meta> 태그를초기화옵션으로지정한다. 172

173 jqtouch 를이용한테이블뷰만들기아이폰 UI중데이터네비게이션을위한테이블뷰는 div 와 ul 을이용하여만들수있다. 아래에제중 class 를눈여겨보기바란다. toolbar 클래스는상단의툴바를, rounded 는각아이템의테두리를둥근아이템으로설정한다. ul 클래스는 5가지의스타일을제공한다. rounded edgetoedge plastic metal form <body> <div id="home"> <div class="toolbar"><h1>my app</h1></div> <ul class="rounded"> <li><a href="#foo">foo</a></li> <li><a href="#bar">bar</a></li> jqtouch 는각화면간의변환시총 8가지의 Native Webkit Animation 을지원한다. slide, slideup, dissolve, fade, flip, pop, swap, cube 이각각의애니메이션이름을 a 태그의클래스명으로지정하면자동으로애니메이션이수행된다. 173

174 <a href= #foo class= dissolve >Foo</a> 이렇게애니메이션을지정하면, Back 버튼으로돌아올시자동으로반대쪽애니메이션도처리된다. jqtouch 테마지정 jqtouch 는기본으로 2가지의테마를지원한다. jqtouch Theme <style type="text/css" "themes/jqt/theme.min.css"; </style> Apple Theme <style type="text/css" "themes/apple/theme.min.css"; </style> CSS 만변경함으로서간단히테마를선택할수있다. 174

175 5.2.4 Phonegap Web App 은기본적으로웹서버에올려지고원격으로모바일디바이스에다운로드받는방식으로진행된다. 즉, 구조자체는기존의 Web Site 와다른점이없다. 여기서소개하는 Phonegap 은작성된 Web App 의소스를 Native App 안에내장하여모바일디바이스에는앱처럼설치하고실행은웹브라우저가로컬에있는파일을불러들이는형태의 Hybrid App 을만들수있게한다. Hybrid App 의장점이몇가지있다. Multi Platform Web App 하나로 iphone,android,blackberry,palmpre 등다양한디바이스동시지원가능 Camera, Contacts 와같은 Device API 에접근할수있는방법이제공 App Store / Market 을통한어플리케이션판매가능 Hybrid App 를만들수있도록하는 Cross Platform Mobile Application Framework 들도다양하게등장하고있다. PhoneGap: iphone, Android,Blackberry,Symbian,Palm,Windows Mobile ( 제한적 ) Titanium Mobile iphone, Android QuickConnect iphone, Android,Blackberry NimbleKit iphone 그나마 Phonegap 은오픈소스로되어있어많은개발자에의해발전되고있다. 여기서는 Phonegap 을이용하여 WebApp 을 Native App 으로만드는방법을알아보자. Phonegap 소스를 에서내려받아 Mac 에설치한다. 175

176 * Phonegap 은 NativeApp 들을위한 Container 들을제공하여컴파일후 Native App 을만드는방법을사용하고있으므로, 기존 Web App 개발과는달리 Mac 과 XCode 개발환경을필요로한다. 설치하고나면 XCode 의새프로젝트생성화면에아래와같이 PhoneGap based Application 이라는항목이생긴다. 템플릿을선택하면프로젝트이름만입력하면된다. 그럼아래와같이폰갭프로젝트가생성된다. 176

177 개발자가눈여겨봐야할부분은프로젝트내의 www 폴더다. 이폴더가 Web Root 역할을하며폰갭어플리케이션이실행되면여기에있는 index.html 을로드해서보여주게된다. 즉, 자신이작성한 Web App 소스를프로젝트의 www 폴더에복사하는것만으로기본준비는끝나게된다. 우측에보면 javascript 를하나로드하는게있다. <script type= text/javascript src= phonegap.js ></script> 이 Phonegap.js 는모바일디바이스의웹브라우저를확장하여 Device 관련한기능들 ( Camera, Contacts.. ) 에접근할수있도록하는역할을한다. 이를통해확장되는기능을몇개살펴보자. navigator.notification.alert ( message, title, button ) // 경고메시지창을띄운다. navigator.notification.beep ( times ) // 비프음을 n 회울린다. navigator.notification.vibrate ( duration ) // 진동을 n 초간울린다. navigator.notification.loadingstart ( options ) // 로딩화면을보여준다. navigator.notification.loadingstop (); // 로딩화면을닫는다. 177

178 device.platform // Device 의플랫폼을읽어온다. iphone/android.. device.version // 플랫폼버전 device.name // Device 의이름 device.uuid // iphone 의경우 UUID 값을읽어온다. navigator.camera.getpicture( success, fail, options ); // 카메라에서사진을가져온다. Options 에 sourcetype = 0 은폰의포토앨범, 1 은카메라에서사진을가져온다. // 폰에있는연락처정보를읽어오거나추가 / 삭제동작을한다. navigator.contact.contactscount ( function(num) { alert(num); }, fail ); navigator.contact.getallcontacts( function(contactsarray) {}, fail, options ); navigator.contact.choosecontact ( function(contact) {}, options ); navigator.contact.displaycontact(contactsarray[x].recordid, fail, options ); navigator.contact.removecontact(contactsarray[x].recordid, succ, fail ); navigator.contact.newcontact(nc, succ ); 위에서보는바와같이 Javascript 에확장기능을추가함으로써, Web App 이 Device 의기능을사용할수있게된다. 실제로이런시도는 W3C DAP, OMTP BONDI, JIL 에의해제안되고표준화작업이진행되고있으나, 아직실제적용은되지않은상태이다. 그리고 iphone 에서이표준이받아들여질지도아직은미지수이기때문에현재로선이런 Hybrid 프레임워크가대안이라고불수있다. 5.3 실전예제 오프라인앱어플리케이션 체크리스트본예제는 에대한것이다. Web App 를좀더간략하게만든것이 Javascript 만으로실 178

179 행가능한 Web App 을만들었다면 HTML5 의 App Cache 기능을활용해서 Offline 에서도실행이가능한 Application 을만들수있다. Offline 에서도실행가능한 Web App 의 HTML 내용은다음과같다. <!DOCTYPE html> <html manifest="webapp.manifest"> <head> <meta name="viewport" content="user-scalable=no, width=devicewidth, initial-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphone_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <script src="app.js"></script> 간단한체크리스트를 Offline 에서등록 / 관리하는 Application 이다. 주요기능은 app.js 에있다. // BUILD DATABASE var db; if (window.opendatabase) { db = opendatabase("checklist", "1.0", "Checklist Item DB", ); if (!db) alert("db Open Error"); else var highestid = 0; var hidedelete = true; } function loaded() { // 페이지가로드되면테이블이있는지확인하여없으면새로테이블을생성한다. db.transaction(function(tx) { 179

180 tx.executesql("select COUNT(*) FROM ToDos", [], function(result) { BuildList(); //alert("loaded database"); }, function(tx, error) { tx.executesql( "CREATE TABLE ToDos (id REAL UNIQUE, item TEXT, status REAL)", [], function(result) { BuildList(); }); }); }); } // 페이지로드후이벤트에등록한다. addeventlistener('load', loaded, false); // NEW function newitem(){ if(document.getelementbyid('item').value!= ""){ highestid ++; var item = document.getelementbyid('item').value; var status = 0; // 신규아이템등록 db.transaction(function (tx) { tx.executesql("insert INTO ToDos (id, item, status) VALUES ("+ highestid +", '"+ item +"', " + status + " )", [], function(result){ document.getelementbyid('item').value = ""; BuildList(); }, function(tx, error) { alert(error); } ); }); } } // DELETE

181 function deletetodo(id){ // 아이템삭제 db.transaction(function (tx) { tx.executesql("delete FROM ToDos WHERE id = " + id + ";", [], function(result){ document.getelementbyid(id).style.display = "none"; }, function(tx, error) { alert(error); } ); }); } // CHANGE STATUS function updatetodo(id, status){ if (status == '1') { status = '0'; } else { status = '1'; } // 해당체크리스트아이템을수행했는지안했는지를체크한다. 체크한아이템은흐리게만든다. db.transaction(function (tx) { tx.executesql("update ToDos SET status = " + status + " WHERE id = " + id + " ;", [], function(result){ if (status == '1') { document.getelementbyid(id+"box").removeattribute("onclick"); var newfunction = document.createattribute("onclick"); newfunction.nodevalue = "updatetodo(" + id + ", " + status + ")"; document.getelementbyid(id+"box").setattributenode(newfunction) ; document.getelementbyid(id).style.opacity = '0.2'; } if (status == '0') { 181

182 document.getelementbyid(id+"box").removeattribute("onclick"); var newfunction = document.createattribute("onclick"); newfunction.nodevalue = "updatetodo(" + id + ", " + status + ")"; document.getelementbyid(id+"box").setattributenode(newfunction) ; } document.getelementbyid(id).style.opacity = '1'; } }, function(tx, error) { alert(error); } ); }); // BUILD LIST function BuildList(){ // DB 에서전체체크리스트아이템을읽어온다. document.getelementbyid('items').innerhtml = ""; db.transaction(function(tx) { tx.executesql("select id, item, status FROM ToDos", [], function(tx, result) { for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); } ToDo(row['id'], row['item'], row['status']); if (row['id'] > highestid) highestid = row['id']; // if (!result.rows.length) }, function(tx, error) { alert('failed to retrieve notes from database - ' + error.message); return; 182

183 }); }); } // TODO function ToDo(id, item, status){ // 각아이템등록 var ToDoItem = "<div id='" + id + "' class='part "; if(status == 1) { ToDoItem += " done"; } ToDoItem += "'> <input type='checkbox'"; if(status == 1) { ToDoItem += "checked='checked'"; } ToDoItem += " onclick='updatetodo(" + id + ", " + status + ")' id='" + id + "box' class='checked' />"; ToDoItem +="<span>" + item + "</span>"; ToDoItem +="<input type='button' value='delete' onclick='deletetodo(" + id + ")' class='dbtn' id='dbtn" + id + "'/></div> "; document.getelementbyid('items').innerhtml = document.getelementbyid('items').innerhtml + ToDoItem; } // TOGGLE HIDDEN function togglehidden(){ if(hidedelete == true){ hidedelete = false; document.getelementbyid('edit').value = "Done"; } else { hidedelete = true; document.getelementbyid('edit').value = "Edit"; } BuildList(); } 183

184 그리고, 오프라인실행을위해 webapp.manifest 를만든다. CACHE MANIFEST app.js startup.png # 캐시를선언한 index.html 은자동으로 실행한화면은다음과같다. 한번온라인상태에서로딩만되면오프라인시에도동작된다. <meta name="viewport" content="user-scalable=no, width=devicewidth, initial-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphone_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> 그리고, HTML의 <head> iphone Web App 모드를지원하는태그를추가했기때문에하단 + 버튼을눌러서추가하면다음과같이지정한 iphone_icon.png 아이콘이보이게된다. 추가된아이콘을눌러서실행하면 startup-image 로지정한화면 184

185 이로딩할때보이게되며, URL 바없이전체화면으로실행된다. Status Bar 의색상은검정색이다. 예제는 에올려져있으므로, 아이폰에서접속하면바로사용할수있다. [ 아이콘추가 ] [ 로딩화면이미지 ] 185

186 [ 전체화면모드로실행 ] [Offline 모드 ] GeoLocation 어플리케이션 - GeoChicken 이제간단한위치정보 Web App 을만들어보자. <!DOCTYPE html> <html> <head> <meta name="viewport" content="user-scalable=no, width=devicewidth, initial-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphone_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> // 예제를위해 Daum 지도 API 사용 <script type="text/javascript" src=" ></script> <script src="app.js"></script> <title>geochicken WebApp</title> </head> <body> <div id=map_canvas style='width:300px;height:300px'></body> </html> 역시간단한소스코드는 app.js 파일에있다. // 페이지가로드되면위치정보를요청하여바로그위치의지도를그린다. function loaded() { navigator.geolocation.getcurrentposition( function(position) { var map = new DMap("map_canvas", {point:new DLatLng(position.coords.latitude, position.coords.longitude), level:3}); }, function(){ alert('error'); } ); } 186

187 // 페이지로드후이벤트에등록한다. addeventlistener('load', loaded, false); 페이지를로딩하면바로현재위치정보사용승인창이나오고승인버튼을누르면, 현재있는곳부근의지도정보를웹페이지에보여주게된다. 지도정보만보여서는기존지도앱과다를바없으니, 다른기능을한번추가해보자. 데모이름이 GeoChicken 이라는걸확인했다면무엇을할지바로알수있다. 클릭한번만으로내주위에치킨집을바로검색해보도록하자. <!DOCTYPE html> <html> <head> <meta name="viewport" content="user-scalable=no, width=devicewidth, initial-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphone_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> 187

188 // 예제를위해 Daum 지도 API 사용 <script type="text/javascript" src=" ></script> <script type="text/javascript" src=" in.js"></script> <script src="app.js"></script> <title>geochicken WebApp</title> </head> <body> <div id=addr></div> <ul id=items></ul> // 지도에위치표시하는기능은생략. </html> 역시간단한소스코드는 app.js 파일에있다. function loaded() { navigator.geolocation.getcurrentposition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; // 다음좌표 -> 주소 API 로현재좌표를주소로변환한다 var coord2addr = " ngitude=" + lon + "&latitude=" + lat + "&output=json&inputcoordsystem=wgs84&callback=?"; // AJAX 호출을조금편하기표시하기위해 jquery 를사용 $.getjson(coord2addr, function(data){ $("#addr").html(data.fullname); addr = encodeuri(data.fullname); // 현재국내 API 중좌표만으로근방상호들을검색해주는 API 는없으므로 // 네이버의지역검색 API 에 주소 + 치킨 형태로검색을호출하여근처치킨집을찾는다. // 네이버의 API 는 JSONP 지원이안되서 Cross Domain 호출이불가하므로서버에서대신처리한다. // 아래주소는네이버의지역검색 API 호출후결과를 JSON 으로변경하여보내준다. 188

189 // ay=10&query= // 검색요청시주소 + + 치킨 var getchicken = " $.getjson(getchicken, function(data) { $.each(data.stores, function(i,item){ store = "<li>" + item.title + " <a href='tel:" + item.telephone + "'>" + item.telephone + "</a></li>" ; $("#items").append(store); }); } ); }); }, function(){ alert('error'); } ); } // 페이지로드후이벤트에등록한다. addeventlistener('load', loaded, false); 예제소스를 에올려두었다. HTML5 GeoLocation API를지원하는모든브라우저에서다실행가능하다. 실행하면다음과같은화면을볼수있다. 189

190 이사이트역시 + 버튼을이용하여웹앱으로추가가능하며한번의클릭으로원하는치킨집을찾을수있다. 이와같이 HTML5의 GeoLocation 과 Web SQL Database API를이용하여간단한 Mobile HTML5 어플리케이션을만들어보았다. 190

191 부록. 191

192 [ 블로터포럼 ] HTML5 가개발자에게 기회의땅 인이유 출처 : 우연의일치일까요. 블로터포럼 을진행한뒤애플스티브잡스가때마침제대로한방날렸더군요. 아이폰에서플래시를지원하라는어도비를향해 플래시대안은 HTML5 라며 어도비는게으르다 고심기를건드린겁니다. 왜갑자기여기저기서 HTML5를외치는걸까요. 특정분야개발자들을빼고는대체로비슷한반응을보입니다. HTML에익숙한사람도 HTML5 앞에선꿀먹은벙어리마냥얌전해집니다. 딱딱하고어려운게사실이지만알아두고준비해야할기술. 이번 블로터포럼 에선입문자눈높이에맞춰 HTML5를들여다보고싶었습니다. 일시 : 2010 년 1 월 27 일 ( 목 ) 오후 5 시 ~7 시 장소 : SK 커뮤니케이션즈회의실 참석자 : 윤석찬다음커뮤니케이션 DNA 랩팀장, 도안구 이희욱 주민영블로터닷넷기자 192

193 이희욱 오늘주제가참어렵다. HTML5 문외한입장에서궁금한점이많다. 먼저묻고싶다. HTML5가뭔가? 윤석찬 HTML5가어느날갑자기나타난게아니다. 사연이길다. 1998년 HTML4.01 이후웹표준을개발하는국제컨소시엄인 W3C 는 XHTML 표준개발에박차를가했다. 웹브라우저전쟁이후그작업에서웹브라우저제조사들이빠졌다. 이후웹표준의방향은 XML을기반한꽤이상적인표준을만들기시작했다. 2004년파이어폭스가나오고아작스 (Ajax) 와웹2.0이활성화되면서문서가아닌웹애플리케이션을위한웹표준의재정비가필요했다. 하지만이러한현실적요구를 W3C가받아들이지않았다. 웹브라우저제조사들에게는 W3C의 XHTML2.0과 XML기반 DOM 및이벤트핸들러등은루비콘강을건너는것이다. 당시 XHTML 문서가전체웹에서 5% 에불과했고웹브라우저엔진들의차이탓에개발자들은 크로스브라우징 에생고생을하고있었다. 2004년 W3C의한워크샵에서서로틀어진뒤모질라와오페라, 애플과구글은별도의 웹하이퍼텍스트애플리케이션테크놀로지워킹그룹 (WHATWG) 이라는공개표준그룹을만들고새로운 HTML 표준안을만들기시작했다. 이것이바로 HTML5의시초다. 도안구 W3C와웹브라우저제조사사이에그런의견다툼이있었나? 흥미롭다. 윤석찬기존 WHATWG 표준초안을가져오며 HTML5 라불렀다. 당시 IE7 개발을맡았던 MS 유명아키텍트인크리스윌슨이워킹그룹의장이됐고모질라, 오페라, 애플, 구글등모두참여해 HTML5 표준을만들고있다. HTML5 독타입은매우간단하다. <!DOCTYPE HTML > 이렇게 HTML 파일맨앞줄에넣어주면끝이다. 이뒤에나오는코드 193

194 는웹브라우저마다 HTML5에맞춰렌더링한다. HTML5 표준초안은웹브라우저엔진개발자들을위해만든것으로, 보다상세하게구현내용을적고있다. 두번째목적은동적웹애플리케이션을지원할리치웹기술을담고있다는것이다. 멀티미디어를다루는 canvas, video, audio 태그를비롯해웹브라우저내로컬스토리지를다루는돔 API와드래그앤드롭 API 등일반표준문서에서는보기힘든다양한기술이뒤섞여있다. 특히웹개발자수고를덜어줄 웹폼2.0 이라는표준과함께쓰면보다멋진리치웹애플리케이션을만들수있다. 웹브라우저안에 DB를탑재해로컬스토리지로활용해오프라인에서도데이터를싱크해활용할수있다. 구글 G메일 오프라인 기능이그렇게구현돼있다. 이희욱 리치웹애플리케이션이라면플래시나실버라이트를얘기할 때자주들언급한다. HTML5가리치웹에주목하는이유는무엇인가? 윤석찬웹브라우저업체입장에서리치웹기술에관심을갖는이유는다양하다. 제가참여하고있는모질라커뮤니티의경우, 웹은읽을수있고 (readable), 저장할수있고 (Indexable), 편집할수있어야 (editable) 한다고믿는다. HTML 소스를보고, 복사를하고, 고칠수있었기때문에웹문서가비약적인성공을했다. 기존플러그인기반리치웹기술들, 예컨대플래시나실버라이트는그게어렵다. 물론이들도 XML 기술을통해이용자화면 (UI) 을만들때스크립트언어로동작을제어한다. 하지만결국읽을수없는 바이너리 를포함하고있다. 이는웹본질과일치하지않는다. HTML5가리치웹기술의선택가능한대안으로자리잡아야한다. 물론아직플래시나실버라이트에비해 HTML5가제한사항이 194

195 많다. 하지만궁극적으로웹이나아갈방향이라고본다. 구글이나오페라와애플도이러한점에동의를하고있고 MS 역시미온적이지만참여를하고있다. 초창기많은사람들이 리치웹환경에서 HTML5가성공할것인가 라는물음엔회의적이었다. 지금은많이바뀌었다. 이런 블로터포럼 에도불려다니는걸보면. ( 웃음 ) 도안구 HTML5가주목받게된특별한계기나사건이있나? 윤석찬아무래도구글영향이컸다. 지난 2009년 4월에열린 구글 I/O 컨퍼런스 가전환점이됐다. 구글은 2008년첫구글 I/O 컨퍼런스에서안드로이드와구글기어스를발표했다. 구글기어스는리치웹애플리케이션을만들기위한웹브라우저플러그인이었다. 하지만 2009년컨퍼런스에선구글 CTO가첫날주제로 HTML5를다루고, 둘쨋날구글웨이브를다뤘다. 그런데첫날 HTML5를얘기하면서 HTML5가대세 란분위기를크게조성했다. 자사웹브라우저인 구글크롬 에도아직탑재안된 HTML5 기술을파이어폭스와사파리로시연할정도였다. 그러면서인식이많이바뀌었다. 195

196 구글이드디어 HTML5에베팅하는구나. 시장에도긍정적인신호를줬다. 모바일을보면완전히다르다. 지금 PC의웹브라우저시장은 IE 가다수이고파이어폭스, 크롬, 사파리가따라오는모양새다. 모바일웹에서는유럽스마트폰시장은오페라가, 아이폰은사파리를기반하고있다. 안드로이드폰이나오면크롬이주력으로들어간다. 모질라를빼도메이저 3사다. 결국 IE가대세가아니다. 모바일애플리케이션개발환경은 PC 못지않게폐쇄적이다. 이런상황은오래가지않을것이고, 결국범용리치웹환경을사용하는것으로바뀔것이다. 특히모바일웹의변화가더욱빠를것같다. 주민영허나애플아이폰이촉발시킨앱스토어도개발자입장에선큰기회다! 윤석찬물론지금은앱스토어가유행이다. 돈벌이가아니라서비스를만드는관점에서보면, 지금은앱스토어용따로, 웹애플리케이션따로만드는식으로과도기다. 결국 HTML 표준으로웹문서를만들듯웹애플리케이션도표준으로쉽게만들고서비스하는환경이와야한다. 폐쇄적인개발플랫폼을기반으로하는플레이어도필요하지만모두에게이익이되는범용개발환경이웹의목표이고지향하는바다. 웹개발자들은이를간과하면안된다. 이희욱 HTML5는그럼웹개발자들을위한표준기술문서인가? 윤석찬앞서말했듯이 HTML5는웹브라우저엔진개발자를위한스펙이다. 하지만이안에는렌더링엔진뿐만아니라중요한리치웹기술이포함돼있다. 예컨대크롬이탭마다적용한병렬프로세스기능이나외부와데이터를주고받을때웹브라우저가어떻게처리할지규약도있고, 데스크톱에서웹브라우저로드래그앤드롭한파일을어떻게처리할지에관한스펙도있다. HTML 뿐아니라방대한내 196

197 용들이추가되고있다. 초안자체가어렵기때문에웹개발자들이이를쉽게이해하고이용할수있도록설명문서들도함께만들고있다. 도안구그스펙은계속추가되고실제구현되고있나? 윤석찬 W3C 표준제정과정을보면, HTML5는현재는초안단계다. 한단계넘어가기위해준비중이고이는정해진내부프로세스를따라가는것이다. 무엇보다중요한건, HTML5의어떤기술이웹브라우저에서구현되고있고얼마만큼사용할수있느냐하는점이다. 현재 PC 기반웹브라우저에서 HTML5의주요기능을쓰는데는아직무리가있다. 주민영 유튜브나비메오같은동영상공유사이트가플래시대신 HTML5 를수용하겠다고해서화제가되기도했다. 윤석찬유튜브나비메오등이수용한건 HTML5의일부다. video 태그를이용해플러그인도움없이도웹브라우저만으로도동영상을서비스할수있다. 지금까지는윈도우미디어플레이어나플래시플러그인을깔아야만가능했다. 문제는동영상코덱에있다. 파이어폭스와오페라는오픈소스기반 OGG 테오라 (OGG Theora) 를지지해왔다. 하지만크롬과사파리는특허료를내야하는 H.264 MPEG 포맷을지원한다. 유튜브와비메오도 H.264 코덱을지원하기시작했다. 이때문에파이어폭스도 H.264 코덱을지원해야한다는여론이일었다. 이에대해모질라제품담당마이크셰이버는거부의사를분명히했다. 파이어폭스가 H.264 코덱을이용하는데 1년에 500만달러정도의특허료를지불해야하다. 모질라입장에서그리큰돈은아니다. 하지만문제는이를통해서비스개발자및업체모두 2011년부터특허료를내야한다. 이는선택가능한대안을중요시하는모질라의 197

198 미션과배치되는것이다. 코덱은물론웹의영역은아니다. 하지만플러그인들이오픈웹에큰걸림돌이되듯, 폐쇄형코덱은오픈비디오환경에도움이되지않는다고판단한다. 이희욱그럼유튜브 HTML5 비디오태그와파이어폭스의연동은영영안되는건가? 윤석찬가능성은있다. 구글이지난해 8월, 동영상코덱업체 온투 (On2) 테크놀로지 를인수했다. 구글이온투코덱을오픈소스와특허무료로공개하는거다. 온투코덱은플래시와호환된다. 이러한계획은이미구글도밝힌바있다. 테오라역시온투의과거버전이오픈소스화된것이다. 오픈비디오환경은이래저래구글의결정에큰영향을받게될것이다. 도안구국내웹사이트들의 HTML5 도입현황은어떤가? 윤석찬아직까지국내에서는 HTML5에대한웹개발자들의관심이높지는않다. HTML5 독타입을쓰면표준모드로동작하므로사용해도지장은없다. 우선 HTML5에대한문서자료와 HTML5갤러리나 HTML5닥터웹사이트에서다양한예제를살펴보고, 가능한것부터해보는것이좋겠다. 이희욱그럼 XHTML 은더이상개발되지않는것인가? 윤석찬그렇지않다. 물론 XHTML 2.0 표준개발은완전히멈췄다. 지난해에그룹이해체됐다. 하지만 XHTML의유용성은그대로있기에, HTML5 문서를 XHTML로도표현할수있고이를위한독타입을선언하면그대로 XHTML 문서로유효하다. 이를 XHTML5 라고부른다. XHTML은여전히 HTML5 안에서유효하다. 198

199 주민영 HTML5가산업에미치는영향은어떨것으로예상하나? 윤석찬가장큰수혜자는기존웹개발자다. 요즘모바일애플리케이션개발자는중고매킨토시를산뒤코코아개발환경을익혀앱스토어에애플리케이션을올리고, 안드로이드애플리케이션개발자는자바를배워야한다고들말한다. 하지만자신이가진웹기술에조금만더보태면감탄할만한리치애플리케이션을만들수있다. 예컨대 R그래프 란서비스를보면 HTML5를기반한각종비주얼차트를서비스안에넣을수있다. 그러니웹프론트엔드개발자가더많은생각을갖고 HTML5를적용하는노력을기울여야한다. 그게결국은자기에게보답으로돌아온다. 전세계에제공되는범용웹브라우저기반으로웹애플리케이션을만들면모든개발자가수혜를받는다. 결국이게정석이다. 웹산업에서대형주자가폐쇄된개발환경과플랫폼에서비즈니스하는것은당연하다. 좋은이용자경험 (UX) 을주는것은칭찬할만하다. 중요한것은, 선택가능하고범용적인웹기반플랫폼도제공돼야한다. 표준은죽기도하고산업에밀리기도한다. 100% 올바르지도않다. 하지만없는것보다는낫다. 이희욱 HTML5 확산을위한과제가있다면? 윤석찬국내에서는일단 HTML5가대형포털이적용할만큼매력이있느냐의문제가있다. 국내에서이용하는대다수웹브라우저가아직지원하지않는부분이있기때문이다. 파일럿서비스나모바일웹서비스를준비하는사람은 HTML5를적용해보면좋겠다. 아이폰용웹페이지를만들때 video 나 canvas 태그혹은오프라인스토리지기능을이용하는아이디어를내야한다. 천편일률적인모바일페이지는식상하다. 기왕이면모바일웹페이지를만들때 엣지있게 만들면좋잖나. 만약누군가 canvas 태그를이용 199

200 해그림을그리고이를공유하는서비스를모바일웹서비스로만들었다치자. 그는회사에서인정받는사람이될수있다. 그런점들에개발자가좀더신경쓰면좋겠다. 스스로찾고배워서도전해봤으면한다. 이희욱새롭고흥미로운얘기들을많이들었다. 아직은어렵고낯선면이많다. 리치웹을플러그인없이구현할수있는기술을내장했다는얘기가기억에오래남는다. 웹개발자분들이좋은기회로활용했으면하는생각이든다. 새로운정보들도자주알려주시길기대한다. 200

201 [ 읽을꺼리 ] HTML5 동영상에대한전망 출처 : HTML5 동영상을두고애플과어도비그리고웹브라우저벤더와서비스업체들의혼란이가중되고있다. 유튜브를비롯많은웹서비스들은아이폰과아이패드호환성을위해 HTML5 <video> 기능을제공하고있는데반해최근인터넷 TV 서비스인 Hulu는 <video> 를관망하고플래시동영상을유지하겠다는입장을보였기때문이다. 마치과거넷스케이프 vs. IE와이에따른웹서비스들의줄서기같은데자뷰가일어난다고이야기하는분들도있다. 중요한것은웹의본질을이해하고스스로판단해야한다는점이다. 콘테이너를벗어나웹의일부가되다 웹의일부냐아니냐를가를수있는구분자는바로웹에있는자원을우리가찾고 (URL addressable), 읽고 (Readable), 저장 (Indexable) 할수있느냐는것이다. 웹이처음만들어졌을때, 음성및동영상같은멀티미디어들도웹의일부가될수있는기술적고려는있었다. 하지만, 90년대말과 2000년대초반인터넷방송을해봤던경험에따르면당시네트워크속도, 저작권, 공유기술의부족으로인해플러그인의콘테이너에갇혀제공될수밖에없었다. 201

202 지금까지웹상의동영상은실버라이트, 리얼플레이어, 윈도우플레이어등에갇혀있었고웹 2.0 조류를타고오디오의경우팟캐스트, 동영상은유튜브가나오고나서야사용자가직접만들어공유가능하게 (sharable) 서비스가나오기시작했다. 특히과거에비하면서비스비용도획기적으로낮아졌고, 광고시장의성장도눈부셔서멀티미디어가웹의일부가될수있는토대가된것은웹2.0의또다른혜택중하나다. 진정한개방동영상 (Open Video) 시대로동영상이웹의일부가된다는말은무엇일까? 바로웹문서와같이콘테이너를벗어나 URL을통해사용자나검색크롤러가읽고 ( 보여주고 ) 저장할수있다는이야기이다. 얼마전 CSS 창시자인하콤비움리국내강연중 HTML5에서동영상저작권은어떻게해결해야하나? 라는질문을던진사람이 202

203 있다고한다. HTML5 동영상이 URL로자유롭게제공하여크롤러나사람이나보고저장할수있다는것을전제로한다. 만일저작권이중요하다고판단하는서비스제공자는기존처럼콘테이너에담거나 DRM 솔루션으로꽁꽁묶어제공하면된다. (Hulu가 HTML5 동영상에소극적인이유도바로이때문이다.) <video> 와 <audio> 태그가 HTML5의기술사양에포함된것은일찌기이미지파일이그랬듯이동영상을통해더많은사람들이더많은정보공유의이익을얻을수있기때문이다. 유튜브에서음성인식을통한자동자막생성기능을경험해보셨다면이기능이얼마나유용한지알수있을것이다. 누구나웹동영상을접근할수있담면이를이용한다양한혁신서비스가나올수있다는증거중하나다. 정보접근성과단계적기능축소 HTML5 동영상에대한또하나의관점은코덱에관한것이다. 사파리, 크롬 ( 그리고 IE9) 의최신버전은특허료를지급해야하는 H.264(AVC) 를기본지원하고, 파이어폭스, 오페라, 크롬은특허무료인오픈소스코덱 오그테오라 를지원하고있다. 세간에서는웹코덱전쟁이라고칭하면서어느코덱이대세가될것인지이슈꺼리가되고있다. Mozilla나오페라가지향하는바는웹에어떤콘텐츠를저작하거나제공할때, 누군가에게돈을내야하는것은진정한웹은아니기때문에특허무료코덱을주장하고있다. 사실웹서비스업체나웹개발자들이누가이길지관망하면서기다리는것은크게도움이되지않는다. 단언하거나 HTML5 표준을 203

204 100% 구현하는웹브라우저도없을뿐더라 100% 같은사양으로구현한다는것은불가능하다. ( 과거 W3C의웹표준사양을 100% 구현한웹브라우저도없다.) 웹개발의중요한고려사항중하나는단계적기능축소 (Graceful Degradation) 라는개념이다. 자바스크립트를꺼도실행이되고, CSS를꺼도보여주어궁극적으로 HTML만남아도중요한기능은동작하게하는것이다. 우리가웹브라우저호환성 (Cross Browser compatibility) 를제공하는것도같은이유이다. 이는웹개발자들의필연적인업무이다. 동영상코덱의경우, ogg나 mp4냐를관망하는건의미가없는일이다. 접근성향상에는필연적으로비용이수반된다. HTML5 동영상코덱선택도단계적기능축소관점에서접근할필요가있다는의미이다. 구글이이번주 Google I/O에사 VP8 코덱을오픈소스로제공하고, 여기에애플을제외한어도비, 모질라, 오페라가직접참여하고, 마이크로소프트가지원을천명했기에더욱그렇다. 우리가원하는궁극적인동영상제공방법은바로다음과같이한줄의코드로요약할수있다. <video> <source src="openvideo.ogg" type="video/ogg"/> <source src="openvideo.mp4" type="video/mp4"/> <embed src="player.swf?openvideo.flv" type="application/xshockwave-flash" width="480" height="300" allowscriptaccess="always" allowfullscreen="true"/> </video> HTML5 동영상은 HTML5의극히일부분에지나지않는다. HTML5의수많은기술을정확하게이해하고선택하는것은 웹개발자 들의몫이다. 주변에휘둘리기보다내가웹개발자로서어떤판단을해야하는지가더중요하다는의미이다. 그것이우리가웹개발자로서살아가야하는의무이자책임이다. 204

205 국내웹표준커뮤니티목록 Web Standards Korea : webstandards.or.kr 국내최초웹표준커뮤니티로 2004년에만들어져다양한강의, 저술활동, 공공기관지원을하고있다. 또한, 세계웹표준운동의주축인웹표준프로젝트 (Web Standards Project) 의지역화단체이기도하다. 실전웹표준가이드 (2005) 무료배포, 한중일공개SW포럼웹표준 W/G활동 (2005~2008) 그리고공공기관웹표준평가및가이드마련등에실질적인도움을주었다. 2007년이후겉으로뚜렸하게보이는활동은없지만한국의웹표준커뮤니티리더들이필요한경우, 공동활동을펼치기도한다. Mozilla 한국커뮤니티 : 웹표준게시판 forums.mozilla.or.kr 모질라재단에서만든웹브라우저인파이어폭스가웹표준을지키는것을중요하게여기고있어서커뮤니티에웹표준을주제로게시판이생기게되었다. 2004년당시웹표준에대한얘기를할수있는유일한곳이어서많은사람들이활동하고토론하였고이러한활동을지금까지고계속되고있다. 이곳에서는표준을지키지않은사이트나웹표준관련된기술적, 이론적인내용에관련된논의가활발하게이루어지고있다. CSS 디자인코리아 : forum.standardmag.org 웹표준과 CSS관련된활동을하던사람들의의견을모아장지윤님이만든사이트이다. 초기에는토론게시판형태로운영이되다가최 205

206 근에는자료와활동을정리하는위키를도입하여운영되고있다. 현재홍윤표님께서총괄운영을맡아서수고해주고계시며게시판에서는웹표준이나웹접근성실무자분들이활발한토의를진행하고있다. 최근에는 " 한국웹표준의날 " 이라는행사를시작하였고한국의웹표준을이끌어가는중심행사로자리잡을수있도록노력하고있다. 클리어보스 (ClearBoth): clearboth.org 클리어보스는추지호님을중심으로스터디모임으로시작하여다양한주제의웹표준연구모임이다. 친목과공부모임을주관하면서웹표준문서번역를번역하고있기도하다. 최근에일본 CSS Nite를국내에서협력해서행사를개최하고있다. 한국웹접근성그룹 (Korea Web Accessibility Group): kwag.net 조훈님이시작한웹접근성전문그룹이다. 일반인을대상으로한워크샵을진행하였고한국정보문화진흥원과함께한국의웹접근성을향상시키는데중요한역할을하였다. 최근다시활동을준비하고있다. 네이버카페하코사 : 하코사는 " 하드코딩하는사람들 " 의준말로네이버카페에서운영되고있는모임이다. 회원수가 3000명이넘고웹표준뿐만아니라 HTML을다루는다양한직군의회원들이있다. 정보통신접근성향상표준화포럼 : 국내의웹접근성전문가들의포럼이다. 한국정보문화진흥원의지원으로운영되고있고, 관련세미나정보나웹접근성관련자료들이많다. 206

207 실전 HTML5 가이드 저자 : 윤석찬, 신현석, 정찬명, 경준호, 권정혁 배포 : 본가이드는아래라이센스하에자유롭게사용가능합니다. 207