HTML5는 차세대 웹문서의 표준으로 기존의 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현, 제공 하도록 진화한 "웹프로그래밍언어"입니다. 기존의 HTML4에서 오디오, 비디오, 그래픽처리, 위치정보제공 등 다양한 기능을 추가로 제공함으로 웹 자체적으로 처리할 수 있는 기능을 대폭 향상하였습니다. 총 3가지의 Part로 구성될 것이고 HTML5에 관심을 가져야 하는 이유에 대한 내용과 기본적인 이론 위주의 설명으로 시작해 Canvas의 Reference 설명 및 예제 마지막으로 Canvas를 이용하여 Bar 형태의 그래프를 만드는 과정까지를 다룰 것 입니다.
Part.1 에서는 HTML5에 관심을 가져야하는 이유에 대한 내용과, 표준화 현황에 관련된 내용, 그리고 HTML5의 기본구조와 HTML5에서의 그래픽처리에 대해 살펴봅니다.
1. HTML5에 관심을 가져야 하는 이유
ABI Research라는 리서치 기관에서 2011년도 7월의 자료를 보자면 2016년도 HTML5를 지원하는 모바일 단말기의 연간 판매량을 21억대로 추정한바 있습니다. 그에 따르면 HTML5의 기능은 향후 2~3년 이내에 대중화 될 전망입니다. 앞으로 대중화에 따른 기술의 수요가 증가되고 그에 따른 많은 라이브러리들이 만들어지고 발전 될 것입니다.
글로벌 회사들의 동향을 분석해 보자면 현재 벤더사를 비롯한 글로벌 업체들은 오디오, 비디오, 그래픽 등 표준화가 많이 진행된 기능을 중심으로 HTML5를 도입하고 있습니다. 특히 모바일 분야에서 HTML5를 적극적으로 도입하고 있습니다. 그러면 각 회사별로 HTML5 도입 현황을 알아보겠습니다.
구글
스마트폰을 위한 플랫폼인 안드로이드, 웹 브라우저인 크롬, G-Mail, Youtube 등을 HTML5로 전환하고 있습니다.
마이크로소프트
타 브라우저벤더사에 비해 HTML5 수용도는 낮으나, 2011년 출시된Internet Explorer 9 버전부터 HTML5를 지원하고 이를 개선 중입니다.
[ IE 8이하 버전에서 Canvas를 사용할 수 있게 지원해주는 스크립트 (http://code.google.com/p/explorercanvas/) ]
애플
HTML5를 적극 지원하고 있습니다. 자사 홈페이지에 HTML5 기능을 적용하여 웹 브라우저인 Safari를 통해 HTML5의 모든 기능을 이용할 수 있도록 지원하고 있습니다.
삼성전자
인텔, 리눅스재단등과 HTML5 기반의 웹 OS TIZEN을 개발 중입니다. 최근에 나온 Wearable Device인 기어2, 기어2네오에 TIZEN을 OS 로 적용하였습니다.
관심을 가져야 할 또 다른 이유는 우리나라의 정책에 있습니다.
현재 공인인증서 의무화를 폐지하는 내용의 법안이 여러 건 발의되어 있습니다. 그리고 최근 청와대에서 열린 규제개혁점검회의(2014-03-20)에서 이승철 전국경제인연합회 부회장이 "ActiveX에 막혀 천송이 코트를 중국에서 못 삽니다. 엑티브(Active)하게 엑스(X)표 쳐줬으면 좋겠다"고 주문하며 화제가 되었고, 박 대통령도 "우리나라에서만 요구하는 공인인증서가 국내 쇼핑몰의 해외 진출에 걸림돌이 되고 있다"며 폐지를 주문했습니다. 이미 우리나라의 웹사이트들의 대부분은(공공기관, 공기업, 쇼핑몰 등) ActiveX와 공인인증서를 사용하고 있습니다. 기존의 공인인증서를 강제 하는 정책이 폐지 된다면 그것을 대체하는 대안이 나와야 합니다.
공인인증서에 대한 대안은 외국의 사례를 따라 SSL로 암호화된 홈페이지(https) ,EV SSL 인증서 등이 있습니다. 그리고 ActiveX의 대안으로 주목 받고 있는 것이 바로 HTML5입니다. 최문기 미래부장관은 취임 1주년 기자간담회에서 “올해 상반기 내로 HTML의 표준화가 확정되면 이것이 ActiveX 프리(free)의 중요한 기반이 될 것” 이라는 말을 했습니다. 그러나 최 장관의 발언은 아이러니하게도 W3C Plan을 보자면 HTML5의 표준화는 올 해 하반기에 마무리가 된다고 되어 있습니다. 또한 직접적인 공인 인증서의 폐지가 아닌 어떤 브라우저에서도 ActiveX 없이 공인 인증서를 사용할 수 있도록 한다는 취지의 발언이었습니다.
(공인인증서에 적용된 SEED 라는 암호화기술은 W3C가 인정한 웹표준 기술이 아닙니다. 이를 적용 하려면 별도의 플러그인이 필요하고 그것을 HTML5로 대체 한다는 것이지만 HTML5의 본래의 취지는 플래시, 실버라이트와 같은 액션 스크립트의 대체를 목적으로 개발된 기술입니다. 이 부분은 추후 다른 글에서 심도있게 다루어 보겠습니다.)
2. HTML5의 표준화 현황
현재 표준화는 기존 HTML의 표준화를 담당하던 *W3C와 밴더사들의 모임으로 구성된 *WHATWG 두개의 그룹이 진행하고 있습니다. 2004년 WHATWG의 새로운 표준화 제안으로 시작되어서 2014년 4분기쯤에 표준을 마무리지을 예정입니다. 후속 표준인 HTML5.1는 2016년 4분기에 완료할 예정입니다. 보다 자세한 정보는 W3C의 2014년 Plan에 나와있으니 아래 링크를 참고 하시면 됩니다.
W3C 2014 Plan : http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
W3C : World Wide Web Consortium
1994년 인터넷상의 자원을 공유하고 웹의 표준화에 관심을 지닌 사람들의 모임입니다.
웹과 관련된 표준 제정, 웹에서의 데이타 전송 속도 향상 등을 위해 노력 중입니다.
MIT에 의해 운영되고 있으며, Netscape, Microsoft, HP, IBM, AT&T, CompuServe 등을 포함하고 있습니다.
URL: http://www.w3.org
WHATWG : Web Hypertext Application Technology Working Group
HTML 및 관련 기술들을 발전시키는데 관심이 있는 사람들의 모임입니다.
2004년애플, 모질라재단, 오페라소프트웨어의 개인들이 설립하였습니다.
WHATWG 규격의 편집장인 이안 힉슨(Ian Hickson)이 구글로 옮기며 구글이 추가 참여 되었습니다.
사용자 중심의 리치 웹 응용의 실용적 플랫폼 대발에 목적을 두고 HTML, CSS, DOM 및 자바스크립트 개선을 위한 HTML5 표준 작업에 참여하고 있습니다.
URL : http://www.whatwg.org
3. HTML5 기본구조
HTML5의 기본 구조는 기존의 HTML과 동일 합니다. HTML은 Hyper Text Markup Language의 약자로 웹브라우저에 하이퍼텍스트 기능을 가진 문서를 만드는 언어입니다. HTML은 여러가지 태그(tag)로 모든 내용이 표현되며, 을 사용하여 문서의 시작을 말하고 을 사용하여 문서의 끝을 나타냅니다. 그리고 그 안에는 HEAD 부분과 BODY 부분으로 나뉘어 있습니다. 구조의 모양은 아래의 그림과 같습니다.
DTD : 어떤 버전의 HTML 문서인지를 브라우저에게 알려줍니다. (위의 그림에 있는 DTD는 HTML5 문서임을 알려줍니다.) , : 브라우저에게 HTML 문서임을 알려줍니다. 문서 머리글(Head) : 문서의 제목과 기타 다른 정보(MATA 정보, css, script 등)로 구성되어 집니다. 문서 본체(Body) : 문서의 내용이 들어가는 부분입니다.
TIP
문서의 DTD를 올바르게 지정해주지 않으면(위치가 HTML 문서의 가장위에 오지 않거나, DTD 내용이 틀린 경우) 브라우저는 Quirks mode로 동작을 합니다. Quirks mode로 동작을 하게되면 브라우저의 속도가 느려지고 이는 사용자 체감성에 좋지 않습니다.
표준안에 따르면 스크립트는 태그 안에 작성하라고 되어 있습니다. 그러나 스크립트문이 브라우저 화면이 출력되기전에 꼭 필요한 것이 아니면 태그 안의 하단 부분에 작성하는 것이 브라우저에서 페이지 로딩시 빈 화면이 유지되는 시간을 줄여줍니다. 그 이유는 브라우저가 HTML 문서와 script 문서를 분리해서 해석하지 않고 위에서 부터 아래로 순차적으로 해석을 하기 때문입니다. 사용자는 페이지로드 완료 시간은 같지만 체감상 웹 페이지가 더 빠르게 느껴질 것입니다.
4. HTML5 그래픽 처리
HTML5에서 기존의 HTML과 다른 큰 차이점 중 하나가 바로 그래픽 처리 입니다. HTML5에서는 CANVAS와 SVG를 이용하여 플래시, 실버라이트로 기존에 했었던 그래픽 처리를 대체할 수 있습니다. 그러나 CANVAS와 SVG는 근본적으로 다른 방식으로 그래픽 처리를 하고 있습니다. CANVAS와 SGV에 대해 설명하고 둘의 차이점을 비교한 후 어떤 상황에서 사용하는 것이 적합한지 알아 보겠습니다.
4.1 Canvas
Canvas는 자체가 그래픽을 구현 하는것이 아닌 웹문서에 그래픽 구현을 위한 영역을 정의하고 실제로는 JavaScript를 이용해 Canvas API로 만든 코드를 이용해 그래픽 구현을 합니다. 그리고 픽셀 기반의 즉시 모드 그래픽 시스템으로 매 프레임마다 다시 화면을 그립니다. 웹 페이지에서 곧장 비트맵을 제어할 수 있다는 점이 강력한 장점이지만 굉장히 로우 레벨에서 픽셀을 다루므로 굉장히 번거로운 점도 있습니다. Canvas를 통해서라면 브라우저 창안에 어떤것이든 그려내고 인터렉트한 이미지 편집도 가능하고 동영상도 제어가 가능 합니다. (그린스크린을 이용하면 동영상 합성을 할 수 있습니다) 또한 별도의 플러그인을 다운로드 할 필요 없이 실시간 그래프, 애니메이션 또는 대화형 게임을 사용자에게 제공할 수 있습니다.
자세한 사용법은 Part.2에서 다루겠습니다.
4.2 SVG
SVG(Scalable Vector Graphic)는W3C에서 1999년 개발한 XML기반의 오픈 표준의 벡터 그래픽 파일형식입니다. SVG는 모양 기반의 유지 모드 그래픽 시스템으로 화면에 그릴 오브젝트의 리스트는 그래픽 렌더러에 있으며, 코드내에서 지정한 오브젝트의 특성(x좌표, y좌표, 투명도)에 따라 오브젝트를 화면에 그립니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 이런 이유로 SVG는 모바일 디바이스와 잘 어울립니다. 또한 SVG는 XML기반의 그래픽이기 때문에 일반 텍스트 에디터로 편집이 가능합니다. 그러나 일반적으로 SVG형식으로 저장이 되는 그래픽 에디터(툴)로 제작하는 것이 생산성이 높아서 주로 그래픽 에디터로 작업합니다. SVG도 Canvas와 동일하게 별도의 플러그인 없이 그래프 사용자에게 제공 할 수 있습니다.
추천에디터 : SVGDeveloper (http://www.perfectsvg.com/)
4.3 렌더링 속도 비교
트래픽이 높은 웹 사이트에서 성능은 아주 중요합니다. Canvas 와 SVG는서로 방식이 달라서 환경과 상황에 따라 렌더링 시간의 차이가 크게 나타납니다. 다음 그래프는 Canvas개체와 SVG개체의 렌더링 시간 차이를 보여 줍니다.
canvas_svg_렌더링속도비교 화면의 크기가더 커질수록 화면을구성하는픽셀이 많아집니다. 픽셀단위로이벤트마다 Canvas 영역을다시그리기때문에 Canvas는 화면이 커질수록 성능이 떨어지기 시작합니다. 그와는 다르게 SVG는 화면의 개체 수가 증가하면 지속적으로 개체를 DOM에 추가해야 합니다. 그러므로 개체 수가 증가하면 SVG의 성능이 떨어지기 시작합니다. 이러한 측정값은 반드시 정확한 것은 아닙니다. 속도는 구현과 플랫폼, 완전한 하드웨어 가속 그래픽 사용 여부 및 JavaScript 엔진 속도에 따라 변경될 수 있습니다. 그러나 대체로 위와 같은 그래프 곡선을 나타내게 됩니다.
4.4 차이점 비교(표)
4.5 적합한 사용법
Canvas 와 SVG의 차이점을 간단하게 표로 비교해 보았습니다. 4.4의 표를 보면 알 수 있듯이 Canvas와 SVG는서로 다른 장, 단점을 가지고 있으므로 사용환경에 맞춰서 사용 여부를 선택해야 합니다. Canvas는 작은 표면, 많은 수의 개체가 필요한 부분, 전체적으로 많은 부분이 변경되어야 할 때 사용하는 것이 적합하고 SVG는 더 넓은 표면, 적은 수의 개체, 기존의 객체위주로 변경될 때, 확대 또는 축소시에 깔끔한 이미지가 필요할 때(예 : 인쇄) 사용하는것이 적합 합니다.
참고 문헌 및 사이트
- 웹분야(HTML5) 표준화 활동 (정보통신산업진흥원)
- Internet Explorer 개발자센터
- w3schools (http://www.w3schools.com)
