본 글은 구글이 운영하고 있는 HTML5ROCKS (HTML5 개발자 사이트)에 올라온 Best Practices for a Faster Web App with HTML5를 기반으로 번역하여 정리한 것이다원문과 거의 비슷하지만 완전히 똑같이 번역한 것은 아니다.

원문http://www.html5rocks.com/tutorials/speed/quick/

  

n  소개 

HTML5의 많은 부분은 지금까지 자바스크립트 라이브러리로 처리했던 다양한 기술과 기능에 대한 네이티브 브라우저 기능을 제공하는 것이다이러한 기능을 사용하는 것은 처리속도를 훨씬 빠르게 만들 수 있다본 튜터리얼에서는 어떻게 HTML5 CSS3를 이용하여 반응이 빠른 애플리케이션을 개발할 수 있는지에 중점을 둔다.

 

n  1: 쿠키 대신 웹 저장소를 사용하라

쿠키는 지금까지 사용자 데이터를 식별하기 위해 지금까지 사용되어 왔지만 이는 심각한 단점들을 가지고 있었다가장 큰 결점은 모든 쿠키 데이터가 모든 HTTP 헤더에 추가된다는 것이다이는 성능에 커다란 악영향을 줄 수 있으며특히 XHR을 사용하는 경우에는 더욱 문제가 될 수 있다그래서 모범사례는 쿠키 크기를 줄이는 것이다. HTML5에서는 이보다 더 효과적인 방법이 있는데이는 쿠키 대신 sessionStorage localStorage를 사용하는 것이다.

 

// if localStorage is present, use that

if (('localStorage' in window) && window.localStorage !== null) {

 

  // easy object property API

  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

 

} else {

 

  // without sessionStorage we'll have to use a far-future cookie

  //   with document.cookie's awkward API :(

  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;

}

 

 

n  2: 자바스크립트 애니메이션 대신 CSS Transitions를 사용하라 

CSS Transitions는 두 상태간의 아주 매력적인 시각 효과를 준다대부분의 스타일 프로퍼티는 택스트 그림자(text-shadow), 위치(position), 배경 또는 색상 등에 대한 처리로 변화될 수 있다. “:hover” 또는 HTML5 , “:invalid”과 “:valid”와 같이 pseudo-selector states 변화하여효과를   있다.

 

div.box {

  left: 40px; 

  -webkit-transition: all 0.3s ease-out;

     -moz-transition: all 0.3s ease-out; 

       -o-transition: all 0.3s ease-out; 

          transition: all 0.3s ease-out;

}

div.box.totheleft { left: 0px; }

div.box.totheright { left: 80px; }

 

“totheleft”와 “totheright” 클래스 토글링(toggling)을 추가하여 box를 이동할 수 있다이 코드의양을 자바스크립트 애니메이션 라이브러리와 비교해 보자명확히 브라우저에 보내지는 바이트 수는 CSS 기반 애니메이션을 사용할 때가 훨씬 적다추가적으로 GPU 레벨 가속화를 이용하면 이러한 시각 효과는 아주 부드럽게 처리될 것이다.

 

 

n  3: 서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라 

Web SQL Database IndexedDB는 클라이언트 측의 데이터베이스 기능이다. XHR 또는 폼 제출(form submission)를 이용해 데이터를 서버에 포스팅하는 것이 일반적인 패턴이지만이러한 방식 대신 클라이언트 측의 데이터베이스를 사용할 수 있다. HTTP 요청을 줄이는 것이 모든 성능 엔지니어의 1순위 목표이다따라서 데이터베이스를 이용하여 서버와의 통신을 많이 줄일 수 있다. localStorage 그리고 sessionStorage는 특정 사이트의 각 단계별 입력 정보를 저장하는데 활용할 수 있으며이는 클라이언트 측의 데이터베이스 API 보다 훨씬 빠르다.

예를 들면만일 수백개의 메시지를 갖은 데이터 그리드 컴포넌트 또는 수신함이 있을 때로컬 데이터베이스 안에 데이터 저장을 한 것은 사용자가 검색필터링정렬 등을 원할 때HTTP로 서버와 통신하는 것을 크게 줄일 수 있다.

좀더 자세히 이해하고 싶으면 Web SQL Database Tutorial을 참고해라

 

n  4: 자바스크립트 개선은 상당한 성능 개선을 제공한다 

자바스크립티 1.6에는 Array prototype에 대한 많은 메소드가 추가되었으며, 이들은 지금 IE를 제외한 대부분의 브라우저에서 사용가능하다.


// give me a new array of all values multiplied by 10

[5,6,7,8,900].map(function(value){ return value*10; }); // [50,60,70,80,9000]

  

// create links to specs and drop them into #links

['html5','css3','webgl'].forEach(function(value){

  var linksList = document.querySelector('#links');

  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');

  linksList.innerHTML +=  newLink;

}); 

 

// Return a new array of all mathematical constants under 2

[3.14, 2.718, 1.618].filter(function(number){

  return number < 2;

});

// [1.618]

 

// You can also use these extras on other collections like nodeLists

[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem,i){

  localStorage['bucket' + i] = elem.getAttribute('data-bucket');

})


대부분의 경우 이들 Native 메소드를 사용하는 것은 전형적인 for 루프를 사용하는 것 보다 훨씬빠르다: for ( var i = 0; len = arr.length; i < len; i++ ).

Native JSON 파싱( JSON.parse() ) json2.js 파일을 대체한다. Native JSON은 외부의 스크립트를 사용하는 것보다 훨씬 빠르고 안전하다이미 IE8, 오페라 10.50, 파이어폭스 3.5, 사파리4.0.3 그리고 크롬에서 이미 제공한다.

 

n  5: 라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라 

2년전에 워드프레스(Wordpress는 워드프레스 터보(Wordpress Turbo)라는 기능을 추가하기 위해 구글 기어스(Google Gears)를 사용했다이는 속도를 높이기 위해 관리 패털의 많은 자원들을 로컬에 캐슁하였다우리는 이와 같은 기능을 HTML5의 애플리케이션 캐쉬(applicationCache) cache.manifest로 실현할 수 있다.

애플리케이션 캐쉬는 Expires 헤더를 설정하여 사용하는 것보다 좀더 많은 장점이 있다그리고 이러한 방법은 캐슁할 파일을 명확히 정리하여 사용할 수 있고따라서 브라우저가 특정자원이 사용되기 전에 미리 캐슁할 수 있기 때문에 실행 속도를 최적화 시킬 수 있다.

사이트의 구조를 탬플릿으로 생각해 보자이는 HTML의 구조는 그대로 유지하고 변경 가능한 데이터를 포함한다애플리케이션 캐쉬를 이용해서 사이트를 구성하는 HTML 템플릿들을 처리하고,  cache.manifest를 통해서 마크업을 캐슁한 후 컨텐츠의 업데이트는 JSON을 받아서 처리한다이와 같은 모델은 아이폰이나 안드로이드 Native 뉴스 앱이 하는 것과 아주 유사하다.

 이에 대한 가이드는 application cache tutorial을 참조해라.

  

n  6: 비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라 

가장 앞서고 있는 브라우저에서 많은 시각적 처리는 GPU-레벨 가속기능을 최대한 활동할 수 있다. GPU-레벨 가속기능은 고도의 동적 처리를 자연스럽게 처리하는데이는 Firefox Minefield IE9 그리고 사파리5에서 지원한다크롬은 현재 3D 변환 기능과 하드웨어 가속 기능을 윈도우 버전에서만 지원하며조만간 다른 플랫폼에서도 지원할 예정이다.

GPU 가속기능은 단지 아주 제한된 조건하에서만 동작한다그러나 3D 변환과 애니메이션 투명도는 이러한 기능을 기동시키기 위한 가장 일반적인 방법이다조심스럽게 이러한 기능을 켜는 방법은 아래와 같다. 

.hwaccel {  -webkit-transform: translateZ(0); }

 

그렇지만보장할 수는 없다. :)

지원되는 하드웨어 가속기능으로 애니메이션 변환(animated translation), 회전(rotation), 크기조정(scaling), 투명도는 확실히 부드럽게 표현될 것이다이들 효과는 층별 컨텐츠를 다시 그릴 필요없이 GPU로 직접 처리되는 장점을 가질 것이다그러나 페이지의 레이아웃에 영향을 주는 모든 프로퍼티들은 아직은 상대적으로 느리게 보일 것이다.

  

n  7: CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라 

웹워커는 두가지 중요한 장점을 갖는다. 1) 속도가 빨라진다. 2) 태스크들을 수행하는 동안에도 브라우저는 반응할 수 있는 상황을 유지한다.  워커에 대한 데모는 HTML5 Slide Deck을 참고해라

웹워커를 사용하기에 적합한 몇몇 상황들은 아래와 같다. 

-       긴 문서의 테스트 포맷팅(Text formatting of a long document)

-       문법 강조(Syntax highlighting)

-       이미지 처리(Image processing)

-       이미지 합성(Image synthesis)

-       대량의 배열 처리(Processing large arrays)

 

 

n  8: HTML5 폼 애트리뷰트와 Input 타입 

HTML5에는 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color 등 새로운 input type들을 추가됐다현재까지는 이들 기능지원에 대한 브라우저간의 편차가 크며단지 오페라만 대부분 기능을 지원하고 있다따라서 이러한 기능을 사용할 때 접속하는 브라우저의 지원여부를 확인해서 절절한 처리를 해주어야 한다.

추가적으로 HTML5에 폼과 관련하여 입력 폼의 기본값을 사용자에게 흐릿하게 보여주는placeholder와 페이지를 로딩한 후 입력박스에 자동으로 커서를 위치시키는 autofocus 애트리뷰트가 추가되었다또한 사용자 입력 값의 검증 기능과 관련해서 사용자가 입력을 했는지를 검증해 주는 required 애트리뷰트 그리고 입력 값 검증을 위한 패턴을 표현하는 pattern 애트리뷰트가 추가되었다. Pattern 애트리뷰트에 자바스크립트 정규식으로 패턴을 정의하면 브라우저가 사용자가 입력한 값이 정의된 패턴에 맞는지 검증을 자동으로 해준다예를들어 이메일 주소 같은 것을 이러한 pattern 애트리뷰트를 이용해서 쉽게 검증할 수 있다이러한 기능을 사용하면 자바스크립트로 코드를 상당히 줄일 수 있으며 브라우저 내장된 기능으로 처리하기 때문에 속도가 빠르다.

이와 관련된 데모는 HTML5 Slide deck을 참고해라.

 

n  9: 이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라 

CSS3는 지금까지 정밀한 시각적 디자인 표현을 위해 사용하던 이미지 처리들을 대체할 수 있는다양한 종류의 기능을 제공한다. 2K 크기의 이미지를 100 Byte CSS로 대체하는 것은 큰 장점이다물론 추가적인 HTTP 요청이 필요없는 장점도 생긴다활용하기 좋은 CSS의 몇가지 주요 효과들은 아래와 같다. 

l  Linear and radial gradients

l  Border-radius for rounded corners

l  Box-shadow for drop shadows and glow

l  RGBA for alpha opacity

l  Transforms for rotation

l  CSS masks

 

예를들어 gradients를 이용해서 아주 우아한 버튼을 만들 수 있으며 이미지로 처리하던 다양한 효과들을 대체할 수 있다이와 같은 기능들은 대부분의 브라우저들이 안정적으로 지원하고 있다또한 이런 기능을 지원하는 않는 브라우저에 대한 처리는 Modernizr와 같은 라이브러리를 이용하여 체크하고 대응되는 이미지를 준비하여 처리하면 된다.

 

n  10: XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓 

웹소켓은 Comet의 인기가 급증하는 것에 대응해서 설계되었다지금은 XHR 모델 기반의Comet 대신에 웹소켓을 사용하는 것이 좋다. 

웹소켓은 간결한 프레임을 사용하기 때문에 XHR 보다 훨씬 적은 bandwidth를 소비한다몇몇 리포트에 따르면 유선 환경에서 35% 정도의 바이트가 줄어든다고 한다추가적으로 메시지를 전송할 때 큰 크기를 대상으로 하면 성능의 차이가 훨씬더 명확해진다시험에서 XHR이 웹소켓보다 3500% 정도의 전송 시간이 더 필요한 것으로 평가되었다최근에 에릭슨 실험실은 웹소켓의 시험을 통해 HTTP 기반의 ping 시간이 웹소켓에 비해 3 ~ 5배 정도 길다는 것을 확인했다따라서 에릭슨에서는 웹소켓이 실시간 애플리케이션에 확실히 더 적절하다는 것으로 결론을 내렸다.

 

n  추가적인 자원들 

성능측정을 위해 파이어폭스의 Page Speed 플러그인그리고 YSlow를 사용할 수 있다추가적으로 Speed Tracker for Chrome DynaTrace Ajax for IE는 좀더 세부적인 분석 정보를 제공한다.

Chrome Developer Tools에 대한 가이드 Resource Tab과 조만간 출시될 새로운 Audits panel을 통해 제공할 것이다.

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. Acompanhantes 2012.08.25 04:08 신고  댓글주소  수정/삭제  댓글쓰기

    나는, 아주 중요한 문서를 여러분의 게시물을 읽고, 나는 더 자주 다른 게시물을 추적할 것입니다, 감사합니다

  3. can ho saigon pearl 2012.09.16 02:00 신고  댓글주소  수정/삭제  댓글쓰기

    에라잇 르것다 섬세한 조각씨하나만큼은대하~ 단!

  4. www.roomdividersco.com 2012.11.20 15:50 신고  댓글주소  수정/삭제  댓글쓰기

    항상 좋은 글들 잘 보고 있습니다. 세미나 또 기획중에 있습니다. 더 많은 것 보여주십시오. ^^ 한번 찾아뵐게요..

  5. frontdoorshq.com 2012.12.04 02:42 신고  댓글주소  수정/삭제  댓글쓰기

    브루가가들조각했는데 실수을리는없.....에라잇 르것다 섬세한 조각씨하나만큼은대하~ 단!

  6. chuyen phat nhanh 2012.12.24 13:01 신고  댓글주소  수정/삭제  댓글쓰기

    매우 유용 문서를 참조하십시오. 제가 HTML5을 이해 찾고 있는데, 그것은 많은 사람들이 흥미있다

  7. áo khoác nữ 2012.12.24 23:04 신고  댓글주소  수정/삭제  댓글쓰기

    HTML5는 재미 배웁니다. 많은 기능과 부하 매우 빠른 속도가

  8. Hombre Timberland 2012.12.25 16:05 신고  댓글주소  수정/삭제  댓글쓰기

    La chanteuse américaine Shania Twain s'est mariée, http://www.timberlandbaratas.com Mujer Timberland, à Puerto Rico, http://www.timberlandbaratas.com outlet timberland, samedi, http://www.timberlandbaratas.com timberland, rapporte le site spécialisé dans les célébrités TMZ, http://www.timberlandbaratas.com botas timberland.com, http://www.timberlandbaratas.com zapatos timberland, le jour-même, http://www.timberlandbaratas.com barato timberland. People David Arquette en désintoxication People Nouvel album de Lady Gaga : 23 maiRelated articles:


    http://iyoonsmom.tistory.com/9715 The business district is not far from the ocean view hotels and transportation to get into the city

    http://mizycenter.tistory.com/180 Le site "Créateurs de possibles"

  9. ssg real 2013.01.20 22:52 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요, 좋은 글 잘 봤습니다 ^^

  10. Iconia PC tablet dengan Windows 8 2013.02.18 19:54 신고  댓글주소  수정/삭제  댓글쓰기

    クをわざわざ貼らない」のではなく、リンクを

  11. Cipto Junaedy 2013.02.18 19:55 신고  댓글주소  수정/삭제  댓글쓰기

    けの場合がトラックバックススパムというようですが

  12. Cipto Junaedy ebook 2013.03.16 11:01 신고  댓글주소  수정/삭제  댓글쓰기

    큐브를 테스트해봤더니 ios에서는 구현이 되고 안드로이드 디바이스에서는 z 값 표현이 안되더라구요..

  13. percakapan bahasa inggris 2013.03.16 11:04 신고  댓글주소  수정/삭제  댓글쓰기

    html5 와 css3 이용해서 모바일웹 프로젝트를 진행중인데요..

  14. 2013.06.12 17:59  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  15. critical review essay 2014.01.12 23:48 신고  댓글주소  수정/삭제  댓글쓰기

    빛은 샘플로 가득 베트 통해 빛난다.시료에 의해 흡수되는 빛의 양을 측정한다. 화합물은 다양한 스펙트럼 범위의 광을 흡수하기 때문에, 오른쪽 파장은 분석을 위해 설정되어야한다.

  16. penjualan online 2014.01.30 16:56 신고  댓글주소  수정/삭제  댓글쓰기

    비밀번호 비밀글

  17. Grosir Sprei Murah Berkualitas 2014.04.02 18:17 신고  댓글주소  수정/삭제  댓글쓰기

    html5 와 css3 이용해서 모바일웹 프로젝트를 진행중인데요..

  18. acompanhantes sp 2014.04.30 06:32 신고  댓글주소  수정/삭제  댓글쓰기

    디바이스에서는 z 값 표현이 안되더라구요

  19. ssg tower 2014.05.09 21:00 신고  댓글주소  수정/삭제  댓글쓰기

    구현이 되고 안드로이드 디바이스에서는 z 값 표현이

  20. pasang iklan gratis 2015.02.03 11:44 신고  댓글주소  수정/삭제  댓글쓰기

    유용한 자습서를 제공해 주셔서 감사합니다.

조금전 2010 모바일 콘텐츠 컨퍼런스에서 발표했던 자료이다. 이 자료를 준비하면서 모건스텐리의 인터넷 트랜드 리포트를 찹조했는데 모바일 시대가 빠르게 오고 있음을 다시금 느낄 수 있었다. 그리고 웹킷으로 정리가 되고 있는 모바일 웹 플랫폼 환경에서 HTML5 기반 웹 애플리케이션의 가능성은 충분하다는 생각이 들었다.

HTML5 and the Future of the Mobile Web
View more presentations from wonsuk73.

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. 민원기 2010.09.01 08:06 신고  댓글주소  수정/삭제  댓글쓰기

    잘 봤습니다. 감사합니다.

  2. partir 2010.09.01 16:26 신고  댓글주소  수정/삭제  댓글쓰기

    어제 발표하신 내용 잘 들었습니다.그리고 자료 공유 해 주셔서 감사합니다.

  3. 김동환 2010.09.01 21:22 신고  댓글주소  수정/삭제  댓글쓰기

    HTML5에 대해서 유익한 정보 설명해주신 점 감사합니다.
    어제 마지막에 트윗 팔로윙 하겠다고 한 젊은이 입니다:)

  4. 강성일 2011.07.22 10:12 신고  댓글주소  수정/삭제  댓글쓰기

    자료 잘보았습니다. 저는 HTTP기반 HTML5 미디어 스트리밍에 관심이 있습니다.

  5. visit this url 2012.03.28 14:48 신고  댓글주소  수정/삭제  댓글쓰기

    동차키와 대을안지 네..참로우리집 22층인 이미엘리베이터는 내려고있..

  6. click here 2012.12.04 02:10 신고  댓글주소  수정/삭제  댓글쓰기

    어제는 수고 많으셨습니다.
    좋은 주말되시기 바랍니다. ^^
    활발한 활동이 있는 html5 KIG curtains for french doors 가 되기를 기대합니다. ^^

  7. acompanhantes em sp 2014.04.30 06:37 신고  댓글주소  수정/삭제  댓글쓰기

    자료 공유 해 주셔서 감사합니다.

지난 글 "HTML5 표준 범위와 W3C HTML WG 표준화 현황"에서 HTML5의 표준 범위에 대해서설명 하면서 Device API에 대한 중요성을 설명하였는데, 지난 7월 14일~16일까지 런던에서 W3C DAP(Device APIs and Policy) WG 회의가 있었다. 필자도 DAP WG에서 에디터를 맡고 있어 회의에 참석하였으며 이에 대한 주요한 내용을 정리해 본다.

기존 웹 애플리케이션의 한계: 음성인식 검색, 비디오 캡쳐 등 구현 불가 
현재 다음과 구글이 제공하는 Native 스마트폰 애플리케이션은 음성인식 기반 인터넷 검색 기능을 제공하고 있으며, 구글의 스마트TV에서도 음성인식 기반의 콘텐츠 검색을 지원할 예정이다. 또한 스마트폰에서 카메라 애플리케이션이나 음악을 녹음해서 이를 기반으로 해당 노래에 대한 정보를 찾아주는 애플리케이션 등은 상당히 유용하고 인기있는 애플리케이션이다. 그러나 지금까지 표준기반의 웹 애플리케이션으로는 이러한 기능 개발이 불가능했다. 기본적으로 마이크나 비디오 카메라를 제어하기 위한 표준화된 자바스크립트 API가 존재하지 않았으며, 또한 HTML에서 이러한 디바이스들 연결하여 사용할 수 있도록 해주는 마크업이 존재하지 않았기 때문이다. 


Device API 개념 소개
Device API 표준은 웹 애플리케이션이 디바이스의 자원들 (GPS, 센서주소록일정카메라 제어배터리 정보갤러리파일 시스템 등)을 접근 가능하게 하는 API 표준으로, 이러한 표준을 이용하면 웹 애플리케이션이 사진이나 동영상 캡처 등의 기능을 자연스럽게 지원할 수 있다. 아래의 그림은 Device API의 개념을 보여준다.



먼저 현재 DAP WG에서 적극적으로 개발 중인 API 표준은 아래와 같이 정리해 볼 수 있으며, 이러한 표준 이외에도 보안과 Privacy에 대한 표준 개발을 진행하고 있다.

API 

설 명

개발주체

Calendar

디바이스의 일정 정보에 접근하기 위한 API

프랑스 텔레콤, RIM

Contact

디바이스의 주소록 정보에 접근하기 위한API

프랑스 텔레콤

Media Capture

디바이스 내 오디오, 이미지, 비디오 기능에 접근하기 위한 API

인텔, 노키아, 도이치 텔레콤

Messaging

디바이스의 SMS, MMS, email 기능에 접근하기 위한 API

텔레포니카, 오페라, 에릭슨

System Information

디바이스의 기본적인 속성에 대한 API(배터리 용량, 네트워크 대역폭, CPU부하, 저장 용량, /출력 기기)

인텔, 오페라

Gallery

디바이스 내에 있는 미디어 갤러리(media gallery)에 접근하는 API.

ETRI

Powerbox

사용자 개인 리소스를 브라우저에서 요청하기 위한 웹 기반 전달 방식

구글

Application Launcher

디바이스에 인스톨된 어플리케이션(Native Application)에 접근하기 위한 API

ETRI




W3C DAP WG의 Device API 표준 개발 전략
DAP WG에서 지금까지 Device API에 대한 보안 및 Privacy 이슈가 아직 견고하게 정리가 되지 않은 상황이기 때문에 현재 개발하고 있는 표준 API들을 Read 기능과 Write 기능을 분리하여 별도의 표준으로 개발하기로 하였다. 이렇게한 이유는 표준 개발이 가능한 기능은 최대한 빠르게 시장에 제공하기 위함이다. 따라서 Device API에 포함된 표준들은 보안 및 Privacy 이슈가 상대적으로 적은 Read 기능에 대한 표준들이 빠르게 표준화가 이루어질 것이며, 그후 Write 기능에 대한 표준들이 개발될 예정이다.


Device API 표준과 HTML5 마크업 관계 정립
DAP WG에서 Device API 표준과 HTML5의 마크업 간의 조화를 이루기 위한 노력을 진행하고 있다. 이는 웹 애플리케이션이 보다 자유롭고 쉽게 디바이스의 자원들을 처리할 수 있는 방법들을 제공한다는 의미에서 상당히 중요한 이슈이다. 예로 이번 회의에서 초안이 정리된  HTML Media Capture 표준을 볼 수 있다. 본 표준은 Media Capture API와 별개로 HTML 마크업을 이용해서 디바이스의 자원과 연동하기 위한 기능을 정의하고 있다. HTML Media Capture 표준에 대해 이번회의에서 정리된 주요 내용은 아래와 같다. HTML의 <input>에 accept 애트리뷰트를 이용하여 어떤 Device에서 어떤 타입의 미디어를 받아들일지 정의하는 것이다. 즉, 카메라를 이용해서 image를 입력으로 받겠다고 정의를 한 것다.

<input type="file" accept="image/*; capture=camera">

* Note: capture의 값으로 camera, camcorder, microphone, filesystem이 올 수 있음.

아래의 예는 HTML Media Capture 표준을 이용해서 구현할 수 있는 Media Caputure File Picker에 대한 랜더링 예를 보여준다. 트위터 같은 애플리케이션을 보면 트위팅을 할 때 사진을 같이 올릴 수 있으며, 사진을 선택할 때 기존에 찍어둔 사진을 선택하여 활용할 수도 있고 바로 카메라 기능을 이용해서 직접 사진을 찍어서 사용할 수도 있다. 아래의 왼쪽 그림은 기존에 찍어둔 화일을 선택하는 모드를 보여주며, 오른쪽 그림은 직접 사진을 찍기위한 카메라 모드를 보여준다. 이런한 기능이 HTML Media Capture을 이용해서 웹 애플리케이션에서 가능해지는 것이다.



또한 Contacts API의 경우도 HTML5의 <input>이나 <device>과 어떤 형태로 조화롭게 활용할 수 있을지에 대해 고민하고 있다. 현재까지는 HTML5에 새롭게 추가된 <device> 보다는 <input>을 활용하는 것이 안정적이라는 의견이 많은 사황이다. 그리고 앞으로 센서, 메시징, 갤러리 등 다양한 디바이스의 자원들을 마크업으로도 연동하여 웹 애플리케이션으로 표현할 수 있을 것으로 예상된다.


Device API 관련 W3C WG의 역할 분담
사실 W3C에서 API에 대한 표준은 주로 Web Applications WG에서 개발하는 것으로 되어 있었으나 개발해야할 스펙이 많아 디바이스의 자원을 접근하는 API 개발은 DAP WG을 새롭게 만들어 진행하게 되었다. 그러나 Device API와 관련된 표준들도 여러 상황에 따라서 다른 WG에서 개발하기로 하거나 기존의 기술에 의해서 표준 개발의 필요성이 없어진 표준이 있다. 이러한 내용을 아래와 같이 정리할 수 있다.
Web Applications WG로 이관: 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발
Geolocation WGOrientation / Acceleration 표준 개발
Web Notification Working Group: Notification 표준 개발
Application configuration 표준: localStorage와 Widget interface APIs로 대체


앞으로의 전망
앞으로는 HTML Media Capture 표준을 이용해서 웹 애플리케이션에서 음성인식 기능, 카메라 애플리케이션 구현이 가능할 것으로 생각되며, 향후 더 다양한 Device API 들이 제공되면 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다. 이러한 의미에서 웹 플랫폼은 멀티플랫폼/멀티디바이스를 지원하는 가장 경쟁력있는 플랫폼으로 진화하고 있는 것이다.

 

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. 김영보 2010.07.21 20:41 신고  댓글주소  수정/삭제  댓글쓰기

    매우 값진 글입니다. 감사합니다.
    - 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발은 언제쯤 Last Call을 예상하세요?

    - 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다에서--->
    여기서 Native는 모바일 업체에서 제공하는 Native인가요?
    그럼 자바스크립트로 악세스가 가능하게 되나요?

    혹시 데이터베이스 통합/형태에 대해서 거론 된 것이 있습니까?
    파이어폭스 4.0에 indexed database가 탑재되는 것으로 알고 있습니다만,
    하나로 통일되는 방향으로 설정이 되었나요? 아니면 다른 방안이 있나요?

    단어 하나 하나의 의미를 되새긴 뒤 질문 좀 하겠습니다^-^

  2. 이원석(wonsuk73@gmail.com) 2010.07.22 01:04 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 김영보 선생님^^

    - 화일 쓰기(File Writing)와 화일시스템 (Filesystems) 표준 개발은 언제쯤 Last Call을 예상하세요?
    답변) 아시겠지만 예측하기가 좀 어려운데... 개인적인 생각으로는 보안과 Privacy에 대한 이슈가 있어서 시간이 좀 걸릴 것 같습니다.

    - 앞으로 정말 Native 애플리케이션과 같은 애플리케이션 개발이 가능할 것으로 기대한다에서--->
    여기서 Native는 모바일 업체에서 제공하는 Native인가요?
    그럼 자바스크립트로 악세스가 가능하게 되나요?
    답변) 예.

    - 혹시 데이터베이스 통합/형태에 대해서 거론 된 것이 있습니까?
    답변) 사실 Indexed database는 Web Applications WG에서 개발하고 있는 표준이기 때문에 구체적인 내용에 대해서는 논의가 없었습니다. 그러나 HTML WG Activity Lead인 Mike로부터 들은 바로는 Web SQL Database에 대한 표준 개발은 다시 없을 것 같고 대신에 Indexed database를 표준으로 만들어 사용할 예정이라고 합니다^^

    좋은 질문 감사합니다~ ;)

  3. 김영보 2010.07.22 03:54 신고  댓글주소  수정/삭제  댓글쓰기

    와~ 감사합니다.
    방향 설정에 잣대가 되었습니다.
    화일 쓰기를 기다리고 있습니다만, 준비만 해야 할 것 같습니다.^-^
    Native에 접근할 수 있다는 것은 자바스크립트로 모든 디바이스를 제어하게 된다는 의미가 아닌가요...
    그럼, Native도 일정 부분 표준화가 되겠네요...
    결국 indexed database로 가게 되네요...
    하기야 자바스크립트 개발자에게 SQL을 요구한다는 것은 또 하나의 부담이 될 것 같습니다.

    문장 하나 하나 되새겨 본 뒤에 조금 더 질문 드리겠습니다.
    감사합니다. 다음에 지하철 미팅해요. 메모해 두었다가 하나씩 물어 보게요^-^

  4. 강태욱 2010.07.22 08:54 신고  댓글주소  수정/삭제  댓글쓰기

    따끈한 소식 감사합니다~(--)(__)

  5. Wise 2010.07.22 10:20 신고  댓글주소  수정/삭제  댓글쓰기

    항상 따끈따끈한 소식 감사합니다~ ^^

  6. 민원기 2010.07.30 11:24 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 자주 놀려 오겠습니다.

  7. 김대원 2010.09.21 05:50 신고  댓글주소  수정/삭제  댓글쓰기

    현재 WD상태의 W3C Device API에 대한 구현물들이 있나요?
    알려주시면 고맙겠습니다. 브라우져 벤더들이 내부적으로 구현하고 있다는 소문 정도만 들었고 구체적인것은 없네요.
    참고로 Ubivelox에서 만든 구현물이 12월 경에 국내 이통사를 통해서 출시 될 예정입니다.
    구현된 것중에 12월경에 비교적 안정된 spec만을 open 하겠지만요..

  8. 2010.09.21 05:51  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  9. 정상현 2012.07.16 16:50 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 정말 감사드립니다.

    한가지 의문이 가는것은 현재의 ms 계열 모바일 브라우저에서조차 touchEvent 를 지원하지 않는데, 모든 모바일 브라우저에서 이러한 것을 지원하고, 이것이 현실화 되기까지 어느정도의 시간이 걸릴것인가...입니다.

    보안 문제등으로 인해 표준안만 나오고 지원하는 디바이스나 브라우저가 적어 묻히는건 아닌지 개인적으로 불안합니다. 하지만 정말 웹에서 디바이스를 컨트롤 할 수 있게된다면 지금 웹보다 훨씬 더 많이 발전할 수 있게 되겠군요!!!

    다시한번 좋은 정보 감사드립니다!!!

  10. www.eparacord.com 2012.12.04 00:51 신고  댓글주소  수정/삭제  댓글쓰기

    브루가가들조각했는데 실수을리는없.....에라잇 르것다 섬세한 조각씨하나만큼은대하~ 단!

  11. http://efrenchdoors.com/pages/french-patio-doors 2012.12.04 02:44 신고  댓글주소  수정/삭제  댓글쓰기

    해민씨, 저도 정말 재미있는 시간이었습니다. 세계 최고의 엔지니어들과 함께할 수 있는 기회를 주셔서 감사합니다~ ;) 숙대는 박교수님께서 초청해 주시면 당근 가야죠~ ㅋㅋㅋ 여대^^;

  12. longchamp 2013.04.24 04:14 신고  댓글주소  수정/삭제  댓글쓰기

    지금은 냉장고등 저장시설이

  13. acompanhantes em sp 2014.04.30 06:38 신고  댓글주소  수정/삭제  댓글쓰기

    있다는 소문 정도만 들었고 구체적인것은 없네요.


오늘 구글코리아를 방문하여 HTML5에 대한 Tech Talk을 했는데 정말 생각보다 많은 엔지니어 분들이 참석해 주셔서 좋은 대화의 시간을 갖았다. 그리고 성함은 모르지만 구글 본사 마운틴뷰에 계신 분도 비디오 컨퍼런스로 연결하여 참석해 주셔서 감사했다. 또한 이번에 다시한번 구글의 자유로운 분위기와 그러한 자유로운 분위기 속에서의 책임감을 바탕으로 운영되는 조직문화에 다시금 놀랬다.

구글 Tech Talk을 유튜브에서 보신분들은 아시겠지만 항상 발표하기 전에 구글 종이가방에 선물을 넣어 발표자에게 전달한다. 항상 뭐가 들어있을지 개인적으로도 궁금했는데 오늘은 직접 받아서 확인을 했다.



가방안에는 큰 박스와 빨간색 구글 티셔츠가 있었다. 박스 안의 내용물은 비밀로 하고 싶다. 너무 좋은 선물이 있었기 때문. 그냥 사진만 올려본다.



그리고 오늘 발표한 "The current status of HTML5 technology and standard"에 대한 발표자료는 아래와 같다.



많은 분들이 이 발표자료를 트위팅해 주셔서 Hot on Twitter에 올라갔다. HTML5에 관심이 있으신 분들에게 조금이나마 도움이 되었으면 좋겠다. 아래 이미지는 Hot on Twitter 페이지의 인증 삿.



마지막으로 오늘 부족한 강연을 열심히 들어주시고 좋은 질문을 해주신 모든 구글러 여러분께 감사드린다.

발표자료(PDF 버전) 다운로드




저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. 이해민 2010.07.09 01:03 신고  댓글주소  수정/삭제  댓글쓰기

    원석씨, 오랜만에 얼굴 뵈어서 반가왔습니다.

    멀리까지 오셔서 좋은 발표 해주셔서 감사합니다.

    담엔 숙대에서 한 번 더...후다닥 =3=3=3

    • 이원석(wonsuk73@gmail.com) 2010.07.09 01:17 신고  댓글주소  수정/삭제

      해민씨, 저도 정말 재미있는 시간이었습니다. 세계 최고의 엔지니어들과 함께할 수 있는 기회를 주셔서 감사합니다~ ;) 숙대는 박교수님께서 초청해 주시면 당근 가야죠~ ㅋㅋㅋ 여대^^;

  2. leezche 2010.07.09 10:07 신고  댓글주소  수정/삭제  댓글쓰기

    저는 엔지니어는 아니고 디자이너인데 그럼에도 불구하고 정말 많은 도움이 된것 같습니다. 시간이 너무 짧아 아쉬웠습니다. 감사드립니다.

  3. 서동일 2010.07.09 10:29 신고  댓글주소  수정/삭제  댓글쓰기

    HTML5를 이해하는데에 정말 많은 도움이 될 것 같습니다. 유익한 tech talk, 발표자료 너무 감사드립니다.

  4. ninacry 2010.07.12 10:21 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세용^^ 김*현 과장님 소개로 예전에 세미나 들었던 사람입니다.
    여전히 열정적으로 활동하고 계시군요~ 그때도 감사드렸고 오늘도 자료 너무 감사하게 받아갑니다..^^
    저 구글 상자 안이 궁금하군요...ㅋ 좋은하루 되세요 ^^

  5. 머털도사 2010.07.16 11:01 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 자료 감사합니다. 이원석님
    퍼 갑니다.

  6. www.eparacord.com 2012.11.13 01:15 신고  댓글주소  수정/삭제  댓글쓰기

    해민씨, 저도 정말 재미있는 시간이었습니다. 세계 최고의 엔지니어들과 함께할 수 있는 기회를 주셔서 감사합니다~ ;) 숙대는 박교수님께서 초청해 주시면 당근 가야죠~ ㅋㅋㅋ 여대^^;

  7. http://roomdividersco.com/ 2012.12.04 02:45 신고  댓글주소  수정/삭제  댓글쓰기

    끔한 정리 감사합니다. 2011년 10월 현재의 동향도 정리해주시면 큰 도움 될 것 같습니다. :) roomdividersco.com

  8. acompanhantes em sp 2014.04.30 06:38 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 자료 너무 감사하게 받아갑니다..^^
    저 구글 상자 안이 궁금하군요...ㅋ 좋은하루 되세요 ^^

W3C에서 개발되고 있는 HTML5 표준은 기존 표준들과는 다르게 상당히 많은 스펙들로 구성되어 있다. 이러한 면은 HTML5를 배우는 많은 이들에게 HTML5 표준을 어디까지로 봐야할 까하는 의구심을 들게한다. 또한 많은 이들이 현재 W3C에서 표준화가 진행되고 있는 상황에 대해서도 궁금할 것이다. 이와 관련해서 지난 3월에 W3C에서 HTML WG 의장 중 한명인 마이크로소프트의 폴 코튼(Paul Cotton)과 인터뷰한 내용 [1] 과 W3C AC(Advisory Committee) 미팅에 보고된 내용 [2]이 있어 소개한다.


폴 코튼이 생각하는 HTML5 표준의 범위

폴 코튼은 HTML5라는 용어가 상당히 느슨한 의미로 사용이 되고 있다고 생각한다. 폴 코튼이 생각하는 HTML5 표준의 범주는 HTML WG에서 개발되고 표준, Web Applications WG에서 개발하고 있는 API 표준, Device APIs and Policy WG에서 개발하는 표준 그리고 마지막으로 우리가 자바스크립트로 알고 있는 ECMAScript-262에 대한 표준도 포함한다.

일반적으로 Device APIs and Policy WG에서 개발되고있는 Device API 표준은 웹 애플리케이션의 디바이스의 자원들 (GPS, 센서, 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등)을 접근 가능하게 하는 API 표준이다. , 이런 API를 이용하면 디바이스의 카메라 기능을 이용해서 사진과 동영상도 촬영하는 기능을 웹 애플리케이션으로 구현할수 있다. 지금까지 디바이스 API HTML5 표준으로 포함시켜 논의되지는 않았다. 하지만 이 또한 HTML5의 핵심적인 API 표준이다. 또한 지속적으로 HTML5에 대한 표준은 추가적으로 제안되어 개발될 것으로 예상된다.


HTML WG 표준개발 현황

폴 코튼은 HTML WG에서 개발 중인 HTML5 스펙들 현황에 대해서는 HTML WG에서 개발중인 HTML5 스펙들이 W3C 초안 Last Call 단계 (초안에 대한 최종 검토 단계를 의미함)에 가기 위해서는 초안과 관련된 대한 알려진 모든 코멘트와 이슈들을 해결해야 하는 것이 필요하며 지금까지 이러한 작업을 지속적으로 진행하고 있는 중이라고 한다. 즉, WG 내부 또는 외부에서 지속적으로 표준 초안에 대한 이슈들이 제기가 될 것이고, 이러한 이슈들을 계속해서 해결하는 작업이 진행을 진행한다. 이러한 일련의 작업을 통해 초안의 문제가 모두 해결되면 Last Call 단계에 진입하는 것이다.

참고로 2009 1월에서 2010 2월까지 새롭게 발생한 이슈 비율과 해결된 이슈 비율을수자로 정리하면 아래와 같다. 지속적으로 새로운 이슈들이 발생하고 해결되고 있는 것이다.


HTML WG에서 현재 개발중인 문서는 아래와 같이 6개가 있으며, 지난 3월 4일에 공식적으로 Publication된 문서이다.


HTML5 표준의 최종승인에 대한 전망

HTML5 언제 표준화가 마무리됩니까? 가장 자주 듣는 질문이다. 그러나 HTML5 표준 개발이 언제 마무리될지 예측하는 것은 상당히 어려운 상황이다. 하지만 폴 코튼이 이야기한 내용들을 보면 지속적으로 HTML WG의 스펙들에 대한 이슈를 해결해 나가고 있는 상황이기 때문에 어느 정도 시간이 지나면 문제들은 정리가 될 것으로 조심스럽게 예측해 본다. 또한 W3C 표준 개발 절차상 초안 Last Call 단계에 진입하고 이 단계가 잘 정리 되면, HTML5 표준의 마무리에 대한 예측이 가능할 것으로 예상한다. 따라서, Last Call 단계를 언제 진입하는 지가 상당히 중요하며, 그 이후에는 HTML5에 대한 보다 긍정적인 기대의 글들이 만발하지 않을까 기대해 본다.


(참고자료)

[1] Interview: Paul Cotton on Microsoft Participation in the W3C HTML Working Group

[2] W3C HTML Working Group Status Report(November, 2009 - March, 2010)

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. acompanhantes em sp 2014.04.30 06:38 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 자료 너무 감사하게 받아갑니다..^^
    저 구글 상자 안이 궁금하군요...ㅋ 좋은하루 되세요 ^^

  2. massagista 2014.05.14 12:53 신고  댓글주소  수정/삭제  댓글쓰기

    기고있다는 점을 제외하고 말을해야할지 모르겠어요. 블로그가 멋지 네요.

  3. acornpanharntes em sp 2015.06.21 06:26 신고  댓글주소  수정/삭제  댓글쓰기

    오늘도 자료 너무 감사하게 받아갑니다..^^
    저 구글 상자 안이 궁금하군요...ㅋ 좋은하루 되세요 ^^

HTML5와 관련해서 정말 많은 관련 표준과 이슈가 있지만 현재까지 가장 뜨거운 이슈는 HTML5 비디오 기능에 대한 이슈가 아닌가 싶다. 이는 이미 주요 브라우저들이 잘 지원을하면서 구글이 HTML5 기반의 유튜브 서비스를 시작하고 애플의 스티브 잡스가 애플의 디바이스에서 앞으로 플래쉬를 지원하지 않겠다고 선언을 하면서 HTML5 기반의 비디오 서비스가 빠르게 확산되고 있다. 아마도 현재까지 가장 많이 활용되는 HTML5 기능일 것이다. 그럼에도 불구하고 아직 남아있는 HTML5 비디오 표준 관련 이슈들이 있어 본 글에서 정리해 본다. 


코덱(CODEC) 이슈

HTML5의 표준 비디오 코덱에 대한 이슈는 W3C에서 논쟁만 많았을 뿐 업체들 간의 합의점을 도출하지 못한 이슈였고 이의 결과로 각 브라우저 밴더들의 정책에 따라 자신들이 원하는 코덱을 지원하고 있는 상황이다. 이의 주요 이슈는 코덱의 특허 및 라이센스 비용에 대한 문제였다. 이러한 이슈 때문에 현재 주요 브라우저 밴더가 지원하는 코덱을 보면 모질라 파이어폭스와 오페라는 오픈소스 코덱인 OGG, IE9과 애플 사파리는 H.264를 지원하고구글 크롬은 두가지 모두 지원하고 있다

그러나 지난 5월 19일 구글은 I/O 컨퍼런스에서 WebM이라는 미디어 코덱에 대한 오픈소스 프로젝트를 발표하면서 표준 비디오 코덱에 대한 일정 부분의 합이점을 만든 것으로 보인다. 현재까지 파이어폭스, 오페라, IE9이 이에 대한 지원을 공식적으로 발표했고, 어도비도 이를 지원하기로 결정했으며 스카이프 등 상당히 많은 업체들이 지원을 약속했다. 이는 회사의 비용과 관련된 민감한 요소였고 앞으로도 회사의 이익과 직결되는 요소이기 때문에 손쉽게 협력업체들을 결집된 것이다. 

그러나 웹 표준 코덱에 대한 내용이 모두 정리된 것은 아니다. 일단 애플은 WebM 프로젝트의 코덱 지원에 대해 언급하지 않고 있으며, WebM 프로젝트의 비디오 코덱인 VP8이 H.264의 기술을 상당부분 도용하여 향후 특허 이슈에 휘말릴 수 있다는 의견도 있다. 그러나 여러 전문가들은 구글이 이러한 특허 이슈들을 이미 처리했을 것으로 믿고 있으며, 이러한 이유로 특허에 민감한 파이어폭스, 오페라 등 많은 업체들이 이미 협력 업체로 들어왔을 것이라 생각한다. 

코덱과 관련하여 다른 중요한 이슈는 하드웨어 업체들이 WebM 코덱의 디코딩(decoding)에 대한 하드웨어 가속기능의 지원여부이다. 이게 중요한 이유는 컴퓨팅 파워가 상대적으로 약한 휴대폰부터 테블릿, PC, TV까지 미디어 재생에 문제가 없어야하기 때문이며, 또한 이는 향후 HD급의 미디어 서비스를 생각하면 반드시 필요한 필수적인 기능이기 때문이다. 현재는 데스크탑 및 랩탑에서 H.264의 디코딩에 대한 하드웨어 가속기능을 지원하지만 반면에 오픈소스 프로젝트인 OGG는 지원하지 않고있다. 그러나 WebM의 경우 이미 많은 하드웨어 업체들이 지원을 약속하고 있고 인텔도 최근 지원할 계획이 있는 것으로 발표하여 이에 대한 이슈는 없을 것으로 예상된다. 지원업체 대한 부분은 구글 WebM 프로젝트 런칭, HTML5 비디오 코덱(CODEC) 이슈 해결? 을 참고하기 바란다.

또한 모바일 브라우저의 WebM 지원에 대한 이슈도 있는데 애플을 제외하고는 문제가 없을것으로 조심스럽게 예측한다. 물론 WebM의 지원은 모바일 브라우저는 구글의 안드로이드가 가장 빨리 지원할 것으로 예상된다.

마지막으로 모질라가 W3C에 공식적으로 WebM 코덱을 HTML5의 표준 코덱화 하는 제안을 할 계획이라고 하니 앞으로의 결과를 지켜보자~


스트리밍(Streaming) 이슈

기존에 웹 비디오 서비스는 스트리밍 서버를 기반으로 RTP, RTCP, RTSP 등의 프로토콜을 기반으로 하고 있었으나 최근에느 이마저도 HTTP를 기반으로 옮겨가기 위한 시도들이 주요 IT 업체를 중심으로 이루어지고 있다. 이는 향후 웹 비디오 뿐 아니라 IPTV 그리고 모바일 IPTV 환경에도 커다란 영향을 미칠 것으로 예상된다. 더이상 고가의 스트리밍 서버가 필요가 없이 무료인 HTTP 서버를 사용하면되고, CDN을 기반으로 비디오 콘텐츠 전달이 효과적으로 가능하고 또한 방화벽 문제가 없기 때문이다. 기본적인 현황에 대해서만 일단 아래와 같이 정리해 보았다. 보다 자세한 기술적인 내용은 다음에 정리를 할 계획이다.

HTML5 표준에는 아직까지 스트리밍에 대한 부분이 없다. 예전에 RTP/RTCP와 같은 Live Streaming 지원에 대한 논의가 있었지만RTP/RTCP는 웹 이슈가 아니기 때문에 이를 웹 애플리케이션 프레임워크의 일부로 만드는 것은 어렵고특히 이를 위해서 별도의 서버가 필요하고 HTTP 서버와는 같이 동작하지 않는다는 문제점이 제기되었다.

최근에 여러 벤더들은 이러한 특정 프로토콜이나 서버를 지양하고 지능적인 브라우저(UA)와 HTTP 기반의 스트리밍을 제공하는 방향으로 옮겨가고 있다마이크로소프트는 Smooth Streaming”, 애플은 HTTP Live Streaming”, 어도비는 최근 HTTP Dynamic Streaming을 시작했다이들 벤더들은 MPEG 파일을 대상으로 이런 노력을 진행하고 있는 상황이며OGG는 이러한 부분에서 배제되었다. 그리고 앞으로 WebM을 지원할지 여부는 지켜봐야할 것 같다.

이와 관련된 표준화 기구의 활동들을 보면 3GPP2010 3월에 3GPP 릴리즈 93GPP Adaptive HTTP Streaming(AHS)를 정의하였고, IETF의 경우 애플이 HTTP Live Streaming 표준을 개발하고 있으며, 지금 필자도 참여하고 있는 MPEG(ISO/IEC JTC1 SC29 WG11) MPEG 파일 포맷에 대한 HTTP 기반 Adaptive Bitrate Streaming을 위한 표준 개발을 이제 막 시작하고있다.

HTTP 기반 Adaptive Bitrate Streaming은 동적인 bandwidth를 지원하고 안정적인 Live Streaming을 지원하기 위한 적절한 방법이나, 포맷에 독립적이며 객관적으로 증명이된 표준화된 방법은 없다. 특히 HTML5 이슈를 볼 때 우리는 적어도 MPEG4, OGG Theora/Vorbis 그리고 WebM은 지원해야할 것으로 본다. 따라서 이 이슈도 새로운 표준을 통해 명확하게 정리하는 것이 필요하다.


전체화면 모드

HTML5 비디오의 성공을 위해서는 전체화면으로 비디오를 보여주는기능이 필수적으로 필요하다. 이런 기능이 없으면 HTML5 비디오는 단편적인 비디오 클립 제공에만 적합하고 장편의 영화나 드라마 등을 보여주는데는 한계가 있다. 그러나 아직까지 전체화면에서 비디오를 실행하는 표준 API는 없는 상황이다. 파이어폭스 3.6에서는 전체화면으로 비디오를 재생하는 기능이 가능하며(오른쪽 클릭 이용), 웹킷은 ALT-클릭으로 전체화면 모드가 실행된다. 전체화면 비디오 재생을 위한 명확한 API가 필요하다.

지금까지 이야기한 이슈들은 이미 HTML5 표준화 활동에서 논의가 되고 있으니 본 이슈들은 어떻게든 정리가 될 것으로 예상해본다.


(참고문헌)

[1] HTML5 Video: Not Quite There Yet

[2] Smooth Streaming

[3] Dynamic streaming on demand with Flash Media Server 3.5

[4] 3GPP adaptive HTTP Streaming (AHS)

[5] HTTP Streaming of MPEG Media

 
저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. Channy 2010.05.28 11:49 신고  댓글주소  수정/삭제  댓글쓰기

    WebM 라이브 스트리밍에 대해서는 오픈 소스 스트리밍을 지원하는 flumotion에서 이미 구현을 한 바 있습니다. 기술적인 문제는 없을 듯 하네요 ㅎㅎ
    http://www.flumotion.com/blog/2010/05/21/news/webm-vp8-streaming-live-from-flumotion/

  2. 이원석(wonsuk73@gmail.com) 2010.05.28 14:25 신고  댓글주소  수정/삭제  댓글쓰기

    먼저 좋은 정보 감사합니다^^ 기술적인 문제가 없는 것에는 동의합니다~
    그런데 HTML5 비디오 관점에서 라이브 스트리밍을 위한 표준화 작업은 필요한 것 같습니다.

  3. article 2012.04.06 18:22 신고  댓글주소  수정/삭제  댓글쓰기

    제대 사챙먹지 하 람에겐 말좋더라구요.

  4. pandoras 2013.04.21 10:10 신고  댓글주소  수정/삭제  댓글쓰기

    하게 소개하면서 윤동주의

  5. acompanhantes em sp 2014.04.30 06:39 신고  댓글주소  수정/삭제  댓글쓰기

    위한 표준화 작업은 필요한 것 같습니다.

HTML5는 브라우저에 내장한 비디오 플레이어 기능을 통해 비디오를 보여주고 제어를 위해 필요한 다양한 UI를 태그와 자바스크립트 모두를 통해 처리할 수 있도록 지원하고 있다. 또한 HTML5의 캔버스 기능은 브라우저에서 2D 그래픽을 지원하는 기능으로 SVG(Scable Vector Graphic)와는 다르게 픽셀단위로 2D 그래픽을 그릴 수 있는 기능이다. 어떤 개발자들은 이러한 캔버스 기능을 이용해서 둠과 유사한 3D 게임을만들어 공개한 것도 인터넷에서 찾아볼 수 있다

최근 주요 브라우저들은 HTML5의 비디오 택그와 캔버스 기능을 대부분 지원하고 있기 때문에 이들을 활용한 다양한 시도들이 있는데 이들 중 상당히 재밌는 특수효과를 개발한 사례가있어서 소개하고자 한다. 이는 HTML5 비디오 태그로 정의된 미디어가 보여질 때 이들의 픽셀을 캔버스로 매핑하고 마우스가 보여지는 비디오의 특정 위치 클릭되면 그 위치를 기반으로 주변이 폭발하는 효과를 만들었다. 이는 HTML5의 비디오 태그와 캔버스 기능을 조합하여 전혀 색다른 효과를 만들 수 있다는 예를 보여준다는 차원에서 상당히 흥미롭다.



직접 데모를 보고 싶은 분은 아래 링크를 클릭하여 시험해 보기 바란다. 데모를 실행해 볼때 HTML5의 비디오 및 캔버스 기능을 지원하는 크롬, 오페라, 파이어폭스를 사용해야 한다. 참고로 IE에서는 동작하지 않는다.


 - 비디오 폭파(destruction) 데모 사이트 (HTML5 Video 태그와 캔바스 API 활용하여 개발)

  

(원문): Blowingup HTML5 video and mapping it into 3D space

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. article 2012.03.26 15:19 신고  댓글주소  수정/삭제  댓글쓰기

    근데... 이 추운날씨에옷이 도입지... ^.^

최근 구글의 GMail에서 화일을 첨부하는 기능에 Drag and Drop 기능이 추가되었다. 기존에 웹에서 화일을 첨부할 때는 사용자가 화일선택 버튼을 이용햐여 컴퓨터의 화일 시스템을 브라우징 하면서 일일이 지정해 주는 방식을 사용해야 했고 이는 직관적인 사용자 인터페이스는 아니었다. 그럼 GMail은 어떻게 Drag and Drop 기능을 추가했을까??? 이는 HTML5의 File API를 이용하므로써 가능해졌다. 현재 크롬과 파이어폭스가 본 기능을 제공하고 있으므로 GMail 웹 응용에서 시험해 볼 수 있다.

아래의 그림은 3개의 이미지를 Drag and Drop하여 GMail에서 메일을 작성하는 중에 화일을 첨부하는 것을 보여준다.


첨부한 3개의 이미지를 GMail에서 하나씩 다운로드되며 이때 각 이미지에 대한 Progress Bar를 보여준다.


국내에서는 이런 기능을 주로 Active-X로 구현했었는데 이제는 HTML5 표준을 기반으로 만들어도 거의 동등하게 구현이 가능함을 알수있으며 이메일, 미디어 유통 관련 서비스 사이트(e.g. 플리커, 유튜브 등), 웹하드 등 다양한 웹 응용에서 활용이 가능할 것으로 예상된다.

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요


1.    머리말


HTML5 W3C(World Wide Web Consortium)를 중심으로 개발되고 있는 차세대 HTML 표준으로 웹 응용 개발을 위한 표준 개발을 목표로 하고 있다. 따라서 HTML는 현재 사용중인 HTML4에 비해 상당히 많은 새로운 기능들을 포함하고 있으며 앞으로도 관련 표준들이 추가적으로 제안되어 보강될 것으로 예상된다. 이와 관련하여 세계적인 주요 IT 기업들은 발 빠른 대응을 하고 있다. 구글은 최근까지 공들여 개발한 구글 기어스(Google Gears)를 포기하고 HTML5에 집중하기로 하였으며, 자사의 핵심 서비스 중 하나인 유튜브(Youtube)에서 플래쉬 플러그인(Flash Plug-In)없이 표준 기반으로 동영상을 서비스하는 HTML5 기반의 동영상 서비스를 시작하였다. 또한 구글은 스마트폰 플랫폼인 안드로이드의 웹 플랫폼에도 이미 HTML5의 일부 기능을 제공하고 있으며, 최근 W3C HTML5 관련 WG에 적극적으로 참여하여 하는 등 HTML5 기술에 총력을 기울이고 있다. 이와 더블어 애플도 최근 아이패드를 발표하면서 앞으로 아이폰과 아이패드에서 플래쉬를 배제하고 HTML5를 적용할 것임을 분명히 하였으며, 이미 아이툰즈 등 주요 소프트웨어에 웹의 표준 기술을 적극적으로 도입하고 있다. 또한 애플도 W3C HTML WG의 공동의장으로 활동하는 등 HTML5 관련 표준화 활동에 적극적으로 대응하고 있다. 본 고에서는 이와 같이 최근 IT 업계에서 화두가 되고 있는 HTML5의 주요 특징들을 간단히 살펴보고 이들이 모바일 웹 환경에서 적용될 경우 예상되는 변화에 대해서 소개한다.

 


2.    HTML5 표준


HTML5 표준은 기존의 HTML 표준의 한계를 극복하기 위한 차세대 HTML 표준으로 추가적인 플러그인 없이 리치 웹 응용을 가능하게 하는 것을 목적으로 한다. HTML5 표준의 내용은 크게 문서구조와 마크업 표준 부분과 API 표준으로 구성되어 있는데, 이와 같은 마크업과 API 부분의 혼재와 많은 분량에서 발생되는 혼란스러움과 표준 개발의 효율성을 높이기 위해 2009 4월 이후에 표준안이 여러 개의 문서로 분리되어 개발되고 있다. 또한 이에 대한 표준 개발은 W3C HTML WG 이외에도 웹 응용(Web Application) WG, Geolocation WG 그리고 디바이스 API 및 정책(Device API and Policy) WG에서 관련된 표준을 개발하고 있다. 최근 웹 응용(Web Application) WG의 경우 활동계획서를 다시 정리하면서 HTML5와 관련된 5~6개 정도의 추가적인 표준 개발을 제안하는 등 적극적으로 HTML5에 대한 표준개발을 진행하고 있다.

 

2.1 HTML5의 역사


HTML(HyperText Markup Language) 1989년에 팀 버너스리(Tim Berners-Lee)에 의해서 처음으로 개발된 이후 HTML 2.0, HTML 3.2 그리고 1999년의 HTML 4.01까지 인터넷 산업을 폭발적으로 확장시키며 빠르게 발전해 왔다. 그러나 2002년에 제정된 XHTML 1.0 표준 이후 XHTML 2.0 표준 개발에 대한 시도가 시장으로부터 외면을 받았다. 이러한 시점에 W3C와 생각이 다른 주요한 브라우저 업체인 애플, 모질라 그리고 오페라 등이 2004년에 WHATWG(Web Hypertext Application Technology Working Group)을 결성해서 리치 웹 응용의 실용적 플랫폼에 목적을 둔 HTML, CSS, DOM 및 자바스크립트 개선 표준 개발을 시작하였다. 2007년부터 W3C WHATWG의 결과물을 인계를 받아 현재까지 표준 개발을 진행하고 있으며 현재 WD(Working Draft) 상태이다.

 

2.2 HTML5의 주요 특징


HTML5 표준은 시맨틱 마크업 부분과 API 부분으로 크게 나누어 볼 수 있다. 시맨틱 마크업 부분은 기존 HTML 버전4보다 훨씬 더 명확하게 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다. 이를 통해서 검색 엔진 등 웹의 콘텐츠를 기반으로 하는 다양한 서비스나 응용은 개선된 기능을 제공할 수 있을 것으로 기대된다. API의 경우는 웹 기반의 응용 개발을 지원하기 위해 HTML4까지는 존재하지 않았던 새로운 기능이 추가된 부분이다. HTML5가 상당히 많은 내용이 있으나 주요 특징들을 아래 표와 같이 정리해 볼 수 있다.

 

< 1> HTML5의 주요 특징과 관련 표준명

주요기능

설명

관련 W3C 표준명

웹폼

(Web From)

사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에 사용되는 마크업, 애트리뷰트와 이벤트

-   HTML5

캔버스

(canvas)

웹에서 즉시모드(immediate mode) 2차원 그래픽을 그리기 위한 API<canvas> 내 각종 객체를 회전, 변환하고 그레디언트, 이미지 생성 등 각종 효과를 주는 기능에 대한 API

-   Canvas 2D API

-   HTML Canvas 2D Context

SVG

(Scalable Vector Graphic)

XML 기반의 2차원 백터 그래픽을 표현하기 위한 언어

-   HTML5

Video/Audio

<video>는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리먼트이며, <audio>는 사운드나 오디오 스트림을 표현하기 위한 미디어 엘리먼트

-   HTML5

Geolocation

디바이스의 지리적 위치 정보를 제공하는 API 표준

-   Geolocation API

오프라인 웹 응용(Offline Web Application)

인터넷 연결이 지원되지 않는 경우에도 웹 응용이 정상적으로 수행될 수 있도록 지원하는 기능으로 응용에 대한 캐슁과 데이터에 대한 캐슁으로 구성

-   HTML5

-   Web SQL Database

SQL 데이터베이스(Web SQL Database)

다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대한 API

-   Web SQL Database

로컬저장소

(Local Storage)

기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능

-   Web Storage

웹 소캣

(Web Socket)

웹 응용이 서버측의 프로세스와 직접적인 양방향 통신을 위한 API

-   The WebSocket API

웹 워커

(Web Worker)

웹 응용을 위한 쓰레드(Thread) 기능에 대한 API

-   Web Workers

 

2.3 HTML5 표준 개발 일정


W3C HTML WG에서 현재까지 진행되고, 계획하고 있는 HTML5 표준에 대한 일정은 아래와 같다. HTML5 표준 초안 최종본은 20101월까지 완료될 계획이었으나 아직 마무리되지 않았다. 따라서 전체적인 일정도 다소 늦어질 것으로 예상된다.

2008 2 : HTML5 첫번째 표준 초안 (First Public Working Draft)

2010 1 : HTML5 표준 초안 최종본 (Working Draft Last Call)

201012: HTML5 후보 표준안 (Candidate Recommendation)

2012 1 : HTML5 제안 표준안 (Proposed Recommendation)

2012 3 : HTML5 최종 표준안 (Recommendation)

 

2.4 HTML5 브라우저 지원 현황


HTML5 W3C WD(Working Draft) 상태임에도 불구하고 현재 주요 브라우저 개발업체들 간의 경쟁이 치열하게 진행되고 있으며 주요한 기능들부터 빠르게 개발되어 적용되고 있다. 아래 테이블은 최근 공개된 MSIE9까지 포함해서 HTML5 주요기능에 대한 브라우저 지원 현황을 보여준다.

 

< 2> HTML5의 주요특징 별 브라우저 지원현황

주요기능

크롬

파이어폭스

사파리

오페라

IE

안드로이드

웹 플랫폼

캔버스(Canvas)

-

-

SVG

-

Video

Geolocation

(iPhone)

-

오프라인 웹 응용

(mobile)

-

SQL 데이터베이스

(mobile)

-

웹 워커

(mobile)

-

-

 


3.    모바일 웹 환경에서 HTML5의 의미


웹에서 어떠한 기능을 구현하는가에 따라 다르겠지만 새로운 시맨틱 마크업을 추가한 HTML5는 같은 기능을 구현할 때 HTML4에 비해서 훨씬 적은 자바스크립트 코드를 사용하게 된다. 따라서 기본적으로 HTML5가 네트워크 속도에 예민한 모바일 환경에 적용하기에 더 적합하다고 말할 수 있다. 본 절에서는 HTML5가 현재 사용하고 있는 HTML4에 비교해서 모바일 웹 콘텐츠나 응용 개발시 장점을 갖는 특징들에 대해서 설명한다.

 

3.1 오프라인 웹 응용(Offline Web Application)


HTML5의 큰 특징 중의 하나는 인터넷이 되지 않는 오프라인 환경에서도 웹 응용이 정상적으로 실행될 수 있도록 하는 오프라인 웹 응용 기능을 지원하는 것이다. 이러한 기능은 네이티브 응용(Native Application)은 기본적으로 제공하는 기능이지만 웹 응용의 경우 프로그램이 실행될 때 응용과 관련된 모든 파일이 브라우저로 로딩이 되는 것이 아니라 실행하면서 사용자가 선택하는 메뉴에 따라서 필요한 부분을 로딩하고, 더불어 웹 응용은 응용을 구성하는 파일들뿐 아니라 사용자의 데이터도 필요할 때 서버에서 로딩하기 때문에 인터넷이 되지 않는 환경에서는 정상적으로 동작할 수 없었다. 그러나 HTML5는 응용 캐슁(Application Caching) 기능과 웹 SQL 데이터베이스 기능을 새롭게 추가하여 오프라인에서 웹 응용이 정상적으로 동작할 수 있도록 지원한다. 이러한 기능은 모바일 웹에서는 반드시 필요한 필수적인 기능이다.

 

3.2 Geolocation


HTML5는 브라우저가 디바이스의 위치정보를 접근할 수 있는 Geolocation 기능을 제공하며 이러한 기능은 이동성이 있는 모바일 환경에는 꼭 필요한 기능이다. 모바일 웹 서비스나 응용은 이러한 기능과 다양한 오픈 API(Open API)을 이용하여 기본적인 네비게이션 기능뿐 아니라 사용자 위치 기반으로 근처의 주차장, 병원, 약국, 커피전문점 등 유용한 정보를 서비스 할 수 있다. 또한 향후 W3C의 디바이스 API 표준을 통해 웹 응용이 사진이나 동영상을 제어할 수 있게 되면 모바일 디바이스에서 캡쳐한 미디어 화일에 위치정보를 추가하고 인터넷의 지도 서비스 연동을 통해 자신의 미디어 파일을 관리하는 서비스 등 무궁무진한 새로운 모바일 웹 응용 개발이 가능할 것으로 기대된다. 아래의 (그림 1)은 모바일폰과 랩탑의 브라우저에서 Geolocation 기능을 사용한 예를 보여준다. 특히 첫 번째 그림은 플리커(flickr)에서 HTML5 Geolocation 기능을 이용하여 사용자 근처의 사진들을 보여주는 웹 응용을 보여준다.

 





(그림 1) 모바일 폰 및 랩탑 브라우저에서 HTML5 Geolocation 기능 사용 예

 

 

3.3 웹폼(Web Form)


사용자의 입력정보를 받기 위해 사용되는 입력형태를 정의하는 웹폼과 관련하여 HTML4는 정의 가능한 입력형태(Input Type) 7개 정도였으나 HTML5는 전자메일(email), URL, 숫자(number), 범위(range), 달력(month) 등 일반적으로 많이 사용되는 12개 정도의 추가적인 입력 형태를 지원한다. 이러한 추가적인 입력형태는 사용자가 모바일 웹 환경에서 값을 입력할 때 자동으로 적절한 키보드를 보여주는데 활용될 수 있다. 예를 들어 아래그림에서 첫 번째 입력화면은 입력형태가 “email”로 정의되어 있으므로 이메일을 입력하기 위해 필요한 영문키보드와 @가 포함된 키보드를 보여준다. 두 번째 입력화면에서는 입력형태가 “url”로 정의되어 있으므로 영문키보드와 “.”, “/”, “.com”가 포함된 키보드를 보여주고, 세번째 입력화면은 입력형태가 “number”로 정의되어 있으므로 숫자가 포함된 키보드를 보여준다. 이러한 기능은 사용자 인터페이스가 상대적으로 약한 모바일 웹 환경에서는 매우 편리한 기능이다. 또한 HTML5에서는 사용자가 입력 값이 적절한 값인지를 검사하는 기능도 제공한다. 즉 입력형태가 “email”이라면 사용자가 입력한 값이 전자메일의 문법에 맞는지를 검사하는 기능을 브라우저가 기본적으로 제공한다.


 

(그림 2) HTML5 웹폼(Web Form)의 입력형태(Input Type)별 입력키보드 제안 예

 

3.4 웹 소캣(Web Socket)


HTML5는 웹 응용이 서버측의 프로세스와 직접적으로 양방향 통신을 가능하게 하는 웹 소캣 기능을 제공한다. 지금까지 개발자는 이러한 기능을 위해 XHR(XMLHttpRequest)을 사용해 왔으나 이는 메시지의 크기와 상관없이 지속적으로 HTTP 헤더를 포함한 메시지를 교환해야 하는 문제점이 있었다. HTML5의 웹 소캣은 브라우저에서 양방향 통신 채널을 제공하는 것으로 일단 웹 소캣을 획득하면 웹 응용과 서버는 데이터만 교환한다. 따라서 이러한 기능은 속도에 민감한 모바일 웹 환경에 반드시 필요한 유용한 기능이다.

 


4.    맺음말


현재 HTML5 W3C의 표준 초안(Working Draft) 상태에 있음에도 불구하고 최근 구글이 자사의 주요 서비스 중 하나인 유튜브(Youtube)에서 HTML5 기반의 동영상 서비스를 시작한 것은 큰 의미를 갖는다. 또한 사파리, 파이어폭스, 오파라 그리고 IE9까지 주요 브라우저 업체들이 HTML5의 주요 기능들을 이미 브라우저에 추가하여 제공하고 있으며, HTML5의 추가적인 기능 구현과 브라우저 처리 속도에 대한 경쟁이 점점 더 치열해 지고 있는 상황이다. 그리고 HTML5에 대한 표준을 개발하고 있는 W3C에서도 주요 브라우저 업체들이 적극적으로 참여하여 표준 개발을 최대한 빨리 마무리하기 위한 노력이 이루어 지고 있는 상황이다.


또한 최근 IT 업계의 가장 큰 이슈는 스마트폰과 이에 대한 응용과 콘텐츠에 대한 에코시스템이다. 애플의 아이폰, 구글의 안드로이드 등 다양한 스마트폰 플랫폼이 출현하고 플랫폼 개발사, 단말제조사, 이동통신사 등이 경쟁적으로 자사의 스마트폰 마켓을 시작하면서 스마트폰 응용의 개발과 유통에 대한 엄청남 분열이 문제가 되고 있는 상황이다.


최근 이러한 문제를 해결하는 하나의 대안으로 웹 표준 기반의 모바일 응용이 제시되고 있는 상황이며, 이 중심에 있는 표준 중의 하나가 HTML5 이다. 앞에서 소개했듯이 HTML5 HTML4와는 비교하기 어려울 정도로 새로운 기능들이 많이 포함되어 있어 앞으로 모바일 웹 콘텐츠와 응용 개발에 효과적인 적용이 가능할 것으로 예상된다.


따라서 모바일 웹 콘텐츠나 응용 및 서비스와 관련된 국내 업체들은 현재 개발되고 있는 HTML5 표준 현황 및 브라우저 업체들의 기능 지원 현황 등을 예의주시할 필요가 있으며, 이러한 상황을 고려하여 향후 기업의 전략을 수립하는 것이 필요할 것으로 사료된다.

 

(PDF 버전): HTML5와 모바일 웹


[참고문헌]

[1]   이원석, HTML5 표준 개발 현황, IT Standard Weekly, 2010. 3.

[2]   W3C HTML WG, http://www.w3.org/html/wg/

[3]   W3C Web Application WG, http://www.w3.org/2008/webapps/

[4]   W3C Geolocation WG, http://www.w3.org/2008/geolocation/

 

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. wisengood 2010.07.19 10:52 신고  댓글주소  수정/삭제  댓글쓰기

    예제로 올려 주신 이미지 몇개가 안 보입니다.. 다시 올려 주실 수 있을까요??

  2. website 2012.03.27 20:46 신고  댓글주소  수정/삭제  댓글쓰기

    네가불 준 노랫소리그 우리마음 대의노래였고

  3. massagem 2014.05.01 21:46 신고  댓글주소  수정/삭제  댓글쓰기

    다시 올려 주실 수 있을까요??




구글이 지난 2월 비디오 코덱 개발회사인 On2 테크널러지를 인수했는데 드디어 VP8 비디오 코덱을 오픈 소스화할 예정이다. 구글은 공식적으로 5월에 있을 구글 I/O 개발자 컨퍼런스를 통해 발표할 것이라 하며, 이와 함께 모질라의 파이어폭스와 구글의 크롬 브라우저가 VP8 비디오 코덱을 사용한 HTML5 비디오를 지원한다는 발표를 할 것으로 예상된다고 한다.

 

코덱에 대한 이슈는 W3C HTML WG에서도 산업계의 컨센서스를 만들어내지 못해서 현재까지 지속적인 논쟁만 하고 있는 상황이다. 그래서 현재까지 브라우저 회사들에 따라서 서로 다른 포맷을 지원하고 있다. 구글의 유튜브, MS IE9, 애플의 사파리 브라우저는 H.264 지원하는데 좀더 무게중심을 두고 있는 상황이며, 모질라를 포함한 몇몇 회사 경우 H.264의 잠재적인 라이선스 이슈 때문에 지원을 거부하고 Ogg Theora를 지원하고 있다. Ogg Theora는 완전한 오픈 소스인데 반하여 H.264 코덱은 MPEG LA 라이센싱 회사에 의해 관리되고 있고, 지난 2 MPEG LA H.264의 로열티 프리 라이센싱이 2016년까지 연장되었다고 발표를 했으나 공개 표준 기술을 지향하는 모질라 등의 회사의 마음을 바꾸지는 못했다. 결과적으로 현재 애플의 사파리, 구글의 크롬, 앞으로 출시될 MS IE9 H.264 비디오를 지원하고, 반면에 파이어폭스, 크롬, 오페라는 Ogg Theora 비디오를 지원하는 형태로 나눠져 있는 상황이다.

 

구글의 오픈소스 VP8 코덱이 H.264의 라이센싱 이슈와 Theora의 비디오 질에 대한 문제를 해결할 수 있을 것으로 기대되지만, 모든 회사들이 구글이 만든 비디오 표준을 지원할 것인지에 대한 의문은 남아 있는 상황이다. , MS와 애플의 VP8 지원여부 같다.

 

어찌되었든 구글의 오픈 소스 코덱은 HTML5 표준 기반의 비디오 콘텐츠 제공을 준비하는 온라인 비디오 서비스 제공사들에는 희소식이 될 것으로 예상되며, 반면 어도비는 다시한번 궁지에 몰리는 신세가 됐다. 앞으로 어도비가 어떻게 대응해 나갈 수 있을지도 관심거리...


마지막으로 국내의 온라인 비디오 서비스 업체들도 이를 적극적을 활용하여 HTML5 표준 기반의 비디오 서비스 제공을 하면 좋지 않을까 생각된다. 앞으로 나올 수많은 다양한 단말에 효과적으로 대응할 수 있는 방법은 표준!!! 표준!!! 표준!!!

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. massagem 2014.05.01 21:47 신고  댓글주소  수정/삭제  댓글쓰기

    다시 올려 주실 수 있을까요??



티스토리 툴바