종종 웹표준화 작업을 하다보면 양이 방대해서 다른 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모사'에 화가 나는 이유는 몇 가지가 있습니다만, 우선은 본인들이 만든 컨텐츠가 아니면서도 이를 영업에 이용하고 있다는 점 때문입니다. 웹표준화 작업 이외에도 위젯마케팅이니 뭐니 다른 사업 부분도 영위한다고 하는데, 제품이나 서비스 설명은 죄다 다른 곳에서 퍼온 이미지나 자료들입니다. 위젯 마케팅은 제가 이전에 근무했던 인사이트미디어의 위젯을 그대로 가져다가 사용을 했더군요.
그렇지만, 궁극적으로 제가 화나는 이유는 따로 있습니다.
팀장님 눈가리고 고객 눈가리고 아웅하면 그만?업체에서 일하시는 분들중에도 팀장님이 잘 모른다고, 대강대강 코딩해서 페이지를 개발팀에 던져버리는 경우를 종종 목격했습니다. 그리고 웹표준화나 접근성을 가지고 사업을 하시는 분들 역시 위의 사례처럼 대강 밸리데이터만 통과 시키고 고객에게 작업물을 넘겨버리는 경우를 종종 목격합니다. 소위 말하는 '이빨까기'의 달인들이 이런 행각을 많이 합니다.
그런 분들에게 감히 한 말씀 드리고 싶습니다. 프로페셔널 해지십시오. 스스로에게 말입니다. 웹접근성이라고 하는 것은 일단 다른 이점도 많지만, 시각장애우분들의 권리를 지켜준다는 점에서 소중한 작업입니다. 시각장애우분들이 웹에 투자하는 시간은 일반인들의 상상을 뛰어넘습니다. 이제야 그 분들께서 웹사이트를 편안하게 이용할 수 있는 분위기가 조성되어 가고 있습니다.
헌데, 여러분들께서 눈가리고 아웅하는 방식으로 땜질해버린 웹사이트는 여전히 그 분들이 이용하는데 불편함이 많이 생깁니다. 앞을 못 보는 그분들에게 희망과 꿈과 편리함을 준다는 사명감으로 임하셔야 합니다. 엉망으로 만들어진 사이트는 후에 반드시 대가를 치르게 될 것 입니다.
웹접근성이나 웹표준이 생각만큼 쉽지 않습니다. 이렇게 글을 쓰는 저도 많이 배우고 있는 단계입니다. 사업을 시작하는 분들도 부디 생각을 잘 하시고 일을 시작하셨으면 좋겠습니다.
저도 반니 이용해봤는데, 재밌네요.
요즘 메타서비스들이 우후죽순 생겨나고 있는데, 롱런하는 사이트가 되길 기대합니다.
첫방문이네요. 반갑습니다. ^^
안녕하세요. 저도 팔로우 했습니다~ 좋은 책들을 많이 내시네요~
이전에 쏭군님 반니에 접속했었는데..이제서야 포스팅 하셨군요. 제가 워낙 책을 많이 읽는편이 아니라서 망설이지지만...그래도 좋은 서비스임은 틀림없을것 같아요..예전에 회사에서 반?강제적으로 월단위로 책을 구입해서 읽고 감상평을 자기 블로그에 작성해야 했던 적이 있을때는 그래도 한달에 한권씩은 책을 읽었던것 같은데..이놈의 게으름이...^^;; 암튼...저도 오늘 점심때 짬내서 가입해야봐야겠군요...
에반님 안녕하세요~
에반님과 서재를 공유할 수 있어서 기뻐요~
이 서비스는 트위터 처럼 막 열정적으로 쓰는 사이트는 아니지만 그래도 책 한권씩 읽을때마다 간단하게 기억을 기록하고 다른 분들과 서재를 공유하고~ 뭐 그런 재미가 있는 것 같아요~
팔로우 감사합니다^^
감사합니다. 곧 영화랑 음악 추가되는데 열심히 만들어보겠습니다. ^^
우와~ 골룸님께서 손수 댓글을 주시니 몸둘바를 모르겠습니다~~^^
서비스 재미있어요~ 골룸님 독서량이 엄청나시네요~
관리자만 볼 수 있는 댓글입니다.
팔로우 감사합니다^^
저도 초대장 좀 날려주세요~ 네이트온 메일.ㅎ
이돌키님! 안녕하세요~ 초대장 드렸어요~
활약을 기대하겠습니다.
아하...그렇군요...나중을 생각해서 안내 잘 하시고 사용하시는 것도 방법같아요...^^; 배너...빨리 드려야 할텐데...ㅜ.ㅜ
안녕하세요~~~
배너용^^?
처도.. 초대장 남으면 좀 부탁드려봅니다. ^^
jungkeuny@쥐멜.. 꾸벅~~
초대장 보내드렸습니다~~
관리자만 볼 수 있는 댓글입니다.
초대장 보내드렸습니다.
반니에서뵈용~
관리자만 볼 수 있는 댓글입니다.
아스피린님 안녕하세요~
남겨주신 메일로 초대장 보내드렸어요~
관리자만 볼 수 있는 댓글입니다.
안녕하세요^^
남겨주신 메일 주소로 초대장 보내드렸습니다~
관리자만 볼 수 있는 댓글입니다.
마쿠로님 안녕하세요~ 초대장 보내드렸습니다~
감사합니다^^
안녕하세요;
검색중에 들렀는데 반니에 가입하고싶은데 초대에 의해서만 가능하다고하네요! 초대해주실수있나요?
8bbb8@naver.com입니당^^
하치님 안녕하세요~
방금 반니로 인사 쪽지 보내드렸어요~
관리자만 볼 수 있는 댓글입니다.
제이크님 안녕하세요~
초대장 보내드렸어요~~^^
반니.. 땡기는 서비스인데요.
초대장좀 부탁드립니다..^^
marine884k@naver.com
감솨합니다..^^;
It will be a good step for everyone to put their books of interest at online library. As our hub consists of lot of servers, so you will not feel like missing them.
난이 기사를 사랑
지금 보니까 책장 크게보기가 카테고리 가장 위에 '전체보기' 메뉴로 바뀌어 있네요- ^^
그냥 가입 되는데.. 초대장으로 가입이 가능하다는건 무슨 말씀인가요? 댓글을 보다가 궁금해서 질문드려요 ㅎㅎ