동향 * 16) 1. 개요 구글 (Google) 은 2010년 5월구글 I/O 개발자컨퍼런스에서 HTML5를통해플러그인의사용이줄어들고프로그램다운로드및설치가필요없는브라우저기반웹플랫폼환경이점차구현되고있다고강조했다. 그리고애플 (Apple) 은 2010년 2월에출시한아이패드에서처리속도를지연시키는플래시 (flash) 를지원하지않고 HTML5 를이용하여웹브라우저에서오디오, 동영상, 그래픽작업등을구현하겠다고밝혔 다. 1) 또한마이크로소프트 (Microsoft) 도웹의상호운영성을지원하는차세대웹표준 인 HTML5를적극지원한다고밝혔다. 2) 주요플랫폼업체들의전략에서알수있듯이향후웹환경은특정운영체제 (OS) 나소프트웨어 (SW) 에종속되지않고브라우저 (Browser) 에서각종애플리케이션이구동되는웹플랫폼 (Web Platform) 화될것으로예상된다. 하지만현재의웹환경은운영체제 (OS) 와소프트웨어 (SW) 에따라소비자가경험할수있는 UX 3) 가다르게제공되 1) 디지털타임즈 (2010. 2. 7) 2) ZDnetKorea(2010. 3. 4) 3) 사용자경험 (User Experience): 사용자가어떤시스템, 제품, 서비스를직, 간접적으로이용하면서느끼고생각하게되는총체적경험
고있어웹플랫폼환경과는차이가있다. HTML5는기존 HTML 기반웹브라우저와의호환성을유지하면서도, 구조적인마크업 (mark-up) 및편리한웹폼 (web form) 기능을제공하고, 리치웹애플리케이션 (RIA) 을개발할수있는자바스크립트 API를포함하고있는프로그래밍기술 4) 로, 현재의웹환경에서웹플랫폼환경으로진화할수있는기술적토대를제공한다. 이러한배경에서본고는최근주목받고있는 HTML5의주요내용과 HTML5가데스크톱및모바일웹환경에미치는영향에대해살펴보고자한다. 2. HTML5 의등장배경 HTML5는웹문서를만들기위한프로그래밍언어 HTML(HyperText Markup Language) 의차세대웹표준안으로, 하나의언어 (Java Script), 하나의데이터모델 (XML, DOM), 하나의레이아웃 (CSS) 을통일적으로제공하여텍스트, 오디오, 비디오, 그래픽등을통합제공해준다. 월드와이드웹 (www) 개념의창시자팀버너스리 (Tim Berners-Lee) 는웹관련주요기술을논의하고웹표준과가이드라인을마련하기위하여 1994년에국제표준화기구인월드와이드웹컨소시엄 (W3C) 5) 을결성했다. W3C는브라우저, SW, HW와관계없이웹에접근할수있는호환성 (Web Interoperability) 이중요하다고보고, 웹에서통용될수있는표준안을제안하고테스트와피드백을반영한최종권고안을마련하는일을진행해왔다. 1994년 HTML Draft를마련한 W3C는 1995년 HTML2.0, 1997년 HTML3.2, 1997년 HTML4.0, 1999년 HTML4.01 등 HTML 관련표준안들을제안하며대중기반의웹환경확산에크게기여했다. 2000년이후웹환경은참여, 공유, 개방의웹 4) InfoWorld(2010) 5) World Wide Web Consortium, W3C 의설립취지는웹의지속적인성장을도모하는프로토콜과 가이드라인을개발하여월드와이드웹의모든잠재력을이끌어내는것임
동향 2.0 및검색의확장과이를통한시멘틱웹, 스마트폰보급을통해대두된모바일웹등으로빠르게변화했다. 이러한상황에서변화된웹환경의다양한애플리케이션을구현하고개발자들이실질적으로이용할수있는프로그래밍언어에대한필요성이제기되었지만, W3C에서는기존 HTML에대한개선논의가이루어지지않았다. 오히려웹페이지에엄격한문법을적용하는특징을가진웹표준인 XHTML 6) 과웹페이지의표현방식과관련된 CSS3, 비동기통신으로클라이언트와서버간데이터주고받는 AJAX 7) 등에대한논의가강화되었다. 이후 2004년에모질라재단 (Mozila Foundation), 애플 (Apple), 오페라 (Opera) 등의브라우저업체들이 W3C와별도로웹애플리케이션제작을위한웹표준을제안하기위해하이퍼텍스트애플리케이션워킹그룹 (WHATWG) 8) 을만들고 Web Application 1.0 을제안했다. 이후 W3C도 2007년에웹애플리케이션논의와표준정립의 6) Extensible Hypertext Markup Language 7) Ajax(asynchronous JavaScript and XML) 는필요한데이터만을웹서버에요청해서받은후클라이언트차원에서데이터를처리하는기술을적용함. 웹서버에서전적으로처리되었던데이터처리의일부분이클라이언트쪽에서처리되므로웹브라우저와웹서버사이에교환되는데이터양이줄어들어애플리케이션의응답성과웹서버의처리량이줄어들게됨 ( 위키백과 ) 8) Web Hypertext Application Technology Working Group
필요성을인정하여, Web Application 1.0을기초로 HTML Working Group을출범시키고, 이표준안의명칭을 HTML5로바꾸었다. 이후계속적인논의와수정작업을통해 2010년 10월에 Last Call Working Draft 를제안했다. HTML5는현재마이크로소프트, 모질라재단, 애플, 구글, 오페라등의모든웹브라우저벤더가논의에참여하고있다. W3C는차세대웹표준인 HTML5를당장적용하기보다는 2~3년의안정화기간을거치는것이필요하다고밝히며, 최근주요웹브라우저업체들과개발자들이 HTML5 를도입, 사용화하는것에대해우려를표했다. 9) W3C 는 2011 년 5 월에 HTML5 초안에대한최종버전 (Last Call) 을확정하고, 올해말최종안을정한후 2014 년 1 분기까지테스트및브라우저업체들의피드백을받아, 2014 년 2 분기에는 HTML5 표준을확정할예정이라고밝혔다. 10) 3. HTML5 의주요특징 W3C 가발표한 HTML5 differences from HTML4 라는문건에따르면, HTML5 의특징은다음 4 가지로요약할수있다. 11) 첫째, HTML5 는 HTML, XML 문법으로 작성된문법 12) 이다. HTML5 초안은웹브라우저엔진개발자들을위한것으로하위버전의 HTML 문법을최대한지원하고있으며, 웹개발작업에서실질적으로겪고있는문제의해결에중점을두었다. 둘째, HTML5는상호운용을향상시키기위한세부작업모델 13) 이다. HTML5 초 9) 지디넷코리아 (2010. 10. 8) 10) 지디넷코리아 (2011. 2. 15) 11) W3C(2010) 12) Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax(w3c, 2010) 13) Defines detailed processing models to foster interoperable implementations, Improves markup for documents(w3c, 2010)
동향 안에서는새로운인코딩방식이제안되었고, 문서형식에서 <!DOCTYPE html> 을 선언하여웹브라우저가 HTML5 에대응하는최신엔진을이용하도록하였다. 14) 또한 이미정의되어있는유효한형식들에 tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color 등의타입속성들 (Web Form) 이 추가로제공된다. 이러한일련의타입속성들은서버에유효한내용들을전달할수 있도록유효성검증을사용할수있다 15) 예를들어, datetime 속성을사용하면웹브 라우저에서달력을지원하고, range 속성은스크롤바를, url 속성은웹사이트목록을, color 속성은색상표를지원한다. 일련의타입속성들은모두유효성을확인할수있는기능도제공된다. 셋째, HTML5 에서는새로운문서구성을위한마크업기능을강화 16) 하였다. HTML4 와는달리 header, footer, nav, section 등과같은구조화된마크업 17) 을사용함으로써자주사용하는 id들을표준화시켜코드를복사할때나웹문서를이해할때콘텐츠파악이용이하도록하였다. 이외에도 article, aside, command, details, summary, figure, figcaption, hgroup, mark, meter, progress, ruby, rt, rp, time, wbr 등의새로운마크업요소가추가되었다. 넷째, 웹애플리케이션등의개발을위한마크업및 API가제안 18) 되었다. 다시말해웹애플리케이션을위해 2D 그래픽과관련된 Canvas/SVG, 미디어와관련된 audio, video, source, embed 요소들이추가되었다. 또한웹애플리케이션개발및구현을위해 Geolocation( 위치정보지원 19) ), Web GL(3D그래픽지원 ), Web SQL Database ( 브라우저가데이터베이스엔진을지원 ), Web Storage( 클라이언트의데이터저장 ), 14) W3C(2010), K모바일 (2010) 15) W3C(2010) 16) Improves markup for documents(w3c, 2010) 17) 새로운마크업요소의세부속성에대해서는 w3schools.com(2010) 을참조 18) Introduces markup and APIs for emerging idioms, such as Web applications(w3c, 2010) 19) WiFi 기지국으로부터단말위치확인을통해위치정보를파악하는 WPS(WiFi Positioning System) 를이용하여단말에 GPS가없어도위도, 경도, 고도, 방향, 속도등의정보를획득 (K모바일, 2010)
Web Socket( 서버측의프로세스와직접적인양방향통신을위한 API), Offline Web Application( 인터넷비지원시웹애플리케이션구동 ) 등의다양한 API 들이지원되고 있다. HTML5의주요특징 HTML, XML 문법으로작성된 HTML5 문법상호운용을향상시키기위한세부작업모델새로운문서구성을위한마크업기능웹애플리케이션등의개발을위한마크업및 API 세부내용개발자들이웹문서작업시겪는문제점을해결하고, 실질적인도움을주기위해하위 HTML 문법들을최대한지원하고점차적으로축소하는전략을취함상호운용성을확보하기위해새로운인코딩방식, 문서형식방식을제공하고, 다양한타입속성등을개선하여이미정의된유효한형식과유효성검증기능을제공새로운웹문서구성에편의성을높이기위해 header, footer, nav, section 등기존에 HTML에서자주사용하던 id들을표준화시켜서코드복사등을통해웹문서이해가용이해짐 2D 그래픽, 3D 그래픽, 미디어 ( 오디오, 비디오 ), 위치정보, 웹브라우저에 DB 엔진및스토리지기능등웹애플리케이션개발을위해새로운마크업, API 추가 일련의 HTML5 의핵심내용들은기존의 HTML 문법을최대한지원하며단계적 으로축소하는호환성 (Compatibility), 개발자들에게실질적인도움이되는유용성 (Utility), 다른웹브라우저간상호호환을위한자세한설명과오류처리방법을명시 하는상호운용성 (Interoperatbility) 을원칙으로삼고있다. 20) 현재 W3C 회원외에도 기업, 개발자, 개인등누구나 HTML5 초안에대해의견을제기할수있으며, 세부 내용들은 2011 년 2012~2014 년간의필드의피드백을통해반복적으로검증되고수 정될예정이다. 20) 윤석찬외 (2010)
동향 4. HTML5 의등장이웹환경에미치는영향 (1) HTML5 의등장이데스크톱기반웹환경에미치는영향 현재전세계데스크톱브라우저의시장점유율은 2011년 2월기준으로마이크로소프트의인터넷익스플로어 (IE) 가 45.4%, 파이어폭스 30.4%, 구글의크롬 16.5%, 애플사파리 5.1%, 오페라 2.0% 로나타났다. 1년전과비교해볼때 IE의비중이 10%p 가량하락했지만, 여전히세계 1위를유지하고있음을알수있다. 특히구글의크롬브라우저가 1년전대비 10%p 가량점유율이상승하여 16.5% 이라는점에주목할만하다. 자료 : StatCounter Global Stats(2011a) 브라우저가 HTML5를얼마나지원하는지그수준을평가하는 The HTML5 TEST 의결과에따르면, 2011년 3월기준데스크톱브라우저중에는구글크롬이 282점으로지원수준이가장높고, 그다음이오페라, 애플, 모질라이며, 마이크로소프트의 IE는 32점으로가장낮게나타났다. 전세계브라우저 1위를점유하고있는 IE가아직 HTML5에대한지원수준이낮은것은, 데스크톱환경에서는 HTML5의확산이빠르지않을것이라는시사점을제공한다.
자료 : The HTML5 TEST(http://beta.html5test.com/results.html) 한편, 데스크톱브라우저에서는 HTML5 의등장이플러그인 (Plug-in) 21) 을얼마나 대체할것인지가주요이슈이다. HTML5 를이용하면플래시나퀵타임, 실버라이트 구분웹브라우저이메일클라이언트그래픽소프트웨어미디어플레이어 플러그인의역할 플러그인을사용하여동영상과발표포맷재생함 EX) 플래시, 퀵타임, 실버라이트 플러그인을이용하여이메일을암호화하고암호를풀어해석함 EX) Pretty Good Privacy(PGP) 플러그인을사용하여파일형식을지원하고그림을처리 EX) 어도비포토샵 플러그인을사용하여파일형식을지원하고필터를적용 EX) 푸바 2000, 윈앰프, GStreamer, QCD, VST, XMMS 등 자료 : 위키백과 21) 플러그인은호스트응응프로그램과서로응답하는프로그램으로웹브라우저가표시할수없는 각종형식의파일을표시하고, 구동되도록하는역할을담당함
동향 등의플러그인을설치하지않아도웹브라우저에서동영상을볼수있다. 현재웹브 라우저외에도이메일클라이언트, 그래픽소프트웨어, 미디어플레이어, 소프트개발 등의많은응용프로그램에서플러그인이사용되고있다. (2) HTML5 의등장이모바일기반웹환경에미치는영향 전세계모바일브라우저의시장점유율은데스크톱브라우저에비해순위변동이빠르게이루어지고있다는특징을가진다. 2011년 2월기준으로모바일브라우저의시장점유율이오페라 21.2%, 아이폰 18.1%, 노키아 15.8%, 안드로이드 14.7%, 블랙베리 14.4% 로나타났다. 1년전 (2010. 2월 ) 과비교해볼때구글의안드로이드브라우저가 10%p 가량점유율이상승하는등의약진이두드러진다. StatCounter Global Stats(2011b) 브라우저가 HTML5 를얼마나지원하는지그수준을평가하는 The HTML5 TEST 의결과에따르면, 모바일브라우저의경우블랙베리가 233 점으로가장높고, 애플 아이패드가 206 점, 애플아이폰이 195 점, 구글안드로이드가 182 점의순서로나타났다.
이처럼데스크톱에비해모바일브라우저가전반적으로 HTML5를잘지원하는것은주요모바일브라우저들이사용중인브라우저엔진의종류와관련이있다. 오페라에는프레스토 (Presto) 엔진이, 안드로이드와 ios에는오픈소스인웹키트 (Webkit) 엔진이탑재되어있는데, 이엔진들은모두 Acid3( 웹브라우저가웹표준을준수하는수준평가 ) 에서만점을기록했다. 반면, 마이크로소프트 IE 8.0은트라이던트 (Trident) 브라우저엔진을사용하는데, 이것은 Acid2 테스트를통과한수준으로 IE 9.0 버전에이르러서야 HTML5를어느정도지원할것으로예상된다. 자료 : The HTML5 TEST(http://beta.html5test.com/results.html) HTML5가모바일웹환경에미치는영향은데스크톱의웹환경에서보다훨씬강력하다. 모바일은작은스크린사이즈, 적은스토리지용량, 느린컴퓨팅속도, 불편한인풋방식, 망사용에대한비용방식등웹사용에있어서데스크톱환경에비해상당히제한적인상황에있다. HTML5는앞서언급한바와같이 Canvas/SVG, Web GL 지원을통해모바일웹환경에서 2D, 3D 그래픽을구현할수있고, 별도의 SW가없어도 Audio 및 Video 기능을재생할수있다. 이외에도 GPS가없어도위치정보를
동향 사용하고 (Geolocation), 오프라인에서도데이터를볼수있으며 (Offline Web Apps), 클라이언트브라우저에데이터를저장할수있는버퍼를마련하고 (Web Storage), 웹의 P2P 서비스방식처럼양방향통신기능을제공 (Web Socket) 하는등많은변화를가능케한다. 또한 HTML5는강력한웹폼과타입속성의등장으로웹개발방식을모바일에서도사용할수있게하였다. 5. 결어 웹기반애플리케이션인구글닥스 (Google Docs) 22) 와오프라인에서도구동되는지메일 (Gmail) 등 HTML5가구현하는웹환경이사용자들의웹서비스 UX에직접적인영향을줌에따라 HTML5에대한관심이점차높아지고있다. 또한클라우드서비스와소셜기반의새로운웹서비스를계속출시중인구글이 HTML5를전략적으 로추진하는만큼, 23) 구글의사업전략과더불어 HTML5 기반의새로운웹환경에 대한관심도높아지고있다. HTML5의등장으로웹환경은빠르고, 정교하고, 편리한 UX를제공하는방향으로진화할것으로예상된다. HTML5를통해디바이스나플랫폼에따라플러그인이나소프트웨어를추가로설치해야하는번거로움도줄어들것이다. 지금의 HTML4.01을기반으로공고히형성되어있는데스크톱웹환경이개방적이고상호호환적인웹플랫폼환경으로변화하는것은, 이시장에많은이해당사자들이결부되어있는만큼많은시간이필요할것으로보인다. 더욱이글로벌 1위브라우저점유율을가진마이크로소프트의 HTML5에대한지원수준이낮고, 국제웹표준기구인 W3C가 HTML5의상용화에대해시기상조라는입장을보이고있다는점이이러한예측에힘을실어주고있다. 22) 구글닥스웹페이지 (docs.google.com) 에접속하여문서, 스프레드시트, 프리젠테이션, 그림등의 문서작업을수행하고 Gmail 계정에저장할수있음 23) zdnet.com(2010. 5. 19)
한편, HTML5가모바일웹환경에미치는영향은데스크톱웹환경에서보다훨씬강력하다. 모바일은제한적인 UI로인해데스크톱에비해제한적인웹환경을제공해왔는데, HTML5는그래픽, 미디어, 위치정보, 오프라인활용, 저장기능, 웹기반통신등많은기능들이별도의 SW 없이모바일에서이루어질수있는기반을마련하고있다. 이렇듯 HTML5가모바일환경에가져다주는이점이크기때문에, HTML5는모바일환경을중심으로서서히확산될것으로예상된다. 참고자료 윤석찬외 (2010), 실전 HTML5 가이드. InfoWorld (2010), How HTML5 will change the Web, 2010. 6. 23. K모바일 (2011. 1. 21), 모바일웹 & HTML5 하이브리드앱이노캠프 2011. StatCounter Global Stats (2011a), Top Five Browsers from Feb 10 to Feb 10, 2011. 3. StatCounter Global Stats (2011b), Top Nine Mobile Browsers from Feb 10 to Feb 10, 2011. 3. W3C (2010), HTML5 differences from HTML4, W3C Working Draft 19 October 2010, 2010. 10. 19. w3schools.com (2010), HTML5 New Elements. 디지털타임즈 (2010. 2. 7), HTML5, 플래시대체할까?. 지디넷코리아 (2010. 10. 8), W3C HTML5, 도입이르다 브라우저업체와노선차이. 지디넷코리 (2010. 3. 14), MS가 HTML5를팍팍밀어주는이유. 지디넷코리 (2011. 2. 15), W3C HTML5 표준, 2014년확정할것. zdnet.com (2010. 5. 19), Google I/O: Show kicks off with push for HTML5, browser computing.