2008년 8월 29일 금요일

웹접근성 세미나 후기 & 웹접근성 준수 가이드라인 개정안

어제(08.8.28) 한국정보문화진흥원(KADO)에서 발표된 웹접근성 준수 가이드라인의 새로운 개정안과 
약간의 후기를 적었습니다.


장차법 시행 관련 웹접근성 준수 가이드라인 개발 계획(안)
  • 08. 4월 이후 장차법 준수 의무화
  • 웹접근성 준수 가이드라인 개선(13개 항목 26개 지표 51개 체크리스트 -> 13개 항목 18개 체크리스트)
    • 사용성과 관련되는 평가 항목 제외하고 접근성에 크게 영향을 미치는 요소만으로 한정.
    • 객관적으로 평가 가능한 항목 중심으로 개편
  • 체크리스트 [원본PPT]
  1. 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.
    * 의미가 있는 이미지의 경우 대체 텍스트를 의미나 기능이 동일하게 제공
    * 의미가 없는 이미지의 경우 대체 텍스트를 blank(alt="")로 제공

  2. 배경 이미지가 의미를 갖는 경우, 배경 이미지의 의미를 이해할 수 있도록 대체 콘텐츠를 제공해야 한다.

  3. 멀티미디어 콘텐츠(동영상, 오디오 등)를 이해할 수 있도록 자막 또는 원고 등을 제공해야 한다.
    * 실시간 방송의 경우는 평가대상에서 제외.
    [질의자 중에 자막과 원고는 의미적으로 같은 것이므로 ‘수화 또는 자막(원고)’으로 문구를 수정해 줄 것을 요구하기도 했다. 위 문구 그대로 이해하자면, 자막은 영상과 동기화된 상태(영화 자막과 같이)이고, 원고는 TV뉴스와 같이 별도의 공간에 제공하는 자막 원문을 제공하는 비동기 방식인 것 같다.]

  4. 색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이외에도 명암이나 패턴 등으로 콘텐츠 구분이 가능해야 한다.
    [종이 등에 흑백으로 인쇄된 경우에도 콘텐츠를 인식 할 수 있는가? 하는 것을 고려하면 좋을것 같다. 더불어서 이미지 텍스트를 사용시 배경이 어둡고, 이미지 텍스트가 밝은경우. 그리고 이미지 텍스트의 배경 부분을 투명하게 처리한 경우 CSS를 걷어냈을 때 일반적인 웹브라우저의 흰 배경 위에서 투명한 배경의 밝은 이미지 텍스트 역시 제대로 인식되지 않을 수 있다.]

  5. 서버측 이미지 맵을 제공할 경우, 해당 내용 및 기능을 사용할 수 있는 대체콘텐츠를 제공해야 한다.
    [최근 국내에서 서버측 이미지 맵을 사용하는 경우는 극히 드믈다. GIS에서만 예의를 둔다고 한다.]

  6. 프레임을 제공할 경우, 프레임의 내용을 이해할 수 있도록 적절한 제목(title 속성)을 제공해야 한다.
    [기존의 한 페이지내 프레임 수 제한(4개)에 대한 항목이 사라졌다. 단, 공공기관의 평가시 유지한다고 한다.]

  7. 깜박이는 콘텐츠를 제공할 경우, 사전에 경고하고, 콘텐츠를 이용할 수 있도록 깜박이지 않는 대체 페이지를 제공해야 한다.
    *깜빡임 기준: 초당 3~49번을 깜빡이는 콘텐츠
    [Text Blink 효과 등 과거에는 많이 사용되었으나 최근에는 거의 사용되지 않는다. 다만 플래시를 통한 애니메이션 적용시 과도한 모션으로 인한 깜박임 현상이 생길 수 있으므로 이를 고려하면 좋겠다.]

  8. 키보드만으로 콘텐츠가 제공하는 모든 기능을 이용할 수 있어야 한다.
    [Tab 키를 이용한 웹서핑과 각종 이벤트 발생에 대한 마우스/키보드 제어에 대한 연구와 적용이 중요하다.]

  9. 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.

  10. 이용에 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.
    * 예외사항: 경매, 실시간 게임, 온라인 시험 등과 같이 시간제한이 필수적인 콘텐츠

  11. 새 창(팝업창 포함)을 제공할 경우, 사용자에게 사전에 알려야 한다.

  12. 데이터 테이블을 제공할 경우, 테이블의 내용을 이해할 수 있는 정보(제목, 요약정보 등)를 제공해야 한다.

  13. 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.

  14. 해당 페이지를 잘 이해할 수 있도록 페이지 제목(<title>)을 제공해야 한다.

  15. 콘텐츠는 논리적인 순서로 구성되어야 한다.
    [다소 논란이 될 수 있는 부분인것 같다. ‘논리적’이라는 단어 자체가 다소 주관적일 수 있기 때문에 검증가능성(Testability, 객관적인 평가가 어려운 것은 가급적 배제)을 이유로 들어서 이번 개정안을 단행한 것인데 이 15번 항목에서는 약간 예외적일 수 있겠다 싶다. 객관적 평가를 위해서라면 ‘논리적’이 콘텐츠의 순서를 예시를 공식적으로 보여줄 필요가 있어 보인다.]

  16. 온라인 서식을 제공할 경우, 레이블(<label>)을 제공해야 한다.

  17. 애플릿, 플러그인(ActiveX, 플래시) 등 부가 애플리케이션이 제공하는 경우, 해당 애플리케이션이 자체적인 접근성을 준수하거나 또는 사용자가 대체 콘텐
    츠를 선택하여 이용할 수 있어야 한다.
    [어려운 문제다. 기술은 하루가 다르게 변하고 발전해 나가는데, 현재의 웹표준은 이미 수년전에 만들어진 것들이고, 웹접근성의 기준은 여전히 미흡하다. 많은 수의 일반인들은 끊임없이 새로운 기술을 적용한 사이트를 원하고, 다른 한쪽에서는 그로 인해 접근성이 저해되어 사용자체를 할 수 없는게 현실이다. 모두의 고민이 필요한 부분이다.]

  18. 링크, 서식, 버튼은 자바스크립트 없이도 작동할 수 있는가?

일단 이번 개정의 핵심은 체크리스트가 51개서 18개로 대폭 축소된 것입니다. 웹접근성 검증 통과의 막연한 어려움과 부담감으로부터 실무자들의 부담을 상당부분 줄여준 것이라고 볼 수 있을것 같습니다. 하지만, 줄어든 항목은 '반드시' 지켜야할 '최소' 항목으로 하나라도 지켜지지 않은 경우에는 웹접근성을 준수하지 않은 사이트가 되고 말 것입니다. 따라서 가급적 제작 단계에서는 기존 51개 항목의 체크리스트를 고려하여 표준화를 준수하여 웹접근성 확보를 하는 것이 좋겠다는 생각이 듭니다.


이번 세미나에서 많은 사람들이 참석을 하였지만 시간이 부족했던 까닭으로 질의 답도 많지 않았고, 충분한 대답을 들을 수 있는 자리도 아니었던 것 같습니다. 개중에 기억에 남는 내용은 영상에 제공되는 자막에 대해서 자막과 더불어 '수화'를 포함해 달라는 의견과 웹에이젼시의 현실에 대한 지적 및 대응에 대한 의견이 있었습니다. 제작 관점에서 동영상을 위한 수화 제작은 현실적인 어려움이 많은 부분이지만 당사자들의 의견이니 만큼 무시할 수 없는 부분이기도 했던것 같습니다. 

웹에이젼시로 불리는 대부분의 제작 대행사들의 실무자들의 교육이 절실하고, 발주자 또는 클라이언트들에 대한 웹표준 인식과 웹접근성 이해를 높일 수 있는 홍보 또는 캠페인이 필요하다는 의견이 있었습니다.

웹표준이 무엇이고, 웹접근성이 무엇이냐는 질문도 참 많이 받아봤고, 잘 알지도 못하면서 어떻게든 이해를 시켜보려고 주절주절 떠든 적도 많았습니다.

어제 참석했던 패널중 한분이 이렇게 설명을 하시더군요.

"웹접근성은 이 낮은 플로어에 오를 수 있도록 경사로를 하나 더 만드는 일이다." 라고 말이죠.

웹에도 똑같이 경사로를 만들어서 장애를 가진 사람도 우리처럼 똑같이 접근 할 수 있게 하자는 것이죠.

웹디자이너들이 많이 묻는 것중에 하나가 웹접근성을 고려하면 디자인 퀄리티가 떨어질 수밖에 없지 않느냐는 것입니다.

거리에 보면 보도블럭에 점자블럭이 있습니다. 횡단보도에는 시각장애인을 위한 음성안내 버튼도 있습니다. 점자블럭만 아니면 보도블럭을 좀 더 아름답게 디자인할 수 있었을지 모릅니다. 음성안내 버튼만 아니면 신호등을 일부러 세금을 더 들여서 제작할 필요가 없었을지 모릅니다. 하지만 누군가에는 반드시 필요한 것들입니다. 그것만큼 중요한 이유가 또 있을까 싶습니다.

또 한분의 패널(청각 장애인)이 이런 말도 했습니다.
"장애인도 인터넷 이용하고 싶고, 온라인 쇼핑몰 이용하고 싶습니다. 몸이 불편해서 외출하기도 힘든데 온라인 쇼핑몰을 이용하면 얼마나 편하겠습니까." 라고 말입니다.

2008년 8월 19일 화요일

iGoogle 새로운 기능을 사용해 보자

지난 6월 26일 iGoogle의 새로운 기능이 소개가 되었다. 현재의 iGoogle은 컨텐츠 영역 상단에 탭을 구성하도록 되어 있는데 새로운 기능으로 업그래이드(?)를 하게 되면 좌측에 탭영역이 활성화 된다. 마치 웹사이트의 2차 메뉴를 보는 것과 같이 되는데 탭 이름 아래 가젯목록이 나열된다. 가젯명을 클릭하면 새로운 탭 또는 창으로 이동하지 않고, 컨텐츠 영역에서 바로 전환이 되면서 편리함을 제공하고 있다.
사용자 삽입 이미지

상단에 탭이 위치한 현재의 iGoogle


사용자 삽입 이미지

새로운 iGoogle은 좌측에 탭영역이 활성화 되고, 가젯목록이 나타난다


사용자 삽입 이미지

가젯명을 선택하면 컨텐츠영역이 전환되어 편리하다.


사용자 삽입 이미지

YouTube 동영상 가젯을 선택하면 바로 동영상 목록을 볼 수 있다.


현재는 새로운 iGoogle의 테스트중으로 설정을 통해서 위의 기능을 사용할 수는 없고 다음과 같은 방법으로 적용해 볼 수 있다.

1. iGoogle 에 접속.
2. 주소창에 javascript:_dlsetp('v2=1'); 입력하고 실행.

원래의 버전으로 돌아오고 싶은 경우에는 javascript:_dlsetp('v2=0'); 이라고 입력하고 실행하면 된다.

2008년 8월 15일 금요일

위젯인가?

90년대 외계소년 위제트라는 만화 영화가 있었다. 아름다운 지구를 환경오염으로부터 지켜내야 한다는 게 주제였고, 기억속에 머리만 달린 '위제트'라는 외계인이 주인공이었다. 그런데 최근 '위젯'에 대한 관심이 높아져서 새삼 그 만화영화가 떠올랐다. 비슷하게 '형사 가제트'와 '가젯'의 관계도 궁금증을 갖게 만들었는데, 최근에 '웹 패러다임을 바꾸는 위젯'이라는 노주환님의 책을 통해서 두 만화의 주인공의 이름과 '위젯','가젯'이 같은 의미로 만들어진 것임을 알 수 있었다. 그래서였는지 모르겠지만 '위젯'을 다룬 이 책이 어렵지 않게 읽혀졌고, 꽤나 흥미롭게 읽어갈 수 있었다.

웹 2.0과 시멘틱웹에 대한 관심이 증가할 때 국내 서점가에는 온통 외국의 번역서로 넘쳐났는데 '위젯'과 관련해서 읽게 된 이 책은 이미 몇 권의 IT 관련 서적을 지필하신 노주환님의 책이었고, 꽤나 반가운 일이었다. 외국에서 일고 있는 위젯 열풍에 비해 아직 국내 시장은 냉랭하기 그지 없고, 단기간내에 비전을 갖기에도 시장 자체가 지나치게 폐쇄적인 면이 없지 않다고 생각한다. 때문에 내용을 떠나 이 책의 출시는 시의적절하지 않았나 하는 생각을 먼저 해본다.

앞서도 만화를 통해 '위젯'이라는 용어의 생소함을 떨쳤듯이 책의 내용 역시 다양한 관련 이미지와 쉽고 간결한 문장으로 비교적 쉽고, 재미있게 읽어갈 수 있었다. 위젯과 가젯이라는 이름의 유래와 의미부터 시작해서 다양한 위젯 서비스의 분석과 비교, 디자인적 가이드와 실제 구현 방법에 이르기까지 위젯과 관련한 최대한의 정보를 나름의 수고스로움으로 채워 넣었지 않나 싶다.

하지만 부분적으로 내용적 깊이의 아쉬움이 있었다. 웹 패러다임이라는 거창한 제목하에 만들어진 책이라면 단편적인 사실의 나열보다는 구글 애드센스나 유니클로의 광고 위젯, 국내외 위젯 서비스 시장의 미래나 현주소, 앞으로의 비전 등도 함께 다루어져서 소개가 되었다면 좀 더 좋지 않았을까 싶은 생각이 들었다.

위젯에 대해서 아는 것이 거의 없다면 이 책을 추천한다. 충분히 좋은 내용과 다양한 이야기들을 들을 수 있다. 하지만 너무 많은 것을 기대하면 허탈할 수도 있을 것 같다. 개별적인 단위의 깊이는 약하지만 초보자 가이드 역활을 해 줄수 있을 정도의 책이라고 생각하면 좋을것 같다.

웹 패러다임을 바꾸는 위젯 상세보기
노주환 지음 | 멘토르 펴냄
진화하는 웹의 중심에 있는 <b>위젯</b>(Widget)! 『웹 패러다임을 바꾸는 <b>위젯</b>』은 <b>위젯</b>의 개념과 전략적 가치, 종류, 쓰임새, 특징, 디자인, 제작 과정 등을 소개한 <b>위젯</b> 교과서이다. 웹 사이트의 한쪽 구석에서...

2008년 8월 11일 월요일

위젯 포털로 구축한 시작페이지

http://www.wzd.com/chubzo.myid.net

위자드웍스의 개인화 페이지 서비스를 이용해서 웹퍼블리셔들을 위한 시작페이지를 만들어 보았다. 국내외 주요 커뮤니티인 ‘하드코딩하는 사람들’, ‘CSS Design Korea’, ‘A List Apart’, ‘Ajaxrain’ 등의 최근 글을 보여주고, ‘하코사’와 ‘CDK’의 주요 행사를 스케줄러 위젯을 통해서 공유한다. 아울러 개인적으로 모아두었던 즐겨찾기 목록을 북마크 위젯을 통해서 제공하고 있다.

위젯(가젯)을 이용한 개인화 페이지는 iGoogle이 더 많은 위젯과 빠른 속도를 보여주기는 하지만, 초청에 의한 공유만 지원되는 문제로 위와 같이 완전히 공개형태로 만들기는 지원되지 않기 때문에 위자드웍스의 서비스를 이용해 보았는데 소규모 메타블로그와 같은 페이지를 구축하기에는 나쁘지 않은것 같다.

좀 더 위젯의 종료가 다양해지고, 전문 콘텐츠를 가공한 위젯이 등장한다면 특정 분야의 개인화된 페이지들이 많이 생겨나고 활성화 되지 않을까 싶기도 한다.

2008년 8월 5일 화요일

Flash Write Script

간단히 플래시 무비를 HTML 페이지 안에 삽입하는 스크립트를 소개합니다. 흔하디 흔한 스크립트중 하나이긴 한데, 많은 경우에 여전히 embed 태그를 object 태그 안에 포함하는 형태를 가지고 있어 조금더 표준에 가깝고, 적절한 방법을 포스팅해 봅니다.

/*
  Func. Name : Direct Flash Write

  ex) flashWrite(url, w, h, vars, win, alt);
  ※ alt : Alternative Text or Image
*/
function flashWrite(url, w, h, vars, win, alt)
{

  var id = url.split("/")[url.split("/").length-1].split(".")[0];
  if(vars == null) vars='';
  if(win == null) win='opaque';

  var objStr = "     <object ";

  if(navigator.appName.match("Internet Explorer")){
      objStr += "classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'";
  } else {
      objStr += "type='application/x-shockwave-flash' data='"+url+"' ";
  }
      objStr +="     id='"+id+"' style='width:"+w+"px; height:"+h+"px;'>";
      objStr +="    <param name='base' value='.' />";
      objStr+= "    <param name='showLiveConnect' value='true' />";
      objStr +="    <param name='allowScriptAccess' value='always' />";
      objStr +="    <param name='movie' value='"+url+"' />";
      objStr +="    <param name='FlashVars' value='"+vars+"' />";
      objStr +="    <param name='wmode' value='"+win+"' />";
      objStr +="    <param name='menu' value='false' />";
      objStr +="    <param name='quality' value='high' />";
      objStr +="    <p>"+alt+"</p>";
      objStr +="  </object>";

  document.write(objStr);
}

<head>
  <script type="text/javascript" src="movie.js"></script>
</head>
<body>
<h3>Direct Flash Write</h3>
<script type="text/javascript">
<!--
  flashWrite('club_day.swf','645','294','','window','대체 텍스트 또는 이미지');
//-->
</script>
</body>

위 소스는 흔하게 돌아다니는 플래시 삽입 코드에 신현석님의 'Flash Object 표준으로 삽입' 내용을 참고하여 수정한 것입니다. 기존 코드에 있던 embed 태그를 제거하고, 비IE 브라우저를 위한 표준 Object 용법을 IE Conditional Comments 로 처리하여 적용하고 있습니다. 그리고 대체 문자나 이미지를 포함할 수 있도록 함수에 alt 인자를 추가하였습니다.

위의 코드가 플래시 무비를 본문(body 요소) 안에서 script 태그를 직접 작성하여 호출하는 방법이라면 아래 코드는 head 요소 안이나 body 마지막 영역에서 함수 호출과 함께 본문에 플래시 무비를 삽입할 수 있는 방법입니다.
/*
  Func. Name : Remote Flash Write

  ex)
  window.onload = function()
  {
    document.getElementById("ID Value").innerHTML = flashWrite2(url, w, h, vars, win, alt);
  }
*/
function flashWrite2(url, w, h, vars, win, alt)
{

  var id = url.split("/")[url.split("/").length-1].split(".")[0];
  if(vars == null) vars='';
  if(win == null) win='opaque';

  var objStr = "     <object ";

  if(navigator.appName.match("Internet Explorer")){
      objStr += "classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'";
  } else {
      objStr += "type='application/x-shockwave-flash' data='"+url+"' ";
  }
      objStr +="     id='"+id+"' style='width:"+w+"px; height:"+h+"px;'>";
      objStr +="    <param name='base' value='.' />";
      objStr+= "    <param name='showLiveConnect' value='true' />";
      objStr +="    <param name='allowScriptAccess' value='always' />";
      objStr +="    <param name='movie' value='"+url+"' />";
      objStr +="    <param name='FlashVars' value='"+vars+"' />";
      objStr +="    <param name='wmode' value='"+win+"' />";
      objStr +="    <param name='menu' value='false' />";
      objStr +="    <param name='quality' value='high' />";
      objStr +="    <p>"+alt+"</p>";
      objStr +="  </object>";

  return objStr;
}

<head>
  <script type="text/javascript" src="movie.js"></script>
  <script type="text/javascript">
  <!--
  window.onload = function()
  {
    document.getElementById("feel").innerHTML = flashWrite2('club_daㅇy.swf','645','294','','window','<img src="alt_img.png" width="300" height="100" alt="대체 텍스트 또는 이미지" />');
  }
  //-->
  </script>
</head>
<body>
<div id="feel"></div>
</body>

두 방식의 차이를 간단히 설명드리면, 전자의 방식은 가장 흔하게 사용되는 것으로 head 요소 안에 플래시 무비를 삽입하기 위한 함수(function) 코드를 작성 또는 불러오는 스크립트를 작성하게 되고, 본문(body) 안에서 플래시 무비가 나타날 위치에 직접 함수를 불러 적용시키는 방법입니다. 본문 안에 직접 적용하기 때문에 직관적일 수는 있겠으나 html 문서와 스크립트가 섞여 있기 때문에 유지보수에 불편함을 가지며, 내용과 동작의 분리(html과 css의 분리를 내용과 표현의 분리라고 볼 때, html과 javascript는 내용과 동작의 분리라고 볼 수 있음) 입장에서도 바람직하지는 않다고 보입니다.

직접 삽입 방식

직접 삽입 방식

원격 삽입 방식

원격 삽입 방식


후자의 방법은 head 안에 함수의 정의와 호출을 동시에 이루는 방식으로 브라우저에 의해 본문이 모두 로딩된 후에(onload) 함수를 호출하여 지정된 id 값의 위치에 플래시 무비를 삽입시키는 방식입니다. 적절하게 사용한다면 html과 javascript를 잘 분리시킬 수 있으며, 여러개의 플래시 무비를 삽입시킨 경우 사이즈나 플래시 변수 등의 수정을 용이하게 해 줄 수 있습니다. 단, 저속의 회선이나 로딩이 길어지는 경우 플래시 무비가 상대적으로 늦게 뜨는 문제가 있을 수 있습니다.

2008년 8월 1일 금요일

서현에서의 미친 번개

처음으로 미친들끼리 번개를 가졌습니다.

NHN의 정찬명님과 부침개님, 오픈마루의 겨미겨미님, ISEEYOU의 이즈데드님이 함께 했던 자리였고, NHN 서현 사옥앞에서 만나 시원한 맥주와 치킨을 먹고, NHN에서 오랜만에 탁구도 쳤습니다. 세미나나 컨펀러스 등에서는 한번씩 얼굴을 뵙고 인사를 나누긴 했지만 이렇게 사석에서 술잔을 마주하고 이야기를 나눠본 것은 처음이라 참 즐겁고 좋았던 것 같습니다.

다들 저보다 훌륭하고 멋진 기술과 생각을 갖고 계신데 앞으로도 많은 도움과 조언~! 부탁드릴게요~

그리고 탁구! 다음에는 좀 더 제대로 붙어봐요~!