얼마있으면 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 잔당들이지.

서울시 인테넛 방송 사이트에 가면 라이브 캠이란 이름으로 청계천, 밤섬 그리고 서울광장의 실시간 영상 관측 화면을 제공하고 있다. 하지만, 막상 맥이나 리눅스에서 링크(정확히 말하면 링크도 아니고 접근성이 떨어지는 이미지 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>

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

청계천 광장 라이브 캠 보기

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

TextMate와 함께 기본적으로 제공되는 CSS 번들에는 못난 Internet Explorer, 특히 IE 6 만을 위해서 사용될 수 있는 CSS hacks이 들어 있다.

바로 Other 항목 밑에 있는 것들로, 예를 들어 IE 6에게 png 그림의 투명도를 제대로 표시하게 하려고 Microsoft 전용 AlphaImageLoader Filter를 쓴 것이 있는데, background tab trigger로 사용될 수 있다.

.png-transparent {
  background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

또 CSS3의 opacity 속성을 지정할 때는 IE를 위해 MS의 Alpha Filter가 사용된다. -moz-opacity 속성은 오래된 버전의 Mozilla 계열 브라우저들(Mozilla 1.7과 Firefox 0.9 이전) 위한 것으로 지금은 삭제해도 무관하다.

.opacity-div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

그런데, 이것들 말고도 자주 쓰이는 꼼수들이 더 있기 마련인데, 개인적으로 두 가지를 더 추가해서 쓰고 있다.
하나는 IE 6 만을 위한 꼼수로, 이 놈은 CSS의 max-width와 min-width 속성을 전혀 알아듣지 못하는 관계로 할 수 없이 또 MS 전용 expression() 속성을 빌려와서 적용해 주어야 한다.
아래는 IE min-max-width라는 이름으로 저장된 CSS snippet의 내용인데, tab trigger로 iemwidth를 지정해 주었다.

width:expression(document.body.clientWidth > ${1:980} ? "$1px" : (document.body.clientWidth < ${2:480} ? "$2px": "auto" ));

또 하나는 CSS layout을 구성할 때 자주 쓰이는 snippet으로 float된 자식 요소를 감싸주려고 과거에는 CSS의 :after pseudo-element를 써서 float을 clearing하는 벙법이 많이 사용되었으나, IE가 아직까지 CSS 2.1의 :before와 :after pseudo-element를 지원하지도 않거니와, 더 간편한 방법으로 알려진 pseudo-element를 쓰지 않고 float을 clearing하는 방법이 많이 사용되는데, 여기에는 또 IE 6 이하 버전 때문에 꼼수가 들어가야 한다.
그래서 아래는 짧지만 타이핑의 수고를 덜어주기 위해 IE 7까지 고려한 새 float clearing 방법을 참고해서 추가한 아주 간단한 snippet이다.

${1:.clearfix} {
  overflow: hidden;
  ${2:_}height: 1%; /* IE 6 fix */
}

IE의 경우, float된 자식을 감싸려면 부모가 MS 전용 속성인 “hasLayout“이 true 값을 가져야 하는데, 우연히도 IE 7에 와서는 overflow의 속성이 주어질 경우(visible 제외) 자동으로 hasLayout 값을 갖게 되면서 또 다른 꼼수를 사용할 필요가 없다. 하지만, 불행히도 IE 6에서는 여전히 hasLayout 값을 주려면 이미 알려져 있는 여러 hasLayout 값을 갖게 하는 CSS 속성들 가운데 하나를 적용해 주어야 한다. (위에서는 “Holly Hack”이라 일컬어지는 height: 1%를 사용했고, 다른 브라우저들로부터 감추기 위해 underscore hack이 사용되었지만, 부모 요소에 height 값을 지정할 필요가 없다면 밑줄은 필요없다.)

이런 꼼수들의 실제 적용은 나중에 CSS 파일에 따로 모아서 사용하는 것이 사이트 관리하는데 수월할 것이다.

Michael Angeles씨의 OmniGraffle 용 wireframe palette가 갱신되었다.
갱신된 내용을 보면:

• 설명 기호(callout) 모양 추가
• 새로운 forms 요소가 추가됨: contextual help, captcha
• Tabs과 Controls 항목 추가
• 몇몇 자주 쓰이는 아이콘들 추가

내려받으러 가세~

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