원문 :

http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=35702

 

플러그인 기반의 RIA를 대체하라! HTML5와 웹의 미래

프린트  이메일 전송 

애플의 아이폰과 아이패드가 플래시 지원을 하지 않기로 하면서 HTML5에 대한 관심이 폭발적으로 증가했다. HTML5가 화두가 되고 시간이 어느 정도 흘렀지만, 여전히 HTML5와 웹의 미래에 관한 의견들은 여러 갈래로 나뉘어져 있다. 앞으로 다가올 웹의 미래가 어떨지 아무도 정확히 알 수는 없다. 하지만 현재의 상황을 잘 파악한다면 좋은 예측은 가능할 것이다. 이 글에서는 HTML5와 웹의 미래에 대해 생각해 본다.

이상현 hammerha@gmail.com｜이스트소프트에서 웹 개발자로서 일하고 있다. 다양한 언어를 이용해 다양한 프레임워크와 다양한 플랫폼에서 자유롭게 개발할 수 있도록 공부 중이다.

사실 웹에 관심을 가지고 있던 사람이 아니라면, HTML에 버전이 있었다는 사실에 당황했을지도 모른다. 그냥 간단한 태그로 이뤄진 언어 정도로만 생각하고 있었을 것이다. 그럼 HTML5에 대해 간략히 설명하기 위해 영문 위키피디아에 있는 HTML5의 정의를 인용해 보도록 하겠다.

‘HTML5는 현재 사용되고 있는 HTML 4.01과 XHTML 1.0의 다음 버전으로 사용될 예정으로 개발 진행 중이다. HTML5의 목적은 플러그인 기반의 RIA(Rich Internet Application) 사용을 줄이는 데 있다. 대표적인 예로는 어도비의 플래시, 마이크로소프트의 실버라이트가 있다. HTML5는 또한 CSS3의 추가적 사용도 포함되는데, 두 기술은 함께 개발 중인 상태다.’

여기에 HTML5의 특징을 한 가지 덧붙이자면, 강화된 자바스크립트 API를 꼽을 수 있다. 플러그인 기반의 RIA 기술을 대체하기 위한 가장 중요한 요소 중 하나이기도 하다. 그럼 HTML5의 새로운 기술들을 살펴보기 전에 먼저 HTML5의 기본이 되는 HTML과 CSS의 역사에 대해 간략히 살펴보자.

HTML과 CSS의 역사
HTML은 1989년 팀 버너스리(Tim Berners-Lee)라는 물리학자에 의해 시작되었다. 그 후 약 3년을 주기로 버전이 올라가다가 1999년 12월 마침내 HTML4.01이 W3C의 권고안(Recom mendation)을 받는다(W3C의 권고안을 받는다는 것은 최종 심사를 마치고 표준으로 인정받는 것을 뜻한다). HTML5는 2004년 6월 작업이 시작되었으며 현재 W3C에서 작업 초안 상태(Working Draft state)이다. 

CSS는 HTML과 XHTML은 물론이고 XML의 웹페이지 스타일을 표현하는 것도 가능한 언어다. CSS는 1996년 12월에 W3C의 권고안을 받아 CSS1이 공식적으로 나왔다. 그 후 1998년 5월에 다시 W3C 권고안을 받으며 CSS2가 나온다. 그리고 같은 해 CSS3의 개발에 들어갔지만 아직도 진행 중인 상태다. 

HTML과 CSS의 발전 속도를 살펴보면 급변하는 웹의 발전 속도에 비해 더딘 편임을 알 수 있다. 물론 같은 수준으로 비교 할 수는 없겠으나, 웹의 일부라고 할 수 있는 어도비의 플래시의 경우 처음 출시된 이후 2~3년마다 한 번씩 새로운 버전이 출시되고 있으며, 마이크로소프트의 실버라이트 또한 2007년 출시된 후 벌써 네 번째 버전이 나온 상태이다.

HTML5의 소개
HTML5 표준의 범위를 정확히 구분하는 데에는 다소 애매한 부분이 없지 않다. 기존 HTML 표준의 한계를 극복하기 위한 차세대 표준으로서의 목적과 플러그인 없이 RIA를 제공하려는 목적을 동시에 가지고 있기 때문이다. HTML5의 새로운 부분들을 크게 HTML, CSS, 자바스크립트 API 이렇게 세 가지로 나눠 소개해 보도록 하겠다.

HTML의 변화
HTML5의 두드러진 변화로 먼저 새로운 태그들의 등장을 꼽을 수 있다. 기존의 웹페이지 레이아웃을 구성할 때는 각 부분의 특성과는 관계없이 <div> 태그를 이용해 나누는 방식이었다. 그리고 id 속성을 주어 각 부분을 구분했다. 이렇게 웹 개발자가 임의로 id를 넣는 방식을 취하다 보니 일관성이 없는 문제가 있었다. 예를 들어 각 메뉴들을 선택할 수 있는 내비게이션이 있는 영역의 id는 “nav”가 되기도 하고 “menu”가 되기도 하는 것이다. 그래서 <header>, <nav>와 같이 의미 있는(Semantic) 태그들이 등장했다. 새로운 태그들을 이용하면 <그림 1>과 같은 구조로 웹페이지를 구성할 수 있다. 이런 변화는 겉으로 드러나지 않기 때문에 사용자들에게는 큰 의미가 없을 수도 있다. 하지만 검색엔진의 크롤링 능력 향상과 일관성 있는 웹페이지 구조 설계가 가능하다는 효과를 기대할 수 있다.

<그림 1> HTML5의 새로운 태그

다음 기능으로 웹폼2.0이 있다. 기존의 웹폼에 있는 <input> 태그에 새로운 타입(type)들이 추가된 버전이다. 기존 <input> 태그의 종류는 텍스트박스, 콤보박스 버튼, 라디오 버튼 등이 있었다. 거기에 달력을 생성해 주는 “date” 타입 시간을 표현해 주는 “time” 타입 등이 추가되었다. 기존에 수십 줄 이상의 자바스크립트 코드가 있어야 가능했던 달력 생성이 단 한 줄의 HTML 코드만으로 표현이 가능해진 것이다(<그림 2> 참고). 그 외에 유효성 검증과 같이 자바스크립트가 추가되어야만 구현이 가능하던 많은 부분들이 간단한 태그만으로 구현이 가능해졌다. 이 기능은 웹 개발자의 입장에서 봤을 때는 놀랍고 가슴 뛰게 하는 부분이다. 하지만 내부를 들여다 볼 수 없는(볼 수 있더라도 보지 않는) 일반 사용자가 경험하기에는 큰 차이를 느낄 수 없는 부분이기도 하다. 아쉽게도 현재 웹폼2.0 기능은 오페라 브라우저에서만 이용할 수 있다.

<화면 1> 웹폼 2.0 달력

CSS의 새로운 기능
HTML5의 일부라고 할 수 있는 CSS3에도 새로운 기능들이 많이 추가되었다. 웹 개발자로서 가장 놀랐던 기능 중에 하나는 애니메이션 기능이다. 기존에는 복잡한 자바스크립트 코드가 들어가야만 가능하던 것이 CSS만으로도 가능하게 된 것이다. 그리고 기존에는 포토샵과 같은 그래픽 툴을 이용해서 작업해야 하던 많은 부분들이 CSS만으로 가능해졌다. 예를 들면 글자에 그림자 효과나 투명도, 테두리를 주는 것이 가능해졌고, 사각 박스 테두리를 둥글게 만들어 주는 효과가 가능해졌다. 이런 기능이 가능해지면 웹페이지에 택스트 이미지와 같은 불필요한 이미지의 사용을 줄일 수 있다. 그러면 웹페이지가 좀 더 웹 친화적이 될 수 있다. 필요한 내용이 있어서 복사를 하려고 드래그했더니 글자들이 하나의 이미지로 되어 있어 불편했던 경험이 한번쯤은 있을 것이다. 그 외에 웹 개발자나 웹 디자이너 입장에서는 웹사이트 수정이 용이해진다는 장점도 있다.

<화면 2> CSS만을 이용해 글자의 테두리를 준 모습

물론 아직은 미흡한 점도 있다. 먼저 가장 큰 문제로 브라우저 지원의 문제가 있다. 조금 전 소개한 기능의 경우 웹킷(Webkit) 레이아웃 엔진을 사용하는 구글 크롬과 애플의 사파리 브라우저 외에는 아직 제대로 지원하는 브라우저가 없다. 그리고 두 번째로 브라우저 호환성 문제가 있다. 현재 CSS3를 지원하고 있는 2개의 브라우저마저도 일부 기능들이 서로 조금씩 다르게 표현되고 있다. 일관된 UX(User Experience)를 제공하고 싶은 기업이라면 사용하기 곤란한 기능이 될 수 있다.

자바스크립트 API
웹 개발자들에겐 희소식이 아닐 수 없는 강력한 자바스크립트 API들도 많이 등장했다. 먼저 소개할 기능은 ‘드래그 앤 드롭’이다. 운영체제상에서 컴퓨터를 이용할 때는 너무나도 자연스럽게 사용해 왔던 기능이지만 정작 웹페이지에서는 플러그인 기반의 애플리케이션 없이는 사용할 수 없었던 기능이다. 쇼핑몰에서 카트에 물건을 넣거나 파일을 웹페이지로 올리는 등의 작업을 할 때 더 편리하게 수행할 수 있을 것이다. 이미 구글의 지메일은 파일을 첨부할 때, 로컬에 있는 파일을 드래그해서 넣을 수 있는 기능이 구현되어 있다. 다만 아직 이 기능은 구글 크롬과 파이어폭스에서만 이용이 가능하다.

다음으로 지오로케이션(Geolocation)이라는 기능이 있다. 사용하고 있는 기기의 IP나 MAC 주소, GPS 정보 등을 이용해 현재 위치를 알아내는 기능이다. 위치를 기반으로 한 맛집 정보 제공과 같은 유용한 곳에 활용될 수 있다. 이외에도 같은 도메인에서만 사용이 가능하다는 쿠키의 단점을 극복해 줄 수 있는 Web Storage 기능, 연결이 불안정한 모바일 기기에서 유용하게 쓰일 수 있는 Web SQL Database 기능, 자바스크립트에서 스레드와 같이 두 가지 이상의 작업을 동시에 가능하게 하는 Web Workers 기능 등 유용한 기능들이 많이 추가되었다. 훌륭한 기능들이지만 앞서 설명했던 CSS와 같이 아직은 많은 브라우저들이 안정되게 지원하지 못한다는 아쉬움이 있다.

<화면 3> 지메닐 드래그 앤 드롭 파일 첨부

플러그인 기반 RIA 대체 가능 기능
아직 소개하지 않은 중요한 기능이 있다. 현재 인터넷상의 대부분의 동영상 재생과 애니메이션 효과에 사용되고 있는 플래시를 대체할 수 있는 Video와 Canvas 태그가 그것이다. HTML5 동영상이나 애니메이션을 사용할 때 얻게 되는 장점은 많다. 먼저 플러그인 기반의 소프트웨어가 필요 없어진다는 점이다. 특정 업체의 제품에 의존하지 않고 같은 효과를 낼 수 있게 되는 것이다. 그리고 CSS, 자바스크립트 등과 자연스럽게 연동할 수 있다는 장점도 있다. 

반면 여전히 가지고 있는 한계점도 있다. 먼저 HTML5 동영상 기능의 경우, 아직 코덱에 관련된 이슈가 완전히 해결되지 않은 상황이다. 현재 브라우저마다 지원하는 동영상 압축 방식이 달라 하나의 동영상을 제공하기 위해 2~3개의 서로 다른 압축 방식을 사용한 동영상 파일을 이용하고 있는 상황이다. 그리고 전체화면 모드를 지원하지 않는다는 단점도 있다. 이 점은 브라우저에 완전히 종속적인 HTML5의 특성상 상대적으로 해결하기 힘든 문제일 것으로 예상된다. 

HTML5를 이용한 애니메이션 기능도 아직은 미비한 점이 많다. HTML5를 이용한 애니메이션 사이트들을 본다면, 웹 개발자들은 “우와! 이런 것도 가능해?”라고 느끼겠지만 플래시 애니메이션에 익숙해져 있던 일반인들은 “이게 새로운 기술이야?”라는 반응을 보일 수 있다. 전용 제작 툴을 이용해 제작한 것과 자바스크립트 코딩만으로 제작한 것의 퀄리티는 크게 차이가 날 수밖에 없다. 성능상의 문제도 있다. 인터넷상에서 조금 검색해 보면, 똑같은 효과를 내는 애니메이션을 HTML5를 이용해 제작한 것과 플래시로 제작해 비교 분석한 사이트들이 많다. 결과를 보면 속도나 CPU 점유율 면에서 플래시가 우세한 것을 볼 수 있다. 

이를 보고 “HTML5는 아직 얼마 되지 않은 기술인데 금방 발전해서 따라잡을 수 있지 않을까?”라고 생각할 수 있을 것이다. 물론 HTML5 기술은 아주 빠르게 발전하고 있다. 하지만 플래시와 HTML5의 애니메이션의 속도 차이에는 근본적인 원인이 있다. 먼저 플래시는 미리 컴파일된 상태로 웹에 올라간 후 액션스크립트 가상머신에 의해 실행된다. 반면에 자바스크립트는 인터프리티드 언어(Interpreted language)로 소스 코드가 그대로 웹에 올라가 한 줄씩 읽히며 실행된다. 그로 인해 발생되는 성능 차이는 쉽게 예상할 수 있을 것이다. 렌더링 방식의 차이에서 오는 성능 차이도 있다. 자바스크립트는 Immediate mode를 사용하고 플래시는 Retained mode를 사용하고 있다. 자바스크립트는 한 줄을 읽고 바로 실행하고 실행되는 동안 기다리고 있다가 다시 다음 줄을 읽는 방식이다. 반면에 플래시는 코드를 미리 다 읽은 다음 한꺼번에 실행하는 방식이다. 2개 이상의 코어를 가진 CPU의 경우 렌더링 작업을 나눠 할 수 있는 것이다. <그림 2>를 보면 좀 더 이해가 쉬울 것이다.

<그림 2> 자바스크립트와 플래시 렌더링 방식의 차이

HTML5는 언제 사용 가능할까?
그렇다면 HTML5를 언제쯤 사용할 수 있을까? 그것을 알아보기 위해 아직은 HTML5를 사용하기 힘들게 만드는 문제점들을 살펴보자. 문제점은 크게 세 가지로 나눌 수 있다.

먼저 성능과 안전성의 문제다. HTML5는 아직 개발이 진행 중인 기술이다. 빠르게 진행되고 있다고는 하지만, 이때까지의 HTML과 CSS의 발전 속도를 봤을 때 과연 얼마나 빠를 수 있을지에 대해 의문이 생긴다. 영문 위키피디아를 보면, HTML5의 에디터인 Ian Hickson은 HTML5가 2012년 중에 후보 권고안 단계를 밟을 것이고 최종 권고안을 받는 것은 2022년이나 그 후로 예상한다고 되어 있다. 많은 부분들이 현재 안정적이고 구현 가능하다고는 되어 있지만, 또 많은 부분들은 그렇지 않다는 의미다.

다음으로 브라우저 간 호환성 문제가 있다. 앞서 CSS3나 자바스크립트 API를 소개할 때 말했듯이 같은 코드로 작성된 것이 브라우저마다 다르게 보일 수 있다. 자바스크립트의 경우 다르게 보이는 데 그치지 않고 아예 작동조차 하지 않을 수도 있다. 웹사이트 하나를 만들 때마다 2~3개의 브라우저에서 제대로 동작하는지를 확인하며 개발해야 하는 것이다. 그러면 개발 비용도 자연히 올라가게 될 것이다. 이것은 현재도 겪고 있는 문제이긴 하다. 하지만 앞으로 CSS나 자바스크립트를 이용한 개발이 많아지고, 그것의 복잡도가 높아질수록 호환성 문제는 더욱 크게 다가올 것이다.

마지막으로 브라우저의 지원 미비에 따른 문제를 들 수 있다. 앞서 말했던 두 가지 문제들은 어렵더라도 개발자가 노력한다면 극복할 수 있는 문제다. 하지만 이 문제는 사용자들이 변해야 하는 문제라서 시간이 해결해 주길 기다릴 수밖에 없는 부분이다. 현재 많은 브라우저들이 빠른 속도로 HTML5를 지원하기 위해 발전하고 있다. 하지만 가장 시장 점유율이 높은 IE(Internet Explorer)의 HTML5 지원은 많이 부족한 편이다. 다음 버전인 IE9에서는 HTML5 지원을 강화하겠다고는 하지만 현재까지의 상황으로 봐서는 IE9 역시 타 브라우저에 비해서는 부족해 보인다. 사용자들이 브라우저를 업그레이드하는 데 걸리는 시간도 감안해야 한다. 현재 IE8까지 나온 상황이지만 국내 브라우저 점유율을 보면, 2001년도에 출시된 IE6가 여전히 40%를 넘고 있다. IE9이 HTML5 기술들을 타 브라우저들 못지않게 지원하면서 대부분의 사용자들이 동시에 IE9으로 업그레이드하거나, 국내 IE의 점유율이 10% 이하로 떨어지거나 하는 이 둘 중 하나가 가능하다면 HTML5의 사용 시기를 앞당길 수 있겠지만 둘 다 최소한 5년 이내에는 이뤄지지 않을 것으로 예상된다. 

그렇다면 HTML5에 대해서는 그 동안 손 놓고 있어야 한다는 말인가? 그건 아니다. 앞으로 HTML5는 모바일 시장에서 매우 중요해질 것으로 예상된다. 아이폰, 안드로이드, 노키아, 팜프리와 같은 대부분(65% 점유율)의 스마트폰 브라우저들이 Webkit을 이용해 만들어졌다. 이것은 앞서 말한 브라우저 호환성 문제와 브라우저 지원 문제를 해결해 주는 부분이다. 현재 다양한 디바이스들에 다양한 플랫폼과 개발 언어들이 존재하고 있다. 기업에서 각 디바이스에 맞춘 애플리케이션을 제작하는 데에는 한계가 있다. 그러한 한계를 극복하기 위한 용도로서도 모바일에서 HTML5의 중요도는 더욱 높아질 것이다.