근래에 있었던 작은 버전들의 갱신 후에 드디어 커다란 걸음을 내딛는 jQuery 1.2 버전이 공개되었다. 이번 버전은 여러 새로운 기능들이 추가되었고, 이번에 소개된 새로운 jQuery Animation API를 이용해서 특정 요소에 색깔 변화 효과를 줄 수 있는 Color Animation Plugin을 포함해서 호환성 문제 해결을 위한 새로운 plugin들도 소개되었다. 반면에, 그 동안 잘 사용되지 않고 혼란을 가중시킬 수 있었던 몇 가지 기능들도 함께 제거되었는데, 제거된 기능들은 보다 나은 대체 기능들을 사용하면 되겠다. 물론 굳이 없어진 기능들을 계속 사용하려면, 이번에 새로 소개된 하위 버전과 호환성을 유지시켜 주는 Compatibilility Plugin을 사용하면 된다.

또, 한 가지.
User Interface의 특수 효과와 관련해서 jQuery의 공식 plugin으로 자리잡을 jQuery UI가 이번 16일 일요일에 드디어 공개될 예정이다. jQuery UI의 대략적인 구성은 이미 공개되었듯이 Draggables, droppables, resizables, shadows, sliders, sortables, tabs, accordions, selectables, trees, 그리고 modals이 포함되게 된다. 이렇게 되면 다른 라이브러리들의 의존성도 줄이고 선택면에서 더 이상 부럽지 않겠군. 8)

오래전 출판 디자인 분야에서 주로 사용되던 grid 기반 디자인 기법이 요즘은 웹 사이트 디자인에도 도입되어 사용되고 있는 추세이다. 이는 grid 기반 디자인이 시각적으로 편안하고 웹 페이지를 균형잡힌 구조로 설계하는데 도움을 주기 때문이다.

하지만, 실제 웹 디자인에 적용하려면 grid 시스템을 떠받드는 여러가지 고려되어야 할 사항들이 많은 관계로 기본적인 grid 구조를 구현하는데는 여러움이 따르는데, 여기에 도움을 주는 여러 framework들이 등장하고 있다. 이런, CSS Grid Framework로 개인적으로 눈에 띄는 것이 두 가지가 있다.

• blueprintcss
• YAML(Yet Another Multicolumn Layout)

이들 framework들은 각기 웹 상에서 몇 가지 설정만으로 코드를 생성해주는 도구도 함께 제공하고 있는데, Blueprint Grid CSS Generator, YAML Builder에서 컬럼(Culumn)의 수와 몇 가지 기본적인 설정 값을 입력하면 이에 맞는 코드를 자동 생성해 준다.

개인적으로 blueprintcss framework의 사용법이 더 간단하고 생성된 코드가 더 깨끗해 보인다. 곧 공개될 0.6 버전에 가서는 어느 정도 안정화되면서 grid 디자인의 손 맛을 익히는데 큰 도움이 되리라 생각됨. 아무래도 이런 툴들에 눈이 가는 건 이미 대다수 테이블로 짜여진 여러 웹 페이지들이 가지고 있는 병폐에 상관없이 올바로 균형잡힌 구조의 페이지를 구현하는데 큰 도움이 될 수 있을 것이라는 이유겠지.

서울시 인테넛 방송 사이트에 가면 라이브 캠이란 이름으로 청계천, 밤섬 그리고 서울광장의 실시간 영상 관측 화면을 제공하고 있다. 하지만, 막상 맥이나 리눅스에서 링크(정확히 말하면 링크도 아니고 접근성이 떨어지는 이미지 map에다 JavaScript로 연결해 놓았다. 덩달아 선택되면 blur 처리해 주는 음융함까지. 🙁 )를 클릭 해보면 마이크로소프트 전용 Active-X 플러그인을 내려받으라는 창을 띄워놓고서 꼼짝을 안한다. 역시나 또 한번 개념 없는 일처리의 한 행태를 목격하게 된다. 👿

결국 끓어오르는 오기 발동으로 할 수 없이 서울시 영문 페이지에서 찾아 들어간 Seoul Live Cam 영어 페이지를 통해 그나마 해당 페이지로의 접근이 가능했다. 여기서 문제는, 또 막상 들어가보면 영상이 안 나온다는 것. 문제의 원인은 페이지 소스를 살펴보면 금방 알 수 있다. 어찌 IT 강국이라는 나라의 수도를 대표하는 웹 페이지가 이 모양인지 정말로 남 보여주기 부끄러울 정도다.

그렇다면 과연 맥이나 리눅스에선 웹 켐의 영상을 볼 수 있는 방법이 전혀 없는 것일까? 그냥 뜨거운 막바지 여름 날 청계천을 노니는 행인들을 구경하고 싶은 작은 소일거리가 이렇게 골치아프고 망막한 일이란 말인가?

각 지역의 라이브 캠 영상을 제공하는 페이지의 소스를 찾아 들어가면 라이브씨티라는 회사에서 WebEye라는 카메라 영상 스트리밍 서비스를 사용해서 제공하고 있다.
이 서비스는 Active-X Control을 설치하거나 WebEye Plug-in을 설치해야만 화면을 볼 수가 있지만, 정작 동영상은 Java Applet으로 심어놓았기 때문에, 예를 들어 청계천 영상의 경우 아래의 object tag를 사용하면 웹 페이지에서 보여주는데 충분하다.

<object classid="java:jwebeyeviewer.JWebEyeApplet.class" width="720" height="486" type="application/x-java-applet" codebase="http://cityhallc1.mycam.to/" archive="wg_jviewer.jar, wg_jwaveletdecoder.jar">
  <param name="code" value="jwebeyeviewer.JWebEyeApplet.class">
  <param name="codebase" value="http://cityhallc1.mycam.to">
  <param name="archive" value="wg_jviewer.jar, wg_jwaveletdecoder.jar">
  <param name="JWebEye2.0_Addr" value="cityhallc1.mycam.to">
  <param name="JWebEye2.0_Port" value="80">
  <param name="JWebEye2.0_UserName" value="guest2">
  <param name="JWebEye2.0_Password" value="guest2">
  <param name="JWebEye2.0_Framerate" value="15">
  <param name="JWebEye2.0_CH" value="1">
  <param name="JWebEye2.0_FitToWindow" value="true">
</object>

위의 코드를 이용해서 실제로 웹 켐의 동양상을 추가해 보면, 아래의 페이지에서처럼 보여줄 수 있다.

청계천 광장 라이브 캠 보기

결론적으로 말하고 싶은 것은, 공공 서비스라면 접근성 면에서 소외된 집단이 없는지 세심한 주의가 더 필요할 것이라는 얘기이다.

jQuery에서 selector 선언이나 jQuery 함수(method)를 사용하면 되돌려받는 것은 항상 jQuery object이다.
대부분은 이 오브젝트에 직접 여러 method들을 묶어서(chaining) 사용하거나 기본적으로 제공되는 모든 object들의 자동적인 접근의 용이함도 장점이겠지만 가끔은 DOM element를 직접 만져야 할 때가 있다.

이럴 경우를 대비해서 jQuery에는 get() method를 제공하는데, 예를 들어 특정 element의 tag 이름을 얻고 싶을 때는 다음과 같이 할 수 있다:

var tag = $('#some-element').get(0).tagName;

여기에는 .get()을 쓰느 대신 더 간단한 방법이 있는데, $('#some-element').get(0) 대신에 바로 $('#some-element')[0]처럼 사용할 수도 있다.
바로 DOM elements의 array처럼 사용될 수 있는 것이다.

공식 jQuery 문서에는 설명이 안 되어 있는 것 같아서 적어놓는다.

YSlow는 Yahoo! 내부 개발 도구로 사용되어 오던 Firebug의 확장 플러그인으로, 런던에서 열렸던 @midia 2007 Conference의 “High Performance Web Sites”라는 주제의 강연에서 그 존재가 처음 알려졌었는데, 드디어 일반에게 공개되었다.

웹 페이지 최적화 등급은 모두 13가지의 웹 페이지 최적화 규칙을 기반으로 매겨지는데, 이 규칙들은 일반 웹 애플리케이션의 최적화를 위한 알짜배기 정보로도 참고될 수 있다.

YSlow를 설치하면 크게 네 가지의 View를 제공하는데, 아래는 이곳의 최적화 등급을 나타낸 Performance View 모습이다.

그림에는 각 최적화 규칙에 대한 현재 웹 페이지의 평가 등급을 한눈에 알 수 있게 보여준다.
여기서 주의할 것은, 2번 규칙인 Use a CDN(Content Delivery Network)에 관해서 제대로 된 등급을 매기려면, CDN으로 등록되어 있는 hostname을 자신이 사용하는 것으로 바꾸어 주어야 하는데 방법은 YSlow FAQ에 설명되어 있다.
등급 결과를 보면 B라는 흐뭇한(?) 점수를 받았지만, 두 군데에서 낙제점을 받았는데 Configure ETags 항목에서 낙제점이 찍힌 것은 이곳이 단일 서버에서 돌아가는 곳으로 cluster servers와는 상관이 없다는 것을 생각해 보면 무시해도 될 듯하다. 결국 비교적 많은 HTTP 요청 횟수가 문제지만 이것도 두 번째 방문부터 차기 cache로 흡수될 것을 생각하면 당장의 불안 요인은 아닌 듯. 이것은 “Stats” View에서도 확인할 수가 있는데, Full Cache일 때는 서버로 단 두 개의 HTTP 요청만 소모된다.

덤으로, Tools 항목에는 JavaScript 코드의 오류 방지를 위한 정리 도구인 JSLint가 내장되어 있고, 웹 페이지에 포함된 모든 js, css 파일을 뽑아서 보여주는 도구 그리고 마지막으로 Performance View의 결과 내용을 나중 검토를 위해 종이로 인쇄할 수 있는 형식으로 정리해서 보여주는 “Printable View” 도구가 자리 잡고 있다.

참고로 아래는 웹 페이지 최적화와 관련해서 이곳에서 사용하는 Gzip 압축과 Expires HTTP headers 부분의 Apache 환경 설정 사항이다.

# 
# Compress some document types using mod_deflate module 
# 
<Location />
  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xhtml+xml
  AddOutputFilterByType DEFLATE text/css application/javascript text/javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp application/x-httpd-eruby
  AddOutputFilterByType DEFLATE application/xml application/rss+xml application/atom+xml image/svg+xml
 
  # Netscape 4.x has some problems... 
  BrowserMatch ^Mozilla/4 gzip-only-text/html
 
  # Netscape 4.06-4.08 have some more problems 
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
  # MSIE masquerades as Netscape, but it is fine 
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
  # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 
  # the above regex won't work. You can use the following 
  # workaround to get the desired effect: 
  #BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html 
 
  # Don't compress images, compressed files, movies, audio files 
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.avi$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.mov$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary
  SetEnvIfNoCase Request_URI \.rm$ no-gzip dont-vary
 
  # Make sure proxies don't deliver the wrong content 
  Header append Vary User-Agent env=!dont-vary
 
  # n = 1..9 with 9 being the highest compression level. Standard is 6. 
  # DeflateCompressionLevel n 
</Location>
 
# 
# Expires HTTP headers 
# 
<IfModule expires_module>
  ExpiresActive on
  ExpiresDefault "access plus 2 weeks"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/x-icon "access plus 1 month"
  <FilesMatch "\.(php|php4)$">
      ExpiresByType text/html "now"
  </FilesMatch>
</IfModule>

당분간 등급 놀이에 빠져있겠군. 😉