보통 Safari(WebKit)에서 “View Source”로 열린 창은 syntax highlighting을 지원하지 않고 line numbers도 표시되지 않는다. 물론 Web Inspector가 보여주는 소스를 훑어볼 수도 있지만, 중첩된 DOM tree를 일일이 열어서 확인하는 것도 가끔은 귀찮은 일.

이런 “View Source” 기능의 단점을 만회하려고 BetterSource Safari extension도 설치해 놨지만, 가끔 열린 페이지의 소스를 복사해놓고 수정 작업까지 하려면 글자 편집기에 바로 보여주는 기능도 요긴할 것이다. 여기에 안성맞춤으로 Safari에서 웹 페이지의 소스를 TextMate에 보여주는 요령을 발견. Safari 혹은 WebKit에서 보이는 웹 페이지의 소스를 TextMate에서 열기(이)란 제목의 글 마저 읽기 →

어쩐지 뜸금없이 짠하고 나타난 Safari 4 Beta 1의 출현으로 무슨 새로운 기능들이 추가되었는지 관심을 모으고 있는 가운데, 우선 처음 설치하고 창을 열면 반기는 환영 영상 페이지가 인상적이다.

뜬금없는 궁금증에 페이지 소스를 살펴보니, 의외로 깔끔한 HTML 5의 Docktype이 눈에 들어온다. 찬찬히 살펴보면, 짧은 소개 영상 전체가 하나의 동영상이 아닌 CSS 3와 HTML 5 표준으로 이루어진, 그야말로 Safari 4가 새로 지원하기 시작한 신 웹 기술들이 서로 조화롭게 어울리며 뽐내고 있는 모습이다. 8)

여기에 사용된 모든 웹 기술들은 이번에 함께 문을 연 Safari DevCenter에서 자세하게 소개되어 있는데, 그 중 아래는 WebKit이 지원하는 CSS Reflections를 따라해 본 모습.

이제 막 꽃을 피우기 시작한 새로운 웹 기술들을 재빠르게 흡수해서 적용해주는 모습이 참 기특하긴 한데, 이런 추세가 다른 진영에도 전파되서 실제 웹 환경에 적용할 수 있는 시기가 빨리 찾아왔으면 하는 바램이다. 그건 그렇고, 왜 Squirrelfish라는 기존 JavaScript 엔진의 이름을 ‘Nitro’로 바꾼 이유는 몰까?

얼마전 Google이 새로운 웹 브라우저 Chrome을 발표하면서, 많은 이들의 관심을 모았었는데, 그 중 Google Chrome 브라우저에 내장된 JavaScript 엔진인 V8의 월등한 성능에 많은 찬사가 이어졌었다.

이에 대한 반격인가? 방금 전 Safari의 WebKit 팀에서도 신형 JavaScript 엔진인 SquirrelFish의 개량형인 SquirrelFish Extreme을 소개하였다.

예전 SquirrelFish 엔진보다 무려 두 배 이상의 성능 향상이 있었다고 하는데, 당장 WebKit Nightly 버전을 받아서 SunSpider JavaScript 성능 테스트를 돌려본 결과 현 Safari 3.1버전보다 거의 세 배 이상의 성능을 보여주고 있다. 이 수치는 최신 V8 엔진보다 SquirrelFish Extreme이 36% 빠른 결과라고.

WebKit Nightlies의 신형 JavaScript 엔진인 SquirrelFish Extreme의 성능을 나타내는 도표로, WebKit 3.1보다 세 배 이상, 이전 SquirrelFish 엔진보다는 두 배 이상의 성능을 보여주고 있다.

이 쯤 되면, TraceMonkey의 분발도 지켜봐야겠군. 😀

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

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

Resources 항목을 살펴보면, 예전의 Stylesheets, Images, Scripts 항목들을 통합해서 여러 분류 조건에 따라 한꺼번에 정리된 목록으로 보여주면서 전체적인 분석이 훨씬 용이해졌고, 덤으로 각 리소스 별 Request/Response Headers 정보도 확인할 수 있다.
WebKit의 Web Inspector에 있는 Resources 항목의 창 그림
또, Profiles 항목의 추가로 JavaScript의 실행 속도를 측정/진단하는데 용이하게 쓰일 수 있을 것이다.

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

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

몇 번의 베타 버전을 거쳐 드디어 정식 Safari 3.1 버전이 Mac과 Windows용으로 함께 공개되었다.

HTML과 JavaScript 부분에서 많은 성능 개선이 이루어졌다고 하는데, 이 밖에도 새로운 버전에서의 바뀐 면모들을 살펴보면 그 동안 WebKit에서만 구현되었던 많은 부분들이 흡수되었다.

이 번에 새로 등장한 주요 기능을은 아래와 같이 이미 WebKit 개발자 블로그에 자세하게 소개된 바 있다.

그리고, 환경 설정에서 예전 Debug 메뉴를 흡수한(?) 새로운 Develop 메뉴를 활성화시켜서 다양한 웹 개발 관련 메뉴들로의 접근이 더 쉬워졌으며, 현 브라우저들 중 가장 높은 Acid3 Test 점수(75)를 보여준단다. 물론 얼마 전 가장 최근의 WebKit은 93점의 높은 점수에 도달했다는 소식도 있었음.

IE8 베타 버전이 공개되었을 때에도 느낀 것이지만, 또 한번 시작된 브라우저들 간의 치열한 경쟁 구도 속에서도, 주요 기능들은 웹 표준을 중심으로 서로 닮아가는 경향을 보일 것으로 예상되지만, 장점을 내세운 차별화는 앞으로 그 중요성이 더 부각될 mobile web을 누가 선점하는가에 따라 결판나지 않을까 예상해본다.

마침, iPhone Dev Center에 공개되어 있는 “iPhone SDK for Web Developers” 영상에는 이번 Safari에 새로 포함된 웹 개발 관련 여러 기능들의 내용을 엿볼 수가 있었다.