안녕하세요. myID.net 개발팀에서 UI개발을 맡은 유인동입니다.

요즘 웹 표준을 준수한 접근성 높은 웹 사이트를 개발하는 것이 화두인데요. myID.net을 개발하면서 접근성 높은 서비스를 만드는 것이 얼마나 어려운 일인지 새삼 느끼고 myID.net개발의 소감 비슷한 사례를 소개하려 합니다.

국내 최초의 오픈 아이디 서비스 myID.net의 접근성 향상 전략은 웹 표준 개발입니다. myID.net은 모든 OpenID 적용서비스 사용시 우선 사용하게 되는 서비스이므로, 적어도 인증 관련 핵심기능들은 최대한의 접근성을 제공해야만 합니다. W3C에서 제정하여 배포하고 있는 권고안을 지키려 노력하여 보다 효율적으로 접근성 향상을 얻을 수 있었습니다.

Cross Browsing

CSS를 지원하는 브라우저에서 동일한 화면 구성

구조와 표현을 분리하여 CSS에서만 디자인을 담당 하도록 했습니다. 표준 준수를 바탕으로 크로스 브라우징을 위한 약간의 튜닝 작업을 통해 다양한 브라우저 지원을 제공 할 수 있었습니다.

Zoom & Fluid Layout

필요에 따라 글씨 크기와 화면 크기를 자유롭게 변경할 수 있도록 하였습니다.
사용방법은 Ctrl+(확대), Ctrl-(축소) 혹은 Ctrl을 누른 상태에서 스크롤 변경입니다.

접근성을 해치지 않는 자바스크립트의 사용

myID 발급 화면

모든 핵심기능을 서버사이드 언어와 HTML으로 구현 후 사용자 친화적인 UI를 위한 클라이언트 사이드 유효성 검사 등의 기능을 javascript로 추가 개발하는 순서로 작업하였습니다.

보안상 우려로 javascript를 끄고 브라우징 하시는 분들도 myID.net의 모든 기능을 이용하실 수 있습니다.

Disable Images

이미지가 없는 myID.net 메인페이지

이미지가 없는 myID.net 메인 페이지.

컨텐츠가 되는 이미지는 그에 해당하는 대체 텍스트를 제공하고 배경색과 외곽선 등을 활용하여 이미지를 사용 할 수 없는 환경의 사용자에게도 거의 동일한 UI를 제공 할 수 있도록 하였습니다.

이미지 없이 웹 사이트를 이용할 수 있게 되면 시각장애인 뿐만 아니라 저속회선 사용자에게도 이득이 되며 TLOGIN과 같은 종량제 무선 인터넷 서비스를 사용 할 경우에 사용자의 비용절감을 기대할 수 있을 것 같습니다.

Disable CSS

CSS가 없는 myID.net 메인페이지

HTML만으로 의미를 파악할 수 있도록 하고 화면낭독프로그램을 통한 접근이 수월 하도록 컨텐츠의 선형화를 중시하여 개발했습니다.

구조와 표현을 분리하여 HTML의 양을 줄였고 로딩 속도 절감, 회선 비용의 절감, 유지보수 비용 절감 등의 장점을 얻을 수 있었습니다.

접근성

접근성을 해치지 않는 자바스크립트의 사용, 구조와 표현을 분리하고 컨텐츠를 논리적으로 선형화하는 것이 실제로 접근성에 도움이 되는지 테스트하기 위해 화면낭독프로그램 중 하나인 드림보이스를 사용하여 회원가입, 프로필 수정, 간단한 서핑 등을 테스트 해보았습니다.

javascript와 HTML을 분리하는 것이 생각했던 것 보다 더 중요하다는 것을 느낄 수 있었습니다. HTML과 javascript가 명확히 분리되지 않았을 때 숨겨져 버리는 컨텐츠들이 많았고 화면낭독프로그램 등으로 웹을 이용하는데 큰 불편함을 느꼈습니다.

이 과정을 통해 접근성과 컨텐츠의 논리적인 선형화를 다시 한번 생각해보는 계기가 되었고 가입 프로세스의 일부분을 수정하기도 하였습니다.

탁월한 접근성을 제공하는 것은 정말 쉬운 일이 아닌 것 같습니다. 하지만 접근성을 높여가는 일은 어려운 일이 아닌 것 같습니다.

위와 같은 사항들이 잘 지켜지지 않은 부분이 myID.net에 있다면 신고해 주십시오. 위와 같은 사항이 지켜지지 않는 것은 버그입니다.

위의 내용 외에도 접근성을 해치는 부분 또는 개선되었으면 하는 부분들을 알려주시면 적극 반영하고 사례를 공유하여 앞으로 오픈마루가 만들 서비스들에도 적용 될 수 있도록 하겠습니다.

오픈마루 화이팅!! myID.net 화이팅!!

트랙백 주소 :: http://blog.myid.net/trackback/18

  1. Subject: 티로긴(Tlogin) 사용기 - KTX 열차를 타고... 3/5

    Tracked from Bluesky 2009/06/09 12:50  삭제

    으음... 주말이당~! 며칠 전, 광주 출장이 있어 KTX를 이용했습니다. 물론 노트북과 티로긴(Tlogin)은 업무 필수품이다 보니가지고 출발을 했으며, 결론부터말하면 KTX에서 티로긴(Tlogin)으로 끊김없이 웹서핑이 가능했습니다. 다만, 특정 구간에서 소위 렉이라고 하는 데이터 끊김 현상이 있었고 곧 복구되어 정상적으로 사용할 수 있었

  2. Subject: instant payday loans

    Tracked from instant payday loans 2012/11/28 14:01  삭제

    myID.net 공식 블로그 :: myID.net 의 웹 접근성 고려 사항

  3. Subject: reverse phone lookup

    Tracked from reverse phone lookup 2013/03/18 15:38  삭제

    myID.net 공식 블로그 :: myID.net 의 웹 접근성 고려 사항

  4. Subject: naturalvitiligotreatmentsystems.blogspot.com

    Tracked from naturalvitiligotreatmentsystems.blogspot.com 2013/12/18 14:54  삭제

    myID.net 공식 블로그 ::

  5. Subject: optionbit

    Tracked from optionbit 2013/12/19 07:50  삭제

    myID.net 공식 블로그 ::

  6. Subject: gta san andreas

    Tracked from gta san andreas 2014/03/03 01:30  삭제

    myID.net 공식 블로그 ::

  7. Subject: http://www.dharmurology.com/b-michael-kors-cheap-wallets.php

    Tracked from http://www.dharmurology.com/b-michael-kors-cheap-wallets.php 2014/03/07 17:11  삭제

    myID.net 공식 블로그 ::

  8. Subject: iras.geo.tu-freiberg.de

    Tracked from iras.geo.tu-freiberg.de 2014/03/31 13:33  삭제

    myID.net 공식 블로그 :: myID.net 의 웹 접근성 고려 사항

  9. Subject: asta-augsburg.de

    Tracked from asta-augsburg.de 2014/04/01 07:33  삭제

    myID.net 공식 블로그 :: myID.net 의 웹 접근성 고려 사항

  10. Subject: should i buy coupons from ebay

    Tracked from should i buy coupons from ebay 2014/04/14 19:33  삭제

    myID.net 공식 블로그 :: myID.net 의 웹 접근성 고려 사항

댓글을 달아 주세요

  1. luka7 2007/02/22 11:54  댓글주소  수정/삭제  댓글쓰기

    css를 사용하지 않았을 경우에.

    "메뉴로 바로가기" 메뉴의 의미가 무엇인지 궁금합니다.

    • 유인동 2007/02/23 16:31  댓글주소  수정/삭제

      안녕하세요. myID.net 개발팀의 유인동입니다.
      먼저 luka7님의 관심과 조언 감사드립니다.

      인터넷 웹 콘텐츠 지침 | 웹 접근성 연구소(http://iabf.or.kr/Lab/Kwcag/Example.asp)의 항목 2.5 반복 네비게이션 링크를 참고하시면 콘텐츠를 선형화 하여 인식할 경우에 시각장애인이 웹 사이트를 이용하는데 반복적인 부분을 스킵하거나 포커스 이동의 편의를 위해 스킵 네비게이션을 제공하라는 지침이 있습니다. KWCAG 1.0의 지침에 따라 본문으로 가기와 메뉴로 가기의 스킵 네비게이션을 페이지 상단에 제공해 보았습니다.

      luka7 감사한 지적 덕분에 발견한 것은 본문으로 바로가기는 항상 필요하지만 메뉴는 로그인 후에만 생기기 때문에 동일하게 로그인 시에만 메뉴로 가기라는 스킵 네비게이션을 제공 하도록 수정했습니다. 감사합니다 :)

  2. luka7 2007/02/22 11:57  댓글주소  수정/삭제  댓글쓰기

    그리고 접근성에 있어

    가입하기만 접근성이 100%확보된다는 것은 무슨 의미가 있는지 궁금합니다.

    사용자가 가장 많이 접근하게될 관련정보 질문하기등등은 접근성에 있어 꽤 떨어지는 편으로 보입니다만.

    과연 myID.net이 웹 접근성을 고려했다고 할 수 있는지 의문입니다.

    • 유인동 2007/02/23 14:09  댓글주소  수정/삭제

      OpenID 적용 서비스 사용시 myID.net 서비스를 가장 우선 사용하게 되기 때문에 접근의 시작인 서비스가 “최대한의 접근성을 보장해야 한다” 라고 생각하고 표준을 지키려 힘을 썼습니다.

      회원가입, 인증 외에 로그인 및 프로필 수정, 서핑, OpenID 지원 블로그에 코멘트 달기 등 사이트 전반적인 핵심기능 전체 이용을 이미지 없을 때, javascript 없을 때, 스크린 리더 이용시, 또 다양한 브라우저로 테스트를 해보았습니다.

      말씀하신 관련정보 및 질문하기도 동일하게 테스트 해보았으며 해당 링크로의 접근과 이용이 가능함을 확인했습니다. 사용자에게 선택권을 넘기고자 또 시각 장애인이 혼동이 될까 하는 우려로 외부 사이트의 링크를 새창으로 처리하지 않는 등 여러가지 고민을 하면서 작업하였습니다.

      (물론 관련정보나 질문 등의 블로그의 컨텐츠 자체는 범용적인 오픈소스 블로그를 사용하면서, 한계가 있음을 인정합니다. 컨텐츠 자체의 코드는 표준화되지 않았지만 TT에서도 전체적으로 선형화를 신경을 썼기 때문에 컨텐츠를 접근하는데 있어서 큰 문제는 없었습니다. ㅠ_ㅠ)

      접근성은 "접근이 가능하냐 하지 않느냐" 라고 생각합니다. 편리함을 위한 사용성과는 조금 다른 개념이라고 생각합니다. 그렇다고 했을 때 myID.net 서비스가 접근성을 “완전히 보장한다” 라고는 절대 말씀드릴 수 없겠지만 접근성을 고려하며 제작한 것은 사실입니다.

      관심과 지적에 힘 입어 더욱더 여러가지 환경과 상황을 고려하고 생각하며 제작하겠습니다. 감사합니다 :)

    • luka7 2007/02/23 23:54  댓글주소  수정/삭제

      질문하기가 안되더군요 : ) 그러니까 쓰기가 안되는거지요~

      테터툴즈의 접근성 문제긴하지요.

      그리고 접근성이 뛰어나다~ 라고 말함에 있어서는 접근이
      가능하다는 물론 접근이 용이하다~ 도 포함 되어야 하지
      않을까 싶습니다. 그래서 물론 어려운거구요 ㄷㄷ;

      주제 넘게 너무 떠들었네요;

      아무튼 내일 뵙겠습니다;

    • 유인동 2007/02/24 01:32  댓글주소  수정/삭제

      접근성을 넘어 사용성을 보장하는 부분은 제작자들이 계속 연구하고 고민해야할 문제인 것 같습니다 ㅠ_ㅠ

      아 KWAG 워크샵에 오시는 군요.
      방갑습니다~ 내일 뵙겠습니다 :)

  3. 정찬명 2007/03/01 00:51  댓글주소  수정/삭제  댓글쓰기

    인동씨, 저 오늘 이 포스팅과 사랑에 빠져버릴 것 같아요 ㅎㅎㅎ. 완전 굿잡!

  4. 한정기 2007/03/07 13:50  댓글주소  수정/삭제  댓글쓰기

    구글 알리미를 통해서 왔습니다.

    키워드는 "웹접근성" 이었습니다.

    좋은글 보고 돌아 갑니다.

    PS. 혹 저를 모르신다고 하시지는 않겠지요? ^ ^

  5. generators miami 2011/06/21 16:48  댓글주소  수정/삭제  댓글쓰기

    키워드는 "웹접근성" 이었습니다.

  6. chinese quotes 2011/09/12 14:09  댓글주소  수정/삭제  댓글쓰기

    당신이이 게시물을 작성 한 귀하의 노력에 감사하고 싶습니다. 나는 미래에 대해 동일한 경로에 가장 적합한 직업에 대해 낙관적이다

  7. commercial flake ice machines 2011/09/28 18:46  댓글주소  수정/삭제  댓글쓰기

    테터툴즈의 접근성 문제긴하지요.

  8. oil press 2011/10/08 16:47  댓글주소  수정/삭제  댓글쓰기

    This is just the information I am finding everywhere.Me and my friend were arguing about an issue similar to this! Now I know that I was right.Thanks for the information you post. I just subscribe your blog. This is a nice blog.

  9. what is normal blood pressure 2011/10/16 12:00  댓글주소  수정/삭제  댓글쓰기

    당신이이 게시물을 작성 한 귀하의 노력에 감사하고 싶습니다. 나는 미래에 대해 동일한 경로에 가장 적합한 직업에 대해 낙관적이다

  10. investor immigration consultant canada 2011/10/18 11:32  댓글주소  수정/삭제  댓글쓰기

    정말 여러분의 게시물을 공부 반가웠어요. 여기 좋 은 포인트를 수집합니다. 나는이 훌 륭한 문서는 여러분이 기술에서 만든 노력과 감사가되고 싶어

  11. sawdust pellets 2011/10/19 12:08  댓글주소  수정/삭제  댓글쓰기

    공유를 주셔서 감사합니다.

  12. Tool Steel 2011/10/26 10:39  댓글주소  수정/삭제  댓글쓰기

    Very happy to see your article, I very much to like and agree with your point of view.

  13. Feed Milling Equipment 2011/10/28 12:15  댓글주소  수정/삭제  댓글쓰기

    I somebody been municipality out any of your posts and i can rely pretty groovy move. I cognition definitely bookmark your powerfulness.

  14. weight lose diet 2011/11/17 10:26  댓글주소  수정/삭제  댓글쓰기

    Fine information, many thanks to the author.

  15. dreadnought guitars 2011/11/17 10:27  댓글주소  수정/삭제  댓글쓰기

    A creative man is motivated by the desire to achieve, not by the desire to beat others.