NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


대한민국 웹 표준 사이트를 찾습니다!

본문 건너 뛰기

물론 이런 일을 제가 처음 하는것은 아닙니다. 이미 신현석님Kwsg.org 라는 사이트를 오래전부터 운영하면서 적지 않은 데이터들이 모아 두었습니다. Kwsg.org 사이트에 웹 표준 사이트를 등록하면 소정의 심사 후 조건에 부합되는 사이트를 수동으로 등록하는 시스템으로 운영이 되어 왔습니다. 현석님의 이런 노력에 기대어 제가 동일한 시도를 해서 경쟁을 하려는 것은 아니구요. 다소 아쉬웠던 부분들을 보완해서 더욱 활성화 하고자 이런 일을 시작하게 되었습니다. Kwsg.org 사이트에 계속해서 대한민국 웹 표준 사이트들을 등록해 주시기 바랍니다. 제가 사이트를 수집하는 방법과 다르고 전문가이신 현석님이 직접 사이트 등록 검토를 하기 때문에 보다 신뢰할 수 있는 곳입니다.

웹 표준 사이트를 수집하는 이유.

블랙 리스트(비 표준 사이트)가 너무 많아서 화이트 리스트(웹 표준 사이트)를 모으는 겁니다. 이런 목록이 필요한 이유는 인터넷 익스플로러를 사용하지 않는 국내 소수의 정보 소비자들이 각자가 선호하는 웹 브라우저(파이어폭스, 사파리, 오페라, 크롬)를 이용해서 한국의 웹 서비스를 이용할 수 있도록 돕기 위함 입니다. 저 또한 업무 목적이 아닌 경우 크롬과 파이어폭스를 번갈아가며 사용하고 있는데 그동안 온라인 쇼핑몰은 거의 들어가 본 일이 별로 없습니다. 제가 사용하는 브라우저로는 이용할 수 없다는 것을 이미 알고 있었기 때문입니다. 하지만 최근에는 상황이 변하기 시작 했습니다. 그동안 안되는 줄로만 알았던 온라인 쇼핑이 가능해졌고 심지어 온라인 뱅킹까지 가능한 곳도 생겨 났습니다. 웹 표준을 이용해서 상호 운용성이 충분히 확보된 화이트 리스트를 모아두게 되면 생산자와 소비자 모두에게 실질적인 이득이 될 것입니다.

웹 표준 사이트 수집 방법.

위키 페이지와 집단 지성을 이용하려고 합니다. 제게 웹 표준 사이트 목록을 보내거나 알려주실 필요가 없습니다. 웹 표준 사이트 인지 아닌지 여러분이 직접 검토하신 다음 위키에 등록해 주세요. 그리고 다른 분들이 추천한 웹 표준 사이트 목록을 이용해 보세요. 올해 연말까지 1,000개의 대한민국 웹 표준 사이트를 수집하는 것이 목표 입니다.

웹 표준 사이트의 조건.

  1. 첫째, W3C 권장 표준 DTD(Document Type Definition) 사용.
  2. 둘째, 논리적이고 의미에 맞는 HTML 마크업과 CSS 레이아웃 사용.
  3. 셋째, 최신 버전의 웹 브라우저 ‘Internet Explorer, Firefox, Safari, Opera, Chrome’에서 콘텐츠 호환성 유지.
  4. 넷째, HTML 문법 오류가 페이지별 평균 99개 이하. 초기화면은 필히 99개 이하. 확인. CSS 문법 오류는 확인하지 않음.
  5. 다섯째, ‘ActiveX’ 때문에 핵심 기능을 이용할 수 없더라도 대부분의 콘텐츠를 다양한 웹 브라우저를 통해 이용할 수 있음.
  6. 여섯째, 다양한 웹 브라우저에서 키보드만으로 대부분의 콘텐츠를 탐색하거나 조작할 수 있음. 네비게이션을 플래시로 구현한 경우 등록 불가.

웹 표준 사이트 등록 방법.

  1. 대한민국 웹 표준 사이트 위키 페이지로 이동.
  2. 위키 편집을 위한 계정 생성 후 로그인 하거나 또는 손님(id:guest/pw:thssla)으로 로그인. 로그인 후 [편집] 링크가 활성화 됨.
  3. 대한민국 웹 표준 사이트 등록. 또는 다른 사용자의 실수를 정정.
분류: 웹 표준 | 2009년 8월 14일, 1:28 | 정찬명 | 댓글: 27개 |
트랙백URI - http://naradesign.net/wp/2009/08/14/1029/trackback/

27개의 댓글이 있습니다.

  1. 나에 댓글:

    좋은 일 하시네요 : )

  2. 정찬명 댓글:

    나에님, 참여했던 사이트들 등록 하셔야죠? ㅎㅎㅎ.

  3. -_-t's me2DAY 댓글:

    충의 생각…

    정찬명님께서 대한민국 웹표준 사이트를 찾는다네요….

  4. 쭈야 댓글:

    헛…초짜인 저에겐 리스트가 궁금할뿐이고…쇼핑사이트들이 많을까요? 언제까지 모집하시는거에여?

  5. 정찬명 댓글:

    웹 표준 사이트가 너무 많아져서 이렇게 모으는 것이 의미가 없어질 때 즈음이면 그만 두려고 합니다. ^^

  6. inxhune 댓글:

    doctor에게 기대고 있지만. 정녕 html5 는 안되는 건가요 ㅠ_ㅠ

  7. 김현우 댓글:

    공유의 실천은 말처럼 쉬운 것이 아닌데 훌륭한 일을 하시네요. 열열히 지지 합니다.
    ^^;

  8. 정찬명 댓글:

    대전에서 장애인재활협회 웹 사이트를 담당하고 계시군요. 제가 참여했던 XE를 사용하고 계시구요. 반갑습니다. ^^

  9. Na! 댓글:

    좀 그렇치만 저희 회사 주소도 등록했습니다.
    (HTML 코딩은 저희 디자이너가 작업했습니다.)
    아직 반쪽만 이지만 (서비스 신청이나 관리 프로그램등은 작성중이라..)
    아니다 싶은 가차없이 짤라주세요..

  10. 정찬명 댓글:

    좀 그런 정도가 아니라 이건 완전히 대박인데요! 아니 무슨 결벽증이라도 있으신건지 HTML 오류 찾기가 너무 어렵네요. ㅋㅋㅋ 굿잡 입니다! 미투와 트위터에 소개해야 겠습니다! 감사합니다. 모범사례로 추천할만 하네요. http://www.opencom.com/

  11. 정찬명 댓글:

    Na!님 브라우저 타이틀에 오타가 있다는 제보를 받았습니다. Opnecom -> Opencom 확인해 주세요.

  12. Na! 댓글:

    아.. 정작.. 제목부터 틀렸네요.. 제보 감사합니다.
    아직 반쪽짜리라 많이 부족합니다. 로그인필요한 부분이나 서비스 신청쪽은
    매우 구시대 적이죠..

  13. HYLA 댓글:

    항상 한발 앞서 좋은일을 하시네요! 멋져요!

  14. 양영복 댓글:

    6번 조건으로 인해 우리회사 사이트들은 전부 out 이군요.
    저도 동참하고 싶지만 아쉽습니다.ㅎㅎ

  15. 정찬명 댓글:

    한발 앞선것은 현석님인데요. ㅎㅎㅎ. 감사합니다. 양영복님 지못미. ㅜㅜ

  16. youn 댓글:

    키보드만으로 조작한다는 의미는,, 자세히 멀까여,,
    단순히 탭키로 이동하기??
    자세한 의미를 몰라서 질문드려요,,

  17. 정찬명 댓글:

    대표적으로 탭키가 되겠지만 엔터키와 방향키등 마우스에 의존하지 않고도 이용할 수 있어야 한다는 의미 입니다. 플래시 네비게이션을 사용하지 않고 자바스크립트를 오용하지만 않으면 충분히 쉽게 달성 기능한 목표 입니다.

  18. 정미영 댓글:

    얼마전에 봤던 곳인데요. 트위터에서
    docham.kr 이곳은 어떨까요? 파폭이나 크롬에서 결제가 된다고 하던데..

  19. 정찬명 댓글:

    굳이 제 허락을 받으실 필요는 없습니다. 위키는 누구나 편집할 수 있으니까요. ^^

  20. 오현 댓글:

    정찬명님 탭키는 알겠는데 방향키는 어떻게 하는 것인지 이해가 안되는군요. 다음에 시간 나시면 방향키로 링크 넘어가는 법 좀 설명해 주십시오. 머리야 더 아파지겠지만 해야할 것이라면 알아 둬야 할거 같네요. 그리고 http://www.opencom.com/ 사이트를 보다가 잊어버린 질문이 떠 올랐습니다. 위 사이트의 상단메뉴를 탭으로 이동하다보면 마지막의 하위메뉴가 display:none이 안되는 상황이 발생합니다. 이문제를 해결하기 힘들어 상위메뉴의 마지막에 하위메뉴가 없는 상위메뉴를 하나 만들고 하위메뉴를 비우는 방식으로 눈속임 시켰는데… 이래도 괜찮나요????
    [ul]
    [li] [a href=””]상위1[/a]
    [ul]
    [li]
    [a href=””]하위1[/a]
    [/li]
    [/ul]
    [/li]
    [li] [a href=””]상위2[/a]
    [ul]
    [li]
     
    [/li]
    [/ul]
    [/li]
    [/ul]

  21. 정찬명 댓글:

    방향키는 링크 탐색에 사용되는 키가 아니구요. 셀렉트 콘트롤이나 라디오 버튼에 쓰이죠. 아래 콘트롤에 포커스를 두고 방향키를 움직여 보시면 알껍니다. 방향키는 포커스를 이동시키고 스페이스키는 선택을 결정하지요. 라디오 버튼 그룹 안에서는 탭키로 항목 이동이 되는 것이 아니라 방향키로 항목 사이를 이동하죠.


    중첩 메뉴의 경우 빈 요소를 사용한다고 해서 특별히 치명적인 문제가 발생하는 것은 아니지만 빈 요소를 사용하지 않아도 마지막 onblur 이벤트 헨들러를 사용하면 가능하지 않나요?

  22. 길앞잡이 댓글:

    아 오랜만에 찾아왔는데
    이런 좋은일도 하시는군요~
    허접하지만 제가 작업한 사이트도 등록하고 갑니다.

  23. 정찬명 댓글:

    네, 자주와서 등록해 주세요. ^^

  24. 마약 댓글:

    http://www.opencom.com/ 와….여기 진짜 대박이네요…

    유효성은 걸릴만한게 정말 안보이네요 ㅋ 전문 퍼블리셔가 아니라 디자이너분이신게 믿기지 않을정도네요.

    구경하는 사람으로써, 저는 저렇게 못하지만^^;;; 욕심을 부려보자면,

    스크립트를 끄고 새로고침을 해봤습니다.

    레이어가 로그인 필드를 덮고 있는것이 조금 아쉬웠습니다.

    네비게이션은 스크립트를 끄고도 이용을 할 수가 있어서, 정말 깔끔하게 잘하셨다는 …뭐 그런 존경의 눈빛으로 바라보고 있습니다.^^;;ㅋㅋ

  25. 정찬명 댓글:

    마약님도 곧 그렇게 되실껍니다. ^^

  26. 홍정민 댓글:

    CSS Validation Service 검사를 하면
    .clearfix – 해석 오류 {*height:1%}
    .iePngFix – 속성 behavior는 존재하지 않는 속성입니다
    라고 에러 메세지가 나오는데요.
    웹표준에 맞춰서 작업을 해야하기때문에 css 검사상에도 에러가 한개도 있으면 안된다고 클라이언트가 그러는데.. 그럼 저런류의 핵은 쓸수 없는건가요?

    좀 초보적인듯한 질문이지만 ^^;; 답변부탁드립니다.

  27. 정찬명 댓글:

    당연히 쓸 수 없습니다. CSS핵이 포함된 코드는 조건부 주석으로 분리하셔야겠네요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님