html5-topper.png



 
"HTML 5 is really the second coming of this Web stuff — of the Web"

 
- Dion Almaer                          
(co-founder of the Ajaxian Web site and co-director of developer tools at Mozilla)




오늘부터 HTML 5 에 관해서 이야기를 해보려한다.
요즘 HTML 5 에 대한 관심은 지금까지 IT 에 관련된 어느 사건, 어느 주제에도 견줄 수 없을 정도의 관심이라 생각한다.

넷스케이프의 등장으로 인한 인터넷혁명(나는 학교의 한 실험실, Windows 3.1 에 설치된 PC 에서 Netscape 2.0 을 처음 실행할 때의 상황을 아직도 잊지 못한다. 그 많은 선후배, 친구들을 제치고 마우스 한번 잡아보겠다고... ㅋㅋㅋ 지금 생각하면 너무도 심플한 화면이 뜨는 걸 보고 있는... 신기해 하기만 했던...),
Windows95 가 세상에 나타났을 때 PC 산업의 발전,
아이폰으로 시작된 스마트폰 혁명.
(또 다른 사건이 있을까요? 제가 지식이...^^;
.NET 등장과 ie 6 릴리즈 등도 꼽는 분도 계시긴 한 것 같은데... 위 사건보다는 소소하다 생각이 들어서... ^^;)

이러한 사건들을 이어 "HTML 5" 의 등장?은 이제 Web 2.0 을 넘어 다음 세대의 환경에서 없어서는 안될 화두로, 아직 표준이 확정되지 않은 상황에서 시기 상조라는 조심스런 우려속에서도 많은 개발자를 비롯한 웹기획자, 웹디자이너들, 웹컨텐츠 제작자들뿐만아니라 웹소비자 에게도 반드시 필요한 지식으로 웹의 새로운 혁명의 주체가 될 것이라는 의견에는 그 누구도 반문하지 않는다. (학학학... 너무 장황하게 긴 호흡의 글을 쓰자니... 너무 힘들다... ㅡㅡ')

이렇게 많은 이들이 관심을 가지고 있는 주제에 관해 이야기를 한다는 것이 아주 많이, 너무도 많이, 아니아니 완전 부담스럽긴하다.
그리고 많은 이들이 원하는 "HTML 5" 라는 주제가 현재 아직 표준이 확정되지도 않은데다가
"HTML 5 로 무엇을 할 수 있을까?" 라고 생각하고 접근하는 분들을 만족시키기 위한 HTML 5 의 내용은
HTML 5 자체의 내용뿐만아니라 CSS 3.0, JavaScript 모두를 의미하고 있기때문에 다루어야 할 세부주제를 잡는 것 까지도 그리 만만치 않은 작업이었다.

이번에 잡은 "HTML 5" 의 주제는 많은 분들이 실망을 하실지는 모르지만
순수한... "HTML 5" 에 대한 내용만으로 채울 생각이다.

먼저, 고심? 끝에 정한 세부 주제를 먼저 살펴보면...

1. HTML5 개요
2. HTML4 vs HTML5 (1)
3. HTML4 vs HTML5 (2)
4. Sementic Element (1)
5. Sementic Element (2)
6. Strong Web Form
7. Rich Text Edit API
8. Video
9. Audio
10. Canvas
11. Drag & Drop
12. Offline Web Application
13. Communication API
14. Web Storage
15. Web SQL Database
16. Web Worker
17. Web Socket
18. GeoLocation API
19. SVG
20. File API


이런 순서로 진행하려고 합니다. 어떨까요? ^^

 

 

그럼 시작합니당... ㅋㅋ

#################################################################################

 

HTML 의 역사

 

HTML 5 을 정리하면서, HTML 역사에 대해서도 살펴보려한다.
아~ 이 생각을 하는 순간, 내가 가지고 있는 HTML 책자가 떠올랐다...

후다닥, 책장에 달려가 보았다. 하하하 있다...

완전 古書 ㅋㅋㅋ 사진에서 찾아보시라...

IMG_3723.jpg

 


위 사진은 아직도 나의 집 책꽂이에 꾲혀있는 HTML4 & CSS2.
발행일자를 보니... 헙... 1998년 4월 27일... 세월이 느껴진다...
발행일자가 1998년 이라도 그 당시 여느 책들처럼 CD 부록도 함께 꽂혀있다.
(완전 역사 지 말입니다. ^^)

IMG_3727.jpg

 



 1991년에 시작해서 현재까지의 HTML.

timeline.jpg 


1991년부터 1997년까지 HTML은 빠르게 발전했다. CSS가 포함이 되었고, JavaScript 가 추가되었다.
HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 진화시키기 위해서 많은 노력을 해왔다(위 이미지를 보면 역사에 대해서는 간단히 아시겠죠? 더 자세한 내용은 웹을 통해서 찾아보시면 더 많은 내용을 얻으시리라...)

그 과정에서 W3C 는 HTML 의 Version Up 을 중단하고 XHTML 로 개발의 방향을 변경하였다. XHTML 2.0 은 하위호환성을 고려하진 않는 새로운 언어로 디자인하기 시작했다.

그런 XHTML 2.0 은 W3C 의 이상과 현실의 차이로 인해서 XHTML 은 브라우저들에게서 외면당해졌고,
W3C 와는 생각이 다른, 몇개의 브라우져회사가 모여 WHATWG 라는 Working Group을 설립하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호환되는 발전된 HTML 을 정의하기 시작했다.

WHATWG 를 인정하지 않던 단호한 W3C 도 XHTML 2.0을 포기하고 2009년 10월, WHATWG 를 인정하였으며, 그들과 방향성을 공유하기 시작했다.
그리고, "HTML 5" 라는 이름을 가지고 새로운 HTML 을 디자인하기 시작했다.

HTML 의 한계
HTML, 참... 오랜 기간동안 사용된 언어임에 틀림없다.

그리고 HTML 4 에 대한 그때의 지식으로 오늘날까지도 HTML 을 읽고 있는 것을 보면 변화 없이 멈추어버린 언어라고 생각이 될 수도 있겠지만 HTML 의 버전업이 없다고 웹이 발전하지 않았다는 말은 아닐 것이다.
본래 HTML 이 처음 만들어졌을 때의 목적은 인터넷을 통해 문서를 보기 위함이었다.
자신이 가지고 있는 문서들을 웹을 통해서 볼 수 있도록 문서 형태로 표현할 수 있는 그 수단? Language가 필요했다.

Dos 의 640K 메모리 장벽이 그러했고, Y2K 밀레니엄 버그가 그러했듯이, HTML 또한 그 당시에는 지금의 웹을 상상도 할 수 없었으리라 생각된다.
단순히 인터넷을 통해 문서를 보기 원했던 것을 뛰어 넘어, 화려하고 인터랙티브한 화면 흐름과 멀티미디어, 예측할 수 없는 사용자들의 요구사항들을 충족시키기 위해 우리들은 HTML 에 갖가지 기술들을 만들어 내고, 포함시키고, 또 그러한 기능들을 사용할 수 있도록 하기위해 사용자들에게 "OK" 버튼을 눌러야만 사용할 수 있다는 협박으로 클릭을 강요하고, 언제, 어떻게 일어날지도 모르는 재앙에 따르는 책임을 사용자들에게 전가시켜왔다.

웹은 그렇게 HTML 버전의 발전은 없었지만 HTML 의 한계를 벗어나기위한 방향으로 발전?되어 왔다.
하지만 그렇게 한계를 벗어나기 위한 발전이 반복되면서 한계의 극복은 더욱 불완전한 웹환경으로 몰아가기 시작했다.(너무 장황한거 아녀? ㅡㅡ' 어여 영웅이 나타나야 할 것 같은...)

세상은 이런 불완전함을 깨뜨리고 순수하고 완전한 존재를 원하게 되었다.

그래서 나타난 것.
"HTML 5" 다.


HTML 5 의 등장

그렇게 HTML 은 모든 불완전함을 "순수"라는 이름으로 깨뜨리기 위해 탄생하게 되었다.
HTML 의 역사를 살펴봐서 알수 있듯이 기존의 HTML 은 단순 Markup Language 로서 한계가 명확했으며,
그런 HTML 의 한계는 HTML 5 의 등장으로 기존에 가졌던 HTML 의 기능적 한계를 커버할 수 있다.
발전된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기존의 Markup language 이상의 의미를 가지게 되었다.
HTML 의 한계로 인해서 유행처럼 번졌던 플러그인과 엑티브엑스 컨트롤의 문제들로 인해 웹은 순수한 HTML만으로는 표현이 불가능한, 너무도 많은? 외부기술에 의존하게 되었다.
이로 인해 웹의 접근성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그인과 엑티브엑스기술에서 웹을 해방?시키고 웹의 접근성과 상호운영성 또한 높이게 하는 결과를 가져오게 될 것이다.
JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이언트와 나눔과 함께 Application으로써의 웹의활용도를 극대화 시킬것이다.

그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그인들의 사용을 줄일 것이다.(플러그인의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 만들려 하지도 않을 것이고. 그러한 플러그인은 플러그인이 반드시 필요한 영역에서 활발히 활동할 것이라 생각한다.)
플러그인과 엑티브엑스의 설치로 인한 취약해진 보안도 걱정하지 않아도 될 것이다.
순수한 웹환경은 현재의 Device 는 물론이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다.
마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 환경에서의 주도권을 갖기위해 노력하고 있다.
현재 HTML 5 의 표준이 확정되지도 않은 상황인데도 말이다...


어떤가?
HTML 5 를 시작해야하는 이유가 이 정도면 충분한가? (저한테 자문하는 거예요... ^^')



HTML 5 의 디자인 원칙


다음은 HTML 5 은 이러한 디자인 원칙을 가지고 만들어지고 있다고 한다.
  • 호환성
  • 컨텐츠의 호환성
  • 이전 브라우저와의 호환성
  • 기능의 재사용
  • 이용 방법의 호환성
  • 혁신보다는 발전을 우선함
  • 실용성
  • 상호 운영성
  • 보편적 접근성

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


위 내용들을 간략하게 살펴보면 아래와 같다.

컨텐츠의 호환성 : HTML 5 이전 버전으로 제작한 컨텐츠가 완벽히 정상 작동하리라고는 생각하진 않지만 문제없이 이용가능해야한다.
이전 브라우저와의 호환성 : 말 그대로 HTML 5 가 지원되지 않는 이전 버전의 브라우저에서도 이용가능해야 한다.
기능의 재사용 : 이전까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 책정하여 브라우저들간의 호환성을 가지게 한다.
이용방법의 호환성 : 기존에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다.
혁신보다는 발전을 우선함 : HTML 5 이라는 Version UP 이 새로운 MarkUP Language 를 구현하는 것이 아닌 기존에 존재하던 HTML 을 개량한다.

실용성 : W3C 가 진행하던 이상적인 MarkUp Language 인 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 진행해야한다.
상호운영성 : HTML 5 를 적용한 브라우저라면 동일하게 동작해야한다.
보편적 접근성 : 컨텐츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접근할 수 있도록 한다.

http://html5test.com/index.html


HTML5 표준화 일정


다음은 HTML 5 표준화 일정이다.

  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범
  • Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.Q2 : HTML5 최종 표준안 (Recommendation)

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)


(기분좋게하는 소식인지는 몰라도... 최종초안 결정이... 이번달이네... ^^
일정은 지연될것이다 라고 말들 하는데... 그래도 기대해 보자... ^^)




아... 참 두서없이 길게도 적었다... (제 글의 특징입니다. ㅡㅡ')
HTML 5 에 참고할 만한 사이트 들은 차츰차츰
이 페이지에 추가하도록 해야겠다.
그래야... 나 자신이 또 들어와 볼테니... ^^;


있을실지 모를 제 글을 보시는 분들...
두서없는 긴글 보시느라 수고하셨습니다.

다음
HTML 4 Vs HTML 5 에서 뵙겠습니다.



HTML5 시리즈 강좌 리스트
[HTML5강좌] 1. HTML5 개요
[HTML5강좌] 2. HTML4 vs HTML5 (1)
[HTML5강좌] 3. HTML4 vs HTML5 (2)
[HTML5강좌] 4. Sementic Element (1)
[HTML5강좌] 5. Sementic Element (2)
[HTML5강좌] 6. Strong Web Form
[HTML5강좌] 7. Rich Text Edit API
[HTML5강좌] 8. Video Element
[HTML5강좌] 9. Audio Element
[HTML5강좌] 10. Canvas Element
[HTML5강좌] 11. Drag & Drop API
[HTML5강좌] 12. Offline Web Application
[HTML5강좌] 13. Communication API
[HTML5강좌] 14. Web Storage
[HTML5강좌] 15. Web SQL Database
[HTML5강좌] 16. Web Worker
[HTML5강좌] 17. Web Socket
[HTML5강좌] 18. Geolocation API
[HTML5강좌] 19. SVG
[HTML5강좌] 20. File API



HTML5 동영상 강좌 리스트
[HTML5 동영상 강좌] 1. HTML 5 개요
[HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1)
[HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2)
[HTML5 동영상 강좌] 4. Sementic Element (1)
[HTML5 동영상 강좌] 5. Sementic Element (2)
[HTML5 동영상 강좌] 6. Strong Web Form
[HTML5 동영상 강좌] 7. Rich Text Edit API
[HTML5 동영상 강좌] 8. Video Element
[HTML5 동영상 강좌] 9. Audio Element
[HTML5 동영상 강좌] 10. Canvas Element
[HTML5 동영상 강좌] 11. Drag & Drop API
[HTML5 동영상 강좌] 12. Offline Web Application
[HTML5 동영상 강좌] 13. Communication API
[HTML5 동영상 강좌] 14. Web Storage
[HTML5 동영상 강좌] 15. Web SQL Database
[HTML5 동영상 강좌] 16. Web Worker
[HTML5 동영상 강좌] 17. Web Socket
[HTML5 동영상 강좌] 18. Geolocation API
[HTML5 동영상 강좌] 19. SVG
[HTML5 동영상 강좌] 20. File API



행복한 고수되십시요...



woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\





profile