애플이 최근 세계적으로 주목받고 있는 아이폰과 아이패드에서 플래시를 지원하지 않고, 구글의 유튜브에서 HTML5 기반의 비디오 서비스를 시작하면서 인터넷 콘텐츠 서비스들이 크게 동요되고 있는 것으로 보인다. 또한 그동안 HTML5를 지원하지 않았던 MS의 IE가 IE9에서 HTML5의 비디오를 지원하고, 구글이 이번달에 있을 구글 I/O 컨퍼런스에서 H.264보다 기술적으로 우위에 있는 VP8 코덱을 오픈소스 프로젝트로 런칭할 것으로 예상되어 향후 표준 기반의 HTML5 비디오가 대세가 될 것으로 예상된다.

본 글에서는 이러한 예상은 좀더 구체적인 근거를 보여주는 자료가 있어 간단하게 소개하고자 한다. 아래 그래프는 encoding.com에서 제공한 것으로 온디맨드(On-demand) 비디오 인코딩에서 사용된 코덱에 대한 통계를 2009년 2사분기 부터 2010년 1사분기까지 보여준다. 이 자료는 MySpace에서 부터 MTV까지 다양한 클라이언트 를 위한 온디맨드 비디오 인코딩에 대한 통계이며, 작년에 대략 5백만 비디오가 인코딩되어 어떤 포맷의 활용이 늘었는지 또는 줄었는지 트랜드를 아주 잘 볼 수 있는 자료이다.




위의 그래프에서는 Flv와 Flash VP6가 플래시 비디오를 의미하고 이와 함께 현재까지 HTML5의 비디오 포맷으로 활용되고 있는 H.264와 Ogg Theora의 활용 통계를 보여준다. H.264의 경우 2009년 2사분기에 31%이던 점유율이 2010년 1사분기에는 66%까지 상승한 반면에 플래시(Flv와 Flash VP6 포함)의 경우는 69%에서 26%정도로 점유율이 급격히 떨어지는 대조적인 모습을 볼 수 있다. 이는 인터넷 동영상 시장을 거의 장악하고 있는 플래시의 힘이 약화되고 있음을 볼 수 있다. 

향후 어떻게 변할지 모르겠지만 다음과 같은 세가지 이유로 어도비 플래시가 지속적으로 궁지에 몰릴 가능성이 크다고 생각된다. 첫째, 주요 브라우저들의 공개 표준인  HTML5 비디오를 거의 모두 지원하고 있다. 거기에 MS에서 IE9을 공개할 때 OS의 하드웨어 가속화 API를 사용하는 등 브라우저의 발전이 상당히 빨라지고 있다.둘째, 애플을 포함한 제조업체들이 향후 출시할 수많은 제품들을 고려할 때 더이상 플래시 플러그인을 추가할 이유가 약해지고 있다는 것이다. 플래시 플러그인을 사용한다는 것은 제조업체 입장에서는 제품 개발이 타사에 의존성을 갖는 것이므로 바람직하지 않다. 셋째는 HTML5에서 큰 이슈중의 하나였던 코덱에 대한 문제가 구글의 VP8 오픈소스 코덱을 통해 해결이 될 예정이라는 것이다. 인터넷 콘텐츠 제공자 또는 관련 소프트웨어 개발 업체(브라우저 업체 포함)에서는 로열티 없이 사용할 수 있는 성능 뛰어난 오픈소스 코덱을 사용할 가능성이 크다. 또한 VP8 오픈 소스 프로젝트가 러칭한 후 바로 이를 지원하는 구글의 크롬과 파이어폭스 브라우저가 공개될 예정이다. 참고로 구글의 VP8에 대해 내용은 예전에 올렸던 "구글의 VP8 비디오 코덱 오픈 소스화??? 빠른 HTML5 기반 비디오 활성화 예상!!!" 글을 참고하기 바란다.


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

댓글을 달아 주세요


올해 4월15일에 제 블로그에서 "내 브라우저는 HTML5 기능을 얼마나 지원할까?"라는 글을 통해서 단지 사이트에 접속하는 것만으로 본인이 사용하는 브라우저가 HTML5를 지원하는 정보를 분석해주는 The HTML5 TEST를 소개한 적이있다. 이 시험 사이트에 가보면 알겠지만 아직 버전이 0.9로 되어 있으며 현재 1.0 버전을 개발 중에 있다. 0.9 버전에서는 총점을 160점으로 하고 있으나, 1.0 버전에서는 총점을 250점을 기준으로 평가하며 현재는 베타 형태로 운영하고 있다.  The HTML5 TEST 1.0 베타 서비스를 기준으로 주요 데스크탑 브라우저와 모바일 브라우저를 시험한 결과는 아래와 같다.
 

Desktop Browsers

BrowserVersionScoreBonus
Opera 10.5 118 1
Safari 4.0.5 123 4
Firefox 3.6.3 139 1
Chrome 5.0.342.9 167 4
Chrome 5.0.377.0 178 0
Safari r57509 190 4


Mobile devices

DeviceOperating SystemVersionScoreBonus
- Android 1.6 42 0
Apple iPhone iPhone OS 3.0 116 4
Apple iPhone iPhone OS 3.1 119 4
Apple iPad iPhone OS 3.2 121 4
Palm Pre WebOS 1.4 122 2
- Firefox Mobile 1.0 139 1
- Android 2.0 – 2.1 145 0
Apple iPhone iPhone OS 4.0 177 4

시험 결과를 보면 데스크탑, 모바일 구분없이 애플과 구글의 브라우저가 최상위권을 유지하고 있음을 확인할 수 있다. 애플의 Safari와 아이폰의 경우 그리고 구글의 크롬과 안드로이드의 경우를 볼때 새롭게 출시되는 브라우저 버전에서 크게 향상된 HTML5 기능을 지원하고 있는 것을 볼 수 있다. 이는 모두 웹킷 기반의 브라우저를 기반으로 하고 있지 때문이 아닌가 생각되며 또한 두 회사 모두 HTML5에 많은 노력을 하고 있음을 알 수 있다.


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

댓글을 달아 주세요

  1. polos ralph lauren 2013.04.20 16:26 신고  댓글주소  수정/삭제  댓글쓰기

    지독한 네게 의미를 준 너의 사랑

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

    미디어가 보여질 때 이들의 픽셀을 캔

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 신고  댓글주소  수정/삭제  댓글쓰기

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

기존의 HTML 환경에서는 그래프를 그리기 위해서 주로 이미지를 이용해서 표현을 해야했다. 하지만 이미지를 이용하는 경우 동적으로 변하는 데이터를 그래프로 표현할 때 서버에서 동적으로 이미지를 만들어서 붙여주어야하고, 다양한 단말을 지원하기 위해서는 이미지의 크기를 최적화시키기 위한 노력이 필요했다. 이런 이유로 어떤 그래프는 선명하지 하지 않고 부자연스럽게 보여지는 경우가 많았다.


그러나 차세대 HTML 표준인 HTML5는 2D 그래픽을 지원하기 위한 기능으로 캔바스(Canvas)와 SVG(Scable Vector Graphic)를 지원하여 그래프를 자연스럽게 표현할 수 있다. 본 글에서는 캔바스 기능을 이용하여 쉽게 다양한 그래프와 챠트를 그려주는 유용한 툴인 jQuery Visualize를 소개한다. jQuery를 앞에 붙인 이유는 Visualize가 jQuery의 플러그인 프로그램이기 때문이다.


jQuery Visualize는 자바스크립트와 HTML5 캔바스(Canvas) 엘리먼트를 이용해 멋진 막대 그래프, 선 그래프, 영역 또는 원 챠트를 그릴 수 있도록 지원해주는 jQuery 플러그 인(Plug-in) 프로그램이다. 그래프로 표현이 필요한 데이터를 HTML 테이블을 이용하여 정리하면, Visualize 플러그인은 HTML 테이블의 정보를 분석한 후 HTML5 캔바스 엘리먼트와 API를 이용해서 다양한 형태의 그래프를 그려준다.


아래는 jQuery Visualize를 이용한 간단한 예를 보여준다. 아래의 테이블의 정보를 분석하여 테이블 아래에 있는 다양한 형태의 그래프를 그려준다.





jQuery Visualize 툴에 대한 세부적인 사용방법은 아래 원문의 문서를 참고하면 된다.


(참고문헌) Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

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

댓글을 달아 주세요

  1. yonupark 2011.10.06 10:12 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 jquery visualize로 차트를 개발하고 있습니다.

    차트 소개글을 보고 이렇게 들어와 그래프 관련 하나를 감히 여쭙고자 글을 올립니다.

    jquery visualize가 다 좋은데 음수 표현에 문제가 있습니다.

    음수표현할 때 Y축에 0(영)이 기준이 되지않습니다.

    혹시 이 부분에 대해서 답변을 주실 수 있으신지요??

    감사합니다.

  2. ssonacy 2012.01.09 08:36 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 이건 무료로 사용할수 있는것입니까 ?

  3. water cooling guide 2012.02.17 12:30 신고  댓글주소  수정/삭제  댓글쓰기

    인이컴백하면서바나나다이어트로 저이가되었네요.

  4. This Link 2012.03.26 02:13 신고  댓글주소  수정/삭제  댓글쓰기

    진실을 조용 슴 새기라.'것또한 나리라.

  5. pandora style beads 2013.04.22 03:58 신고  댓글주소  수정/삭제  댓글쓰기

    해도 과언이 아니다

  6. portefeuille longchamp 2013.04.24 03:35 신고  댓글주소  수정/삭제  댓글쓰기

    생산되지 않은 겨울철에 주로

  7. online ocr service 2014.01.12 23:50 신고  댓글주소  수정/삭제  댓글쓰기

    분석의 시작 부분에 참조 표준을 분석. 표준 농도는 공지 된 장비를 교정과 정확성을 확인하기 위해 사용된다. 모든 샘플은 표준의 작동 범위 내에 있어야합니다. 그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  8. handwriting ocr 2014.01.19 00:24 신고  댓글주소  수정/삭제  댓글쓰기

    해서는 이미지의 크기를 최적화시키기 위한 노력이 필요했다. 이런 이유로 어떤 그래프는 선명하지 하지 않고 부자연스럽게 보여지는 경우가 많았다.

  9. infomercial production 2014.02.03 05:29 신고  댓글주소  수정/삭제  댓글쓰기

    이 게시물은 HTML5 Tsanvas 나 관심에 관한 것입니다. 이런 좋은 일을 주셔서 감사합니다. 그것을 유지하고 당신에게 행운을 빕니다.

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

    그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  11. massagem 2014.05.09 01:10 신고  댓글주소  수정/삭제  댓글쓰기

    그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

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

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

최근 구글의 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)

댓글을 달아 주세요

HTML5에 관심이 있는 사용자라면 당연히 자신이 사용하는 브라우저가 HTML5 기능을 얼마나 지원하고 있는지 궁금할 것이다. The HTML5 TEST 사이트는 이와 같은 궁금증을 해결해 준다. HTML5의 다양한 기능들을 세분화하여 시험한 후 이에 대한 결과를 깔끔히 정리하여 보여주는데 재밌는 것은 이를 점수화하여 보여준다는 것이다. 기준이 되는 총 점은 160점이며 이를 기준으로 브라우저를 시험한 후 점수를 보여준다. HTML5의 기능은 아래와 같은 그룹으로 나누어 평가해서 보여준다.

- Doctype
- Canvas
- Video
- Audio
- Geolocation
- Storage
- Offline Web Applications
- Workers
- Section elements
- Grouping content elements
- Text-level semantic elements
- Forms
- User interaction

아래의 사진은 Opera 10.51 브라우저로 시험한 결과로 총점은 102점!



구글 크롬 4.1.249.1045 버전의 총점은 118점!  오페라보다 훨씬 높은 점수.



파이어폭스 3.6.3 버전의 총점은 101점! 오페라와 거의 비슷.



아이폰 사파리 브라우저는 예상보다 높은 113점!!! Good Job~




안드로이드 폰도 해보고 싶은데 없어서 아쉽다...




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

댓글을 달아 주세요

  1. 에테르 2010.05.26 22:04 신고  댓글주소  수정/삭제  댓글쓰기

    안드로이드폰에서 돌핀브라우저로 테스트해보았는데
    118점 나왔네요. 10년 5월 26일 기준 최신버전(1.2.0)

  2. karazhan 2010.07.30 09:43 신고  댓글주소  수정/삭제  댓글쓰기

    아이폰 4.0 의 사파리로 185점 +7 보너스 나왔습니다.
    2010.7.30 오전에 테스트했어요.

  3. karazhan 2010.07.30 10:04 신고  댓글주소  수정/삭제  댓글쓰기

    구글 HTC 디자이어에 내장된 브라우저 151점 +0 보너스 나왔습니다.
    역시 비슷한 시간이에요.
    크롬을 내장하고 있을줄 알았는데 HTC 커스텀 브라우저가 내장되어 있네요.
    안드로이드 2.1 에서 확인했습니다.

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

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


이메일: wslee AT w3.org 또는 wonsuk73 AT gmail.com

안녕하세요. 2015년 2월부터 ETRI(한국전자통신연구원) 표준연구센터에서 근무하고 있는 이원석(Wonsuk Lee)입니다. 2011년 4월부터 2015년 1월까지 삼성전자 모바일 브라우저팀에서 수석연구원으로 근무하였고, 2003년 5월부터 거의 8년동안 한국전자통신연구원 표준연구센터에 근무하면서 주로 웹서비스, 시맨틱 웹, 유비쿼터스 웹 등에 대한 연구를 하였습니다. 2009년 부터는 HTML5, Media Annotation, Device API 등 웹 애플리케이션 관련 기술에 대한 연구를 진행했었습니다. W3C에서 다양한 워킹그룹(WG)을 활동에 참여하고 있으며, 현재 System Applications WG 의장을 맡고 있고, Device APIs WG, HTML WG, Web Application WG 등에서 활동하고 있습니다.

아래의 문서들은 W3C에서 직접 에디터 개발했던 표준들입니다. 

2. W3C Device APIs WG (주의: 아래문서는 크롬, 파이어폭스, 오페라를 통해서 보세요^^ IE에서는 제대로 보이지 않습니다.)
  • The Gallery API, W3C Editor's Draft 14 April 2010.
  • Application Launcher, Work in Progress.

그리고 2009년 초부터 MPEG 표준화 활동(ISO/IEC JTC1 WC29 WG11)에도 참여하고 있으며 제가 공동 에디터로 개발했던 표준으로 2011년에 최종표준이 되었습니다.

3. ISO/IEC JTC1 WC29 WG11 (aka MPEG)
  • MPEG extensible middleware (MXM) - Part 1: MXM architecture and technologies
  • MPEG extensible middleware (MXM) - Part 2: MXM API
  • MPEG extensible middleware (MXM) - Part 3: MXM reference software

그리고 제가 2006년 1월부터 표준을 개발하기 시작한 차세대 통신망을 위한 개방형 서비스 환경 기능은 2008년 9월에 ITU-T의 공식 표준으로 승인되었습니다.

4. ITU-T SG13 (Next Generation Network)

5. 최근 활동 정리


저작자 표시 비영리 변경 금지
신고

'블로그 운영자 소개' 카테고리의 다른 글

블로그 운영자 소개  (7) 2010.04.14
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. epson eh-tw3200 2012.02.17 05:07 신고  댓글주소  수정/삭제  댓글쓰기

    문 만이장난 아니랍니다.저도 근다이어트해 6k 량감량했는데지부는바나나다이어트로5kg감량에도전해야겠어요

  2. kalindi 2012.02.22 15:43 신고  댓글주소  수정/삭제  댓글쓰기

    너는나 랑고나 너를사랑했다.우 둘은늘곁 었다.그러나남몰래 소리없이

  3. pandora style beads 2013.04.20 23:53 신고  댓글주소  수정/삭제  댓글쓰기

    제외하고 모두 세개

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

    그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  5. massagem 2014.05.09 01:10 신고  댓글주소  수정/삭제  댓글쓰기

    우 둘은늘곁 었다.그러나남몰래 소리없이

  6. Life Experience Degrees 2015.03.09 18:03 신고  댓글주소  수정/삭제  댓글쓰기

    6k 량감량했는데지부는바나나다이어트로5kg감량에도전해야겠어...



티스토리 툴바