웹사이트 접근성 증진을 위한 소고(小考)

요즘 들어 웹 접근성 관련한 글을 많이 쓰게 되네요.. KIPA에 기고한 글입니다. 무단 전재(?)를 하시기 전에 링크 걸어 주시고 코멘트로 알려주세요^^

I. 들면서
웹이 국내에 들어온 지 벌써 10년이 되었다. 웹을 처음 발명한 Tim Berners-Lees는 CERN연구소의 수 천명 연구자들이 이기종 OS와 개발 환경에서 정보를 공유할 수 있도록 기종이나 환경과 상관없이 어떤 컴퓨터에서도 정보 자원에 접근할 수 있는 웹을 만들게 되었다. 이러한 웹의 근본 취지에는 보편적 디자인(universal design), 보편적 접근(universal access) 개념이 뿌리내려 있으며 웹을 사용하고 접하는 다양한 환경과 사람들을 위해 공통적인 정보 소통 통로를 만드는 것은 정보의 가치와 비례하여 중요하다고 하겠다.

우리들 중에는 노인, 장애인, 어린이 등의 다양한 계층과 윈도우, 매킨토시, 리눅스 등 다른 OS, IE와 파이어폭스, 오페라 등 다른 브라우저를 사용하는 사람이 존재한다. 또한, 향후 TV 브라우저, PDA 등의 다양한 휴대 기기를 사용하는 사람과 시력이 약해서 화면을 확대해 봐야 하는 사람들이 있다. 다양한 사용자들이 어떻게 하면 편하게 웹을 이용할 수 있을까? 어떻게 하면 저비용으로 접근성 문제를 해결할 수 있을지를 고민하여 실마리를 풀어 나가야 한다. 특정 플랫폼의 사용자만이 향유할 수 있는 웹을 만들면 만들수록 더 많은 정보가 웹으로 쏟아져 나오기 때문에, 장애인, 노인, 외국인, 매킨토시 사용자, 리눅스 사용자는 점점 더 소외 계층으로 전락하여 이른바 정보화의 폐해가 드러나게 되기 때문이다.

II. 웹 접근성을 확보하기 위한 세 가지 방안

1) 표준을 지켜라.
전 세계적인 웹 기술 표준을 주도하고 있는 W3C의 HTML4.1, XHTML1.0, CSS1/2, DOM 등의 구현 스펙이 매우 상세하고 이를 지원하는 브라우저들이 계속 늘어 남에 따라 더 이상 웹페이지가 다르게 보이거나 동작하지 않는 현상은 거의 사라지게 되었다. 다만 웹브라우저간 이종 기능이 아직은 상존하고 있고 예전에 개발되어 사용된 오래된 브라우저 사용자들의 불편함을 고려해 같은 기능이라도 호환 가능하도록 해 주는 표준을 통한 웹페이지 제작이 요구되고 있다.

그러나 이것이 웹브라우저에서 지원하는 버전 호환성 유지(backward compatibility)라는 괴물과 충돌하게 된다. 일반적으로 프로그램을 개발할 때, 버전이 올라가면 갈수록 새로운 기능을 추가하고 이전 기능은 폐기하게 된다. 그러나 사용자의 측면에서는 예전 기능을 계속 유지해 주어 개발 호환성을 유지해 줄 필요성이 생긴다. 즉, 버전 호환성 유지는 예전에 사용되는 기능이나 태그를 그대로 사용하도록 해 주는데 이 때 사용된 비표준 문법들이 계속 확대 재생산 되어 결국 접근성에 심각한 위해를 주게 된다. 여기에는 취약한 우리나라 웹 생산 시스템의 문제도 있다. 주로 나모 웹 에디터, 드림 위버와 같은 저작 도구에 의존하여 표준을 무시하고, 그냥 남의 코드를 따다가 적당히 익스플로러에서만 돌려보고 개발을 끝내는 풍토와 그런 정보 가공자들을 계속 양산 하는 교육 시스템에 문제가 있다.

이와 반대로 XHTML 1.x이나 HTML 4.x 표준에 맞추어진 문서는 99% 접근성이 높은 사이트들이다. 기존에 흔히 사용되는 table 구조를 div 바꾸고 font, b 같은 태그들을 스타일시트(CSS)로 사용하게 되면, HTML 코드 양은 약간 과장해서 반 이하로 줄어든다. 구조와 표현이 엄격히 분리되면, 사이트의 로딩 속도도 빨라지며, 코딩과 유지 보수의 효율성은 두 배로 늘어난다. 표준을 지킨 사이트에서는 오히려 코드의 양이 줄고 속도가 늘어나며 재개발 효율성이 증대 된다.

2) 구조와 표현을 분리하라
웹표준에서 HTML과 함께 중요한 또 다른 요소인 스타일시트(CSS)는 단순히 링크의 색상, 글자 모양 바꾸는 정도만 할 수 있는 것이 아니고, 문서의 배치, 여백 조정, 색깔, 요소 자체의 성격 변화, 클래스를 통한 디자인의 일관성 확보, 서로 다른 미디어에 따른 최적화된 디자인 템플릿 적용 등 이루 말할 수 없이 많은 역할을 할 수 있다.

HTML에서는 철저하게 구조화된 마크업만을 사용하고, 모양이나 디자인에 관한 것은 CSS로 완전히 분리함으로써, 구조는 변하지 않은 채 여러 가지 디자인을 적용한다거나, 상황에 따라 쉽게 디자인을 변경하는 것이 가능해진다. 또한, 똑같은 디자인 템플릿에 다른 내용을 담는 여러 가지 문서를 만드는 것도 가능해진다. 또는 디자인에 전혀 영향을 주지 않고 문서의 내용을 바꾸는 것이 쉬워지기 때문에  장애인의 접근성에 엄청난 도움을 준다. 예를 들어, 한 개의 HTML 문서에 시각 장애인용 CSS와 텍스트용 CSS 그리고 기존의 CSS 등 세 개의 스타일시트를 만들어 변경해 줌에 따라 문서의 구조가 내용과 섞이지 않고 제공 될 수 있다.

우리나라 대부분의 웹사이트들이 문서의 구조적인 요소인 h1, ul, strong, blockquote, cite 등 보다는 font, table, br 등의 요소가 의미적인 내용과 섞여 있어 문서 중에서 도대체 어떤 것이 중요한 지, 제목에 해당되는 지, 강조할 것과 인용된 것이 어떤 것이지 하는 것을 이해할 수 없게 된다.  문서의 내용이 구조화 되어 있지 않다는 것은 결국 장애인용 보조 기기, 또는 PDA, TV, 음성 브라우저 등을 통해서도 접근할 수 없거나, 접근했을 때에 바른 결과를 얻어 낼 수 없다는 이야기가 된다. 디자인 요소가 CSS로 완전히 분리되면, 의미 있고 구조화된 내용만 남게 되며, 문서의 표현에도 제약 사항이 발생하지 않게 되는 것이다. 최악의 경우, CSS가 제거되어도 의미를 이해하는 데에는 아무런 문제가 없게 되며 이것이 접근성 문제를 해결하는 기초가 된다.

3) 최소한의 디버깅을 거쳐라.
W3C에서 제시한 HTML 혹은 XHTML 표준을 지키고, CSS를 통해 구조와 표현을 분리하였다 하더라도 이것을 검증해 볼 수 있는 방법이 없다면 역시 그 문제 해결이 쉽지 않을 것이다. 다행히 W3C에서는 이러한 문제를 검증 해주는 유효성 검사(Validation) 도구들이 제공되고 있다. doctype에 규정된 문서 형식에 따라 유효한 코드가 사용되었는지를 알 수 있게 해준다. (http://validator.w3.org)
HTML과 XHTML 문서 뿐만 아니라 CSS 역시 자신이 사용한 표현식과 문법이 제대로 되어 있는지 알려 주는 도구가 존재 한다. (http://jigsaw.w3.org/css-validator/) 처음 이 검사기를 돌려 보면 수 많은 문제들이 나오게 될 수도 있다. 그러나 대부분의 문제들은 요소를 따옴표 등으로 묶지 않았거나, ?, & 같은 특수 문자를 특수 코드로 쓰지 않는 등 반복되는 몇 가지 실수를 포함 하고 있으므로 간단한 수정 만으로 유효성 검사를 통과 할 수 있다.

또한, 문서 안에 들어 있는 요소를 객체화 시켜 사용하는 DOM(Document Object Method)과 이를 이용하는 자바 스크립트(JavaScript) 등을 사용하는데 있어도 표준 문법을 사용했는지 확인하는 과정이 필요하다. 오픈소스 브라우저인 Mozilla Firefox의 탑재된 자바 스크립트 디버거 만으로도 인터넷 익스플로러와 공통으로 생기는 문제점을 발견 해결할 수 있고, 비표준으로 사용된 문법을 판별해 낼 수 있다. 그러나 웹사이트 가공자들이 이러한 디버깅 과정을 빠뜨리고 납품을 하거나 완성하는 경우가 대부분이기 때문에, 웹 사이트 관리자들이 검수(Quality Assurance) 과정에서 이러한 유효성 통과와 표준 문법 사용 검증 결과를 첨부하도록 가이드 한다면 보다 좋은 품질을 가진 결과물을 얻을 수 있을 것이다.

II. 웹 접근성에 대한 세가지 오해

1) 화려하고 세련된 웹페이지를 만들 수 없다.
흔히들 우리나라 웹페이지는 외국보다 역동적이고 화려하게 하는 것을 좋아하기 때문에 접근성을 강조하면 그것을 달성하기 어렵다고들 한다. 그러나 어떠한 접근성 지침에서도 그림이나 멀티미디어 쓰지 말라고 하지 않으며, 그림을 못 보는 사람들을 위해 대체 텍스트를 함께 넣으라는 것뿐이다. 레이아웃 장식을 위해 그림을 많이 사용하는 경우, CSS의 배경(background)으로 그림을 넣어버리면 가능하며 플래쉬를 이용해 메뉴를 구성 하는 경우, 대체 텍스트 메뉴를 플래쉬를 표현하는 object 사이에 포함시켜 주기만 해도 된다. 접근성 높은 사이트가 온통 텍스트로만 구성된 지루하고, 멋없는 사이트라고 생각하는 것은 잘못된 편견이다. 접근성 지침에서 결코 디자인과 타협하거나 상충되는 부분은 거의 없으며, 이미 CSS를 활용한 외국의 사이트들은 접근성이 높으면서도 화려하고, 깔끔한 사이트가 대부분이다. 우리 나라는 오히려 웹 서비스 가공자들에 대한 재교육 부재와 기존의 비효율적이고 표준을 활용하지 못하는 작업 행태에서 문제가 시작 되는 것이다.

2) 접근성이 높은 사이트는 비용이 훨씬 증가한다.
물론 기존에 접근성을 전혀 고려하지 않고 만든 사이트를 고치려면 상당한 비용이 들어가는 것이 사실이다. 그러나 대부분의 웹사이트들이 여러 번 리뉴얼이라는 과정을 통해 계속 변경하고 있으며, 이러한 리뉴얼을 시작할 때 처음부터 접근성을 염두해 두고 엄격한 웹 표준에 입각해 개발하면, 결코 비용이 많이 들어가지 않는다.

이렇게 개발된 접근성이 높은 사이트를 다시 재개발하는데 드는 효율성도 매우 높다. 왜냐하면, 구조와 표현을 분리하여 만들어져 있으므로, 컨텐츠 담당자는 오로지 구조와 내용에만 신경을 쓰고, 디자인 담당자는 내용을 표현하기 위한 외양적 디자인에만 관심을 기울일 수 있기 때문이다. 프로그래머는 이미 HTML과 CSS로 UI가 분리되어 있으므로, 복잡한 HTML 코드를 이해하고 다뤄야 하는 대신 프로그램 코드에만 신경 쓰면 된다. 즉, 내용이 바뀌면 디자인까지 다 뜯어고쳐야 한다거나, 디자인이 바뀌면서 내용이 타협을 해야 한다거나 하는 일들이 줄어들게 된다. 그리고 한 번 이렇게 만들어진 사이트를 다른 사람이 유지 보수를 할 때에도 소스 코드도 훨씬 이해하기가 쉽고 간결해서 완전 재개발 해야 하는 경우가 발생하지 않아 유지 보수 비용도 줄일 수 있다.

3) 특수 계층을 위한 별도의 사이트가 필요하다.
가뜩이나 다수의 논리에 의해 소수는 쉽게 무시되어버리는 우리 나라 사회에서 웹 접근성을 이야기하면 효율과 속도를 중시하는 풍조에서 누가 과연 몇 퍼센트나 있을 지 모르는 장애인과 매킨토시, 리눅스 사용자와 비 IE 사용자를 배려할 수 있을 것인가라는 의문을 제기한다. 그리고는 마치 그들을 위해 뭔가 선심이라도 써야 할 듯이 별도의 사이트를 만들고 비용과 인력을 들여야 할 듯이 말한다. 웹에서 표준안의 사용과 접근성 가이드에 대한 준수 만으로도 이들 계층들을 위한 별도의 웹사이트는 필요치 않다. 별도의 사이트를 만드는 것이야 말로 오히려 비용을 증가 시켜 효율성을 떨어 뜨리는 것이다.

접근성이 높은 웹사이트는 결코 이들 특수 계층에게만 좋은 것이 아니다. 사용 편의성이 높아지고, 문서가 분명하며 이해하기 쉽게 되면 아이들이나 노인들에게도 도움이 되며, 이것을 개선하여 작업하는 웹 사이트 운영자도 편해 진다. 곳곳에 설명 도구(tooltip)들이 생겨서 일반인들에게도 웹을 친근하게 사용하는 데에 도움이 되며, 그림과 멀티미디어 요소가 의미있는 대체 텍스트를 달게 하면 검색 엔진이 그림과 멀티미디어를 일반인들이 검색하는 데에 큰 도움을 준다.

IV. 맺으면서
최근에 국내에 공개 소프트웨어 활성화 정책과 아울러 IE에 심하게 종속되어 있는 공공 기관 및 일반 웹사이트에 대한 개선 바람이 일어나고 있는 것은 매우 긍정적이라 하겠다. 그러나 비용의 증가와 재개발에 대한 비효율성, 웹 사이트 가공자들의 저항을 염려하는 경향도 존재 한다. 그러나 표준안을 엄격히 준수하고, 내용과 표현을 잘 분리하여 개발된 사이트를 최종적으로 검수 하는 과정을 반복하여 고품질의 정보 체제를 만드는 일이야 말로 매우 중요한 일이며, 이것이 궁극적으로는 비용의 감소와 함께 보다 접근성이 강조된 효율적인 웹 서비스 체계를 만드는 것이라고 생각한다.

[KIPA Report 2004 겨울호, 한국 소프트웨어 진흥원]

Disclaimer- 본 글은 개인적인 의견일 뿐 제가 재직했거나 하고 있는 기업의 공식 입장을 대변하거나 그 의견을 반영하는 것이 아닙니다. 사실 확인 및 개인 투자의 판단에 대해서는 독자 개인의 책임에 있으며, 상업적 활용 및 뉴스 매체의 인용 역시 금지함을 양해해 주시기 바랍니다. (The opinions expressed here are my own and do not necessarily represent those of current or past employers. Please note that you are solely responsible for your judgment on checking facts for your investments and prohibit your citations as commercial content or news sources.)

- ;

여러분의 생각 (5개)

  1. 까먹기 싫어! 말해보세요:

    웹 싸이트 접근성에 대한 소고
    모질한 한글화 프로젝트의 차니님 블로그에 올라온 글이다.

    우리나라도 이젠 접근성에 신경써야 할 때가 오지 않았나 싶다..

    원문 : http://channy.creation.net/blog/tb.php?tb_id=102

  2. 벼리 말해보세요:

    좋은 글입니다.. 다만 논외의 얘기 일지는 모르겠으나..
    주로 나모 웹 에디터, 드림 위버와 같은 저작 도구에 의존하여 표준을 무시하고 라는 말은 무리가 있지 않을까요.. 나모나, 드림위버(저는 드림위버를 사용합니다.)가 표준을 무시하게 만드는 것이 아니라.. 드림위버 사용의 오용으로 인하여 표준에 어긋난 결과가 나오는 것 일꺼라 생각됩니다. [Link]

  3. 용가르이 말해보세요:

    동의 합니다.
    실제로 한국 Portal 사이트들은 너무 나 많은 Active X 사용과 호환성이 떨어지는 프로그램밍으로 오히려 사양이 낮은 컴퓨터나 컴퓨터 지식이 적은 유저들의 접속을 막고 있습니다.
    위에 벼리님 말씀또한 동의 합니다. Dreamweaver는 그야 말로 말그대로 tool입니다.
    Tool을 어떻게 사용하느냐에 따라 작품이 표준화가 되느냐 마느냐 입니다.

    [Link]

  4. 컴퓨터는 아름다워 말해보세요:

    접근성을 고려한 웹 싸이트 기획..
    접근성을 고려한 웹 싸이트 기획..
     
    많은 밴츠마킹과 현재 운영중인 싸이트의 로그 분석을 통해 철저히 기획되어야 하겠죠?
    결코 쉽지 않은 것이라 생각해요..
    좋은 글이라 트랙백했습니다.~