호환성을 높인 새 @font-face 문법

CSS, Notes 댓글이 없음 »
@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('eot'),
       url('myfont-webfont.woff') format('woff'),
       url('myfont-webfont.ttf') format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

새 @font-face 문법은 전에 문제가 되었던 Android 플랫폼에서도 잘 보인다고 함.
The New Bulletproof @Font-Face Syntax

꼬리표:

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

꼬리표:

바깥 날씨 위젯 v3.0 배포 시작

Apple, Mac & iOS, CSS 5개의 댓글 »

바깥 날씨 위젯연초에 있었던 기상청의 개편으로 한 동안 멈춰버린 날씨 예보만 보여주던 바깥 날씨 위젯이, 이번 판올림으로 드디어 온전한 동네 예보를 지원하게 되었다. 8)
이번에는 동네 예보를 지원하기 위해 많은 부분을 뜯어고치면서 전국의 날씨 관련 지역 데이타를 모으는데만 지루하고 많은 시간이 소요되었지만 – 읍/면/동 동네 이름의 영어 주소 변환 작업은 결국 중간에 포기 😐 – 덩달아 전국 3,500 여개의 자세한 동네 날씨를 표시할 수 있게 된 것은 그나마 다행으로 생각한다.

위젯의 특성상 작은 공간 안에 다양한 날씨 정보를 효과적으로 표시해 줄 수 있는 방법을 찾다가 WebKit이 지원하는 CSS Animation 기능을 적용해서 JavaScript의 도움 없이도 멋진 애니메이션 효과도 구현할 수 있었다. 또한 공개된 글꼴들 중 Eraser Dust라는 놈을 CSS3의 Web Fonts 기능을 이용해 위젯에 심어놓으면서 칠판 배경에 잘 어울리는 날씨 정보를 표시할 수 있었고, 뿐만 아니라 곳곳에 사용된 CSS3에 정의되어 있는 border property들은 한층 만족스러운 디자인을 이끌어내는 데 많은 도움이 되었다.

아마도, 브라우저의 호환성 걱정 없이 새로운 웹 기술들을 마음껏 실험해 볼 수 있다는 것이 위젯 개발만이 주는 재미와 장점이 아닐까 생각된다.

꼬리표: