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의 수정은 일단 보류되었다.

HTML5 Boilerpate가 탄생 1주년을 맞아 2.0으로 갱신되었다.

눈에 띄게 바뀐 점이라면 모든 스타일을 기본적으로 밋밋하게 밀어버리는 CSS의 불도저라고 볼 수도 있는 일반 CSS Reset 스타일시트를 버리고 normalize.css로 갈아탄 것. 브라우저별 공통분모는 건드리지 않고 차이를 보이는 놈들만 꼭 집어서 일관성 있게 바꿔준다.
다음 링크로 가면 예전 Reset CSS 스타일을 쓴 것과 새로운 nomalize 스타일을 입힌 후 바뀐 각 element의 차이점을 확인해 볼 수 있다. – HTML5 Boilerpate CSS 변화로 각 엘르먼트의 기본 스타일 차이점

또, Build Script에는 offline 앱을 위한 appcache manifest 파일 자동 생성 기능도 새로 추가되었는데, 빌드 스크립트를 쓰지 못할 상황이라면 사이트 주소만 입력해주면 자동으로 해당 사이트의 appcache 파일을 생성해주는 Cache Manifest Validator도 유용할 것이다. 이 사이트에선 Textmate Bundle도 함께 제공하고 있음.

그리고 이미 예상된 것이지만, 이제 기본적으로 IE6 사용자에겐 Chrome Frame 설치를 권고하게 된다.

더불어 Modernizr 2 안에 respond.js도 함께 추가되면서 요즘 새로 시작되는 웹 프로젝트에는 거의 필수가 되어버린 Responsive Web Design과 'Mobile First' 디자인을 적용해 볼 수 있는 기본 밑바탕도 마련되었다.

TextMate에서 CSS 코딩을 하다 보면, HTML5에서 새로 소개된 elements를 인식하지 못해서, syntax coloring을 제대로 안 해주는 아주 사소한 문제가 있다.

이 문제를 수정하려면, TextMate.app/Contents/SharedSupport/Bundles/CSS.tmbundle/Syntaxes/CSS.plist 파일을 열고 Root>patterns>Item 0>patterns>Item 1 속에 있는 match 정규식을 다음처럼 수정해주면 된다.

\b(a|abbr|acronym|address|area|article|aside|audio|b|base|big|blockquote|body|br|button|canvas|caption|cite|code|col|colgroup|command|datalist|dd|del|details|dfn|div|dl|dt|em|embed|fieldset|figcaption|figure|footer|form|frame|frameset|(h[1-6])|head|header|hgroup|hr|html|i|iframe|img|input|ins|kbd|keygen|label|legend|li|link|map|mark|menu|meta|meter|nav|noframes|noscript|object|ol|optgroup|option|output|p|param|pre|progress|q|rp|rt|ruby|samp|script|section|select|small|source|span|strike|strong|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|tt|ul|var|video|wbr)\b

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

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

오늘 열린 Googl I/O 2010에서 개발자들에게 선택의 폭을 넓혀줄 반갑고 새로운 기술들이 소개되었다. 바로, WebM과 Google Font API.

그 동안 HTML5의 video tag 안에서 생식하게 될 Video와 Audio 형식을 두고 license를 문제 삼아 많은 논란들이 있었는데, 이미 예견되었듯이 Google에서 WebM 이름의 video codec을 BSD 스타일로 공개하였다. 이 포멧은 고화질 영상을 낮은 성능의 CPU를 가진 휴대용 기기들에서도 효율적으로 전송할 수 있다고 주장하고 있다.

앞으로 Mozilla, Opera, Google Chrome, Adobe 그리고 심지어 IE9마저도 VP8 codec 설치를 조건으로 하지만 지원할 것을 약속하고 있는 상황이다. Safari의 지원 여부는 아직 알 수 없지만, 이미 YouTube를 포함한 개발자들의 지지 성명이 잇다르고 있는 가운데 아마도 대세를 따라야 하지 않을까?

또 하나, 이젠 FOUT 걱정없이 web fonts를 자신의 페이지에서 사용하는 작업도 Google Font API 덕분에 쉬운 일이 될 듯하다. 그리고 JavaScript library인 WebFont Loader를 쓰면 자신의 서버에 존재하는 web font를 포함한 다양한 font provider를 선택해서 font 로딩에 관한 좀 더 섬세한 조절도 가능하단다.

현재 제공되는 Google Font Directory에는 아직 그 선택의 폭이 넓지 않지만, 차차 개선될 것이라 예상되고 역시나 이를 활용할 다양한 한글 글꼴의 부재는 아쉬운 일.

어쨌건, 앞으로 license 걱정없이 창작 Video/Audio와 Web font를 추가하는 일이 아래처럼 간단해졌으니 두 손 들고 환영할 일이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WebM and Google Font API</title>
<link href='http://fonts.googleapis.com/css?family=Some+Cool+Font' rel='stylesheet' type='text/css'>
<style>
    body { font-family: 'Some Cool Font', serif; font-size: 100px; }
</style>
</head>
<body>
<h1>This is cool!</h1>
<video width="640" height="360" poster="__POSTER__.jpg" controls>
    <source src="cool_video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
    <source src="cool_video.webm" type="video/webm; codecs='vp8, vorbis'"></source>
    <object width="640" height="384" type="application/x-shockwave-flash"
        data="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4">
        <param name="movie" value="__FLASH__.SWF?image=__POSTER__.jpg&amp;file=cool_video.mp4" />
        <img src="__POSTER__.jpg" width="640" height="360" alt="__TITLE__" />
    </object>
</video>
</body>
</html>

이걸 보니, 어쩔 수 없는 과거 유물들을 위한 Flash 코드의 존재는 여전히 꺼림칙하고 지저분하다.