쏭군은 열정 드리머

종종 웹표준화 작업을 하다보면 양이 방대해서 다른 UI개발자 분들과 협업을 할 때가 있습니다. 실력이 좋다고 소개를 받고 함께 일을 해보면 실제 명성보다 실력이 떨어지시는 분들이 많습니다. 온라인 상에서 유명한 분들임에도 불구하고, 막강한 이론 지식보다 필드에서 실력이 떨어지는 분들이 많은 것 같습니다. 그 분들께서 가장 많이 착각하시는 부분 중 하나가 W3C에서 제공하는 밸리데이터를 통과하면 웹표준을 지킨 사이트라고 믿는 것 입니다.

큰 그림을 봐야합니다, 명성에 비해서 실제 실력이 형편없는 분들이 많아
작은 부분들에 집착하여 작은 부분들에 대한 지식은 뛰어난데, 큰 그림을 보지 못하는 분들이 많습니다. 물론, 작은 부분들 모두 접근성과 표준에 부합하도록 페이지를 제작하는 것은 중요합니다. 그리고 그것은 기본입니다. 그러나, 큰 그림을 그리는 것 역시 중요합니다. 웹페이지는 하나의 문서입니다. 워드프로세서로 작성하는 문서를 생각해보세요. 문서의 큰 제목이 있고, 작은 제목이 있고, 그 아래에는 또 작은 제목이 있고, 컨텐츠들은 제목에 맞도록 순서대로 술술 읽혀야 합니다. 웹페이지 역시 그렇습니다. CSS를 깨보고 문서가 술술 읽혀야 됩니다. 물론 의미에 맞도록 술술 읽혀야 됩니다. 구석구석 밸리데이터은 통과하지만 큰 그림에서 문서의 구조가 엉망인 페이지를 만들고 웹표준을 지킨 웹사이트라고 고객에게 돈을 받고 영업을 하는 사례도 있더라구요.

핵심은 '시각장애우'
앞을 못 보는 분들께서 웹사이트를 이용한다고 생각해봅시다. 그 분들은 웹페이지를 이용하는데 전적으로 소리에 의존할 수 밖에 없습니다. 이를 위해서 웹표준에 의한 웹접근성 준수가 이루어져야 하는 것 입니다. 물론 표준을 지키면 다양한 기기에서 웹페이지를 이용할 수 있게 된다는 장점도 있지만 핵심은 시각장애우 분들께서 웹페이지를 편안하게 이용할 수 있나? 하는 것 입니다.

돈 받고 작업해 준 사이트가 웹접근성 준수율은 낙제점
웹서핑을 하다가 우연히 웹표준화 전문 서비스를 해주는 업체를 찾아냈습니다. 제 블로그에 있는 포스팅을 그대로 복사해가서 본인들의 영업용 자료로 쓰고 있었습니다. 그리고, 그 사이트는 일단 본인들의 웹사이트 조차 웹표준이 준수되어 있지 않았습니다. 물론 XHTML과 CSS, Java Script Validator는 통과되어 있었지만, 페이지를 찬찬히 뜯어보면, 시각장애우분들이 제대로 이용할 수 없는 사이트였습니다. 그 회사의 이름을 밝히지는 않겠습니다만, 그 회사에서 작업한 사이트 하나를 소개해드리겠습니다.

그 회사에서 표준화 작업을 했다고 하는 결혼정보업체 '선우'의 홈페이지 입니다. (https://www.couple.net/)

XHTML페이지를 뜯어보았습니다. Validator는 통과했습니다. 그러나 문서의 구조는 100점 만점에 20점 정도 밖에 안되는 수준이였습니다. 도저히 문서의 구조와 형체를 알아볼 수 없을 정도로 웹페이지를 만들어 놓았습니다. 웹페이지 설계의 실패이고, 웹접근성은 낙제점수 입니다.


좌측에 있는 스크린샷이 결혼정보업체 선우에서 웹표준 전문 업체에 맡겨서 작업을 완료했다는 웹페이지의 모습입니다. 웹페이지의 문서 구조를 이해하기가 어렵습니다. 일단 문서의 설계 자체가 잘못되어 있습니다. 저라면 오른쪽의 모습처럼 웹페이지를 설계 했을 것 같습니다. (5분 정도 시간내어 선우의 XHTML페이지를 만들어 보았습니다.)

일단 문서의 구조가 잘못되었으니, 의미있는 마크업은 거의다 빠져있다고 보시면 됩니다. 이렇게 문서의 구조화가 엉망인 페이지는 SEO도 잘 안된다고 보시면 됩니다. 하지만 업체에서는 웹표준화를 통해서 SEO도 해준다고 홍보하고 있군요. 위의 부분 외에 세세한 부분들도 너무나 시정할 부분이 많지만, 일단 간단하게 몇 군데만 맛배기로 짚어보고 가겠습니다.


'스페이서'이미지를 덕지덕지 사용하였습니다. 이렇게 되면 CSS코딩 할 필요가 없어집니다. 페이지 곳곳에 스페이서 이미지가 접근성을 저해합니다. 이 이미지들이 링크를 대체하고 있습니다.


선우에서 방문객들에게 전하는 메세지 '풍성한 추석되세요'부분은 이미지에 alt태그가 적용되어 있지 않아서, 시각장애우 분들은 이 내용을 전혀 인지할 수 없습니다.

뿐만 아니라, 사이트 로고에는 alt가 적용되어 있기는 하나, alt의 내용은 '로고'입니다. 이 역시 의미에 맞지 않습니다. '선우 홈페이지 바로가기' 정도만 해두었어도 좋을 듯 싶습니다.


로그인 박스 부분은 접근성이 현저하게 떨어집니다. 우선 Tab-index가 엉망입니다. 아이디를 입력하고 패스워드를 입력한 다음 탭을 누르면 탭이 일시적으로 다른 곳으로 포커싱이 되었다가 다시 탭을 눌러야 로그인 버튼으로 돌아옵니다. 그리고 폼 요소는 fieldset 태그로 묶어서 처리하는 방법이 옳을 듯 싶습니다. 그리고 자바스크립트 창이 뜨는 것 역시 좋지 않습니다.

이 밖에도 지적할 부분이 너무 많지만 지면상 줄입니다.

제가 이 'V모사'에 화가 나는 이유는 몇 가지가 있습니다만, 우선은 본인들이 만든 컨텐츠가 아니면서도 이를 영업에 이용하고 있다는 점 때문입니다. 웹표준화 작업 이외에도 위젯마케팅이니 뭐니 다른 사업 부분도 영위한다고 하는데, 제품이나 서비스 설명은 죄다 다른 곳에서 퍼온 이미지나 자료들입니다. 위젯 마케팅은 제가 이전에 근무했던 인사이트미디어의 위젯을 그대로 가져다가 사용을 했더군요.

그렇지만, 궁극적으로 제가 화나는 이유는 따로 있습니다.

팀장님 눈가리고 고객 눈가리고 아웅하면 그만?
업체에서 일하시는 분들중에도 팀장님이 잘 모른다고, 대강대강 코딩해서 페이지를 개발팀에 던져버리는 경우를 종종 목격했습니다. 그리고 웹표준화나 접근성을 가지고 사업을 하시는 분들 역시 위의 사례처럼 대강 밸리데이터만 통과 시키고 고객에게 작업물을 넘겨버리는 경우를 종종 목격합니다. 소위 말하는 '이빨까기'의 달인들이 이런 행각을 많이 합니다.

그런 분들에게 감히 한 말씀 드리고 싶습니다. 프로페셔널 해지십시오. 스스로에게 말입니다. 웹접근성이라고 하는 것은 일단 다른 이점도 많지만, 시각장애우분들의 권리를 지켜준다는 점에서 소중한 작업입니다. 시각장애우분들이 웹에 투자하는 시간은 일반인들의 상상을 뛰어넘습니다. 이제야 그 분들께서 웹사이트를 편안하게 이용할 수 있는 분위기가 조성되어 가고 있습니다.

헌데, 여러분들께서 눈가리고 아웅하는 방식으로 땜질해버린 웹사이트는 여전히 그 분들이 이용하는데 불편함이 많이 생깁니다. 앞을 못 보는 그분들에게 희망과 꿈과 편리함을 준다는 사명감으로 임하셔야 합니다. 엉망으로 만들어진 사이트는 후에 반드시 대가를 치르게 될 것 입니다.

웹접근성이나 웹표준이 생각만큼 쉽지 않습니다. 이렇게 글을 쓰는 저도 많이 배우고 있는 단계입니다. 사업을 시작하는 분들도 부디 생각을 잘 하시고 일을 시작하셨으면 좋겠습니다.