지금의 웹 어플리케이션 개발의 추이를 보면, 어떤 동작을 부여하는데 있어서 대부분은 특정 DOM elements를 불러와서 원하는 동작 적용하게 된다. 여기서 특정 DOM elements를 가져오는데 걸리는 시간은 웹 어플리케이션의 동작 속도에 커다란 영향을 끼칠 수도 있다.

현재, 많은 JavaScript library들이 CSS3 selectors를 이용해서 특정 DOM 요소들을 불러오는 기능을 구현하고 있으나, 경쟁적인 속도 단축 노력에도 불구하고, 웹 브라우저가 직접 이런 작업을 지원해 준다면 속도와 효율면에서 커다란 득을 볼 수 있는 것은 당연한 얘기다. 이런 작업의 표준화를 위해 W3C에서는 Selectors API를 제공하고 있는데, 마침 얼마전 WebKit에서도 getElementsByClassName을 지원하기 시작한데 이어서, 이제 특정 DOM 요소들을 끄집어 오는 작업을 위한 querySelector와 guerySelectorAll methods를 지원하기 시작했단다.

사용 예를 보면,

/*
   * Get all the elements with class "hot" (duplicating getElementsByClassName)
   * A common use for this is as a toggle;
   * for example, a search feature might tag results with a class
   */
  document.querySelectorAll(".hot");
 
  /*
   * Get the currently hovered element
   */
  document.querySelector(":hover");
 
  /*
   * Get every other element in the <li> with id "large"
   * This is mostly useful for doing "zebra stripe" alternating rows.
   * Once CSS3 becomes more widespread, doing this directly via CSS will be more practical
   */
  document.querySelectorAll("#large:nth-child(even)");

이제, CSS3 selectors를 이용해서 특정 DOM elements를 손쉬우면서도 빠르게 끄집어 내서 동작을 부여할 수 있게 된 것이다. 앞으로 이 Selectors API가 기타 다른 브라우저들에서도 지원해 준다면, DOM Scripting의 효율도 더 높아질 듯 하다.

조만간 있을 Safari의 갱신 때 이것도 포함되었으면 좋겠군.

WebKit 3에 내장되어 있는 Web Inspector가 반가운 기능들로 갱신되었다는 소식이다.
특히나, 실시간으로 CSS 스타일을 수정할 수 있게 된 것과, 옆에 있는 Sidebar의 크기를 조절할 수 있게 된 것은 당장 Safari에도 적용되었으면 하는 기능. (Firebug에서는 예전부터 지원했던 기능이지만)

그나저나, WebKit에서도 이제 CSS2에 정의되어 있는 @font-face 규칙을 지원하기 시작하면서, 필요에 따라 내려받을 수 있는 다양한 종류의 공개된 TrueType 글꼴들로 디자이너들에게 표현의 자유도를 넓혀줄 수 있는 기틀은 마련되기 시작했지만, 저작권 문제와 기타 웹 브라우저들의 지원 사항등 여러가지 이유로 가까운 시기에 널리 사용될지는 아직 불투명.

얼마있으면 Leopard 발표와 더불어 함께 공개될 WebKit 엔진에 기초한 Safari 3를 앞두고, Apple에서는 웹 표준에 기반한 웹 개발을 도모하기 위해 더 엄격해진 코딩 기술을 요구하게 될 예정이며, 이를 위해 몇 가지 웹 표준화 대비 지침 사항들을 공개하였다.

이미 잘 알려져 있다시피, 의도하지 않은 렌더링 오류를 피하려면 올바른 Doctype의 사용을 권장하고 있으며 CSS에서 색깔 지정시 hex 값은 항상 hash(#)로 시작할 것을 요구하고 있다. 또 특정 요소에 접근할 때는 그 요소의 id 값을 사용해서, document.getElementById('myInput')처럼 쓸 것이며, document.myForm.myInput과 같은 축약 용법은 name 속성이 지정되어 있을 때만 사용할 수 있다.

이 밖에도, 어떤 요소의 속성 값을 얻을 때 다음과 같은 축약 용법 대신에,

var target = document.getElementById('someID');
var targetTitle = target.title;

표준에 정의되어 있는 method인 getAttribute, setAttribute을 쓰라고 하는데, getAttribute method의 경우 실제 다른 브라우저들에서는 돌려주는 값이 상황에 따라 저마다 다르기 때문에, 어차피 이에 대한 대비도 필요할 것이다.

그리고 그림의 크기 지정과 관련해서, 보통 지정된 그림의 크기가 실제 그림 크기와 다를 경우 이미지의 크기는 자동적으로 조절되어 표시되는데 , 만약 이 차이가 한 쪽에서만 발생할 경우 어떤 브라우저에서는 실제 그림의 측면 비율을 무시하고 지정된 한 쪽 면의 크기만 조절되어 표시되는데, Safari 3에서는 CSS 규약에 나와있는 대로 가로 세로 측면 비율에 따라 양쪽 면의 크기가 함께 자동 조절되어 표시된다. 여기서 의도되지 않은 상황을 피하려면, 양쪽 가로 세로의 크기를 함께 지정해 주면 되겠다.

결국, 웹 표준 코딩의 중요성은 앞으로도 더욱 부각될 것이지만, 더욱 성가시게 된 것은 바로 IE 6 잔당들이지.

Safari 3에 포함되어 있는 Web Inspector가 새로운 모습으로 또 한 번 탈바꿈 하였다.

바뀐 내용을 보면,

• 완전히 새로 디자인한 인터페이스, 더는 투명한 패널이 아님.
• Safari 뿐만이 아니고, WebView를 사용하는 제 3의 어플리케이션들에서도 사용 가능.
• 탐색 페이지 별 도킹(docking) 지원.
• 페이지에 포함된 모든 리소스들을 종류별로 분류해서 보여줌.
• 글자 기반의 모든 리소스들을 검색할 수 있는 통합 검색.
• 실시간 JavaScript 실행으로 나타나는 오류 및 경고를 보여주는 콘솔 창.
• HTTP 요청과 응답 headers를 포함해서 리소스의 시간대 별 로드 시간을 보여주는 Network 창.
• Network 창 속 리소스 크기와 로드 시간을 요약해서 보여주는 그래프.
• HTML 소스의 문법 구별 색깔 표시 기능(syntax highlighting).
• inline JavaScript과 HTML의 오류 보고 기능.

과연, Web Inspector는 Safari의 Firebug가 되고 싶은 것인가?
이 모든 기능이 Windows에도 그대로 적용된다니 웹 개발자들에게는 또 하나의 좋은 도구로 자리잡겠군. 당장 Mac과 Windows 용 nightly builds에서 사용 가능하다.
설치 유혹이 너무나 크군. 😈

Safari가 사용하고 있는 오픈 소스 웹 브라우져 엔진인 WebKit의 개발 버전을 탑재한 웹 브라우져로 이름도 WebKit이라는 놈이 있는데, 이 WebKit 웹 브라우져를 위한 JavaScript debugger가 발표되었다.

Drosera라는 이름은 가장 큰 식충 식물류의 이름에서 가져왔다고. 😀

항상 Safari를 쓰면서 아쉬워 했던 것이 마땅한 debugger의 부재였는데 이로써 벌레 퇴치기의 아쉬움을 말끔히 씻을 수 있게 되었다.

Drosera의 사용자 인터페이스를 보면 얼마 전에 흘러나온 DashCode의 JavaScript debugger와도 무척이나 닮아있는 것이 흥미롭다. 또한 Desora의 90 % 이상은 HTML과 JavaScript로 짜였졌다고 하니, 웹 어플리케이션의 새로운 가능성을 보는 듯 하다.

WebKit에서 Drosera 벌레 퇴치기를 불러오는 법은 WebKit Nightly Builds를 내려받아 WebKit과 Drosera를 하드 디스크에 복사한 후, WebKit을 실행시켜서 JavaScript debugger가 필요할 때마다 Drosera를 실행시키고 File 메뉴의 “Attach…”로 WebKit에 붙여놓으면 된다. (아직은 자동적으로 debugger를 꺼내볼 수 없는 것이 아쉽다. 하지만 이미 Dock에 올려놓고 적당한 벌레 아이콘까지 입혀 주었단다.)

아울러, WebKit 개발 버전을 사용하면 웹 페이지의 구조를 쉽게 파악할 수도 있는, 보기에도 멋들어진, Web Inspector까지 덤으로 얻게 된다. 😉