HowFastAll

http://www.skyventure.co.kr/insight/web/view.asp?Num=17119&NSLT=Y


HTML5는 웹 표준 기구 W3C에서 만들고 있는 차세대 웹 표준안으로, 마이크로소프트, 모질라, 애플, 구글, 오페라 등 모든 웹 브라우저 벤더가 참여하고 있는 산업표준이다.

90년대 후반 브라우저 업체들간의 경쟁으로 비표준 tag남발

2004년부터 ‘플랫폼으로서의 웹’을 표방하며 등장한 웹2.0은 웹 자체를 소프트웨어로 보는 새로운 웹 애플리케이션의
개념을 정의하기에 이른다.


HTML5의 주요 기능

기존에 웹이 가지는 한계(비디오 재생을 위한 표준화된 방법 부재, 디바이스 액세스 및 멀티 태스킹 불가 등)를 극복하기 위해 HTML5가 제공할 수 대표적인 기능은 다음과 같이 정리될 수 있다.

▶ Canvas를 통한 그래픽 드로잉(drawing) 지원: Canvas element를 통해서 간단하게 web에서 비디오를 play하거나 제어할 수 있다. Javascript로 그림을 그리는 것이 가능해지는데, 기본적인 도형 드로잉 및 컬러링은 물론 게임까지 구현할 수 있다.

▶ Geolocation API 표준화: 장치 API와 브라우저 간에 인터페이스를 표준화하여 위치 정보를 브라우저에서 사용 가능하다. (웹 브라우저에서도 사용자의 현재 위치를 확인할 수 있다.)

▶ Video 코덱 표준화: 코덱이 표준화되면 별도의 동영상 플러그인이 필요 없다. 웹 상에서 바로 시청이 가능하기 때문에 개발자 입장에서 비디오 객체를 Javascript로 다룰 수 있게 되어 개발이 훨씬 수월해진다.

▶ Local Storage 지원: 구글 기어(Google Gear)와 비슷한 기능으로, 로컬 하드의 특정 영역에 DB형태로 저장과 이동이 가능하다. 웹 애플리케이션에서 오프라인 지원이 되기 때문에 인터넷이 끊겨도 기존에 수신한 메일 내용을 확인할 수 있다.

▶ Multi thread 지원: Web worker를 이용한 Multi thread를 지원하기 때문에 Task의 병렬처리가 가능해진다. 부드러운 UI 렌더링이나 백그라운드 프로세스를 이용한 로컬 데이터 업데이트 등의 효과를 기대할 수 있다.

이 외에도 많은 새로운 기능들로 더욱 Rich한 웹 애플리케이션 사용 경험을 제공하지만, 가장 화제가 되고 있는 HTML5의 특징은 별도의 플러그인 없이 웹 애플리케이션의 기능을 구현할 수 있다는 점이라고 할 수 있다. 유튜브가 등장한 이래 웹 상에 동영상 컨텐츠를 공유하고 감상하는 활동이 빈번해지면서 동영상은 이미 웹의 일부가 되었다고 말할 수 있다. 특히 플래시의 경우, 웹 상에서 구현 가능한 동영상 솔루션으로써 화려한 효과를 보여줄 수 있다는 점 때문에 가장 빈번하게 사용되어 왔지만 방대한 용량으로 인해 웹 사이트를 열 때마다 PC 속도가 느려진다거나 다운되는 등의 단점도 지적되어 왔다.

액티브X, 플래시, 실버라이트, 자바FX 등의 소프트웨어 개발사들이 제공하는 플러그인 기술을 이용하지 않고도 HTML5를 활용하여 동일한 기능을 웹 상에서 구현할 수 있다는 점에 주목해야 한다.




HTML5에 대한 업계 반응

올해 초 애플과 구글이 적극적으로 HTML5에 대한 지원의지를 밝히면서 HTML5는 세계 IT산업의 가장 중요한 키워드로 급부상했다. 또한 애플, 구글, MS, 모질라, 오페라와 같은 웹 브라우저 업체들간의 기술개발 경쟁이 치열해 지면서, HTML5 기술을 포함한 전체적인 웹 플랫폼 기술도 하루가 다르게 빠르게 발전하고 있다.

국내 최대 포털인 네이버가 단계적 플래시 사용 중단을 선언한 데 이어 정부가 HTML5 기반 웹 플랫폼 개발을 월드베스트소프트웨어 프로젝트 1차 과제에 포함하는 등 차세대 표준 대응 작업이 활발해지고 있다.

아이폰을 통해 스마트폰 신드롬을 일으킨 애플은 HTML5 표준 확산의 전도사 역할을 자처하고 나섰다. 애플은 이미 자사의 웹 브라우저인 '사파리'를 통해 가장 먼저 HTML5를 지원한 바 있다. 아이폰과 아이패드에서도 대표적인 플러그인 기술인 플래시 지원을 거부하면서 HTML5 사용을 적극적으로 장려하고 있으며, 전용 '쇼케이스' 사이트를 만들어 다양한 HTML5 결과물들을 소개하고 있다. 이 사이트에서는 HTML5 태그만으로 브라우저에서 비디오를 재생하는 방법, 화려한 디자인의 그래픽과 가상현실 이미지를 구현하는 법 등을 체험할 수 있다.

구글도 애플 이상으로 HTML5 지원에 적극적이다. 구글은 인터넷에 접속하지 않고도 웹 애플리케이션을 사용하는 '기어스(Gears)' 프로젝트 추진 도중에 이를 폐기하고 HTML5 확산에 집중했다. 웹 브라우저 '크롬'에 이어 검색서비스 첫 화면에도 HTML5를 도입했다.

어도비 플래시에 대한 대항마로 실버라이트를 개발한 마이크로소프트조차 최근 HTML5 지원을 선언해 대세를 형성하고 있다.

유튜브를 비롯한 인터넷 동영상 서비스의 가세도 잇따르고 있다. 플래시 기반의 동영상 공유 서비스를 제공하던 유튜브는 올 들어 HTML5를 활용한 동영상 서비스를 실험적으로 제공하고 있다. 경쟁사인 비메오도 스마트폰과 아이패드 등 시장을 겨냥해 HTML5 서비스를 도입한 데 이어 기존의 플래시 비중을 점차 줄여나간다는 계획을 밝혔다.

뉴욕타임스를 비롯해 타임워너 계열사 등을 상대로 동영상 서비스를 제공하는 브라이트커브 또한 동영상을 HTML5로 제공하기 시작했다. ABC, 폭스 뉴스 등 대형 미디어들도 이 같은 흐름에 동참하고 있다.

HTML5가 대세를 형성하면서 실제 웹 서비스에 HTML5 표준을 적용한 사례도 늘고 있다.온라인 이미지 편집사이트 다크룸은 HTML5 기술만을 활용해 웹에서 포토샵 수준의 사진 편집 기능을 활용할 수 있는 서비스를 선보였다. 태국 방콕에 본사를 둔 온라인쇼핑몰 리틀코기(LittleCoogie)는 HTML5만을 사용해 플래시와 대등한 기능의 쇼핑몰을 구축했다. 

HTML5와 모바일

▶ 모바일 시장의 중요성

2009년 말에 발표된 모건스탠리의 보고서에 따르면 향후 5년 내로 모바일을 통해 웹에 접속하는 사람들이 데스크톱 PC로 접속하는 사람보다 많아질 전망이라고 한다. 예전에는 주로 PC나 노트북을 이용해 웹의 다양한 서비스를 이용했지만, 스마트폰이 활성화 되면서 스마트폰을 이용한 인터넷 사용시간이 크게 증가하고 있다. 또한 아이패드 같은 태블릿 제품이 성공적으로 출시되면서 가까운 미래에는 스마트폰, 태블릿, e북 리더기 등 다양한 모바일 디바이스를 활용한 인터넷 사용이 더욱 증가할 것으로 예상된다.

<Global Mobile Data Traffic Growth, 출처: Cisco Visual Networking index>

▶ HTML5가 모바일 웹에서 갖는 의미

액티브X가 모바일 웹 브라우징의 최대 걸림돌이었다는 점에서 HTML5가 확산되면 휴대용 단말기를 통해서 웹을 즐기는 것도 더욱 용이해질 것으로 기대된다.

일단 모바일 기기에서 플래시를 구동하는 것부터가 기기 자원을 엄청나게 소모하며, 그 만큼 배터리 소모도 커질 수 밖에 없다. 3G 네트워크를 통해 인터넷에 접속할 경우 과도한 트래픽과 요금이 발생할 수도 있다. 애플의 아이폰과 아이패드가 플래시를 지원하지 않는 것도 이 같은 단점과 무관하지 않은 것으로 보인다. 기존의 경쟁 솔루션으로 마이크로소프트의 실버라이트가 있으나 플러그인이 갖는 한계는 있을 수밖에 없다.

하지만, HTML5를 사용하면 같은 기능을 구현할 때 HTML4에 비해 훨씬 적은 자바스크립트 코드로 구현이 가능하다. 따라서 기본적으로 웹 서비스 로딩속도가 빨라지며 이러한 특성은 특히 네트워크 속도에 예민한 모바일 환경에서 매우 중요한 요소로 작용한다. 웹 콘텐츠 용량이 줄면 스마트폰이나 태블릿PC 등 단말기가 받는 부하가 줄어 자연스럽게 배터리 용량이나 처리속도 면에서의 효율은 높아진다.

W3C에서 표준화 작업에 참여 중인 한국전자통신연구원(ETRI) 이원석 박사는 "HTML5를 사용하면 웹 로딩 속도가 종전보다 15%정도 빨라진다"라며 "이러한 특성은 네트워크 속도가 중시되는 모바일 인터넷 환경에서 큰 의미를 갖는다"라고 밝혔다.

▶ 모바일 애플리케이션(네이티브 앱)의 대안 HTML5

현재 스마트폰 시장은 서로 다른 OS를 가진 기기들이 다투고 있다. 애플의 iOS, 구글의 안드로이드, 블랙베리 OS, 노키아 심비안 & Maemo, Windows Mobile 과 Windows Phone 7까지 데스크탑 OS 환경과는 사뭇 다른 양상을 보이고 있다. 각각의 OS 에 맞는 어플리케이션 (Native App: 네이티브 앱) 을 작성하기 위해서는 전혀 다른 언어/플랫폼들을 이해해야 한다. 대표적으로 애플 iOS 의 경우 Objective-C와 CocoaTouch 를, 안드로이드는 Java 와 안드로이드 프레임워크들을 배워야 한다.

불가피하게 모바일 기반의 서비스를 제공해야 하는 회사들은 선택을 하거나, 순위를 두어야 한다. 모든 플랫폼용 네이티브 앱을 만들기에는 투자비용이 너무 크기 때문인데, 아이폰이 국내에 출시된 후 많은 업체들이 아이폰용 앱을 앞다투어 출시했지만, 올해 들어서는 다양한 안드로이드 폰들이 출시되면서 안드로이드용 앱까지 한 번 더 개발을 진행하고 있다. 자원이 충분한 회사라면 각각의 플랫폼용으로 만드는 게 가능하겠지만, 그렇지 못한 신생 기업이나, 중소기업에서는 어려운 선택이 아닐 수 없다.

구글의 부사장인 Vic Gundotra 는 작년 한 인터뷰에서 다음과 같이 말했다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s App Store to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP

인터넷의 거물 구글 조차도 모든 모바일 플랫폼용 앱을 만들어 지원할 여력이 없다는 것인데, 이는 많은 타 IT업체들에게도 적용된다고 볼 수 있다. 즉, 여러 앱스토어에 대응하기보다는 HTML5를 활용한 모바일 웹 앱으로 동시에 이종 디바이스를 지원하는 것이 보다 경제적이라는 것이다.

우리나라 정부의 입장도 이와 유사한 방향성을 보이고 있다. 2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호” 의 내용은 아래와 같다.

「전자정부서비스 호환성 준수지침」개정 고시 1. 개정이유 모바일 전자정부 서비스 제공 시 국민들의 보편적 접근성 제고 등을 위하여 국가기관, 지방자치단체, 공공기관이 준수해야 할 사항을 추가로 규정 2. 추진경위 <생략> 3. 주요 개정내용 ○ 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고 - 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용 ○ 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련 • 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공 • 국제표준화기구에서 제공하는 표준 사용 의무화 • 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력

전자정부서비스 역시 다양한 스마트폰 유저들이 동등한 혜택을 받을 수 있도록 모바일 웹 방식을 권장하고 있는 것이다.

다시 말해 HTML5는 Web App.을 만들어 다양한 네이티브 플랫폼들을 동시에 지원하기 위한 최적의 솔루션이라고 할 수 있다.

Web App.이란, 웹 기술을 이용하여 만들어진 어플리케이션을 말한다. 즉, 컨텐츠 리딩을 위해 사용되던 단방향성 웹사이트와 달리 사용자와의 Interaction을 통하여 데스크탑에서의 Application 같은 사용성을 주는 앱을 의미하며, 위젯이라는 단어도 종종 사용되는데 웹 앱은 이 위젯을 포함한 좀 더 넓은 범위로 이해할 수 있다. HTML5 를 이용해서 만들어진 Web App 과 iPhone/Android 환경에서의 Native App 을 비교해 놓은 표가 있어서 소개해보고자 한다.

1) PhoneGap 등 Hybrid App Framework 사용하여 앱 만든 후 등록 시 필요함
2) Phonegap, QuickConnect를 통하여 카메라/연락처 정보 등 사용가능 - 따로 진행중인 W3C DAP, OMTP BONDI , JIL 등의 스펙으로 디바이스 접근가능(차후)
<HTML5를 이용해서 만들어진 Web App과 iPhone/Android 환경에서의 Native App 비교,
출처: Guru’s Blog, HTML5 on Mobile>

모바일 환경에서 유용하게 활용 가능한 대표적인 태그로는

• Offline 지원: LocalStorage, Web Database, App Cache
• 미디어 처리: Video, Audio, Canvas
• 입력 지원: Advanced Forms
• 위치 정보: GeoLocation (연계표준) 등이 있다.

특히, Offline 지원의 경우 항상 인터넷에 연결되어 있는 데스크탑과 달리 모바일 환경은 꼭 3G 와 같은 네트웍에 항시 연결되어있지 않은 Wifi 전용 기기(iPod Touch , iPad)도 있으며, 3G 환경이라 할지라도 네트웍 트래픽을 최소화 하는 것이 아주 중요하다.

다음은 Google I/O에서 공개한 안드로이드 기반의 HTML5 기능 시연 장면이다.

<안드로이드 기반의 HTML5 기능 시연 장면, 출처: Google I/O 2010, Keynote Day 2 Android Demo>

결언

업계에서는 HTML5라는 웹 환경이 거스를 수 없는 흐름이 되었고, 국내 인터넷 환경은 액티브X와 플래시 등 플러그인 기술에 대한 의존도가 높기 때문에 차세대 웹 환경을 주도하기 위해서는 혁신 노력이 요구된다고 강조한다. 하지만 일각에서는 HTML5가 완전히 새로운 기술은 아니며, 대중화하더라도 플러그인 기술을 완전히 대체하지는 못할 것이라는 반론도 나온다. 완전한 표준으로 정착되기까지 상당한 시일이 걸릴 것이라는 지적도 여전히 무시하지 못할 의견이다.

그러나, 적어도 HTML5가 가져오는 변화는 이미 시작되었고 이를 피할 수 있는 방법은 없어 보인다. 변화를 올바로 이해하기 위한 시행착오의 시간이 필요하겠지만, 발 빠르게 HTML5가 몰고 올 변화에 대한 적응을 시작할 필요는 있다고 생각한다. 무엇보다, IT산업의 주류로 떠오르고 있는 모바일 시장에서 HTML5의 활용도를 극대화하기 위한 노력이 선행된다면 진정한 Rich 웹 애플리케이션 사용 경험 제공이 가능할 것이다.