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

꼬리표:

느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법

JavaScript, Quotes, Web Optimization 11개의 댓글 »

이 글은 Friendly Bit에 실린 Lazy Loading Asyncronous Javascript의 글을 정리해 놓은 것이다.

외부 JavaScript 파일을 문서에 추가하는 방법에는 여러 가지가 있지만, 여기엔 onload event를 지연시키지 않으면서 병렬 비동기식으로 불러와서 추가하는 방법을 소개한다.

Script tag

가장 보편적으로 쓰이는 벙법이다.

<script src="http://yourdomain.com/script.js"></script>

물론, 제일 단순한 방법이지만, 비동기식(asynchronous) 파일 내려받기를 지원하지 않으며 그 만큼 onload event도 지연된다. (빨간 선은 Load event 발생 시점을 나타냄.)


느긋하게 비동기식으로 JavaScript를 웹 문서에 추가하는 방법(이)란 제목의 글 마저 읽기 →

꼬리표:

New MacBook Pro 2010 13인치와 15인치 사이를 오가는 갈등

Apple, Mac & iOS 2개의 댓글 »

13인치의 좋은 점:

  • 이미 가지고 있는 내 어깨 가방에 딱 들어맞아서, 또 새로운 가방을 구할 필요가 없다.
  • 물론 가격도 더 저렴하다. 이전 대치된 모델과 비교하면 더더욱.
  • 약간의 더 긴 배터리 사용 시간.

나쁜 점:

  • 벌써 퇴물(?)로 취급받고 있는 Core2Duo CPU를 달고 있음.
  • 그래픽 카드의 성능이 비교적 떨어진다.
  • 좁은 화면.

15인치의 좋은 점:

  • 물론 더 좋은 CPU를 가지고 있다.
  • 성능 좋은 그래픽 카드.
  • 넓은 해상도의 스크린.

나쁜 점:

  • 크다는 얘기는 물리적으로 들고 다니기에 더 크고 무겁다는 약점이 있다.
  • 더 비쌈.

이렇게 해서 살펴볼 선택의 결정적 요인들:

  • 정말로 이 놈을 자주 들고 돌아다녀야 하는가? 자주는 아니지만, 필요할 땐 분명 요긴한 덕목이다. 13인치
  • 사실 주로 쓰는 용도가 그렇게나 높은 CPU/그래픽 성능을 요구하지는 않는다. 지금 쓰고 있는 MacBook Black에 비하면 두 기종 모두 상당히 업그레이드 된 녀석들이다. 15인치 >= 13인치
  • 어차피, 필요할 땐 주로 외장 모니터에 연결해서 사용할 예정이지만, 넓은 화면은 플러스 요인이긴 하다. 15인치 >= 13인치
  • 가장 저렴한 두 모델 사이의 가격차 (하드 드라이브 용량을 같게 맞추었을 시) = 67만 4천원. 차라리 나중에 램과 SSD 쪽으로 투자를 하는 것이 체감할 수 있는 더 큰 성능 향상이 있을 것이다 . 13인치

출시 후, 많은 고민이 있었지만 결론은, 13인치!
이제, SSD 가격이 더 떨어질 날만 기다릴 뿐.

꼬리표:

JavaScript의 요지경 속으로

JavaScript 댓글이 없음 »

때때로, JavaScript의 type coercion은 유용할 때가 있다.

var myVar = "1.234"; // string 
+myVar; // 1.234 
typeof +myVar; // number 
(+myVar).toFixed(2); // "1.23" string 

하지만, String을 다룰 때는 주의가 필요하지.

String("1.234") instanceof String; // false 진짜? 
(new String("1.234")) instanceof String; // true 어디보자... 
String("1.234") == (new String("1.234")); // true 설마? 
String("1.234") === (new String("1.234")); // false 그렇군. 
 
(function(){return 2*3;}).toString() === (function(){return 6;}).toString(); // true in FF & Opera, false in IE & WebKit 

이쯤 되면 다음과 같은 결과도 미리 예상해 볼 수 있다.

0 == "0"; // true 이젠 안 속아. 
0 === "0"; // false 그렇지. 

세상 속 사실로 알려진 명제도 JavaScript의 요지경 속에 한 번 빠지면,

3 > 2 > 1; // false 

이것은 아래와 같은 true의 변심에서 시작되었음을 알 수 있다.

(true + 1) === 2;​ ​// true 
(true + true) === 2; // true 
true === 2; // false 
true === 1; // false 

어디 한 번 JavaScript의 요지경 속으로 빠져 봅시다! (⊙﹏⊙)

꼬리표:

CSS3 Please! TextMate bundle

CSS 댓글이 없음 »

각 브라우저별 CSS3 properties의 사용 용법이 서로 다르고, 그래서 모두한테 적용하기가 번거롭다는 점 때문에 CSS3 사용을 주저할 이유가 없어졌다. CSS3 Please TextMate bundle만 설치해놓고, tab trigger만 당기면 너무나 간단할 일이 되어버렸기 때문이다.

snippets은 CSS3, Please! The Cross-Browser CSS3 Rule Generator에서 따온 것으로, 현재 다음과 같은 CSS3 snippets을 제공한다:

  • border-radius (borderrad)
  • box-shadow (boxshadow)
  • rgba (rgba)
  • background-gradient (bggradient)
  • transition (transition)
  • rotate (rotate)
  • font-face (fontface)

앞으로, background-gradient에 방향 옵션(linear/radial)을 지정할 수 있는 기능도 추가될 예정.

CSS3 Please!

아무래도, 이렇게 놓고 보면 WebKit 엔진을 사용하고 있는 브라우저들(Safari, Google Chrome)에서 보는 것이 제일 예쁘고 CSS3 지원도 가장 앞서 있음을 알 수 있다. 다른 브라우저들의 지원 상황에도 가속도가 붙길 바라며, CSS3 많이 사용해 주세요!

꼬리표: