아직까지 Internet Explorer가 시장 점유율을 꽉 잡고 있는 상황에서 이번 Safari의 Windows 진출 소식은 쟁쟁한 경쟁자가 하나 더 늘어나게 되면서 아마도 앞으로 눈에 띄는 사용 점유율을 잠식할 수 있으리라 기대해 본다. 물론 MS의 독점 기술들로 철옹성처럼 둘러쌓인 현재 한국의 특수한 웹 환경을 따로 생각하면 이는 결코 만만치 않을 것이다. 하지만 이렇게 되면, MS도 가만 있을 수 있을까?
현재 IE 7이 보여주는 뒤떨어진 UI나 기능을 따지고 보면, 또 하나의 발등에 불이 떨어진 격이라서 결국 IE 8의 발표 시기도 앞당겨 질 수 밖에 없을 것이고 본격적으로 또 한 번의 웹 브라우저들 간의 치열한 경쟁이 시작되겠지.
그래도 과거처럼 브라우저들 간의 전쟁이 웹 개발 환경에 심각한 부작용을 끼치리라고는 생각되지 않는다. 이제는 기본 웹 질서와 표준을 파괴하면서까지 사용자들을 끌어 모을 수 없을 것이기 때문이다. 그래서 이번 진출 소식은 웹 사용자들과 웹 개발자들에게는 반가운 소식이 될 수 있으리라 믿는다.
iPod 성공에 의한 iTunes 시장 확대, 이어서 iPhone 판매에 따른 부수적으로 노리는 Safari 사용자 층 증가.
이번 Safari의 윈도 진영 진출을 보면서 흥미를 끄는 것은 iTunes를 시작으로 이번 Safari까지 과연 Apple의 Windows 겨냥 도전장은 앞으로도 그 도가 세질 것이라는 점이다. 웹 브라우저의 시장 점유율 만을 겨냥해서 Windows에서 돌아가는 Safari를 개발한 것은 아닐테고, OS에서 차지하는 Web의 영역은 가장 중요한 부분 중에 하나이고 그 영역은 점점 넓어지고 있는 것을 생각해 보면, 10 월에 발표될 차기 Mac OS X가 될 Leopard에 포함된 Boot Camp를 뛰어넘는 더 진화된 OS 가상화 기술의 발전에 따라 자연스럽게 개발이 이루어지면서, 이 모든 것이 결국 Windows의 영역까지 치고 들어갈 중요한 또 하나의 초석이 될 것이라고 짐작해 본다.
또 하나, 이제 Windows에서 Webkit 기반의 Safari가 돌아가게 되면, 어쩌면 자연스럽게 Dashboard를 돌릴 수 있는 기본적인 환경이 마련된 것이니 아마도 가까운 장래에 Widget들도 따라오지 않을까 기대해 본다. 설마 Mac 용 Safari에 들어갈 새 Web Clip 기능이 Windows Safari에서만 쏙 빠지게 있다면 당연 허전하겠지.
마지막으로 이번 WWDC 07 개막 연설을 보면서 장비와 웹 간의 소통이 좀 더 진화하는 것을 느꼈지만, 역설적으로 고립된 한국 웹 환경을 또 한 번 돌아보며 아쉬움을 느낀다.
그나저나, 이번에 싹 바뀐 Apple 웹 사이트는 여러 UI 효과를 위해 Prototype과 Scipt.acul.us를 사용했군.
ZigVersion은 지금까지 봐온 맥용 Subversion 클라이언트들 중에 제일 맘에 드는 놈이다.
단순히 터미널의 subversion 명령을 대치하는 수준이 아니라 바뀐 내용을 손쉽게 비교할 수 있는 등 버전 관리를 더 효율적으로 도와주는 참 편한 기능들이 많다.
최근 몇 가지 오류들을 고친 ZingVersion 1.2 Beta2가 나왔으며, 개인적 목적의 사용자는 무료 라이센스를 신청해서 쓸 수도 있다.
check in/check out하느라 이젠 터미널을 열 필요가 없겠는 걸. 🙂
ZigVersion 소개 동영상
아래는 TextMate에서 제공하는 HTML의 기본 table snippet에 의해 삽입되는 코드이다.
<table border="0" cellspacing="5" cellpadding="5">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
무척이나 단출하고 접근성을 염두에 둔 최소한의 요소들이 빠져있기 때문에 데이타 테이블을 짤 때 무심코 그냥 지나칠 수가 있다.
간단한 데이타 테이블이라도 접근성을 고려한다면 최소한 테이블 안에 caption 요소와 summary 속성을 추가하고 th 혹은 간혹 td 요소에는 scope 속성이 포함되어 있어야 한다.
그래서, 나름대로 수정한 table snippet (행의 갯수가 최소 4, 최대 7 기준):
<table id="${1}" summary="${2}"${4:${5: border="${6:0}"}${7: cellspacing="${8:5}" cellpadding="${9:5}"}}>
<caption>${10}</caption>
<thead>
<tr>
${11:<td></td>
}<th scope="col">${12:Table Header}</th>
<th scope="col">${13:Table Header}</th>
<th scope="col">${14:Table Header}</th>
<th scope="col">${15:Table Header}</th>
${16:<th scope="col">${17:Table Header}</th>
${18:<th scope="col">${19:Table Header}</th>
}}</tr>
</thead>
${20:<tfoot>
<tr>
<th scope="row">${21:Table Footer}</th>
<td colspan="${22:}">${23:Footer Data}</td>
</tr>
</tfoot>
}<tbody>
${35:<tr>
${24:<th scope="row">${25:Header}</th>
}<td>${26:Data}</td>
<td>${27:Data}</td>
<td>${28:Data}</td>
${29:<td>${30:Data}</td>
${31:<td>${32:Data}</td>
${33:<td>${34:Data}</td>
}}}</tr>}
${0:}
</tbody>
</table>
간혹 구조가 복잡한 데이타 테이블일 경우 scope 속성으로는 테이타 셀과 테이블 제목들과의 관계를 제대로 표현할 수가 없기 때문에 대신에 headers 속성을 써야 할 경우가 있는데, 현재 논의되고 있는 HTML 5.0의 표준 초고 문안에는 headers 속성이 포함되지 않을 예정이라서 개발자들 사이에 많은 논란이 되고 있다.
앞으로 headers 속성의 운명은 알 수가 없지만, 분명한 것은 지금 바로 적용될 수 있는 올바른 데이타 테이블의 구현 방법을 숙지하는 것이리라. W3C의 HTML 문서에 나와있는 화면 해독기를 고려한 Table 표현 방법이나 한 번 더 훑어보자.
데이타 테이블의 디자인 아이디어를 얻고 싶을 땐 Data Tables and Cascading Style Sheets Gallery가 도움이 된다.
웹 페이지를 디자인 하거나 개발할 때 여러 웹 브라우저들에서 보여지는 결과물은 각기 그 편차는 있겠지만 다양한 종류의 브라우저들의 수 만큼이나 천차만별이다. 그렇기 때문에 각기 다른 브라우저들에서 개발 웹 사이트가 실제로 어떻게 보이는지를 확인하는 것은 개발 과정 중 필수이다.
물론 이런 경우를 대비해서, Mac에서는 Parallels와 같은 가상 머신을 돌려서 확인해 볼 수도 있지만 간단한 확인 만을 필요로 할 때는 번거로운 작업이 될 수도 있다. 이런 잠깐의 확인이 필요할 경우 도움이 될 만한 여러 Web Rendering 서비스들이 있는데, 그들 중 IE NetRenderer 브라우저 호환성 검사 서비스는 무료에다가 비교적 빠른 결과물을 보여준다.
현재는 IE 5.5부터 IE 7 중 원하는 웹 브라우저를 선택해서 주소만 입력하면 해당 브라우저에서 보여지는 웹 페이지의 모습을 그림으로 바로 보여준다.
비교적 빠르게 그 결과를 확인할 수 있었는데, 몇 가지 아쉬운 것은 웹 페이지의 길이가 길 경우 대략 768 픽셀 이하는 잘려 버리고 한국어도 지원하지 못해서 글자가 무참히 깨져버린다. 그래도 웹 페이지의 단순 배치 구도를 확인만 할 경우에는 유용한 서비스일 듯하다.
아래는 웹 브라우저의 책갈피에 저장해 놓고 바로 확인할 수 있게 만든 bookmarklet.
덤으로, 웹 페이지에 있는 글자가 배경 색깔과 충분히 대조를 이루는가를 검사해주는 Juicy Studio의 Colour Contrast Firefox Extention이 최근 버전의 draft Web Content Accessibility Guidelines 2.0 내용에 맞추어 갱신되었단다.
브라우저들의 개성 파악은 웹 개발자들의 취미 생활. 
WordPress 2.2에서의 바뀐 점들을 살펴보면 전체적으로 커다란 변화가 있었음을 알 수 있다.
먼저, wp-config.php 파일에 DB 인코딩 관련 두 가지 새로운 설정 값이 추가되었는데,
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
이로써, 간단한 설정만으로 db에서 utf-8 인코딩을 사용할 수 있게 되었다.
그리고 부분적으로 관리자 User Interface 기능을 구현하는데 jQuery JavaScript 라이브러리가 사용되었으나, 아직 Prototype으로부터의 완전한 이주는 진행되지 못한 상태다.
눈에 보이는 새로 추가된 기능으로는 그 동안 plugin 형태로만 제공되던 Widgets이 기본 테마에 추가되면서 덕분에 옆구리 막대의 관리와 수정이 한결 손쉬워 졌고, 드디어 Atom 1.0 발신 신호도 공식 지원한다.
이번 갱신으로 그 동안 입맛에 맞게 수정해서 사용하던 기본 테마에도 커다란 변화가 생기면서 덩달아 변화를 주기 위해 WordPress 2.2와 호환되는 새로운 테마를 수소문하게 되었다.
그래서 새로 설치게된 테마가 iTheme 1.1이라는 테마인데, Mac의 UI를 닮아서 어쩌면 식상할 수도 있지만 개인적으로 익숙한 것이라서 오히려 보기에도 더 편안하고 깨끗한 느낌이 든다.
아래는 내 입맛에 맞게 iTheme 테마를 수정했던 내용을 적어놓는다.
- 먼저, 글의 고정된 연결 고리들(permalinks)을 더 뜻이 있고 접근성을 높이기 위해 다음과 같은 맞춤형 구조로 설정해주었다.
Custom structure: /%category%/%postname%/
이렇게 하면 예전 글의 링크들이 깨지는 부작용이 있지만, 진작에 고쳐주지 못한 책임으로 여길 수 밖에. 🙁 - 테마 파일에 쓰여진 get_settings 함수는 앞으로 지원이 중단될 예정이기 때문에 대신에 get_option 함수로 대체함(header.php).
- iTheme에는 기본 제공되는 blockquote 스타일이 없는 관계로 Shape Shed에 설명되어 있는 quotations 스타일을 빌려와 적용해 주었다.
- 접근성을 고려해서 검색 form에 label을 추가하고 jQuery를 이용해서 검색 input box 클릭시 자동으로 가려주도록 Hover 효과를 주었으며, 링크들이 모여 있는 곳으로 바로 이동할 수 있도록 평상시에는 감춰져 있는 건너뛰기 링크를 추가했다. 그리고 a:hover 스타일과 함께 a:focus에도 같은 스타일이 적용되도록 함.
- code 표시 block에 syntax highlight 기능을 구현하기 위해 전처럼 textmate 테마를 적용.
- background 그림을 Mac OS X의 기본 Aqua Graphite 배경 그림으로 교체
- 글의 내용이 들어가는 공간의 너비를 545px에서 600px의 크기로 약간 넓힘. 이에 따라, 글 내용을 감싸고 있는 테마에 사용된 몇몇 그림들(content-top-bg.png, content-bottom-bg.png, navigation-bg.gif)을 더 넓은 것으로 수정해서 교체해야 했고, 댓글 폼에 있는 submit 단추의 margin-left 값을 55px 더 큰 410px로 주었다.
이제야 밀린 숙제를 간신히 끝낸 기분이군. 😛