WHATWG Blog에서 전한 내용: WHATWG Weekly: Now it’s <time> for <data>

HTML5에 포함되었던, 주로 시간과 날짜를 마크업 할 때 사용되던, time element가 보다 폭넓은 데이터 형식에 대한 요구를 수용하기 위해 schema.org에 정의된 Microdata 용어를 사용하는 data element로 대치되었다는 소식.

이번의 변경을 가져온 처음의 제안 내용과 논의를 살펴보면 적지 않은 반대 의견도 살펴볼 수 있는데, 개인적으로도 time element가 소개되기 이전에 미리 이러한 논의가 이뤄져서 개발자의 혼란을 막았었으면 하는 아쉬움이 있다. (HTML5는 아직 Working Draft임을 감안하더라도.)

Spec에 나와 있는 data element의 사용법을 살펴보면, data element는 감싸고 있는 내용에 대한 기계적으로 해석되는 용도의 value attribute을 항상 포함하고 있어야 한다.

간단한 예로, data element를 써서 특정 시간을 마크업 한 예.

<p>Our first date was <data value="2006-09-23">a Saturday</data>.</p>

다음은 data element로 schema.org에 정의된 Microdata 용어를 써서 블로그 글이 작성된 날짜를 마크업 한 예.

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <data itemprop="datePublished" value="2009-08-30">yesterday</data>.</footer>
 <p itemprop="articleBody">I put a bike bell on his bike.</p>
</article>

data-* attributes과 마찬가지로 문서에 저장된 다양한 형식의 정보를 data element를 써서 기계와 JavaScript가 접근하기 쉽게 해놓았다지만, 마크업 하기 간단명료했던 time element의 어쩔 수 없는 퇴장은 그래도 아쉽다. 아직 덜 똑똑한 기계 때문에 이런 혼란스런 상황이 벌어졌고, 그래서 더 부지런해야만 하는 것은 개발자들의 몫으로 남겨졌다.

덧붙임: time element의 완전한 삭제/퇴장/배제를 재고해달라는 공식 요청
결국 time, data element가 공존하는 방향으로 갈 수도 있을듯한데 어떻게 될지는 지켜볼 일.

덧붙임 2: 결국, WG 회원들 간의 충분한 논의가 없었음을 인지하고 이번 사건과 관련된 spec의 수정은 일단 보류되었다.

일반적으로 웹 페이지 혹은 웹 애플리케이션을 제작할 때는 페이지에 담긴 내용을 효과적으로 전달할 수 있도록 그 중요도에 따라 전체적인 내용의 윤곽(outline)을 그리는 일부터 시작된다.

그런데 HTML5에선 문서 내 특정 내용을 의미론적으로 구분 짓는 새로운 element들이 소개되었을 뿐만 아니라 웹 브라우저가 문서를 읽고 DOM tree를 해석하는 outline algorithm에도 변화가 있어서, 이 바뀐 점을 올바로 이해하고 적용하는 것이 문서 전체의 윤곽을 잡는데 아주 중요한 일이 되었다. HTML5의 새로운 문서 Outline 알고리듬(이)란 제목의 글 마저 읽기 →

물론, 이미 TextMate에는 내장된 훌륭한 HTML과 CSS snippets을 사용해서 효율적으로 코딩할 수 있는 여건이 제공되고 있지만, 456 Berea Street의 소개 기사로 알게된 zen-coding은 여기에 엄청난 효율의 상승 효과를 더해준다.

사용 예를 보면 한 눈에 그 막강함을 눈치챌 수 있다.

div#main-menu>ul.menu>li#item-$*5{This is an item $}*5

에디터에서 위 코드를 입력하고 Zen Coding 명령(command+E)을 실행하면 다음과 같은 snippet을 돌려준다.

<div id="main-menu">
  <ul class="menu">
    <li id="item-1">This is an item 1</li>
    <li id="item-2">This is an item 2</li>
    <li id="item-3">This is an item 3</li>
    <li id="item-4">This is an item 4</li>
    <li id="item-5">This is an item 5</li>
  </ul>
</div>

말 그대로, HTML and CSS hi-speed coding 주장에 걸맞는 plugin으로, CSS selectors를 써서 HTML DOM을 효과적으로 생성/코딩할 수 있다는 점은, 과거 Ruby gem plugin으로 유명한 Haml의 장점을 그대로 따와서 바로 HTML과 CSS 파일에 사용할 수 있게 된 것이나 마찮가지다.

현재, Zen Coding은 TextMate 말고도, Aptana, Coda, NetBeans 그리고 Expresso를 지원한다고 나와있으며, 홈 페이지에서 데모용 스크린케스트도 제공하고 있다.

참고로, Zen Coding은 러시아 개발자들이 주축이 되어 개발되고 있기 때문에, HTML Root element에 속해있는 html의 lang 속성을 기본 ru에서 ko로 바꾸어주는 수정이 필요하다. TextMate의 경우, Zen-HTML bundle은 Bundle Editor를 열어서 수정하고, Zen Coding bundle은 번들 패키지 속 /Support/zencoding/settings.py 파일을 열어서 수정해주면 된다.

이제, 이런 코딩 작업 향상이 받쳐줄 만한 좋은 아이디어만 쏟아져 나와주면 좋을 텐데, 역시 어렵군. 😮

어쩐지 뜸금없이 짠하고 나타난 Safari 4 Beta 1의 출현으로 무슨 새로운 기능들이 추가되었는지 관심을 모으고 있는 가운데, 우선 처음 설치하고 창을 열면 반기는 환영 영상 페이지가 인상적이다.

뜬금없는 궁금증에 페이지 소스를 살펴보니, 의외로 깔끔한 HTML 5의 Docktype이 눈에 들어온다. 찬찬히 살펴보면, 짧은 소개 영상 전체가 하나의 동영상이 아닌 CSS 3와 HTML 5 표준으로 이루어진, 그야말로 Safari 4가 새로 지원하기 시작한 신 웹 기술들이 서로 조화롭게 어울리며 뽐내고 있는 모습이다. 8)

여기에 사용된 모든 웹 기술들은 이번에 함께 문을 연 Safari DevCenter에서 자세하게 소개되어 있는데, 그 중 아래는 WebKit이 지원하는 CSS Reflections를 따라해 본 모습.

이제 막 꽃을 피우기 시작한 새로운 웹 기술들을 재빠르게 흡수해서 적용해주는 모습이 참 기특하긴 한데, 이런 추세가 다른 진영에도 전파되서 실제 웹 환경에 적용할 수 있는 시기가 빨리 찾아왔으면 하는 바램이다. 그건 그렇고, 왜 Squirrelfish라는 기존 JavaScript 엔진의 이름을 ‘Nitro’로 바꾼 이유는 몰까?

HTML 5의 최신 동향을 전해주는 WHATWG Blog의 “The Road to HTML 5” 연재글 중 최근에 올라온 글을 보면, HTML 문서의 character encoding 관련 새로운 <meta charset> attribute을 소개하고 있다.

현재 HTML 문서의 character encoding을 지정해 주는 META 선언 방법은 다음과 같은데,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

여기에, 이놈보다 한 단계 더 위의 우선권을 갖게 되는 놈으로 다음과 같은 용법이 새로 추가되었단다.

<meta charset="UTF-8">

굳이 또 하나의 character encoding 관련 META 선언 용법을 추가한 이유는,

The rationale for the <meta charset=""> attribute combination is that UAs already implement it, because people tend to leave things unquoted, like:
<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

Andrew Sidwell씨의 설명

(이미 대부분의 브라우저들에서 <meta charset>이 이미 적용되어 사용 가능한 것을 실험해 볼 수 있다.)
이렇게라도, 또 하나의 포장된(?) 길을 열어두어서 보안상의 나쁜 불상사가 일어나지 않도록 미연에 방지하자는 건데, 아무래도 가장 속편한 방법은 서버에다 다음 한 줄의 깔끔히 마무리.

AddDefaultCharset utf-8

추가 참고 문서 – HTML 5 differences from HTML 4