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

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

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

• Client side database storage
• CSS Transformations
• CSS Animations – 이젠 JavaScript의 도움 없이도 간단한 animation 효과의 구현이 가능해졌다. 물론 Hardware 자원의 사용 효율면에서도 득이 될 듯. (당장, 이 곳의 title에도 적용해 봤음.)
• HTML5 Media support
• querySelector and querySelectorAll 지원
• Native getElementsByClassName 지원
• Downloadable fonts
• Web Inspector 갱신 – 드디어 기다리던 실시간 CSS 편집이 가능해짐. 😀

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

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

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

예전 Safari 2에선 “Reset Safari…” 메뉴를 선택하면 캐쉬나 과거 방문 기록 뿐만 아니라, 쿠키나 웹사이트 저장 암호 등을 완전히 삭제해 버려서 먹통시 최후의 선택으로 행했던 명령이었다. 그런데 우연하게 Safari 3에서는 재설정되는 항목을 선택적으로 지정할 수 있게 되었다는 것을 발견.

재설정 메뉴를 선택하면 다음과 같은 창이 뜨는데,

위 항목들 중에서, 과거 방문 기록이나 캐쉬, 웹사이트 아이콘의 경우 주기적으로 삭제해 주면 Safari를 날렵하게 사용하는데 도움이 되기 때문에 반가운 변화 중의 하나이다.

얼마있으면 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에서 사용 가능하다.
설치 유혹이 너무나 크군. 😈

Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9, text/plain;q=0.8, image/png,*/*;q=0.5
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en) AppleWebKit/522.10.1 (KHTML, like Gecko) Version/3.0 Safari/522.11

HTTP Header Viewer

드디어 Firefox에 이어 Safari도 제대로 된 XHTML 문서를 올바로 해석해서 보여주게 되었다.