HTML의 미래, Part 1: WHATWG

WEB2.0 | 2006. 6. 2. 09:26

Posted by 시반

HTML을 향상시킨 Web Hypertext Application Technology Working Group만의 접근 방식

Edd Dumbill, 회장, XTech Conference

2005 년 12 월 06 일

웹 작성자, 브라우저 개발자, 표준 기구가 제안하는 HTML의 다양한 방식들을 검토한다. 이 글에서는 WHATWG 스팩으로 구체화된 점증적인 접근방식과 W3C에서 제안한 XHTML을 다룬다. 또한, W3C의 새로운 Rich Client Activity도 설명한다. Part 1에서는 WHATWG에서 개발한 두 개의 스팩인 Web Applications 1.0(HTML5)과 Web Forms 2.0에 초점을 맞춘다.

HTML은 웹 페이지를 만드는데 있어서 그렇게 좋은 언어는 아니다. 하지만 웹을 만들기에는 매우 좋은 언어이다.

HTML은 배우기 쉽다는 점과 브라우저의 소스 보기 기능 때문에 웹은 대중성을 확보할 수 있었다. World Wide Web Consortium(W3C)은 HTML을 표준화 하는데 앞장서서 웹 브라우저가 같은 언어를 구현하도록 했다. CSS의 출현과 표준 기반의 웹 디자인의 동반 성장은 HTML 혼란을 종식시키고 사용자와 개발자에게 더 나은 웹을 경험할 수 있도록 하였다.

이는 대부분 여러분들도 알고 있는 사실이다. 결과적으로 웹은 여러분의 삶과 비즈니스에 긍정적인 영향을 주었다. 하지만 HTML은 그렇게 좋은 언어는 아니라는 사실은 여전하다. 왜 HTML은 H1 에서 H6 까지 헤딩을 갖고 있어야 하는가? 여섯 레벨이나 되는 헤딩 계층을 누가 그렇게 심각하게 고려하겠는가? 그리고 3D 그래픽 카드와 세련된 사용자 인터페이스가 나와있는 이 시점에 웹 페이지들이 고리타분한 텍스트 박스와 라디오 버튼으로만 제한될 이유가 없다.

웹 퍼블리싱과 웹 애플리케이션들이 현대적인 사용자 인터페이스의 많은 기술들을 사용할 수 있도록, 다양한 그룹들이 HTML을 개발하고 있다는 것은 당연한 수순이다. 이들은 크게 세 개의 그룹으로 나뉜다. 첫 번째는 오늘날의 기술을 사용하는 사람들이다. 이것은 Asynchronous JavaScript and XML(Ajax)가 지향하는 바이기도 하다. JavaScript와 브라우저의 XMLHttpRequest 객체를 사용하여 동적 사용자 인터페이스를 만든다. 결과는 놀라울 수 있지만 표준 방식이 아니다.

다른 두 개의 그룹들은 앞으로의 향상에 초점을 맞추고 있다. W3C는 데스크탑 브라우저 제조자들에 국한되지 않고 광범위한 벤더들의 요구 사항들에 근거하여 XHTML 2.0을 개발하고 있다. XHTML 2.0은 급진적인 단계로 보여진다. 반면, Web Hypertext Application Technology Working Group(WHATWG)는 점증적인 스팩 세트를 추진하고 있다. 가장 필요한 기능부터 브라우저에 추가하여 HTML을 진화하는 것이다. WHATWG의 몇몇 기능들은 Apple의 Safari 브라우저와 Mozilla Firefox 1.5에 이미 구현되어 있다.(참고자료)

이 글에서는 W3C와 WHATWG가 어떤 작업들을 하고 있는지를 보게 될 것이다. Ajax에 대해서는 developerWorks(참고자료)에서 많이 다루고 있다. HTML을 W3C로 가져오는데 있어서 아직까지는 표준을 둘러싼 충돌은 없지만 그렇다고 해서 두 조직들이 모든 합의에 이른 것은 아니다. 이 두 가지 접근 방식을 평가해 보려고 한다.

WHATWG, HTML 5, Web Forms 2.0

WHATWG는 "World Wide Web을 통해 애플리케이션을 작성 및 전개할 수 있는 새로운 기술을 개발하고자 하는 웹 브라우저 제조자와 관련 당사자들의 비공식적인 협업이다." WHATWG의 핵심은 브라우저(browsers(Mozilla, Opera))를 만드는 것이고, 향상의 초점은 웹 애플리케이션(applications)을 만드는 것이다.

WHATWG의 대표 스팩은 HTML5 이지만 Web Applications 1.0(참고자료)으로도 알려져 있다. HTML5는 현재 HTML 표준인 HTML 4.01과 백워드 호환성을 유지하려고 하며 HTML의 XML 버전인 XHTML 1.0과도 호환성을 유지하려고 한다. 이 스팩은 HTML과 XHTML 계열의 W3C HTML을 지원하고 있다.

HTML5외에도 Web Forms 2.0 스팩(참고자료)은 현재의 HTML 형식에서 개발자들이 느끼는 성가신 부분들을 다룬다. 최근에는 밸리데이션과 풍부한 위젯 같은 일반적인 데스크탑 애플리케이션에서 많은 기본 기능들을 생략하고 있다.

그렇다면 HTML5에 무엇이 있는가? 간단히 말해서, 아주 많다. Web Applications 1.0 스팩은 진화하고 있고 그 무엇보다도 완벽하게 개발되고 있다. 다음은 새로운 기능들이다.

캘린더 컨트롤, 어드레스 카드, 데이터그리드, 게이지 및 프로그레스 미터, 드래그 앤 드롭, 메뉴 등의 새로운 레이아웃 엘리먼트들.
서버에서 전송된 DOM 이벤트 및 Document Object Model(DOM)으로의 프로그래밍 확장.
Ajax 통신의 중심인 표준 XMLHttpRequest 객체의 공식화.
canvas 엘리먼트를 통한 동적 비트맵 그래픽

오늘날 웹 상에 JavaScript와 함께 일회성으로서 구현된 기능들 중에서 위 기능들을 볼 수 있다. 사실 Ajax 툴킷의 최근 성장은 게이지, 캘린더 같은 위젯이 증가하는데 기여했다.

canvas

HTML5 기능의 전통적인 구현(웹 브라우저의 일부)은 앞서 언급했던 몇 가지의 기술들로 국한된다. 이들 중 가장 잘 알려진 것이 canvas 엘리먼트이다. Firefox 1.5와 Apple의 Safari 브라우저 역시 canvas를 구현했다.

W3C의 Scalable Vector Graphics(SVG)가 인-브라우저(in-browser) 일러스트레이션을 보여주는 방식을 제공하지만, canvas는 다른 접근 방식을 취한다. SVG 처럼 선언적 문서를 구현하는 대신 JavaScript가 그릴 수 있도록 빈 공백을 제공한다. 이러한 그래픽 모델은 선언적 웹 보다는 OpenGL 스타일에서 기인한다.

그림 1은 canvas 데모의 스크린샷이다.(참고자료) 사용자가 마우스를 도형 위에 갖다 대면 도형들은 서서히 커진다. 무엇보다도 이 데모는 사용자 인터페이스—그리기, 사용자 인풋 이벤트, 타이머—를 구현하는 모든 필수 요소들을 다 갖추고 있다는 것을 증명하고 있다.

그림 1. 인터랙티브 canvas 데모의 스크린샷

canvas 애플리케이션들은 이미 간단한 3D 작동의 구현으로 canvas 뚜렷한 목표(게임)에 한 단계 더 가까이 갔다.(그림 2, 참고자료)

그림 2. 간단한 게임의 스크린 샷

canvas를 프로그래밍하는 방법을 간단한 코드를 통해 설명하겠다. Listing 1이 코드표이고 결과는 그림 3에 나타나 있다.

Listing 1. 간단한 canvas 예제

<html>

<head>

<title>Canvas demo</title>

<script type="text/javascript">

function draw () {

var canvas = document.getElementById ('hello');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.fillRect (25, 25, 50, 50);

}

</script>

<style type="text/css">

canvas { border: 2px solid red; }

</style>

</head>

<body onload="draw ();">

<canvas id="hello" width="100" height="100">

</canvas>

</body>

</html>

그림 3. Listing 1의 아웃풋

canvas가 선언적인 문법을 나타내지 않기 때문에 사용자 인터페이스 구현 영역에 더 많은 애플리케이션을 가질 수 있을 것이다. canvas의 매력은 새로운 브라우저 인터페이스 엘리먼트와 기능을 위한 프로토타이핑 기반이라는 점이다. 최고의 예제는 아마도 canvas를 사용한 SVG의 Antoine Quint의 구현일 것이다.(참고자료) Quint의 메소드를 사용하여 임베디드 SVG로 HTML 파일을 렌더링하려면 JavaScript SVG 렌더러를 반입하는 두 줄을 추가한다. 그림 4는 이 방식을 사용하여 렌더링 된 호랑이 이미지이다.

그림 4. JavaScript와 canvas 엘리먼트를 사용하여 렌더링 된 SVG 호랑이 이미지

주류 웹 설정에 있어 canvas의 유용성 여부는 시간이 말해 줄 것이다. 이것의 기능은 자바 애플릿들의 기능과 닮아있지만, JavaScript 인터페이스로는 다른 브라우저 엘리먼트를 더욱 쉽게 사용하고 인터페이싱 할 수 있다.

Web Forms 2.0

WHATWG 형식 스팩의 버전 넘버는 HTML4의 형식의 스팩의 기반 하에 구현하고자 하는 의도를 나타낸다. Web Applications(HTML5) 스팩과는 달리 성숙한 상태에 와있다. Web Forms 2.0은 브라우저에서 사용할 수 있는 형식 위젯들을 향상시키는 것에 초점이 맞춰져 있다.

이 새로운 형식에는 무엇이 추가되었을까?

형식이 제출되기 전에 밸리데이션 구조체로 브라우저가 더 많은 체킹을 수행할 수 있다. 새로운 애트리뷰트로는 required, min, max 등이 있다.
형식 엘리먼트용 validity 애트리뷰트를 이용한 타당성검사 지원과 새로운 invalid 이벤트.
형식 엘리먼트용 자동 완성 제어. 브라우저가 필드 값을 기억하고 이를 자동 완성하도록 제공하는지의 여부를 문서 작성자가 가리킬 수 있도록 함. 사전 정의된 값들은 list 애트리뷰트로 전달될 수 있다.
문서가 로딩될 때 형식 엘리먼트가 인풋 포커스를 받는지를 가리키는 autofocus 애트리뷰트.
텍스트-홀딩 형식 엘리먼트용 언어 인풋 모드를 알려주는 inputmode 애트리뷰트
파일 업로드 제어 향상. 예상 파일 유형 지정 및 파일 크기 제한 등.
형식 엘리먼트 템플릿의 반복.
새로운 유형의 인풋 제어: datetime, number, range, email, url. 인풋 값을 제한하기 위한 패턴의 추가.

Web Forms는 HTML5 보다 일관성 있는 스팩이고 이미 몇몇 구현에서 찾아볼 수 있다.

Opera 9의 베타 릴리스에는 Web Forms 2.0 지원이 포함된다.
오픈 소스 Web Forms 프로젝트는 인터넷 익스플로러를 위한 DHTML+Behaviors 구현이 있다.

W3C의 차세대 형식은 XForms이다.(참고자료) XForms는 XML 문서들을 전달하는 것에 기반하여 새로운 모델의 브라우저-서버 인터랙션을 구현한다는 점이 Web Forms 2.0과는 다르다. 반대로 Web Forms 2.0은 현재의 브라우저 형식을 보다 가용성을 갖추도록 기존 형식 모델을 점증적으로 향상시킨 것이다. 이 두 스팩은 다른 필요를 채우고 있다. 하지만 몇 가지 공통점도 있다.

이 스팩은 기존의 광범위하게 구현된 형식 모델에 최소한의 영향만 주면서 XForms의 몇 가지 기능들을 추가하고자 한다. 백워드 호환성, 작성의 용이성, 쉬운 구현 등이 바로 그것이다.

기타 구현들

canvas는 브라우저 구현을 갖춘 주요 WHATWG 기능이다. HTML5의 나머지 부분은 아직 초기 단계에 있고 완전하게는 구현되지 않았다.

하지만 Web Applications와 Web Forms 스팩들은 새로운 중요성을 띄고 있다. 최근에 웹 애플리케이션을 위한 사용자 인터페이스 툴킷을 개발하기 위한 여러 프로젝트가 생겨났다. 이러한 구현들은 HTML과 JavaScript 기술 또는 Flash를 사용한다. 이들 중 많은 부분이 바퀴를 다시 만드는 것은 무의미하다라는 분명한 입장을 취하고 있고 WHATWG 스팩들을 통해 형식 구현을 표준화하려고 하고 있다.

결론

Web Forms 2.0 스팩은 분명한 필요와 스팩의 완벽성 덕택에 구현을 받아들이고 표준으로 나갈 수 있는 좋은 기회를 가졌다. 실제로 Web Forms 2.0은 W3C에 제출되었다.

하지만 HTML의 미래를 WHATWG 스팩 혼자서 감당하기는 힘들다. 어떤 부분은 단순한 혁신(XMLHttpRequest, canvas)을 의미하고, 어떤 것은 모호하고 힘이 부족하다. 게다가 HTML5의 동기는 데스크탑, 애플리케이션 중심의 사용에 맞춰져 있다. 많은 HTML들은 비 PC 장치에서 찾아 볼 수 있고, 이것 역시 방향성이 필요하다.

HTML5에서 정의된 몇몇 아이디어들은 Ajax 기반의 브라우저 인터페이스 툴킷의 등장으로 인해 구식이 되어버렸다. 개발자들은 확장성 있는 툴킷을 사용할 수 있는데 굳이 제한된 툴을 사용하려 들지 않는다. 더 풍부한 웹 인터페이스들이 위원회 보다는 시장에 의해 표준화 되어야 한다.

canvas와 XMLHttpRequest 같이 일반적으로 구현되었으나 아직 표준화가 되지 않은 기술들의 진보를 볼 수 있어서 기쁘다. 이러한 중요한 기능들의 상호운용성이 향상되기를 기대해 본다. 브라우저 기술을 향상시키려면 HTML5는 더욱 명확해져야 하고 현재 사용할 수 있는 것(available now), 곧 사용할 수 있는 것(available soon), 앞으로의 기능(imagineering features)들 같이 세 가지 스팩으로 나뉘어져서 효과를 얻을 수 있다.

참고자료

교육

제품 및 기술 얻기

Opera browser. Web Forms 2.0 support

필자소개


	Edd Dumbill, 회장, XTech Conference

출처 :

한국 developerWorks > XML | 웹 아키텍쳐 >

'WEB2.0' 카테고리의 다른 글

웹 개발 패러다임의 전환 - Flex와 Ajax의 동거 (0)	2007.01.18
개발자의 새로운 키, 웹2.0 (0)	2006.08.25
[웹 2.0은 없다] 오래된 미래 이야기 (0)	2006.05.08
Web 2.0, Lesson for Success (0)	2006.05.08
WEB 2.0 잘못 바라보기 (0)	2006.04.24

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

행복만땅 개발자

HTML의 미래, Part 1: WHATWG

'WEB2.0' 카테고리의 다른 글

카테고리

Recent Post

Recent Comment

Archive

달력

티스토리툴바