[ Smartech]

Dextrose의 소셜 게임 개발 플랫폼 'Aves' 엔진은 plugin기술을 없이도 HTML5기술을 이용하여 웹 브라우저에서 동적인 게임을 개발할 수 있는 게임엔진입니다.  즉, HTML, CSS, JavaScript등을 이용해서 게임을 개발 할 수 있도록 도와주는 일종의 SDK라고 보시면 됩니다.

HTML5기반이기 때문에 일반 PC뿐만 아니라 HTML5를 지원(iPhone safari, chrome browser, mozilla의 fennec, opera등)하는 여러 모바일 디바이스에서 구동이 가능하다는 점이 아주 큰 장점입니다.  HTML5기반의 게임들에 대해서는 제 이전 포스팅을 참고하세요(2010/10/09 - [Next WEB/HTML5] - HTML5 기반의 게임들)

• Google : http://www.html5rocks.com/
• Apple : http://developer.apple.com/safaridemos/
• Mozilla : https://developer.mozilla.org/en/HTML/HTML5
• MS : http://ie.microsoft.com/testdrive/  

애플과 어도비 플래시 이슈, 구글의 전폭적인 지지등으로 관심을 받고 있는 HTML5에 대해서 간단하게 정리한 문서입니다. 저도 지금 HTML5에 대해서 보고 있는 중이라서 정리가 잘 안 되지만 앞으로 계속 조금씩 정리해갈 생각입니다. 

HTML5의 시작은  W3C와는 다른 조직체였던 WHATWG(Web Hypertext Application Technology Working Group)으로 볼수 있습니다. WHATWG는 HTML의 개발 및 관련기술에 관심을 가지고 있던 Apple, Mozilla, Opera가 주축이 되어 2004년에 만들어진 조직체로 Web Applications 개발을 위한 HTML과 APIs등의 표준화에 초점을 맞추고 있었고, WHATWG를 통해서 만들어진 결과물들은 2007년부터 슬슬 W3C에 채택되어 현재까지도 여러 Working group에서 표준화 작업을 진행중(Working Draft)입니다. 

HTML5가 도대체 뭐길래 이렇게 난리인가?

<이미지 출처: http://www.toptechreviews.net/wp-content/uploads/2010/06/Apple-to-Showcase-New-Features-of-HTML5.jpg>

제가 보기에는 한마디로 HTML5는 Plugin없이 Rich Web Application을 지원하기 위한 것이 가장 큰 목적이라고 할 수 있습니다. 아래 HTML5의 범위에서 설명하겠지만, HTML5는 크게 HTML표준과 여러 API표준으로 나눠서 볼 수 있습니다. 

새롭게 추가된 video/audio, cavas등의 대표적인 엘러먼트들외에도 WebForm, 그리고 Semantic과 관련된 element들이 있고, 새로 추가된 API로는 device관련, offline관련, storage관련등이 추가되었습니다.

이런 여러 새로운 표준들을 통해서 Rich Web Application을 개발할 수 있게 되는 데, Adobe의 Flash나 MS의 Siverlight, SUN(IBM?)의 JavaFX등의 여러 기술들이 HTML5로도 가능하게 됩니다. 

HTML5라고 해서 기존 개발 방식과 크게 달라지는 것은 없습니다. 개발 방식은 여전히 HTML + CSS + Java script(APIs)로 할수 있습니다.  

HTML5의 범위

 

HTML5 표준의 범위에 대해서 정의한 문서는 아직 보질 못했습니다. 여러 보는 시각에 따라서 HTML5의 범위가 달라질수 있습니다.^[각주:1] 현재 일반적인 분위기는 HTML5와 여러 관련된 API 표준들을 묶어서 상당히 포괄적인 의미로 HTML5로 보는 경향이 있습니다. 이는 HTML5가 Rich 

Web Application의 개발까지 가능하게 하는 것을 목적으로 한다라는 관점에서 보면 이해가 되기도 합니다만 굉장히 많은 관련 표준들이 있어서 혼란스럽기는 마찬가지입니다. 

제가 보는 관점에 가장 간단한 방법은 WHATWG를 통해서 표준화된 내용들과 W3C에서 진행 중이거나 완료된 표준(e.g. SVG)들의 집합으로 보면 좋을 것 같습니다.  아래는 WHATWG를 통해서 표준화된 내용들입니다. 

	WHATWG Specifications  (and sections therein)	Section links for  Web Applications 1.0	W3C/IETF Specifications
HTML5 only (excluding newer features)			Single-page, Multi-page (HTMLWG)
Microdata	In WHATWG HTML	Microdata	Microdata (HTMLWG)
2D Context	In WHATWG HTML	2D Context	2D Context (HTMLWG)
Communications - Cross-document messaging	In WHATWG HTML	Cross-document messaging	Communications (HTMLWG)
Communications - Channel messaging	In WHATWG HTML	Channel messaging	Communications (HTMLWG)
Device Element	In WHATWG HTML  (note: not in Last Call for HTML5)	Device  see also [1]	HTML Device (HTMLWG)  see also [2]
Web Workers	Web Workers specification	Web Workers	Web Workers (WebApps WG)
Web Storage		Web Storage	Web Storage (WebApps WG)
Web Sockets API		Web Sockets API	Web Sockets API (WebApps WG)
Web Sockets Protocol		Web Sockets Protocol	The Web Socket Protocol (IETF)
Server-Sent Events		Server-sent Events	Server-sent Events (WebApps WG)
Web SQL Database (stalled)			Web SQL Database (WebApps WG)

(출처: http://wiki.whatwg.org/wiki/FAQ)

Markup측면에서의 HTML5

• HTML5 스펙에서는 아래와 같은 내용들이 추가되었습니다.

1. Semantic Markup
   1. semantic web을 위해서 아래와 같은 element들이 추가
      
2. Video/Audio
   1. 동영상과 오디오 지원(video codec으로는 WebM, H.264등)
3. Canvas
   1. 동적인 그래픽을 rendering할때 이용하는 element
   2. http://www.w3.org/TR/2dcontext/
4. Microdata
   1. HTML element에 삽입하여 이용하는 것으로 요소가 데이터로서 어떤 의미를 가지는 지를 나타내는 기능.
   2. 현재까지 지원하는 브라우저가 없음.
   3. http://www.
      w3
      w3.org/TR/microdata/
5. Webform
   1. 새로 추가된 기능
      
      1. Validation ( required, pattern, maxLength, min/max, step등의 attr 이용 가능)
      2. 자동 완성기능(autocomplete attr을 이용)
      3. placeholder attribute : 입력 필드에 대한 간단한 설명을 표시
      4. autofocus attribute : 페이지로딩이 끝남과 동시에 자동으로 해당 폼으로 커서 이동
   2. input element의 새로운 타입들
      1. tel
      2. email
      3. url
      4. search
      5. datetimes, date, month, week, time, datetime-local
      6. number
      7. range : 일정 범위의 숫자를 입력하기 위한 요소
      8. color
   3. 새로운 element들
      1. output : 가능상태의 hidden요소 . 요소의 값은 화면에 출력되는 동시에 form 송신시 서버로 전송
      2. keygen : 공개키 암호 방식의 키쌍을 생성(form송신시 비밀키와 공개키가 생성되어 공개키가 서버에 전송)
      3. progress : 작업 진행을 나타내는 시각적인 요소
      4. meter : 일정 범위 안의 비율이나 수치를 표현하기 위한 시각적인 요소
6. drag & drop 기능
   1. draggable , dragstart event , dragenter, dragover, drop등을 이용
7. 루비(ruby/rt/rp)
   1. 한자등의 발음등을 표시할때 이용.
8. inline MathML and SVG
9. Other new elements.
   1. command
   2. datalist
   3. details
   4. embed
   5. figure
   6. figcaption

• 잘 사용되지 않거나 CSS를 통해서 다루는 것이 더 좋거나 사용자에게 부정적인 영향을 미치는 등 여러 이유로 아래의 element들은 더이상 사용하지 않을 것을 권장함.

1. basefont
2. big
3. center
4. font
5. s
6. strike
7. tt
8. u
9. frame
10. frameset
11. noframes
12. acronym
13. applet
14. isindex
15. dir

New API specification

HTML5 Communications (Editor's Draft)

• Same origin policy의 단점인 Cross domain 문서 접근을 가능하게 해주는 표준.
• MessageEvent Interface
  • data : Returns the data of the message.
  • origin : Returns the origin of the message, for server-sent events and cross-document messaging
  • lastEventId : Returns the last event ID, for server-sent events.
  • source : Returns the WindowProxy of the source window, for cross-document messaging.
  • ports : Returns the MessagePortArray sent with the message, for cross-document messaging and channel messaging.
• Cross-document messaging
  • 송신하는 쪽과 수신하는 쪽이 서로 신원을 확인하는 방법을 통해서 same origin policy 이슈 해결
  • postMessage()와 onmessage event handler이용
• Channel messaging
  • N:N 통신을 위한 API
  • 메세지 송수신을 중개하는 MessageChannel의 2개의 port를 이용.
• W3C(HTML5 Communications) : http://dev.w3.org/html5/postmsg/

Offline Web Applications(Working Draft)

• 오프라인 상태에서도 웹이 동작할 수 있도록 하는 애플리케이션
• Application cache
• 웹 애플리케이션이 필요로 하는 리소스를 클라이언트 쪽에 캐시하는 기능
• CACHE, FALLBACK, NETWORK의 section을 가짐.

• W3C(Offline Web Applications): http://www.w3.org/TR/offline-webapps/

Web Storage(Working Draft)

• Cookie와 같이 클라이언트에 적은 양의 데이타를 저장하기 위한 스토리지임.
• Cookie와의 차이점은
  1. 크기 제한이 없다(cookie는 4KB로 제한)
  2. 서버로 전송하지 않는다.(쿠키는 HTTP를 통해서 서버로 전송되지만 web storage는 전송하지 않음)
  3. Javascript 객체 저장할 수 있음(cookie는 저장할 수 없음)
  4. 유효기간 제한이 없음(cookie는 특정 시간이 지나면 자동 삭제되지만 web storage는 삭제되지 않음)
• 2 type of Web storage
  1. local storage(localStorage)
     1. cookie와 유사하게 각각의 도메인에서만 사용가능
  2. session storage
     1. window와 같은 유효 범위, 생존범위를 가지며, 도메인마다 따로 생성됨.
     2. 즉 window가 종료되면 session storage도 삭제됨.
• W3C : http://www.w3.org/TR/webstorage/

Web SQL Database (Editor's Draft)

• 2009년 12월 버전 이후로는 스펙의 책정이 중지됨. 이용할 수 있는 SQL의 사양에 대해 브라우저 개발사간의 동의를 얻지못한 것이 주원인임. 
• Indexed database API로 변경될 것으로 보임.
• W3C : http://dev.w3.org/html5/webdatabase/

Server-Sent Events(Editor's Draft)

• HTTP 환경에서 서버로부터의 data push를 지원하기 위해서 client API와 push Data를 정의
• 서버로부터 푸시된 데이타를 일반적인 DOM이벤트처럼 처리가능
• 동작
  • 클라이언트 EventSource객체가 *polling방식*으로 주기적으로 서버에 요청하고 응답 데이타의 해석처리.
• push data format
  • 유효 필드: event, data, id, retry
  • e.g.

    id: event1  data: event1 data sample

• W3C(Server-Sent Events) : http://dev.w3.org/html5/eventsource/

Web Workers(Editor's Draft)

• 자바스크립트를 병렬적으로 background에서 실행시키기 위한 API.
• UI(DOM) 쓰레드와는 별개의 쓰레드로 동작 가능하여, CPU 부하가 많은 작업들은 여러 worker로 작업할 수 있으나 DOM을 조작할 수는 없음.
• W3C : http://dev.w3.org/html5/workers/

Web Sockets API(Editor's Draft)

• Full Duplex를 실현하기 위한 표준으로 클라이언트 뿐만 아니라 서버 쪽도 Web Socket를 지원해야 함
• 연결이 되면 HTTP에서는 지원되지 않았던 진정한 의미의 데이타 푸시가 가능해짐.

• W3C(The WebSocket API) : http://dev.w3.org/html5/websockets/
• Web Socket protocol : http://www.whatwg.org/specs/web-socket-protocol/
• Web Socket extension for Apache HTTP Server(open-source) : http://code.google.com/p/pywebsocket/

Geolocation API(Editor's Draft)

• 현재 디바이스의 위치 정보를 얻기 위한 자바스크립트 API
• 3개의 메소드로 이루어진 간단한 API이며 네트워크 정보 또는 GPS등을 통해서 위치를 알려주나 정보의 출처는 알 수 없음.
• getCurrentPosition, watchPosion, clearWatch
• W3C(Geolocation API Specification) : http://dev.w3.org/geo/api/spec-source.html

File API(Working Draft)

• local file의 내용에 접근할 수 있는 API.
• 파일의 내용을 직접 읽어 들일 수 있음.
• W3C(File API) : http://www.w3.org/TR/file-upload/

XMLHttpRequest Level2(Working Draft)

• XMLHttpRequest의 업데이트 버전으로 아래와 같은 내용들이 추가될 예정
  • Cross domain으로 요청을
  • file, binary data, form data 등이 송수신 가능
  • 요청 진행 상황 확인 가능
• W3C(XMLHttpRequest Level 2) : http://www.w3.org/TR/XMLHttpRequest2/

Indexed Database API(Working Draft)

• Web SQL Database 및 Web Storage의 단점을 해결하기 위해 표준화.
• database open, object store 생성
• 객체의 저장과 삭제
• index 작성 및 이용
• 효율적인 검색 및 커서 조작
• W3C(Indexed Database API) : http://www.w3.org/TR/IndexedDB/

Selectors API Level 1(Candidate Recommendation)

• W3C(Selectors API Level 1) : http://dev.w3.org/2006/webapi/selectors-api/

Media Capture API

• W3C(Media Capture API) : http://dev.w3.org/2009/dap/camera/

Other Specifications

WebGL(Not W3C)

• Intro
  • based on OpenGL ES 2.0
  • Uses the HTML5 canvas element
  • accessed using Document Object Model interfaces
• link
• WebGL Specification : https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html
• 이전글 : 2009/11/04 - [Browser] - 웹 브라우저에서 3D게임을 하는 시대가 오는가?

HTML5 Demo

• Game: http://www.apple.com/html5/
• SkechPad : http://mugtug.com/sketchpad/
• Apple HTML5 Showcase: http://www.apple.com/html5/
• HTML5 Showcase: 48 Potential Flash-Killing Demos
  • http://www.hongkiat.com/blog/48-excellent-html5-demos/
• Photo Editor : http://mugtug.com/darkroom/
• Dynamic Content Injection Demo  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
• Mozilla : HTML5 Video Player Demo : http://people.mozilla.com/~prouget/demos/mashup/video.xhtml 
• Mozilla : Dynamic Content Injection Demo : http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml 
• TweetDeck’s HTML5(video) : http://techcrunch.com/2010/05/19/tweetdecks-html5-browser/
• Try out the Open Standard Media Player by MediaFront Demo: http://www.mediafront.org/project/osmplayer
• Google HTML5: http://www.html5rocks.com/