본문바로가기
You are here: Home / HTML5 대한민국 관심그룹 18차회의를 다녀와서…

HTML5 대한민국 관심그룹 18차회의를 다녀와서…

By on 2012-10-15

HTML5 대한민국 관심그룹 18차회의를 다녀와서…

HTML5 대한민국 관심그룹 18차회의는 다음과 같은 agenda로 진행되었다.

이번 회의는 agenda중에서 3개의 섹션이 발표 되었다.

  1. Typed Array
  2. Windows runtime
  3. Shadow DOM

섹션 발표 이전에 이전 회의(17차 회의) 이후에 나온 표준화 이슈들에 대해서 이원석님의 간단히 정리하는 시간이 있었다. 회의도 좋은 내용이 많지만, W3C 이슈를 계속 접하는 것이 아니기 때문에, 이 짧은 시간이 나에게는 항상 유익한 시간이 된다.

W3C 표준화 이슈

web cryptography api

그 중 첫번째가 web cryptography api. 인증서 관련 API. 회의를 다녀온 뒤에 다시 검색을 해보니 좋은 자료들을 찾을 수 있었다.

Gecko 및 Webkit에서 현재 구현 중이지만, 보안문제를 앞으로 어떠한 방향으로 어떻게 풀어 나갈지 그 부분이 가장 중요한것 같다.

w3c system applications wg

두번째는 w3c system applications wg에 관한 내용이었습니다. 이미 HTML5 대한민국 관심그룹 17차회의를 다녀와서…에서 소개된 적이 있다.

TPAC 2012

W3C TPAC(Technical Plenary / Advisory Committee Meetings Week) 2012 행사가 10월 29일 ~ 11월 2일 열린다고 한다.

첫번째 시간 : Typed Array

동국대 이창환 교수님이 발표를 해주셨으며, 발표자료를 준비하는 과정에서 처음에는 여러개를 참고했다고 한다.

여러개를 참고하던 중 정리가 잘된 사이트가 하나 등장한다. HTML5 ROCKS – TYPED ARRAYS: BINARY DATA IN THE BROWSER

Typed Array는 비교적 최근에 브라우저에 추가되었다. WebGL에서 binary data를 효율적으로 처리하기 위해 탄생하였다.

내가 이해한건 간단하게 풀면, WebGL에서 데이터를 전송하는데, 바이너리 형태의 데이트를 자주 사용한다. 이때 자바스크립트와 네이티브 언어와의 Array Type을 맞춰주는 것에서 시작했다고 이해를 했으며, 사용법 및 History는 HTML5 ROCKS에 정리가 잘 되어있다.

이 스펙은 WebGL, OpenGL과 관련이 있어서 그런지, W3C가 아닌 khronos에서 WD(Working Draft)로 진행중이다.

발표자료 : http://www.slideshare.net/yich/html5-kig-typed-arrays

두번째 시간 : Windows runtime

Windows runtime은 MS의 황리건님이 발표를 했다.

HTML5 대한민국 관심그룹에서 하는 회의여서, HTML, CSS, 자바스크립트를 활용하여 Metro Style Apps를 만드는것에 초점이 맞춰져 있었다.

Windows 8 Platform은 다음과 같이 구성되어있다.
Windows 8 Platform
출처 : Adventures in Windows 8: Writing WinRT Components

Windows 8 Platform은 Windows Core OS Services(Win32, BitLocker, Active Directory, etc…)를 기반으로 Metro style Apps과 Desktop Apps으로 분류된다. OS Services를 기반으로 HTML, CSS, Javascript와 Windows runtime API들을 활용하여 Metro style App을 만들 수 있다.

Windows 8 Language Projection은 다음과 같이 구성되어있다.
Language Projections
출처 : Adventures in Windows 8: Writing WinRT Components

이 부분을 설명하면서, 게임 컨트롤러에 대한 샘플을 보여줬으며, 그 예제는 RSS 피드를 비동기식으로 검색하기위한 JS, C#, VB, C++ 코드들 이었다. 결론은 서로 다른 언어에서 WinRT API를 사용할 수 있도록 한다.는 것이다.

그 외 Windows8 웹 플랫폼에서 하드웨어 가속이 지원되는 부분이 많이 추가 되었다.

  • CSS 3D Transforms
  • CSS Animations
  • CSS Flexbox
  • CSS Grid Alignment
  • CSS Hyphenation
  • CSS Image Values (Gradients)
  • File APIs
  • FormData
  • HTML5 Application Cache
  • HTML5 async
  • Web Sockets
  • Web Workers
  • XMLHttpRequest (Level 2)
  • 등등…

API reference for Windows Store apps에서 API reference들을 확인할 수 있다.

발표중 Windows Library for JavaScript (WinJS)도 간단히 소개되었고, jQuery, dojo, node.js등의 라이브러리등을 많이 쓰는데 그 부분과의 충돌이 발생하는 이슈가 있는것 같다.

회의를 다녀온 후 Windows runtime, windows 8 app이라는 키워드로 여러가지를 검색해보니 다양한 내용을 접할 수 있었다.

세번째 시간 : Shadow DOM

W3C에서 Shadow DOM이라는 내용이 있다.

Shadow Dom이 무엇인지 가장 쉽게 설명은 한다면, 예를들면, HTML5 에는 video태그가 있다. 이 video를 사용했을때 실제 브라우져에 파싱되어 나오는 소스를 비교해 보면 이해가 쉬울 것이다.

video태그의 예제 사이트
출처 : sublimevideo

예제사이트의 HTML

  1. <video class='sublime' data-name='Home' data-sublime-settings='initial-overlay:none'
  2. data-uid='home' height='306' id='home_video' poster='http://d1p69vb2iuddhr.cloudfront.net/assets/home/poster_frame-d28d2da7d0e272ad3a417a3732020a07.jpg'
  3. preload='none' width='544'>
  4.     <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"
  5.     />
  6.     <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"
  7.     data-quality="hd" />
  8.     <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"
  9.     />
  10.     <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"
  11.     data-quality="hd" />
  12. </video>

파싱후 코드

  1. <div id="sublime_video_wrapper_0" class="sublime_video_wrapper" style="width: 544px ! important; height: 306px ! important; margin: 0px ! important;">
  2.     <div class="sublime_video_content">
  3.         <img style="width: 544px ! important; height: 306px ! important; top: 0px ! important; left: 0px ! important; max-width: 544px ! important;"
  4.         src="http://d1p69vb2iuddhr.cloudfront.net/assets/home/poster_frame-d28d2da7d0e272ad3a417a3732020a07.jpg"
  5.         data-width="544" data-height="306">
  6. <span class="sv_play_button" style="background-image: url(" http://cdn.sublimevideo.net/p/beta/play_button.png?t=ibvjcopp
  7.         ") ! important; background-color: transparent ! important;"></span>
  8.  
  9.         <video id="home_video" class="sublimed" width="544" height="306"
  10.         preload="none" poster="http://d1p69vb2iuddhr.cloudfront.net/assets/home/poster_frame-d28d2da7d0e272ad3a417a3732020a07.jpg"
  11.         data-uid="home" data-sublime-settings="initial-overlay:none" data-name="Home"
  12.         tabindex="0" style="display: none;" data-poster="http://d1p69vb2iuddhr.cloudfront.net/assets/home/poster_frame-d28d2da7d0e272ad3a417a3732020a07.jpg">
  13.             <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source>
  14.             <source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source>
  15.             <source src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source>
  16.             <source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source>
  17.         </video>
  18.         <div class="sv_badge"></div>
  19.     </div>
  20.     <div class="sv_badge sv_ext"></div>
  21. </div>

이 예제가 이해하는데는 나에게 제일 쉬웠다. Shadow DOM 발표자료 26페이지의 내용이 위의 내용이다.

간단한 이해를 마치고 돌아와 검색해보니 여러 자료를 찾을 수 있었다.

Posted in , , | Tagged

Leave a Reply