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.
이건 그 누구도 부인할수 없는 모두가 원하는 결과입니다. :)

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

“인터넷은 자유다.”

웹2MB은 분명 반대로 달려가려 하지만 웹2.0과 함께 이제 그 누구도 머라할수 없는 인정된 공식입니다. 이번 이란 사태를 보며 얼마나 인터넷이 자유의 목소리를 대변하고 있는지 그리고 그 방법들이 얼마나 진화했는지 보여주고 있죠. 이란 사태를 통하여 인터넷의 진화와 한국 정부와의 관계를 얕은 지식이지만 함께 나누면서 살펴보고 싶습니다.

아시는분은 아실지 모르나 며칠 전 트위터의 서비스 점검 시간이 (미국기준) 대낮 시간 2 PM PT 로 옮겨졌습니다. 저녁 시간대에 다운 되었어야 하는 트위터가 하루 연기되어 다음날 대낮시간으로 점검시간이 옮겨진 이유는 나름 놀라운 압력이 그 뒤에 있었습니다. 이란의 시위가 2주째 접어들면서 더욱 뜨거워 지고 있는 가운데 미 국무부 (U.S. State Department) 가 서비스 점검시간이 이란의 트위터 사용시간인 것을 감안하여 시간을 조절하기를 원했고 트위터는 그것를 수용한 것이죠. 이란의 호소의 목소리가 멈추지 않도록 미국 정부가 직접 나서서 돕고 있었던 것을 볼수 있습니다. (이란의 대법원같은 역할을 하는 곳에서 국민 총 투표수 보다 3million 이 더 더해졌음을 밝히면서 불법선거 였음을 인정하면서도 재투표를 실시하지 않겠다고 선포했죠. 이란국민들이 돌아버릴수 밖에 없습니다.)

“국무부는 트위터와 기타 소셜네트워킹 사이트들과 합력하여 이란 국민들이 서로 소통하는 것 그리고 세계와 소통하는 것들이 가능하도록 돕고 있다” - CNN 국무부 프로듀서 Elise Labott

미국 정부가 직접 기입하여 정의의 목소리가 멈추지 않도록 돕는다는 사실이 놀랍긴 하지만 이 뿐만 아니라 최첨단 기술을 보유한 미국 정부 조차도 이러한 소셜미디어를 통하여 정보를 얻고 있으며 이를 기반으로 분석하고 대처하고 있다는 사실이 그저 놀라울 뿐입니다.

인터넷은 살아있다

현재 이란의 사태는 인터넷으로 크게 3가지 루트를 통하여 퍼지고 있음을 볼 수 있습니다. 거의 실시간뉴스라고 볼 수 있는 트위터 그리고 블로그가 그 첫번째이며 생생하게 상황을 담아 전하는 유튜브와 같은 동영상 사이트가 두번째, 그리고 플릭커와 같은 천마디 말보다 강하다는 사진들을 나눌수 있는 사이트들이 바로 그 세번째죠. 이 3가지 매개체는 세계가 이란의 사태를 절대 주목하도록 만든 1등 공신들입니다.

지금 블로그를 쓰고 있는 이 시간에도 트위터 #IranElection 키워드는 1분당 수십개의 글이 올라올 정도로 끊임없이 업데이트 되고 있으며 이러한 짧지만 정확한 뉴스들은 Xárene Eskandar 같은 사람들에 의해서 구글맵에 실시간으로 업데이트가 되기도 합니다. 현재 어느곳에 군용헬리콥터가 출현했으며 시위가 벌어지고 있는 장소, 시민들의 사망 장소와 숫자, 총격 소리가 들리는 곳들 등등을 한눈에 확인 가능 하군요. 실시간 트위터 뉴스를 들었다면 “Iran Election” 같은 검색을 통해 유튜브나 플릭커에 이란 사태의 영상들, 사진들을 확인 할수 있으며 형성된 커뮤니트들을 통해 댓글을 주고 받으며 이란 사태를 확인 할 수도 있습니다. 이 모든 것들이 바로 파워풀한 웹2.0의 결과입니다.

정부의 제제

물론 이 모든것들은 하드웨어안에 국한되어 있습니다. 즉 정부가 기입하여 제제를 할 수 있다는 것입니다. 이란 정부는 이러한 정보들이 자국내 ‘긴장감을 조성’ 한다는 빌미 아래 불필요한 정보들을 인터넷에 띄우거나 소셜네트워킹을 통해 나누는 행위들을 제제한다고 발표했으며 CBS 뉴스에 따르면 이란 정부가 지난 수요일에 트위터 페이스북 마이스페이스 등의 접속 자체를 막아버렸다고 알려주고 있습니다. 이미 그 전에 저널리스트들이 도시에서 사진을 찍는 행위조차 막고 있는 상황이니 사태가 꽤나 심각한 것을 알수 있죠. 소셜네트워킹과 같은 서비스들은 이란 자국내에서는 별 영향력이 없다는 주장이 있지만 그 목소리가 전 세계에 퍼지는데에는 의심의 여지가 없는 것이 사실입니다.

이번 이란 사태를 통해 증명되는 것들이 몇가지가 있습니다. 이미 알려진 바지만 정부가 올바르지 못한 무언가가 진행되고 있을때 인터넷이나 미디어를 컨트롤 하려 한다는 것을 알 수 있습니다. 민주주의의 중심에 자리잡고 있는 언론의 자유 (Freedom of Press) 가 제제될때 그 나라에 무언가가 잘못되어 가고 있다는 것을 금방 알 수 있죠. 그러나 정부의 제제가 심해지고 인터넷을 컨트롤 하려 해도 현대 시대에서는 북한과 같은 공산국가가 아닌 이상 나뉘어지는 정보를 막을 수 없다는 것 또한 알수 있습니다. 인터넷이 없던 시대에서는 신문사나 방송사같은 특정 집단만 컨트롤 하면 되었지만 이제는 국민 전체를 제제해야하는 사이즈로 변화했기 때문입니다. 단순한 문자 뿐만이 아니라 영상과 사진들의 생생한 정보들이 나뉘어 지는 것이죠. 다시 말해서 정부가 어떠한 불법적이거나 부정적인 행위들이 진행될때 진실은 그 어느때 보다도 빠르게 전달되고 노출되며 정부를 이를 제제하기 위하여 국민 전체와 충돌하게 되고 이는 무력이 투입되는 현상이 불가피 하다는 것입니다. 이는 그 어떠한 정부도 인터넷을 통한 저항이 어떠한 파급을 가져다 주며 어떻게 정부의 의지대로 컨트롤 하는지의 메뉴얼이나 사례가 없기 때문에 가장 기본적인 공권력을 통한 제제가 이루어 지는 것입니다.

Tehran 대학 기숙사의 컴퓨터가 부서져 있다. AP Photo. (via cbsnews.com)

한국도 만만치 않다

재미있게도 이란 사태와 같은 현상이 나타나고 있는 나라가 바로 한국입니다. “민심을 선동한다. 긴장감을 높인다” 등의 이란 정부와 동일한 이유아래 인터넷을 거의 악의 축으로 분류해 놓으면서 통제를 하려 하고 있습니다. 이는 부시대통령이 비일비제하게 사용하던 패턴과도 일치합니다. “이라크는 악의 축이다” 라고 전제를 깔아버리니 국회나 기타 정부는 악을 제거해야하는 의무감으로 모든 것을 입법화 하고 제제에 들어갔으며 군사동원과 학살이 정당화 되어 버렸던 것이죠. IT 를 이란보다 조금 더 잘 이해 하고 있는 한국 정부는 동일한 propaganda 를 사용하여 인터넷을 정부가 컨트롤 할 수 있도록 부단히 노력중입니다. 특히나 요즘 웹2MB은 해외의 기술이나 사이트들을 슬슬 깍아 내리거나 부정적인 이미지로 포장하면서 이질감을 높여주고 있죠. 악플과 초상권 침해나 명예회손등의 부정적인 부분을 부각시키면서 인터넷의 힘인 익명성을 죽이는 실명제를 입법화 한것 또한 한 예입니다. 바른소리 쓴소리 하기 위해서는 해외 서비스를 사용해야 한다는 인식이 퍼져있는 것 또한 단면적으로 정부의 인터넷 제제가 선을 넘었음을 보여주고 있습니다.

몇가지 단면적인 예들을 보았지만 공교롭게도 이란의 제제방식과 한국정부가 비슷한 것을 바라보면서 과연 어디까지 정부의 제제가 진화될까에 궁금증이 생기고 있습니다. 한때 블로고스피어를 후끈하게 했던 소위 파워블로거가 정부직원 이었음이 밝혀졌던 일이나 해외의 언론사들도 아이러니하게 보았던 한국정부의 유튜브 실명제를 보면 조금은 그 흐름을 볼 수 있습니다. 극단적으로 한국의 아이폰 사태도 어느정도 시사하는 바가 있다고 생각됩니다. 저의 짧은 소견으로 이러한 수순들을 보면서 확신 하기는 어렵습니다만 웹2MB흐름은 앞으로도 꾸준히 이어지리라 생각되고 커다란 안목을 가지고 인터넷의 순수성을 어떻게 지킬것이며 정부의 제제에서 보호 할수 있을까를 생각해볼수 있는 기회가 아닐까 생각됩니다. 자유는 보장되어야 하고 지켜져야 합니다…

글을 쓰다보니 답을 알수 없는 질문이 떠올랐습니다. “왜 한국에선 이란사태가 비중있게 다루어지지 않고 있는가?”

I DON’T KNOW. BUT MAYBE YOU KNOW.

P.S. 글 제목 수정해버렸습니다…

인터넷익스플로러8이 다운로드 될 때마다 미국 자국내 배고픈이들을 돕는 단체인 Feeding America Network 에 8끼의 식사에 해당하는 금액을 기부하게 된다. 기간은 6월10부터 8월 8일까지. Browser for the Better 사이트에서 다운로드 받을시에만 적용된다.

웹개발로써야 IE6이 사라지는데에 조금이나마 도움이 되면 좋지만… 결국 최대액수는 $1 million 이다.

“왠지 씁쓸 하구만…”

For every download of Windows Internet Explorer 8 from this site, we will donate 8 means to Feeding America to help accelerate an end to hunger in this country. Internet Explorer 8 is completely free and comes with exciting new features including Accelerators, Web Slices and In-Private Browsing. - Browser for the Better

아무튼 조금이나마 배고픈 사람들에게 도움이 간다는 것으로 시선을 돌려볼까…

Jeffery Zeldman 은 웹표준에 관심이 있으신 분이라면 “제프리 젤드만의 웹표준 가이드”^[1] 를 통해 잘 알고 계시리라 생각된다. 오랫동안 구독해온 나로써는 그의 블로그가 너무나도 친숙하다. 하지만 오늘 그는 오랫동안 고집해오던 그의 디자인을 뒤업고 새 디자인으로 커밍아웃을 단행했다. 그것도 90년대 디자인으로 말이다. Retro 를 넘어서 Nowtro 란다.

this site is mainly about my writing. So I crafted a simple look that encourages reading and hearkens back to this site’s early years.

현재 50개가 넘는 새 디자인을 칭송하는 댓글들이 올라 왔으며 앞으로도 쏟아질거라 생각한다. 과연 이 레트로 스타일이 그가 바라는데로 방문객들이 ‘글읽기’에 집중할수 있도록 돕게될까? 심플한 디자인을 넘어서서 CSS 가 거의 적용되는듯 마는듯한 옛 html 디자인 시대의 향수를 불러 일으키는 이번 업데이트는 craigslist 의 무언가와 연관이 있을지도 모르겠다.

미국 사이트 트래픽 톱5 안에 들 정도로 수많은 사람들이 이용하는 크랙스리스트는 수많은 디자이너들이 달려들어 만져주고 싶은 충동이 들 정도로 심플하다. 색상조차 고전 파란색 링크와 보라색 방문링크인 default 로 되어있지만 크랙스리스트는 수많은 디자이너들의 설득과 offer 에도 마다하고 그들의 디자인 철학을 바꿀 의도가 전혀 없다. 최대한 컨텐츠가 유저에게 심플하고 직관적으로 다가가는데에 수많은 시간을 쏟았다는 그들에게 결론은 simple is everything 이었을까. 이는 인터넷 유저들은 디자인보다 유저중심의 기능과 컨텐츠를 더 중요시 한다는걸 정확히 보여주고 있다. 수많은 분석가들이 야후나 기타 검색사이트를 제치고 구글이 성공한 이유도 또한 이와 연관을 짓는다. 미니멀리즘, 심플리티, 바른 기능과 심플하고 알아보기 쉬운 디자인의 조합은 아무래도 더욱더 빠른 정보와 결과를 원하는 인터넷 세계에서 관과할수 없는 요소로 보인다.

이번 젤드만의 리디자인은 과연 무엇을 말해주는 것일까? 단순히 옛추억에 젖은 한 유명한 웹전문가가 귀찮아서 지른 디자인? 혹은 웹은 다시 단순함으로 돌아가고 싶다를 의미하는 그 이상의 무언가? 아니면..? 자다가 봉창 두드리는 소리?

“Old is the new new 옛것이 바로 현재의 새것이다.” 패션계에서는 당연하지만 웹에서도 과연…

1. 원본: Designing with Web Standards [↩]

워드프레스가 한단계 더 진화했군요. 이번 업데이트는 위젯이 가장 크게 부각되는거 같습니다. 다시 기초부터 재 코딩된거라고 하죠. 거기에 각 관리자페이지 수정 테마설정 페이지 그리고 빨라진 속도가 매력을 더합니다. 저는 아마 이번주안에 업데이트 해보려고합니다. :)

improvements to themes, widgets, taxonomies, and overall speed. We also fixed over 790 bugs.

Wordpress 2.8 Baker 의 대충 어떤 부분들이 업데이트되고 향상되었는지 영상으로 보여주고 있습니다.
2.7의 인터페이스를 거의 그대로 사용하는군요.

워드프레스 구버전을 사용하고 계시는 많은 분들께서 주저하고 계시겠지만 2.7로의 변화는 상당하다고 생각됩니다. 아주 간편해진 인터페이스, 예전보다도 더 글을 쓰고싶게 만드네요. 꼭 업그레이드를 단행해 보시고 기왕하시는거 최신 버전인 2.8로 하시면 좋겠죠 :) (사실 매번 업데이트마다 업그레이드를 안하셔도 건강에 이상 없습니다.)

사파리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에서 한번 보시구요.

(계속 읽기…)