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.

• Render this page on IE 6
• Render this page on IE 7

덤으로, 웹 페이지에 있는 글자가 배경 색깔과 충분히 대조를 이루는가를 검사해주는 Juicy Studio의 Colour Contrast Firefox Extention이 최근 버전의 draft Web Content Accessibility Guidelines 2.0 내용에 맞추어 갱신되었단다.

브라우저들의 개성 파악은 웹 개발자들의 취미 생활.

이번 달 5월 17일부터 미국 Oregon에서 시작되는 RailsConf 2007을 홍보하기 위해 Apple의 Mac 광고를 재밌게 흉내낸 영상.
비교 대상이 된 것은 PC 대신에 Java가 그 악역을 맡았다.

RailsConf가 개막되기까지 매일 한 편씩 새로운 영상이 더 공개될 예정이란다. 😆

쓸모 많고 멋진 Mac OS X 어플리케이션 개발 회사로 잘 알려진 panic에서 1년 반 동안의 개발 과정을 통해 완성된, 지금까지 비밀로 간직되면서 소문으로만 떠돌았던, 통합 웹 개발 어플리케이션인 Coda를 드디어 세상에 공개하였다.

Coda가 탄생한 이유이자 장점으로 표방하고 나선 것은 하나의 창 속에 거의 모든 웹 개발 관련 기능들을 모아두었다는 것이다.

text editor + transmit + css editor + terminal + books + more = Coda

얼핏, Dreamweaver를 떠올리게 되지만, WYSIWYG 기능을 뺀 보다 가벼운 개발 환경이다. 물론 가격 면에서도 경생상대가 되지 않는다. (당분간은 copy 당 $79, Transmit 3 사용자는 $69)
text editor로는 협력(공동) 편집 기능으로 유명한 SubEthaEdit가 차용되었고, FTP 클라이언트도 자사의 Transmit이 녹아있다. 여기에 CSS 편집기와 실시간 미리보기, 그리고 함께 내장된 Terminal 기능과 $60 상당의 웹 관련(HTML, CSS, JavaScript, PHP) 문서는 덤이다.

개인적으로 아직 통합 개발 환경을 위해서 애용하고 있는 개별 어플리케이션들을 단숨에 버릴 수는 없지만 (어떻게 TextMate을 떠날 수 있겠는가), 앞으로 차근차근 기능 개선을 통해 갱쟁 위치의 개별 웹 개발 어플리케이션들을 아우르면서 효율적으로 한 데 묶을 수만 있다면, Cocoa 어플리케이션 개발에 Xcode가 있듯이 통합 웹 개발 환경을 위해서도 Coda가 충분한 자리메김을 할 수 있으리라 생각된다.

아무리 둘러봐도 Mac만큼 풍부한 웹 개발 환경을 가진 플랫폼이 또 있을까? 😮

개발자의 blog에 있는 Coda 1.0 발표/소개의 글