Dev./Web

HTML5란? HTML5에 대해서 알아보자!!

like miller 2010. 2. 1. 18:40

1. 웹의 발전 과정

 1989년 HTML1.0이 개발되면서 텍스트 위주의 웹 페이지가 나오게 되었다. 기술이 발전 됨에 따라 문서뿐만 아니라 이미지 등에 대한 요구가 생기게 되었고 사용자의 새로운 요구가 계속 됨에 따라 웹은 변화하게 되었다.

 1998년 HTML4.0이 표준화 되면서 css가 적용되게 되었고 사용자의 요구는 멀티미디어 뿐만 아니라 정적인 웹을 동적으로 변화시키기에 이르렀다. 조금 더 동적이고 Interactive한 환경을 위해서 JavaScript, Java applet, php, asp, jsp등 다양한 웹 언어가 생겨나게 되었고 그 후, RIA, AJAX같은 말도 많이 사용되기 시작하였다.

 이제 웹은 각 종 Contents가 넘쳐나게 되었고 조금 더 원할하고 화려한 효과를 위해 Flash, Flex, SilverLight, JavaFX, ActiveX등 표준화 되지 않은 각 회사의 상업적 효과를 기대한 기술들이 나오게 되었고 지금도 아주 유용하고 많이 사용되고 있다.

 이렇게 발전 웹은 PC에 별도의 프로그램을 설치하지 않고 모든 작업들을 웹에서 해결할 수 있는 시대가 열리게 하였다. information, content, application들이 내 컴퓨터 안에 있는게 아니라 web에 있다는 개념인 cloud computing 혹은 Software as a Service(SaaS) software를 내 컴퓨터에 별도로 설치하는 것이 아니라 인터넷에 있는 service로 제공되다는 개념이 되었다.

 

※웹의 발전과정

 

2.HTML5의 등장 배경과 정의

 HTML5는 구글, 애플, 모질라 재단이 주도하여 세계표준으로 정의하려고 하는 HTML4의 다음 버젼이다.

 HTML4 1998년도에정해진표준이다. 인터넷에서문서를표현하기위한마크업언어(Markup Language) 표준으로만들어졌다. 10년이 넘는 시간 동안 잘 사용되었다. 하지만 표준기관이 제 역할을 하지 못한 사이 거대한 기업들이 각자의 입 맛에 맞는 기술들을 개발하여 웹 기술을 선도하여 왔다. 때문에 지극히 간단하고 깨끗하고 어느 환경에서든지 같아야 하는 웹이 각종 Plug-in, ActiveX, 브라우져별 비호환등 막말로 더러워진 웹이 되어버린 것이다. 그래서 거대 기업의 막아놓은 기술을 사용하는 것이 아니라 세계 표준화되고 공개된 기술로 웹을 만들자는 의견이 나오게 된 것이다. 아니면 IT의 신흥 강자인 구글과 MS와 오랜 앙숙인 애플 그리고 오픈소스를 지향하는 모질라 재단이 현재 웹 기술 시장은 움켜쥔 MS, Adobe등에 대항하기 위한 것 일 수도 있다.

 어쨋든, HTML5의 공통된 배경은 Web으로 모든 것을 해결하는 시대에 맞게 이젠 web page를 만드는 언어도 native application 수준의 rich한 web application을 만들 수 있게 하기 위해 특정 plug-in에 의존할 필요없이 표준으로 정립하자는 것 이다.

 

3. HTML5의 새로운 기능

 1)Canvas

- 애플이 최초로 제안했으며 Mac OS X에서 Dashboard와 같은 위젯 어플리케이션을 동작 시키기 위해 소개

- HTML4는 그리기(Drawing)에 대한 정의 및 기능이 없음

  (글자로 구성된 문서를 보여주기 위한 포맷. 따라서, Flash와 같은 플랫폼이 발전하게 됨)

- HTML5에서는 그리기 영역과 그리기 API를 제공함, 브라우저에서 다양한 그래픽 구현이 가능함

  (Flash, SilverLight와 기능이 중복되는 부분이 많음)

- 2D Canvas의 경우는 이미 대부분의 브라우저에서 지원하고 있음 (IE 지원 안함)

- 3D Canvas 의 경우에는 최근 제안 형태로 발표되기 시작함 (OpenGL ES 2.0 기반)

- JavaScript로 그림 그리기 가능. 게임, 차트 등 그래픽 효과 가능

-예제 site

           

 http://www.macrumors.com/2009/09/13/                   http://www.sebleedelisle.com/2009/09/

webgl-support-begins-to-arrive-in-webkit/                   simple-3d-in-html5-canvas/

 

 

   

                  http://igrapher.com/                   http://www.nihilogic.dk/labs/mariokart/

 

 

 2) 표준 codec 기반의 멀티미디어 재생 환경

- 웹 멀티미디어 codec 표준화

- 기존에는 멀티미디어 재생을 위해 외부의 plug-in을 설치해서 재생해야만 했음

   (다수의 외부 플러그인 존재: Flash, Shockwave, Media Player, Quicktime...)

- HTML5에서는 표준 코덱을 선정해서 브라우저에서 플레이어를 기본 내장하도록 함

- OggH.264가 가장 유력한 후보

   (Firefox,opera:Ogg, Chrome:H.264,Ogg, Safari:H.264 지원함. , 유동적임)

- 멀티미디어 객체를 JavaScript로 Control 할 수 있다

- 예제 site

      

http://www.double.co.nz/video_test/video.svg    ttp://people.mozilla.com/~prouget/demos/

                                                                             DynamicContentInjection/play.xhtml

 

 3) Local storage / DB 지원

- 업체별 각각의 접근 시도가 있었음. 이를 HTML5 Local Storage로 표준화

   (IE userData, FF Dom Storage, Flash Local Shared Object, Google Gear)

- offline에서도 웹 어플리케이션을 사용 가능토록 하는 것이 주된 목적

- Session Storage Local Storage 를 제공함

    Session Storage : 현재 열린 창에서 사용될 수 있는 session data를 저장

    Local Storage : 다수의 창 간에 사용될 수 있는 특정 도메인의 데이터 저장

- 그 크기는 5M~10M 정도로 예상됨

- 예제 site

   http://people.w3.org/mike/localstorage.html

 

 4) Geo location API 지원

- 기기에서 제공하는 위치 정보(GPS/WiFi/3G based location)를 브라우저에서 Script API를 통해 제공받음

- 위치 정보 : 위도, 경도, 높이, 정확도, 진행방향, 진행속도

- 1회 요청 모드(getCurrentPosition)와 반복 요청 모드(watchPosition) 존재

- 캐쉬값(maximumAge) 설정을 하면 해당 기간 동안에는 저장된 값을 사용함

- 지도 정보의 정확도(enableHighAccuracy)를 설정할 수 있음 (네이버의 시,,동으로 표현되는 축척 개념)

- 예제 site

   http://www.browsergeolocation.com/

 

 5) Web Worker를 통한 백그라운드 프로세스 지원

- HTML4 지원 브라우저의 자바스크립트는 단일 프로세스로 순차적으로 동작함

- HTML5에서는 Web Worker라는 기술을 통해 다중 thread를 지원함

- 멀티프로세스 지원으로 인해 효율적인 task의 처리가 가능해 짐

- 부드러운 UI렌더링, 백그라운드 프로세스를 이용한 무거운 작업 실행

- 예제 site

   http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml

 

 6) Drag&Drop API 지원

- HTML4에서는 Flash등을 이용하여 파일 업로드 같은 기능을 구현

- HTML5에서는 Plug-in없이 외부 오브젝트의 Drag&Drop 이벤트를 구현

- 예제 site

  http://ljouanneau.com/lab/html5/demodragdrop.html

 

 7) 나머지 기능

- http://channy.creation.net/project/html5/html4-differences/Overview_ko.html 참고

 

4. Web Browser 별 HTML5지원 기능

 

 

'Dev. > Web' 카테고리의 다른 글

[스크랩] 지식채널e - 대한민국 네티즌 1%  (0) 2011.11.11