2007년 11월 27일
[마소 2007년 10월] 차세대 웹을 위한 안내서, HTML 5
박지강 jkwave@gmail.com｜개발 및 번역 프리랜서로 활동하다 최근 SK 커뮤니케이션즈로 자리를 옮겼다. 역서로는 ‘프로젝트 데드라인(한빛미디어)’이 있으며, 최근 ‘당신은 웹2.0 개발자입니까?(한빛미디어)’를 집필하였다. 기술을 이용한 기획과 전략, 열린 전략적 제휴, 일인 기업에 관심이 많으며, 현재 목표는 스스로 기획하고 개발하고 디자인한 서비스를 대중들에게 공개하는 것이다.
하루가 멀다 하고 수많은 웹 기술이 등장하는 지금, 아이러니 하게도 가장 발전이 더딘 웹 기술은 웹의 핵심이라 할 수 있는 HTML이다. HTML은 1999년 HTML 4가 릴리즈된 이후 전혀 진전이 없었다. W3C는 HTML을 XML처럼 확장 가능하고, SVG(Scalable Vector Graphics)나 XForms, MathML과 같은 새로운 목적의 마크업 언어로 만드는데 많은 투자를 하였다. 또한 브라우저를 만드는 기업들은 브라우징 탭이나 RSS 리더를 장착하는 등의 부가기능을 추가하고, 웹 관련 개발자와 디자이너는 Ajax나 CSS를 통해 좀 더 나은 사이트를 만드는데 힘을 쏟았다. 이런 과정에서 관련 산업과 기술들이 규모의 경제를 이루고 질적인 향상을 이룬 반면 정작 웹의 가장 핵심 기술인 HTML은 1999년부터 현재까지 거의 성장을 하지 못했다.
이 같은 현실을 직시한 대표 브라우저 기업인 애플(Apple), 오페라(Opera), 모질라(Mozilla)가 2004년부터 WHATWG(Web Hypertext Application Technology Working Group)라는 웹 기술 개발 그룹에서 의기투합하여 새로운 HTML에 대한 논의와 개발을 지속적으로 펼치고 있다.
결국 이런 현실적이고 구체적인 노력은 많은 진전을 이루었고, 최근 W3C가 WHATWG의 차세대 HTML에 대한 결과물을 채택하고 유지 발전하기로 결정하였다. HTML 5로 불리는 HTML의 새 버전은 기존 HTML에 없던 새로운 엘리멘트와 속성들이 추가되었다. 세부사항을 살펴보면 기존의 <div>, <span>과 같이 레이아웃의 단락을 명시하는 종류의 태그도 있지만, 무엇보다 <nav>와 <footer>처럼 HTML안에 특정한 의미(Semantic)를 담는 태그가 다수 추가되었음에 주목할 필요가 있다. 이 같은 태그들은 검색 엔진을 통해 좀 더 다양한 용도로 활용될 수 있고, 모바일 디바이스나 시각장애인을 위한 음성 인식 브라우저 구현에 중요한 역할을 해 큰 잠재력을 지닌다. 멀티미디어 시대를 맞이하여 <audio>나 <video>와 같은 멀티미디어 관련 태그들이 새롭게 추가되었고, <center>나 <font>와 같이 CSS에서 핸들링할 수 있는 태그들은 배제되었다. <frameset>과 같이 대중들에게 사용되지 않는 태그들도 HTML 5에서 사라졌다.
이처럼 기존의 HTML에 비해 많은 차이점을 담고 있는 HTML 5. 과연 웹 기술에 어떤 변화를 가져올 지 지금부터 개괄적으로 살펴보자.
HTML 5에 달라진 변화들
HTML 5에는 다양한 용도의 태그들이 추가되었다.
1. 섹션(Section)
섹션 관련 엘리먼트(Element)는 페이지의 구역을 위치나 의미로 구분하는 태그이다. <body>나 <head>가 흔히 우리가 알고 있는 섹션 엘리먼트로 HTML 5에 추가된 섹션 관련 엘리먼트의 세부 내용은 다음과 같다.
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body> |
♦ <section> : 문서의 단락을 구분할 때 사용한다. <section>은 다양하게 사용될 수 있다. 책의 장(chapter) 안에 단락을 구분할 때 사용할 수 있고, 탭으로 구분된 콘텐츠나 숫자로 구분된 단락에 사용할 수 있다. 사이트에서 소개나 공지사항, 연락처와 같은 단락을 구분할 때도 쓸 수 있다. <h1>~<h6>은 <section>안에서 내용의 제목을 대변한다.
♦ <header> : 페이지 안에 명시적인 헤더를 표시할 때 사용한다. <header>는 <head>와 다르다는 점과 적어도 하나의 <h1>~<h6>를 포함해야 한다는 점에 주의하자.
♦ <footer> : 페이지 하단에 푸터를 표시할 때 사용한다. 보통 사이트에 대한 간략 정보가 들어가는 것이 일반적이다.
♦ <nav> : 다른 페이지로 이동하는 링크들의 집합을 담는다. 우리가 흔히 보는 페이지 하단의 ‘이전’, ‘다음’ 버튼이나 페이지 번호 리스트를 표시하는 부분으로 생각하면 된다.
♦ <article> : 신문이나 블로그, 게시판, 잡지 등 개별적인 저자의 글 단위이다.
2. 블록(Block)
블록 관련 엘리먼트들은 섹션 안에서 좀 더 작은 단위로 글의 단락을 구분하고 개행하는 역할을 한다. <p>나 <br>이 흔히 알고 있는 블록 단위의 엘리먼트들이다. 다음은 HTML 5에 새로 추가되는 블록 관련 엘리먼트이다.
♦ <dialog> : <dialog>는 사람들 사이의 대화 내용을 표시할 때 사용한다. <dialog> 태그 안에서 <dt>는 청자, <dd>는 청자가 말한 내용을 정의한다.
<dialog> <dt> Costello <dd> Look, you gotta first baseman? <dt> Abbott <dd> Certainly. <dt> Costello <dd> Who's playing first? <dt> Abbott <dd> That's right. <dt> Costello <dd> When you pay off the first baseman every month, who gets the money? <dt> Abbott <dd> Every dollar of it. </dialog> |
♦ <aside> : <aside>는 페이지 내의 중심 콘텐츠와는 약간 동떨어진 성격의 내용을 가지고 있는 단락을 구분할 때 사용된다. 팁이나 메모, 사이드 바 등이 좋은 예다.
3. 구(Phrase)
구 단위 엘리먼트들은 섹션이나 블록 단위 엘리먼트와 달리 작게는 텍스트의 단어나 문장에 의미를 부여하는 태그들을 포함한다. 다음은 HTML 5에 추가된 엘리먼트들이다.
♦ <m> : <m>는 mark를 의미하는 태그로 특정 문장이나 단어를 강조하기 위해 사용한다. 예로 웹 사이트에서 검색어를 입력했을 때 출력되는 결과 페이지 안에 입력한 검색어와 매칭되는 단어를 표시할 때 사용할 수 있다.
<p>Our first date was <time datetime="2006-09-23">a saturday</time>.</p> <p>Many people get up at <time>08:00</time>.</p> |
♦ <time> : 페이지 안에서 날짜를 표시하기 위해 사용한다. 물론 기존 HTML도 페이지에 날짜를 표시할 수 있지만, 컴퓨터는 페이지 안의 숫자가 시간인지 온도인지 키인지 확인할 방법이 없다. <time> 태그로 검색 엔진이나 브라우저는 페이지 안의 시간 데이터를 정확히 처리할 수 있게 된다.
<meter>75%</meter> <meter>750‰</meter> <meter>3/4</meter> <meter>6 blocks used (out of 8 total)</meter> <meter>max: 100; current: 75</meter> <meter><object data="graph75.png">0.75</object></meter> <meter min="0" max="100" value="75"></meter> |
♦ <meter> : min, max, value, low, high, optimum과 같은 속성과 함께 숫자로 측정할 수 있는 범위를 나타내는데 주로 사용한다. 학생들의 시험 점수나 온도 등 최대치나 최저치와 함께 현재치 등을 표시하는 숫자 패턴을 웹에서 표현하는데 용이하다.
♦ <progress> : 진행 상태를 나타내는데 사용한다. 예를 들어 다운로드나 특정 작업 중일 때 현재 작업이 얼마나 진행되었는지 표시할 때 사용할 수 있다. 자바스크립트를 사용하여 진행도를 런타임으로 업데이트한다면 그 활용도가 더 높아질 것이다.
4. 외부 콘텐츠(Embeded Content)
외부 콘텐츠 관련 엘리먼트는 현재 HTML이 아닌 다른 콘텐츠를 포함할 때 사용한다. <img>나 <embed>, <object>가 대표적인 외부 콘텐츠 관련 태그들이다. 다음은 HTML 5에 추가된 엘리먼트다.
♦ <figure> : <figure>는 외부 콘텐츠와 함께 외부 콘텐츠의 제목이나 설명을 함께 포함하기 위한 태그이다. 외부 콘텐츠에 대한 제목이나 설명은 <figure>안에 <legend> 태그를 사용하여 표시할 수 있다. 예를 들어 그림과 함께 다음의 설명을 함께 넣고 싶다면 <figure>가 좋은 선택이 될 것이다.
<figure> <img src="1100670787_6a7c664aef.jpg"> <legend>Bubbles traveled everywhere with us.</legend> </figure> |
♦ <video> : 현재 HTML에서 동영상 파일을 첨부하고 싶다면 <object>나 <embed> 태그를 사용해야 한다. 이 태그들은 모든 외부 객체를 포함할 때 사용하는 것으로 포함된 파일이 동영상인지 음성인지 분간할 방법이 없다. 하지만 <video>태그를 사용함으로써 현재 웹에서 기하급수적으로 늘어나고 있는 동영상 파일들을 적절히 인식하여 다양한 활용을 가능하게 한다.
<video src="http://www.cafeaulait.org/birds/sora.mov" autoplay="true"/>
|
♦ <audio> : <video> 태그와 마찬가지로 HTML에 포함된 음성 파일을 정확히 명시함에 따라 웹에서 기하급수적으로 늘어나고 있는 음성 파일에 대한 다양한 활용이 가능하다.
♦ <canvas> : 그래프 또는 게임 그래픽을 그리거나 다른 이미지들을 움직이게 만드는 등 비트맵 그래픽을 동적으로 표현하는데 사용한다.
5. 상호작용(Interactivity)
상호작용 관련 엘리먼트들은 기존의 HTML에 없는 새로운 엘리먼트들이다. 앞서 설명한 HTML 5의 엘리먼트들이 레이아웃 표현에만 충실했던 기존 HTML에 구조화된 의미(semantic)를 부여하는데 초점을 맞췄다면, 상호작용 관련 엘리먼트들은 HTML의 유저 인터페이스로서의 역할을 개선시키기 위한 기능을 수행한다.
♦ <details> : 특정 단어나 문장에 대해 자세한 설명을 담는데 사용한다. 각주나 툴 팁과 같은 유저 인터페이스에 사용할 수 있다. 기본적으로는 페이지에서 숨겨지며 어떤 액션을 가했을 때 내용이 나타나는 식의 인터페이스 구현에 알맞다. open 속성을 이용해 내용의 기본 노출 여부를 설정할 수 있다.
♦ <datagrid> : HTML에서 그리드 컨트롤의 역할을 하는 태그이다. <table>이 변하지 않는 정적인 데이터를 담는데 사용한다면 <datagrid>는 사용자나 스크립트를 통해 다양한 구조의 셀을 수정하고 정렬하는 등 데이터를 다양하게 처리하는데 사용한다. HTMLDataGridElement는 그리드를 다이나믹하게 조작할 수 있도록 만들어주는 스크립트 인터페이스이고, DataGridDataProvider는 그리드에 데이터를 동적으로 설정하는 스크립트 인터페이스이다. <datagrid>는 Ajax와 결합하여 웹의 애플리케이션화를 가속화시킬 것이다.
<datagrid> <table> <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr> <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr> <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr> <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr> </table> </datagrid> |
♦ <command> : 사용자의 지시를 수행하는 컨트롤을 표현하는 태그이다. 독립적으로는 마우스 클릭으로 개별적으로 실행될 수 있으며, 함께 모이면 마치 메뉴 속 명령들과 같이 실행될 수 있다.
<menu type="popup" label="Edit"> <command onclick="undo()" label="Undo"/> <command onclick="redo()" label="Redo"/> <command onclick="cut()" label="Cut"/> <command onclick="copy()" label="Copy"/> <command onclick="paste()" label="Paste"/> <command onclick="delete()" label="Clear"/> </menu> |
♦ <menu> : <menu>는 명령어들의 집합을 메뉴 컨트롤로 표현한다. <menu>안에서 <a>나 <option>, <command>, <input> 등과 같이 마우스 클릭을 통해 특정 기능의 호출이 가능한 엘리먼트를 집합시켜 HTML 안에서 메뉴 컨트롤을 구현할 수 있다.
이 같은 태그 외에도 다양한 속성들이 새로 추가되었다. 일례로 <input> 태그의 속성에 date, url, email 등과 같은 세부적인 옵션이 추가되었다. 이로서 HTML 5에서는 날짜를 입력할 때 자바스크립트 달력을 일일이 구현하지 않아도 되고, 이메일 주소 입력시 ‘@’를 체크할 필요도 없다. 간단한 속성의 추가지만 이로 인해 불필요한 자바스크립트 사용을 줄일 수 있고, 페이지의 크기도 줄어들어 사용자는 보다 쾌적한 환경에서 웹을 이용할 수 있을 것이다.
지금까지 HTML 5에 추가되는 태그를 간단한 설명과 함께 살펴보았다. 여기서 그치는 것이 아니라 기존 HTML 스펙에서 사용하기 불편하고 접근하기 힘들었던 <frame> 태그나 CSS에서 사용하는 것이 더 합리적인 <font> 태그 등 여러 가지 태그와 속성들의 지원도 중단된다. 이처럼 HTML 5는 기존의 불필요한 엘리먼트는 과감히 없애고 뒤쳐지는 기능은 대폭 개선하는 등 알찬 버전 업을 진행 중이다. HTML 5는 현재 작업이 진행 중인 초안(Working Draft)이기 때문에 스펙 정의에 대한 논의가 활발하게 진행되고 있다. 그래서 앞에서 이야기한 내용에서 큰 틀은 벗어나지 않겠지만 공개적인 논의 중 도출된 개선 사항은 얼마든지 반영될 수 있음을 염두에 두자. 물론 읽는 이가 느끼는 HTML의 개선사항이 있다면 워킹 그룹에 참가하여 HTML 5의 발전에 보탬이 될 수도 있을 것이다. 좀 더 자세한 내용은 http://www.whatwg.org를 방문하여 살펴보기 바란다.
웹에 HTML의 씨앗을 뿌려라
그동안 차세대 웹을 표방하는 웹2.0을 구현하기 위해 다양한 웹 기술들이 거론되어 왔다. 하지만 이 기술들은 다음 세대를 위한 새로운 기술들이 아니라 기존 기술을 사용하는 방법론에 가까웠다. 예컨대 기존 기술을 개방과 공유라는 웹의 특징에 알맞게 사용하기 시작한 것 외에 별다른 기술적 혁신은 없다는 얘기다. 좋다. 이제라도 웹의 특징에 맞게 웹 기술을 이용하기 시작했다면 그것 또한 축하할 일이다. 하지만 태생적으로 웹은 방법이 아니라 기술이다. 웹은 이 시대가 낳은 최첨단 기술의 집합체라는 태생을 지니는 만큼 기술의 진보가 없이는 그 어떤 비약적인 발전도 기대할 수 없다.
이제 웹2.0이라는 웹을 제대로 발전시킬 수 있는 방법을 알았으니 기술의 진보로 웹을 또 다른 레벨의 단계로 올려놓을 때가 되었다. HTML 5는 기존 HTML이 지니는 여러 가지 기술적 한계를 극복하고 있다. HTML 안에서 더욱 다양한 사용자 인터페이스를 구현해 접근성과 RIA를 절충하였다. 이로서 모바일을 포함한 좀 더 다양한 브라우저에서 HTML을 왜곡 없이 이용할 수 있게 된다. 그리고 더 많은 의미(Semantic)를 태그로 정의해 검색 엔진이나 음성 인식기 등과 같은 컴퓨터에서 HTML의 이해도를 높일 수 있다. 이 모두가 웹2.0이 원하는 시대적 요구였지만 기존 HTML이 해결하지 못해 써드파티의 기술을 사용했던 부분들이다.
HTML 5가 모든 면에서 장밋빛 미래를 가지는 것은 아니다. WHATWG에 마이크로소프트가 제외된 점이 무엇보다 아쉽다. 마이크로소프트의 인터넷 익스플로러는 현재 가장 많은 사용자층을 거느린 브라우저이기 때문이다. 물론 WHATWG의 작업초안이 국제표준기구인 W3C로 넘어갔으니 마이크로소프트는 HTML 5를 지지할 수밖에 없을 것이다. 또한 HTML 5가 최종적으로 발표되더라도 웹 전반에 채택되어 영향력을 떨치려면 시간이 필요하다. 그러므로 HTML 5이 어떻게 변화하는지 지속적으로 살피고, 주변 기업들의 지원 동향에 대해 관심을 기울여야 한다. HTML 5가 웹을 어떻게 변화시키지는 제대로 파악하려면 말이다.
HTML 5의 <dialog> 태그를 통해 특정 정치인의 발언을 검색하여 관심 사안에 대해 거짓말을 했는지 여부를 파악할 수 있는 검색 엔진이 있다면 좀 더 나은 정치인을 뽑을 수 있을 테고 민주주의는 보다 성숙되어질 것이다. 그리고 올바른 정치인을 뽑아 좀 더 나은 나라를 만드는데 일조를 할 수 있겠다. 태그 하나가 나라를 바꾼다. 너무 비약이 심하다고 생각하는가? 그렇지 않다. 웹이라는 토양에는 하찮은 씨앗이라도 이처럼 풍성한 결실을 거둘 수 있다. 사용자라는 수십억의 영양분이 있기 때문이다. HTML 5는 향후 수 십 년간 우리를 먹여 살릴 모내기라고 생각해도 좋다. 지금까지 우리는 사용자가 가득 담긴 웹2.0이라는 기름진 토양을 만들었고 이제 그 위에 HTML 5라는 씨앗을 뿌려야할 때가 다가오고 있다. 언제가 될지 모르지만 멀지 않은 시일에 풍성한 곡식을 얻게 될 것이고, 그 곡식은 다양한 반찬 즉 서비스로 변모되어 우리 생활에 크나큰 영향을 미칠 것이다. 그것이 바로 우리가 HTML 5가 채 완성되지도 않았음에도 불구하고 관심을 기울여야 하는 이유이다.
# by | 2007/11/27 01:09 | 컬럼 | 트랙백 | 덧글(0)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]