동 향 제 23 권 5호 통권 504호 HTML5가 웹 환경에 미치는 영향 이 은 민 * 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) 가 다르게 제공되 * 정보통신정책연구원 동향분석실 전문연구원, ( XXXXXX, XXXXXXXXXX 1) 디지털타임즈(2010. 2. 7) 2) ZDnetKorea(2010. 3. 4) 3) 사용자 경험(User Experience): 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험 54
HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. 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의 설립취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드웹의 모든 잠재력을 이끌어 내는 것임 55
동 향 2.0 및 검색의 확장과 이를 통한 시멘틱 웹, 스마트폰 보급을 통해 대두된 모바일 웹 등으로 빠르게 변화했다. 이러한 상황에서 변화된 웹 환경의 다양한 애플리케이션을 구현하고 개발자들이 실질적으로 이용할 수 있는 프로그래밍 언어에 대한 필요성이 제기되었지만, W3C에서는 기존 HTML에 대한 개선 논의가 이루어지지 않았다. 오 히려 웹 페이지에 엄격한 문법을 적용하는 특징을 가진 웹 표준인 XHTML 6) 과 웹 페 이지의 표현 방식과 관련된 CSS3, 비동기 통신으로 클라이언트와 서버간 데이터 주 고 받는 AJAX 7) 등에 대한 논의가 강화되었다. [그림 1] HTML의 전개 과정 이후 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 56
HTML5가 웹 환경에 미치는 영향 필요성을 인정하여, 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) 57
동 향 안에서는 새로운 인코딩 방식이 제안되었고, 문서 형식에서 <!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) 58
HTML5가 웹 환경에 미치는 영향 Web Socket(서버 측의 프로세스와 직접적인 양방향 통신을 위한 API), Offline Web Application(인터넷 비지원 시 웹 애플리케이션 구동) 등의 다양한 API들이 지원되고 있다. <표 1> HTML5의 주요 특징과 세부 내용 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) 59
동 향 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%이라는 점에 주목할 만 하다. [그림 2] 상위 5대 데스크톱 브라우저 시장점유율 추이(2010. 2월~2011. 2월) 자료: StatCounter Global Stats(2011a) 브라우저가 HTML5를 얼마나 지원하는지 그 수준을 평가하는 The HTML5 TEST 의 결과에 따르면, 2011년 3월 기준 데스크톱 브라우저 중에는 구글 크롬이 282점으로 지원 수준이 가장 높고, 그 다음이 오페라, 애플, 모질라이며, 마이크로소 프트의 IE는 32점으로 가장 낮게 나타났다. 전 세계 브라우저 1위를 점유하고 있는 IE가 아직 HTML5에 대한 지원 수준이 낮은 것은, 데스크톱 환경에서는 HTML5의 확산이 빠르지 않을 것이라는 시사점을 제공한다. 60
HTML5가 웹 환경에 미치는 영향 [그림 3] 데스크톱 브라우저별 HTML5 지원 현황(2011년 3월 기준) 자료: The HTML5 TEST(http://beta.html5test.com/results.html) 한편, 데스크톱 브라우저에서는 HTML5의 등장이 플러그인(Plug-in) 21) 을 얼마나 대체할 것인지가 주요 이슈이다. HTML5를 이용하면 플래시나 퀵타임, 실버라이트 <표 2> 응용 프로그램과 플러그인의 예 구분 웹 브라우저 이메일 클라이언트 그래픽 소프트웨어 미디어 플레이어 플러그인의 역할 플러그인을 사용하여 동영상과 발표 포맷 재생함 EX) 플래시, 퀵타임, 실버라이트 플러그인을 이용하여 이메일을 암호화하고 암호를 풀어 해석함 EX) Pretty Good Privacy(PGP) 플러그인을 사용하여 파일 형식을 지원하고 그림을 처리 EX) 어도비 포토샵 플러그인을 사용하여 파일 형식을 지원하고 필터를 적용 EX) 푸바2000, 윈앰프, GStreamer, QCD, VST, XMMS 등 자료: 위키백과 21) 플러그인은 호스트 응응 프로그램과 서로 응답하는 프로그램으로 웹 브라우저가 표시할 수 없는 각종 형식의 파일을 표시하고, 구동되도록 하는 역할을 담당함 61
동 향 등의 플러그인을 설치하지 않아도 웹 브라우저에서 동영상을 볼 수 있다. 현재 웹 브 라우저 외에도 이메일 클라이언트, 그래픽 소프트웨어, 미디어 플레이어, 소프트 개발 등의 많은 응용 프로그램에서 플러그인이 사용되고 있다. (2) HTML5의 등장이 모바일 기반 웹 환경에 미치는 영향 전 세계 모바일 브라우저의 시장점유율은 데스크톱 브라우저에 비해 순위변동이 빠 르게 이루어지고 있다는 특징을 가진다. 2011년 2월 기준으로 모바일 브라우저의 시 장점유율이 오페라 21.2%, 아이폰 18.1%, 노키아 15.8%, 안드로이드 14.7%, 블랙베 리 14.4%로 나타났다. 1년 전(2010. 2월)과 비교해볼 때 구글의 안드로이드 브라우저 가 10%p 가량 점유율이 상승하는 등의 약진이 두드러진다. [그림 4] 상위 9대 모바일 브라우저 시장점유율 추이(2010. 2월~2011. 2월) StatCounter Global Stats(2011b) 브라우저가 HTML5를 얼마나 지원하는지 그 수준을 평가하는 The HTML5 TEST 의 결과에 따르면, 모바일 브라우저의 경우 블랙베리가 233점으로 가장 높고, 애플 아이패드가 206점, 애플 아이폰이 195점, 구글 안드로이드가 182점의 순서로 나타났다. 62
HTML5가 웹 환경에 미치는 영향 이처럼 데스크톱에 비해 모바일 브라우저가 전반적으로 HTML5를 잘 지원하는 것 은 주요 모바일 브라우저들이 사용 중인 브라우저 엔진의 종류와 관련이 있다. 오페라 에는 프레스토(Presto) 엔진이, 안드로이드와 ios에는 오픈 소스인 웹키트(Webkit) 엔진이 탑재되어 있는데, 이 엔진들은 모두 Acid3(웹 브라우저가 웹 표준을 준수하는 수 준 평가)에서 만점을 기록했다. 반면, 마이크로소프트 IE 8.0은 트라이던트(Trident) 브라우저 엔진을 사용하는데, 이것은 Acid2 테스트를 통과한 수준으로 IE 9.0 버전에 이르러서야 HTML5를 어느 정도 지원할 것으로 예상된다. [그림 5] 모바일 브라우저별 HTML5 지원 현황(2011년 3월 기준) 자료: The HTML5 TEST(http://beta.html5test.com/results.html) HTML5가 모바일 웹 환경에 미치는 영향은 데스크톱의 웹 환경에서보다 훨씬 강 력하다. 모바일은 작은 스크린 사이즈, 적은 스토리지 용량, 느린 컴퓨팅 속도, 불편한 인풋 방식, 망사용에 대한 비용 방식 등 웹 사용에 있어서 데스크톱 환경에 비해 상당 히 제한적인 상황에 있다. HTML5는 앞서 언급한 바와 같이 Canvas/SVG, Web GL 지원을 통해 모바일 웹 환경에서 2D, 3D 그래픽을 구현할 수 있고, 별도의 SW가 없 어도 Audio 및 Video 기능을 재생할 수 있다. 이외에도 GPS가 없어도 위치정보를 63
동 향 사용하고(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) 64
HTML5가 웹 환경에 미치는 영향 한편, 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. 65