WebM 그리고 Google Font API

Web Development 댓글이 없음 »

오늘 열린 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를 추가하는 일이 아래처럼 간단해졌으니 두 손 들고 환영할 일이다. 8)

<!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 코드의 존재는 여전히 꺼림칙하고 지저분하다.

꼬리표:

멋져 부린 HTML5 프리젠테이션 슬라이드

Web Development 한 개의 댓글 »

이렇게 웹 브라우저 상에서 실제 HTML5 기능을 이용한 멋진 슬라이드를 구경하고 있노라면 눈과 머리에 충분한 자극이 될 것이다.
HTML5 설명 프리젠테이션 슬라이드
원래 Google Chrome 브라우저에서 시연할 용도로 제작되었으며, 대부분의 최신 브라우저들에서도 내용을 확인해 볼 수 있지만, 슬라이드에 있는 시연 기능을 100% 사용하려면 다음과 같이 터미널에서 Chrome의 시험적 기능들을 켜준 후에 열어서 보아야 한다.

/PATH_TO_GOOGLE_CHROME_APPLICATION/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -enable-webgl -enable-geolocation -enable-desktop-notifications -allow-file-access-from-files

슬라이드는 code repository에서 내려받을 수 있으며, 앞으로 계속 새로운 내용이 수정/추가될 예정이란다.

IE에서 Google Chrome Frame을 심어놓고 HTML5 슬라이드를 시연한다면, 너무 심술긏은 짓일까? 😮

꼬리표:

HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들

Web Standards 3개의 댓글 »

현재 웹의 화두는 웹 어플리케이션으로의 진화라고 요약될 수 있을 것이다. 이를 아우르는 새로운 웹 표준으로 HTML5가 자리잡고 있는데, 여기에는 과거 데스크탑 어플리케이션의 전유물로만 여겨지던 여러 기술들을 거의 모두 아우르고 있다. 과거, 한 때 정체되어 있던, HTML4, XHTML1 그리고 DOM2 HTML 웹 기술들을 대체할 목적으로 새로운 틀이 만들어지고 있는 것이다.

그렇다면, 지금 당장 HTML5를 사용할 수 있을까? 해답은 바로 웹 브라우저들의 지원 상황에 달려있다.
공식적으로 발표된 HTML5의 W3C Candidate Recommendation 단계로의 진입은 일러야 2012년으로 예상하고 있으며, 현 브라우저들의 지원 상황도 그 편차가 심하지만, 대세를 그르치지 않는 이상 앞으로 상황은 급속도로 좋아지리라 생각된다.

또한, 당장 HTML5를 사용해도 별 큰 문제가 없는 것이, HTML5 태생부터 과거 호환성을 염두에 두었기에 큰 무리없이 점진적으로 새 기술을 흡수(Progressive Enhancement)하는데 유리하다는 점도 있겠다. 좀 더 자세한 브라우저들의 HTML5 기술 지원 상황은 When can I use… 페이지에서 확인할 수 있다.

자, 그럼 HTML5로 전환하기 전 챙겨야 할 사항들을 알아보자. HTML5로 한 발 더 내딛기 전에 챙겨야 할 것들(이)란 제목의 글 마저 읽기 →

꼬리표:

Welcome to Safari 4

Apple, Mac & iOS, CSS, HTML 한 개의 댓글 »

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

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

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

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

꼬리표:

HTML 5에서 새로 추가된 언어 지정 관련 META 선언

HTML, Web Standards 댓글이 없음 »

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

꼬리표: