나라디자인

‘서울신문‘ 에서 ‘안동시청 홈피 세계 웹표준 W3C획득‘ 이라는 기사를 보니 처음에는 웃음부터 나왔습니다. ‘홈피’ 는 또 뭐고 ‘W3C획득’ 은 또 무엇인가? 라면서 말이죠. 기사의 내용이나 의도는 짐짓 추측할 수 있었지만 제목 선정이나 내용에는 다소 전문성이 부족해 보였다는 생각입니다. 물론 해당 기사를 작성하신 기자분께서 이 분야에 능통한 전문가이기를 바라는 것까지는 무리가 있겠으나 ‘홈피’ 라는 단어는 ‘웹사이트’ 라고 표기하고 ‘세계 웹 표준 W3C획득’ 이라는 부분은 ‘W3C의 국제 웹 표준 권고안 준수’ 라고 표현하는 것이 적절해 보입니다. 보도자료를 내보낸 관계 공무원 탓일까요? 아무튼 오늘은 그것이 중요한 화재거리는 아니고 관심분야를 다루어 준 것에 감사하며 의미있는 기사라고 생각됩니다.

개편된 안동시 웹사이트는 문서형으로서 XHTML Strict.dtd 를 사용하고 있었고 charset 으로 utf-8 이 적용되어 있었습니다. RSS도 지원하구요. 흥분되는 마음으로 즉시 달려가서 몇가지 검사를 해보았습니다. 모든 페이지를 종합적으로 검사한 것이 아니라 표본이 될만한 몇개의 페이지만 검사해보았습니다.

마크업 유효성 자동 검사(Markup Validation)

• 초기화면
  http://www.andong.go.kr/open_content/ko/ | Passed validation
• 전자민원창구>종합민원실
  http://www.andong.go.kr/open_content/ko/electron_popular/public_service_center/public_service_center_guidance/ | Failed validation, 1 errors
• 생활정보>재난안전관리
  http://www.andong.go.kr/open_content/ko/life/disaster/life_civilian_defense/define/ | Failed validation, 5 errors

의미론적 마크업 수동 검사(Semantic Markup)

• 제목 태그
  사이트 로고와 콘텐트의 제목에 제목태그를 전혀 사용하지 않음.
• 목록 태그
  목록태그를 적절하게 사용하고 있었으나 글로벌 메뉴의 목록을 플래시로 처리하였고 제목태그로 처리되어야 할 부분을 첫 번째 목록 또는 span 으로 처리하였음.
• 테이블 태그
  레이아웃용 테이블을 사용하지 않았으며 데이터 표현에만 사용됨.
• 기타
  의미없는 span 태그가 무분별하게 많이 사용됨.

웹 접근성 수동 검사(Web Accessibility)

• 글로벌 네비게이션 영역을 플래시로 처리하였고 대체수단(Text 메뉴 또는 Text 버전의 웹사이트)를 제공하지 않아 스크린리더 사용자(시각장애인)는 결국 웹사이트 항해가 불가능함.
• 글을 작성하려면 실명인증서비스를 받아야 하는데 이때 ActiveX 설치를 요구하고 있어 IE 브라우저에서만 글쓰기가 가능함. 또한 실명 인증후 엉뚱한 페이지로 넘어가서 실명인증 과정을 마칠 수 없음.(IE6은 통과, IE7에서 문제됨.)
• 플래시로 처리된 ‘생활정보>정보화교육’  메뉴의 버튼에는 액션이 잘못 걸려있어서 아무런 반응도 하지 않음.
• 점프메뉴에 ‘GO’ 버튼이 없어서 시각장애인들은 점프메뉴를 탐색할 수 없음. 방향키를 이용하여 첫 번째 ‘option’ 을 선택하는 순간 즉시 해당 웹페이지로 이동하기 때문이며 점프메뉴는 이렇게 처리되어야 함.

행정기관홈페이지구축운영표준지침 1.0

• /open_content/ 라는 폴더 명칭을 사용한 것은 ‘오픈디렉토리 표준 명명 지침’ 에 따른 것으로서 매우 바람직한 모습. 다른 기관이나 개인은 ‘오픈디렉토리 표준 명명 지침’ 에 따라서 특정 페이지의 URL이 어떤 페이지인지 쉽게 추측할 수 있게 되고 웹사이트 개편시 이것을 다시 변경하지 않는다면 사용자는 이 URL을 장기간 신뢰할 수 있게 됨.
• 다만 아래와 같이 ‘public_service_center’ 라는 키워드를 중복해서 사용하는 방식은 URL이 너무 길어지고 복잡해지게 되므로 바람직 하지 않아 보임. 기억하기 쉽게 우측과 같이 줄이는 것이 좋음.
  /public_service_center/public_service_center_guidance/ → /public_service_center/guidance/

다기종 웹 브라우저 렌더링 검사(Cross Browsing)

IE7, FF2, OP9, SF2 에서 본 안동시 웹사이트의 렌더링

Internet Explorer7	Firefox2	Opera9	Safari2

Internet Explorer7, Firefox2 에는 거의 문제가 없으나 Opera9 와 Mac OS X 전용 브라우저인 Safari2 에서 레이아웃이 크게 깨지는 현상이 발견됨.

총평

웹 표준을 지키려고 노력한 흔적은 보이지만 웹 표준 ‘문법’ 만을 준수한 것이 아쉽습니다. 웹 표준은 ‘웹 표준 문법+시멘틱 마크업’ 을 모두 만족하였을 때 이루어 집니다. 그리고 이렇게 웹 표준을 지키는 이유는 보다 상위의 목적인 ‘웹 접근성’ 을 향상시키기 위함인데 이번 프로젝트와 같은 경우 웹 표준 문법이 준수되기는 하였지만 접근성 측면에서는 기존의 웹사이트와 별반 다를것이 없습니다. 불과 몇가지 요인들(플래시UI, ActiveX…) 때문에 그렇습니다.

플래시 메뉴 때문에 시각장애인들은 여전히 네비게이션 할 수 없고 IE 브라우저를 사용하지 않는 사람들은 실명인증을 받기위해 결국 다시 IE 브라우저를 사용해야만 합니다. IE 브라우저를 사용할 수 밖에 없도록 만드는 것은 ‘행정기관 홈페이지 구축운영 표준지침’ 에 수록된 ‘한국형 웹콘텐츠  접근성지침(KWCAG 1.0)’ 의 네번째 항목 ‘구성한 콘텐츠는 웹 브라우저의 종류, 버전 등에 관계없이 사용될 수 있어야 한다.’ 라는 지침에 위반됩니다.

따라서 플래시 메뉴는 텍스트 또는 이미지로 전환하는 것이 바람직하고 이 때문에 별도의 Text 버전 웹사이트를 구축하는 것은 바람직 하지 않습니다. 또, 실명인증을 위하여 주민등록번호를 입력하도록 강요하는 것은 행자부의 보안지침에도 위반되는 것으로 알고 있습니다.

음성합성장치(TTS)가 없는 부분은 칭찬하고 싶습니다. 일반적인 지자체의 경우 시각장애인을 위한답시고 너도나도 이것을 도입하면서 오히려 시각장애인들의 웹서핑을 방해하고 있습니다. TTS는 일반인들의 생각과는 달리 시각장애인에게 혐오스러운 존재로서 오히려 접근성을 떨어뜨리게 되므로 이를 탑제하지 않은것은 현명한 선택입니다.

마크업 유효성 검사결과 오류로 나타난 페이지를 보면 ‘width’ 라는 속성을 ‘widht’ 라고 스펠링을 잘못 표기한 것을 발견할 수 있는데 이는 ‘드림위버를 이용한 Markup Validation 검사‘ 만으로도 충분히 해결이 가능 합니다.

웹 표준 문법을 준수하여 대부분의 페이지가 Markup Validation 검사를 통과할 수 있도록 노력한 부분과 ‘행정기관홈페이지구축운영표준지침’ 에 따르고자 애쓴 흔적은 타 지자체의 귀감이 될것 같습니다. 첫 술에 배부를 수는 없겠지요. 다음번에는 더욱 잘 해내시리라 믿습니다.

관련기사

공공기관 웹 접근성 수준 전반적 향상. ‘06.12.21.
http://www.zdnet.co.kr/news/spotnews/internet/etc/0,39040060,39154033,00.htm