오랜만에 WebKit Nightly Build를 받아보니 눈에 보이는 많은 변화가 있었다. 우선, WebKit을 내려받으면 항상 같이 붙어 오던 JavaScript debugger인 Drosera가 눈에 보이질 않는다. 확인해 보니, 최근에 WebKit에 내장된 Web Inspector에 흡수되었단다. 설치하고 Web Inspector를 열어보면, 겉모습에서 눈에 띄는 변화들이 보인다.

먼저, 다섯 가지(Elements, Resources, Scripts, Profile, Databases)의 항목별 구분 아이콘들로, 훨씬 보기 편하게 작업 환경이 정리된 느낌. 이제 JavaScript debugger는 Scripts 항목에서 실행시킬 수 있고, 또 Console 창 어디에서나 쉽게 접근할 수 있으며, 코드 자동 완성 기능까지 지원해 준다.

Resources 항목을 살펴보면, 예전의 Stylesheets, Images, Scripts 항목들을 통합해서 여러 분류 조건에 따라 한꺼번에 정리된 목록으로 보여주면서 전체적인 분석이 훨씬 용이해졌고, 덤으로 각 리소스 별 Request/Response Headers 정보도 확인할 수 있다.

또, Profiles 항목의 추가로 JavaScript의 실행 속도를 측정/진단하는데 용이하게 쓰일 수 있을 것이다.

WebKit에서는 이렇게 눈에 보이는 변화 말고도, SquirrelFish라는 새로운 JavaScript interpreter를 채용하였는데, 이전 WebKit interpreter보다 1.6 배 더 빠른 JavaScript 실행 속도를 보여준단다. (실제 물고기의 생김새는 아이콘처럼 귀엽지는 않고, 그저 눈만 닮았다. 😯 )
이는 차기 Safari에서도 적용될 예정인데, 아마도 이번 WWDC 2008에서 발표된 Apple의 새로운 MobileMe 서비스에서 사용된 상당히 복잡한 Web 어플리케이션과 같이, JavaScript 의존성이 높은 어플리케이션의 경우 부드러운 사용성 측면에서 앞으로 상당히 중요한 요소가 될 듯 싶다.

아무튼, Web Inspector와 더불어서, Firefox의 Firebug 그리고 Opera의 Dragonfly 등, 개발자들의 마음을 얻기 위한 활발한 웹 개발 도구들의 경쟁에는 박수를 쳐주고 싶다. 😮

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

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

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까지 덤으로 얻게 된다. 😉