ILMOL.COM

따끈따끈한 브라우저 업데이트가 릴리스 되었습니다. 많은 분들이 기다리셨던 Firefox 3.5!
많은 기능중에서도 저는 일모리네가 언제나 그렇듯이 쌩뚱맞는 @font-face를 살펴보고 싶은데요 일단 @font-face 이야기 전에 간단히 아웃라인만 살펴보겠습니다.

• HTML5의 video 태그와 audio태그를 지원한다는것 (기타 문서적인 틀을잡는 태그들은 이미 지원중이었슴)
• 더욱 빨라진 js엔진
• Location Aware Browsing 탑재
• 더욱 빨라진 컨텐츠 렌더링
• 새로운 웹기술적용: downloadable fonts, CSS media queries, new transformations and properties, JavaScript query selectors, HTML5 local storage and offline application storage, <canvas> text, ICC profiles, and SVG transforms.

파이어폭스 인스톨 후 html5의 video, audio 태그를 강조하는거 보니 안띄워줄수 없더군요. 태그는 간단합니다.

<video src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv" controls style ="width: 600px;"></video>

삽입후 출력되는 화면.

이제 css로 스타일을 입혀줄수 있겠죠 video {border: 3px solid #eee;} 응용의 부분은 무궁무진합니다.

@font-face

이번 파이어폭스 3.5 부터는 @font-face 가 지원되게 됩니다. CSS3에서 구현되는 기능으로 보지만 이미 CSS2 때에도 사실 IE에서 특정 폰트종류 (.eot) 만 지원되었었죠. 엄청난 관심가운데 개발이 되어졌음에도 불구하고 copyright, 라이센스 등의 문제와 브라우저 미지원으로 널리 사용되지 못했습니다. 물론 이제 사파리3.1, 크롬 2.0 브라우저에 이어 불여우3.5 까지 지원되며 곧 릴리스될 오페라10 에서도 지원하게 됩니다. 몇달안에 IE를 제외한 모든 메이저 브라우저들이 이 기능을 지원 한다는 것입니다.

W3C에서 정의하는 @font-face 를 따오면, @font-face는 필요한 폰트를 링크하여 필요한 부분에 출력토록 하는 기능을 담당합니다. 제작자가 특정 환경때문에 폰트 미지원을 우려하여 기본폰트만을 사용하는 제한을 벗어나서 유저에게 원하는 렌더링을 보여줄수 있게 됩니다. CSS 룰을 사용하여 유저에이전트(보통 브라우저) 는 주어진 텍스트 안에 제작자가 원하는 특정 폰트가 사용될 경우 다운로드 하여 출력하게 됩니다. TrueType (.ttf) 이나 OpenType (.otf) 을 사용할수 있는 것이죠.

The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of “web-safe” fonts, allowing for consistent rendering independent of the fonts available in a given user’s environment. A set of font descriptors define the location of a font resource, either locally or externally, and the style characteristics of an individual face. Multiple @font-face rules can be used to construct font families with a variety of faces. Using CSS font matching rules, a user agent can selectively download only those faces that are needed for a given piece of text. - W3C

사용법은 나름 쉽습니다. @font-face 에서 사용되어질 폰트이름과 위치를 지정해 놓으면 기본조건이 갖추어 집니다. 그 후 보통 폰트 스타일을 적용하는 것과 동일하게 font-family를 사용하여 이름을 불러주면 되겠습니다.

@font-face {
   font-family: ILMOL;
   src: url("http://ilmol.com/ILMOL.ttf") format("truetype");
}

p {
font-family: ILMOL;
}

특별히 제작자가 사용하고자 하는 폰트와 비슷한 폰트가 이미 유저의 컴퓨터에 있을 시에 그것을 먼저 사용하도록 하며 비슷한 폰트 조차도 없을 경우 다운로드 하게 하는 방법이 local입니다. 예를들어 ILMOL 이라는 폰트와 ELMOL 그리고 YILMOL 이라는 폰트가 거의 비슷한 스타일을 갖고 있으니 ILMOL폰트를 다운로드 전에 ELMOL이나 YILMOL 폰트가 일단 유저 컴퓨터에 있나 확인하여 사용하게 하려면,

@font-face {
  font-family: ILMOL;
  src: local("ELMOL"), 
       local("YILMOL"), 
       url(ILMOL.ttf);
}
 
body { font-family: ILMOL, sans-serif; }

이렇게 지정해 줄수 있습니다. 이는 특히 다른 플랙폼의 컴퓨터들 사이에 비슷한 폰트를 지정할때 유용한데 맥에서의 Helvetica 는 PC에 없으므로 비슷한 서체인 Trebuchet MS 가 있나 확인을 먼저 하게한 후에 Helvetica를 다운받게 할수 있겠죠. 물론 둘다 저작권의 문제도 있고 기본적으로 제공되므로 실제적인 사용의 사례는 없겠지만 말입니다.

위는 실제적으로 사용해 본 결과 입니다. 약 40k밖에 되지 않는 “Walt Disney Script” 서체 입니다. 웹그림 1개 다운로드 받는 사이즈 정도밖에 되지 않지만 엄청나게 파워풀한 결과를 가지고 올 수 있습니다. 디자이너분들은 무슨 이야기인지 뼈저리게 느끼고 계실듯 하네요. 물론 현재 IE와 Opera 9.x는 보이지 않습니다.

아직 이른걸까?

인터넷익스플로러가 지원하지 않는다는 치명적인 단점 말고도 넘어야 할 산들이 있습니다. 일단은 서체의 라이센스 문제입니다. 다행이도 Typekit 이 이부분을 위하여 열심히 뛰고 있는 중입니다만 무료라고 제공되는 폰트들이라 해도 css링크나 웹폰트로의 사용은 금하고 있는것들이 대부분 입니다. 타입킷 이메일 알림이에 가입해 놓은지 오래되었지만 아직도 별 다른 소식이 없네요.

한국에 이 문제를 적용시키게 되면 그 문제는 더욱 커지게 됩니다. 무료로 제공되는 폰트들을 찾기가 거의 불가능 할 뿐더러 지난번 네이버에서 ‘나눔’ 서체를 공개하며 한글 폰트 개발이 얼마나 어려운가를 나누었지만서도 몇천자를 디자인하여야 함은 해외 폰트개발과는 너무나도 차이가 납니다. 또한 서체의 개발이 어렵고 방대한 만큼 그 용량또한 방대합니다. 약 4MB을 넘나드는 사이즈는 웹폰트로써 적합한지의 의문조차 갖지 못하게 만들죠.

그럼 우리에겐 단순히 그림의 떡이냐. 네 앞으로 몇년간은 충분히 가능합니다만 변화의 가능성 또한 충분합니다. 일단 IE의 미지원이 그래도 가장 큰 장애물이겠지만 IE 개발팀 또한 @font-face의 필요를 충분히 인식하고 있기 때문에 추후에 곧 지원되지 않을까 하는 생각입니다. 이미 .eot 폰트 종류를 지원하므로 가능한 부분이라고 봅니다. CSS3가 완전해지지 않는한 지원않겠다는 방침을 들고 일어서면 할말 없습니다만…

IE가 지원에 나섬으로 인해서 모든 브라우저에서 @font-face가 가능해 진다고 볼때 제일 먼저 군침을 돌릴만한 곳은 각종 메거진과 신문사들입니다. 사이트들이 더욱 미려해지고 시시각각 바뀌는 헤드라인이 그 어느때 보다도 아름답게 출력된다면 이를 마다할 미디어 매체는 없다고 봅니다. 더군다나 1px의 미학을 즐기는 디자이너들에게는 천국과 같겠죠.
“난 1px 오탁후!”
여기서 웹서체를 제공하는 회사나 폰트업체가 나온다면 그 또한 유명세를 타게 될지도 모르는 일이구요.

언제 어떠한 방식으로 이 부분이 한국의 디자이너들과 개발자들에게 영향이 갈지는 누구도 모릅니다. 하지만 이미 해외개발자들에겐 시동이 걸렸고 사이트가 더욱더 세련되어지고 진화되도록 도울것은 확실합니다.
Less image, faster browsing, better internet.
이건 그 누구도 부인할수 없는 모두가 원하는 결과입니다. :)

좋은 소식에도 불구하고 한숨소리가…? ;; ㅠㅠ

사파리4 브라우저에는 사파리 개발자들이 브라우저의 역량을 마음껏 뽐내는 흥미로운 부분을 담고 있습니다. 짧게나마 나누면서 파워풀한 html5+css3+js를 만나보겠습니다.

사파리 브라우저를 설치하시면 오프닝 영상이 나오게 됩니다. 이 영상은 처음에 단순한 맥OSX 설치후에 시작되는 프로그램 자체적인 영상으로 생각했지만 그것이 아니라 여러 이미지들과 작은 MOV 파일을 가지고 HTML, CSS3, JS 로 이루어진 html 페이지 입니다. 물론 영상을 보시면 하나의 비디오 파일을 돌리는 듯한 착각이 들 정도로 잘 꾸며져 있습니다. 이미 베타버전 공개시 토론되었던 부분이라 아주 오랜 시간 후에 치는 뒷북일수 있겠군요.

<audio id="music" src="http://images.apple.com/safari/welcome/media/audio.mp4"></audio>
  <div id="header">
      <h1>Welcome to Safari 4</h1>
  </div>
  <div id="apple">
		<div class="icon"></div>
		<div class="spots"></div>
		<div class="flare"></div>
		<div class="flareicon"></div>
  </div>
  <div id="safari">
    <div>
		 <video id="compass" src="http://images.apple.com/safari/welcome/media/compass.mov" width="256" height="256">
			 <img src="http://images.apple.com/safari/welcome/images/safari.jpg" width="200" height="200" alt="Safari 4" />
		 </video>
    </div>
  </div>
</video>

HTML5 지원 하면 떠오르는 두 태그죠 audio, video가 눈에 띄실겁니다. 그러나 어찌보면 이 페이지에서 작은 부분을 차지할뿐 중요한건 CSS3 자체에 있습니다. #apple 안에 들어있는 .icon, .spots .flare .flareicon 등이 영상에 직접적인 연관을 보여줍니다. 물론 이벤트를 컨트롤 하는 js도 빼 놓을수 없겠죠.

오프닝 페이지의 소스를 보시면 아시겠지만 웹킷전용 CSS3를 제어하여 각각의 icon spots 등을 순서대로 ease-in, linear 방식등으로 일정 시간에 플레이되고 지연되도록 설정되어 있습니다. 간단한 순서대로 나열해서 말씀드리자면 첫째로 대강의 기본 설정이 첫 부분입니다. 그리고 각각의 엘리먼트들이 스케쥴데로 플레이 되도록 -webkit-keyframes 값들이 지정되어 있고 마지막에는 설정값과 엘리먼트의 연결 그리고 플레이 시간이 지정되어 있습니다.

하나하나 설명을 드리면 너무나 길어질듯 하구요, 간단히 예제를 보면서 설명드리겠습니다.
이하 코드는 제가 방금 제작한 ilmol.com 인트로입니다… 참 썰렁하네요.
대강의 스토리 라인은 ilmol.com/wp 를 클릭시 설정된 애니메이션이 작동하는 것입니다. 애니메이션은 하단에서 부터 화면 상단부분까지 사이즈및 투명도가 올라가면서 뚜렷하게 출력된후 사라지는 순서로 정했습니다. 일단 구현된 페이지를 사파리4에서 한번 보시구요.

(계속 읽기…)

오늘 많은 분들이 한국에서 밤을 새시면서 이번 2009 WWDC를 지켜보셨으리라 생각됩니다. 어느때 보다도 신빙성이 있게 다가왔던 아이폰 출시의 소문들이 많았기에 이번 컨퍼런스는 커다란 실망으로 다가왔으리라 생각되네요.

이번 컨퍼런스는 강하게 시작되었습니다. 새로운 맥북 라인을 발표하며 유니바디 디자인 맥북이 맥북프로로 들어가면서 새로운 맥북 프로라인이 형성되었습니다. $1200 대의 맥북프로가 생긴 것이죠. 모두 8G 까지 가능하며 500GB 하드장착이 가능합니다.

그후 새로 발표될 OS 스노우레퍼드를 발표하며 이번 키노트는 정말 굵직한 것들만 발표되는 구나라는 생각이 들었죠. 윈도우 7을 언급하며 발표를 시작한 것이 아무래도 윈7이 상당히 Mac OS X에 근접했음을 알수 있었습니다. 이제 몇주간 윈7을 써보며 상당히 안정적이고 적어도 맥OS를 써보지 않은 사람들에겐 ‘바로 이거야’ 라는 생각이 들 정도의 여파를 가지고 올수 있는 마소의 (잘 배낀) 시스탬이구나 라는 생각이 들었거든요. 스노우 레퍼드의 매력은 충분하지만 윈도우7은 아주 성공적으로 시작되는데에는 큰 영향을 주지 않을꺼 같습니다. 아무튼 스노우레퍼드는 최고의 os로 남을것으로 생각됩니다. 설치후 용량이 6GB나 리커버 해준다니…. :)

그리고 이어진 사파리 4 이야기. 사파리 4가 정식 출시되며 여러부분 메이저 업글이 있음을 시사하며 강력히 선보였습니다. Acid3 100, JS 향상. 새로운 커버플로우와 그리드 UI 는 매력덩어리로 다가왔습니다. 백문이 불여일견 곧바로 설치.

의례적으로 브라우저 설치후 몇초의 짧은 오프닝 영상이 돌아가더군요.

영상후 곧바로 그리드 형태로 Top Sites 들을 자동으로 불러들여와서 로딩됩니다.
(계속 읽기…)

어제 만우절날 CSS3-IE 에 놀라신 분들게 죄송한 마음으로 이번에는 제대로된 포스팅을 올립니다. ^^ 최근 사파리 3.1 이 출시된 소식은 이미 접하셨으리라 생각 됩니다. 그다지 큰 관심은 갖지 않았는데 3.1에서 구현 가능해진 이 CSS Animation 부분은 짚고 넘어가도 괜찮겠다는 생각이 들었습니다. 특히 CSS3 에서 구현되면 정말 좋으리라 라는 생각도 들고 말이죠.

사파리 블로그에 이미 소개 되었는지라 많은 분들이 아실지도 모르지만 CSS Animation 이라 불리우는 역동적인 CSS 부분들이 이번 3.1에 첨가되었고 그 중에서도 Transition (전환) 에 관한 것들이 구현 가능케 되었습니다. [이하의 모든 예제들은 사파리 3.1이 설치되어 있어야 확인하실수 있습니다.]

transition-property - 어떠한 전환 속성을 작동시킬 것인지 지정 예: opacity
transition-duration - 얼마동안 이 속성이 지속될것인지 지정ow long the transition should last.
transition-timing-function - 어떠한 종류의 타이밍을 갖을것인지 지정. 예: linear vs. ease-in vs. a custom cubic bezier function
transition - 물론 한번에 지정가능한 속성도 제공하는군요.

위의 div 에 마우스를 가져다 대시면 천천히 div 가 사라지는 효과를 확인하실수 있습니다. 이는 div 에다
div {opacity: 1; -webkit-transition: opacity 1s ease-in; }
값을 정해준 후 hover 시에 opcity 가 0으로 되도록 지정된 결과 입니다.
div:hover {opacity: 0;}

이 외에도 여러가지 효과를 줄수 있는데 간단한 transition 속성으로 많은 이득을 볼수 있습니다.

실무적으로야 아직 쓰이지는 못하겠지만 여러가지 생각해 볼수 있는 부분인거 같네요. 이번에 Torrey Rice가 이 CSS Animation 기능을 활용해서 SVG 와 함께 멋진 동작 예제를 구현해 놓았습니다. 설명을 곁들여서 보시면 이해가 더 쉬우실 겁니다.

최근 IE9의 루머가 빠르게 퍼지고 있는 가운데 IE 팀이 블로그를 통한 IE9의 입장과 CSS3 에 대한 계획을 밝혔습니다. 이것저것 살펴보니 IE8과 그다지 다를 것은 없지만 CSS3 부분에 있어서는 상당한 논란을 불러올듯 하네요.

아시다시피 CSS3의 계획이 계속 지연되면서 몇몇 브라우저들 사이에서 multi background image나 text shadow 등등이 자체적으로 지원되고 있는 실정입니다만 이러한 불완전함을 핑계로 인터넷익스플로러 팀이 자체 CSS 개발을 이루겠다는 야심을 보인 것입니다. 일단은 CSS3-IE 로 부르고 있고 이 스타일시트가 초안으로 들어갈때 즈음에 IE9 베타가 출시될 것으로 보입니다.

많은 개발자들과 디자이너들의 한숨이 여기저기서 튀어 나오고 있는데요.

마이크로소프트의 인터넷익스플로러 팀이 CSS3-IE를 개발하려 한다는 것은 일모리의 조작된 만우절 논리일 뿐이다. - 빌게인츠

CSS3-IE 개발을 과연 누가 믿겠느냔 말이다. 그저 4월1일의 장난일 뿐이다. - 젤든맨

이러한 논란들로 CSS3-IE 의 개발을 무시하고 있습니다. 저 또한 강력히 동의하고 있는 부분이구요. 여러분들도 동의 하시리라 생각됩니다.

너무나도 낚이신분들이 많을꺼 같아 두려움의 한숨만 나올 뿐입니다…

죄송합니다. :)

CSS 마스터 전략(CSS Mastery)의 저자 Andy Budd 의 블로그에 올라온 CSS2.2 라는 글이 여러 디자이너들과 ‘퍼블리셔’ 들 사이에 불을 지피고 있군요.

Andy Budd는 CSS 의 빠른 성장을 소개하며 CSS3 또한 그러하리라 생각되었었다고 소개 하며 왜 지체되었는가의 글을 시작합니다.

First proposed by Hakon Lie in Oct 1994, CSS1 became one of the first W3C recommendations in Dec 1996. Nipping at its heals, CSS2 became an official recommendation in May 1998, just 18 months later. By June 1999 the first 3 draft modules of CSS3 had been published, and in their ground breaking book published that same year, Bert Bos and Hakon Lie postulated that CSS3 would arrive sometime in late 1999.
Over 7 years later, and we’re still waiting. This begs the question, what went wrong?

요약: Hakon Lie 에 의해 1994년에 제안되어 2년후인 1996년에 W3C의 첫 권고안들중 하나가 된 CSS1 은 다시 2년후에 CSS2 권고안으로 나오게 되었고 18개월 후에는 CSS3의 첫 3개의 드래프트 모듈이 완성되어 Bert Bos 와 Hakon Lie 는 1999년 말 즈음 CSS3 권고안이 나올꺼라 예상했습니다.
7년이상 지난 지금 아직도 기다리고 있습니다. 무엇이 잘못된 것일까요?

이러한 궁금증으로 그는 CSS3 개발의 문제와 이유등을 이해하려 노력했고 어느정도의 답을 얻은듯 여러 문제점을 제기하며 설명하고 있습니다.
(계속 읽기…)