[HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

티스토리 뷰

Programming Lecture/HTML5

[HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

Unikys 2012. 10. 25. 00:29

* HTML5에 대한 공부를 시작하기 전에 먼저 HTML의 간단한 역사와 등장 배경 그리고 현재의 HTML5 표준화 상황에 대해서 알아보자.

2012/10/07 - [Programming Lecture/HTML5] - [HTML5 튜토리얼] 공부 시작 - 계획

* HTML (Hyper Text Markup Language)

: HTML은 웹에서 여러 가지 컨텐츠들을 보여주기 위하여 등장했던 언어이다. 기본적으로 <html>의 여는 태그와 </html>의 닫는 태그로 둘러쌓이는 형식을 취하고 있으며, 그 안의 컨텐츠들도 이러한 여러 가지 태그들로 둘러쌓여서 브라우져에서 뿌려지게 되는 것이다.

: 처음에 등장한 것은 기존의 터미널이나 텔넷과 같은 텍스트 기반의 정보 수집에서 벗어나 웹과 브라우져를 통한 정보 수집이 새로운 이슈가 되면서 인터넷 기반으로 텍스트 뿐만 아니라, 이미지, 오디오, 다양한 오브젝트들을 보여주기 위한 목적으로 1993년 처음 탄생하게 되었다.

: 그럼 처음 탄생한 이후 표준안이 계속 발전해온 것을 살펴보자.

날짜	사양	표준안
1993.06	HTML 1.0	IETF Internet Draft
1995.11	HTML 2.0	RFC 1866
1997.01	HTML 3.2	W3C Recommendation
1997.12	HTML 4.0	W3C Recommendation
1998.02	XML 1.0	W3C Recommendation
1998.10	DOM Level 1	W3C Recommendation
1999.12	HTML 4.01	W3C Recommendation
2001.01	XHTML 1.0	W3C Recommendation
2001.12	DOM Level 2 Core	W3C Recommendation

: HTML 1.0에서부터 4.0까지는 단 4년밖에 안걸렸으며, 4.0 이후 한차례 잠수함 패치, 그리고 버전 4.01이 2년만에 나오게 되었다. 그 이후 XHTML도 새로운 표준안으로 나와 한동안 웹 쪽에 오래 종사했던, 또는 간간히 소식을 들어왔던 사람이라면 '웹표준' 이라는 말로 세상을 떠들썩하게 만들었던 적이 기억날 것이다. 이렇게 HTML의 표준안을 담당하던 곳은 바로 W3C (World Wide Web Consortium) 이라는 기관에서 오랫동안 해왔으며, 그냥 이 표로 보면 HTML이 버전업을 하면서 무난하게 잘 흘러온것 같을 것이다.

W3C 로고

* XHTML의 등장

: W3C에서는 HTML과 XML을 합쳐 XML의 포맷 양식을 따르는 XHTML을 새로운 표준안으로 내세우고 있었다. 기존의 HTML 4.01과는 확연하게 다른 새로운 branch로서 다양하고 새로운 스펙들로 무장을 하고 표준안 권고로 나타나게 되었다. 그 당시 XML의 양식에 맞는 validator로 사이트의 XHTML 스펙 호환성을 체크하는 일도 생겨나게 되었다. XHTML 이라하면 아마 외우기 힘들었던 html 파일의 첫 DOCTYPE 태그일 것이다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

: 위와 같은 태그는 XHTML에 있어서 필수였고, 이미 웹을 구성하고 있었던 기존의 웹 페이지들을 위의 태그는 당연히 없었고 XHTML의 표준안에 맞추기 위해서는 태그를 소문자로 써야하고, attribute는 무조건 쌍따옴표로 묶는 등 많은 수정이 필요하였다.

: W3C에서 지속적으로 진행한 XHTML 표준안은 기존에 웹의 대다수를 차지하고 있었던 HTML 4.01의 존재를 무시하고 XHTML 2.0으로 새로운 표준안을 제안하며, 기존의 웹 개발자들에게 많은 반발을 사게 된다. 그래서 2004년에 Apple, Mozilla, Opera 등을 주도로 WHATWG라는 단체를 발족하여 형성하여 HTML에 대한 새로운 표준안 진행을 하게 된다.

WHATWG 로고

* WHATWG (Web Hypertext Application Technology Working Group)

: WHATWG에서는 W3C에서 진행하는 표준안에 대하여 기존의 웹과의 호환성 문제와 늦은 표준안 진행 속도에 대해 불만을 가지고 새로 만들어진 단체로서 기존의 HTML과는 다른 branch로서 표준안이 진행되었던 XHTML을 다시 rollback하고 HTML 4.01에서 발전된 웹 언어를 개발하고자 한다. 이것이 바로 HTML5의 시작이 된다.

: 2007년까지는 W3C에서는 XHTML, WHATWG에서는 HTML5 두가지 표준안 개발이 진행되다가 XHTML 2.0의 진부함에 W3C에서는 XHTML 표준안 포기를 선언하고 2007년 4월에 WHATWG와 함께 HTML5 표준안 작업을 시작하게 된다. 이에 따라 2008년 1월 HTML5의 첫 초안을 발표하게 된다.

두둥~

* HTML 5의 등장

: HTML5의 최종 초안은 2011년 5월에 W3C의 HTML Working Group에서 발표를 했으며 향후의 마일스톤에 대해서도 발표를 하였다. 2012년 현재에는 크롬, 오페라 등의 브라우져에서 초안에 대한 테스트를 통해 지속적인 후보 표준안을 수정하고 있으며, 2014년에 최종적으로 확정적인 표준안을 내놓는 다는 것이 이들의 향후 계획으로 발표되었다.

: 그렇다면 현재 HTML가 각 브라우져에 얼마나 잘 돌아가고 있는지 한번 알아보자. 아래 두 사이트는 현재 HTML5를 각 브라우져에서 얼마나 호환하는지 점수로 알아 볼수 있는 사이트이다.

http://html5test.com/

: 현재 사용하고 있는 브라우져를 500점 만점에 몇점을 받았는지 체크할 수 있다. 그리고 최신 개발되고 있는 브라우져들과 상용화된 브라우져들도 비교할 수 있다. 아래가 현재 현황이다.

: Chrome이 가장 앞서가고 있으며, 그 다음은 Opera, Safari, Firefox, 그리고 마지막의 IE순이다. IE는 저렇게 향상된 점수는 현재 개발중인 IE 10버전으로 이제서야 웹 표준을 따라가는 움직임을 취하고 있다는 것을 알 수 있다. 보시다시피 현재 HTML5를 이용해서 개발을 한다면 Chrome이나 Opera에서 하는 것이 가장 적합할 것이라고 볼수 있다.

http://mobilehtml5.org/

: 각 모바일 브라우져에서 HTML5의 기능들이 호환되는 여부를 체크해주고 있는 사이트이다. 모바일 웹 앱 개발을 할 경우 현 상태를 점검해볼 필요도 있을 것이다. HTML5의 주목받고 있는 새로운 기능인 Canvas는 거의 모든 모바일에서 가능하며 아직 Device API 쪽이 약간 호환이 부족한 것을 이 사이트를 통해서 알 수 있을 것이다.

* 정리

: 보시다시피 최종 표준안은 2014년에 채택되는 것을 목표로 하고 있으며, 현재는 구글, 모질라, 오페라 등 다양한 대형 업체들에서 HTML5 표준안 스펙 결정과 자기들의 브라우져에 이 스펙에 대한 호환성을 갖추려고 서로 앞다퉈 경쟁을 하고 있다. 기존의 XHTML은 시장에 발표되고나서 그렇게 뜨거운 반응이 없었지만, 현재 HTML5는 엄청나게 뜨거운 반응을 얻고 있으며, 표준안이 채택하게 되고 모바일/데스크탑에서 모두다 동일한 표준안을 사용하게 되는 경우 HTML5를 이용한 웹앱의 개발로 인해 개발비용의 엄청난 절감할 것으로 예상하고 있다.

: 지금은 모바일 앱은 Native 앱이 디바이스의 접근 권한 등 더욱더 풍부한 기능을 제공하고 있지만 getUserMedia 등과 같은 카메라와 마이크에 접근하는 Device API까지 포함되어있는 HTML5에서는 조만간 Native 앱만이 서비스할 수 있는 많은 영역까지 치고 들어올 것으로 예상하고 있기 때문에 앞으로 뜨거운 언어가 되지 않을까 예상해본다.

* 다음에는 HTML5의 기초와 기본구조에 대해서 공부를 해보자.

* 다음편

2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌

2012/11/23 - [HTML5 튜토리얼] Video와 Audio 태그 기본

2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API

- [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 끝.