맥(Mac)이나 리눅스(Linux)에서 서울시에서 제공하는 라이브 캠 영상 보기

Apple, Mac & iOS, Web Accessibility 4개의 댓글 »

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

Apple, Mac & iOS, HTML, Notes, Web Accessibility, Web Standards 댓글이 없음 »

아래는 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의 비율이 두배로 뛰다.

Apple, Mac & iOS 댓글이 없음 »

WebSideStory Inc.의 발표에 의하면, 작년 8월과 비교해서 Mac의 웹 점유율이 거의 두 배인 5.6%를 차지하고 있단다. 이 수치는 저번 주에 Net Applications에서 발표한 4월 OS와 웹 브라우저 점유율 수치(6.2%)와 거의 비슷한 것이다. – Mac “web share” doubles.

물론 Intel CPU로의 이전과 함께 실제 시장 점유율도 더불어 상승해 왔지만, 웹에서 차지하는 Mac의 점유율이 더 가파르게 상승한 이유로는 Mac 사용자들은 인터넷을 통한 컨텐츠 생성과 사회적 교류에 더 적극적이인 것으로 추측되기 때문이란다. 이 정도의 수치라면 웹 개발자들은 앞으로 Mac을 그냥 무시할 수만은 없을 것이다.

한국도 비슷한 상황이 된다면 우리나라 웹의 체질도 바뀌어야 할텐데 오히려 웹의 접근 자체를 가로막는 높은 장벽이 여러 곳에 존재하고 있는 현실이다.

꼬리표: