2008년 10월 6일 월요일

웹표준 가이드라인 모음

근래 들어 NHN 웹표준화팀의 NULI 사이트가 여기저기서 소개가 되고 있네요. 좋든 싫든 NHN이라는 기업이 갖고 있는 폐쇄적인 이미지와 달리 자신들의 지식과 정보를 '널리' 알리고 공유하고 싶다는 박태준 팀장님과 팀원들의 의지가 담겨 있는 멋진 UI 가이드라인 사이트라고 생각합니다. NULI 외에도 다음 다음의 UI개발팀이 운영하고 있는 가이드라인과 모질라, 오페라 등이 운영하고 있는 사이트들이 있어서 간단히 소개해 드립니다.

NULI - 널리 공유하는 웹 표준화 가이드

최근에 가장 많이 알려진 곳이며, 네이버를 중심으로 NHN의 웹서비스 UI관련 가이드를 꼼꼼히 정리하고 있는 곳입니다. HTML, CSS를 비롯한 기본적인 가이드에서부터 웹접근성에 대한 연구 결과 등을 공개하고 있어 별도의 연구나 분석이 쉽지 않은 회사 또는 개인에게 좋은 정보를 제공하고 있습니다. 최근에 스크린리더(센스리더)에 대한 리뷰는 정말 도움이 되더군요.

Daum UIDev Guideline

NULI만큼 알려지지는 않았지만 다음에도 UI개발팀에서 운영되고 있는 가이드라인이 있습니다. NULI처럼 NHN 웹서비스를 위해 조사하고 연구된 내용을 공유하기 위한 목적은 아니어서 그런지 자체 웹서비스를 위한 참고 가이드의 성격이 강합니다. 하지만 사내 웹표준 가이드 등을 만들 생각이 있다면 다음의 UI가이드가 도움이 될 것 같습니다. 다음의 UI개발자 블로그는 NULI와 달리 따로 운영되고 있네요. 이곳에서도 종종 좋은 정보들이 올라오고 있습니다.

MDC - Mozilla Developer Center

모질라 재단이 운영하고 있는 개발자 센터입니다. 기술(Technologies) 카테고리에서 HTML, CSS, XML, AJAX, DOM, RSS 등 많은 기술 문서를 열람해 보실 수 있습니다. 회원가입을 하시면 직접 글을 올릴 수도 있습니다.

Dev.Opera

오페라 소프트웨어의 개발자 센터입니다. 외견상 MDC와 유사하며, Articles 카테고리를 통해서 HTML, CSS, Javascript 등에 대한 글을 열람해 보실 수 있습니다. 최근에 개설된 Web Standards Curriculum 은 정말 좋습니다! (제가 활동중인 스터디그룹에서도 WSC를 이용해서 공부를 하고 있습니다.) Dev.Opera 역시 MDC와 마찬가지로 회원 가입을 하면 저자가 되어서 직접 글을 올릴 수 있습니다. 최근의 내용을 봐서는 오페라쪽이 좀 더 활발한 것 같습니다.

Aptana Reference Guides

Aptana가 제작 운여하고 있는 레퍼런스입니다. 역시 HTML, CSS, Javascript 를 다루며, Jaxer라는 자사 서비스 가이드를 포함하고 있습니다. 개인적으로 자주 찾는 곳인데 각각의 브라우저별 지원 현황이 잘 정리되어 있어서 보기 좋습니다. 별도의 레퍼런스 북이 없다면 정말 괜찮은 사이트입니다.

웹표준을 탐험하는 히치하이커를 위한 지침서

더글러스 애덤스가 쓴 '은하수를 여행하는 히치하이커를 위한 안내서'를 패러디한 제목의 웹표준 가이드 사이트입니다. ELEX님이 작성하신 것으로 초기에는 PDF 문서로 배포되다가 최근에 스프링노트를 통해서 가이드라인 사이트를 구축하신 것 같습니다. 기부금을 내시면 ELEX님께 도움을 드릴 수도 있을것 같군요! 포털사가 만든 가이드가 복잡해 보이고, 영어로 된 가이드가 영 읽기 힘들다면 ELEX님의 가이드를 한번 추천해 드립니다. 꼼꼼하게 잘 정리하시고 운영하는 열정이 대단하신것 같습니다.


이 밖에도 W3C Schools이나 Max Design, Yahoo! UI Library와 같이 이미 많이 알려진 레퍼런스, 가이드 사이트도 있습니다. 찾아보면 더 많은 곳이 있을 것이고, 카페(하코사와 같은)나 사이트(CDK같은) 등 소규모로 제작 운영되는 레퍼런스와 가이드도 알찬 것들이 많을 것이라고 생각해 봅니다. 또한 대부분의 회사가 자체 가이드라인을 가지고 있거나 제작하고 있는 것으로 알고 있습니다. 아직 준비되어 있지 않다면 직접 한번 만들어 보시는 것도 좋은 공부가 되지 않을까 싶습니다. 그런 의미에서 저 역시 틈틈히 '마크업 가이드라인'을 만들어 보고 있습니다. 게을른 탓에 지지부진하긴 하지만 자신의 작업 스타일이라든가 알고 있는 지식을 정리해볼 수 있는 좋은 기회라고 생각됩니다.

댓글 14개:

  1. 와우~ 잘 봤어요. ^^; 봄눈님 글 스타일하고 제 스타일하고 어딘지 모르게 많이 닮은것 같아요. 저 없으면 저 대신 글좀 써주세요. ㅋㅋ.

    답글삭제
  2. @정찬명 - 2008/10/07 13:47
    하하 칭찬이시죠? 감사해요^^

    답글삭제
  3. 봄눈님 글보면 항상 열심히 이신거 같습니다..^^; 대단하신걸요?

    글잘읽고 갑니다.^^

    답글삭제
  4. @빽짱구 - 2008/10/08 18:22
    ^^ 아이쿠 감사합니다~ 빽짱구님도 정말 열심히 하시는거 다 알고 있습니다~!

    답글삭제
  5. 와 ~ 이런 것도 있었군요...잘 몰랐었는데 한눈에 쏙들어옵니다

    답글삭제
  6. @KONG - 2008/10/10 10:00
    ^^ 감사합니다~

    답글삭제
  7. trackback from: [Javascript]Auto refresh
    <!-- Codes by Quackit.com --> <html> <head> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> </head> <body onload="JavaScript:timedRefresh(5000);"> <p>This..

    답글삭제
  8. 봄눈님.유용한 정보 항상 감사해요

    매일 읽다가 새해차 인사글 남겨요~

    열심히 읽고 있어요.

    오픈캐스트,ㅋㅋ

    복 많이 받으세요~

    답글삭제
  9. @강짱 - 2009/01/06 11:51
    ^^ 감사합니다. 저도 좋은글 많이 올려서 오픈캐스트도 자주 업데이트 해야 하는데.. 게을러서 큰일이에요~ 강짱님도 새해 복 많이 받으세요~

    답글삭제
  10. 안녕하세요

    업무때문에 UI가이드 검색하다가 이 글을 보게 되었습니다.

    좀더 많은 사람들과 이 글을 나누고 싶어서

    http://cafe.naver.com/netmaru 이 곳으로 살짝 퍼갈려고 합니다.



    감사히 잘 보았습니다.

    답글삭제
  11. 안녕하세요. Super~! 너무 좋은 컨텐츠입니다.

    이렇게 정리를 잘 해주셔서 그저 감사할 따름입니다.

    그런의미에서 제 블로그에 쉭~ 모셔가 버리겠어요~ ^0^

    싫으시면, 제 블로그에 오셔서 리플 부탁드릴게요~ ^_^;;

    답글삭제
  12. 잘 읽었습니다. 많은 도움이 되었네요. 틈틈히 공부를 하고 있었는데 이렇게 한곳에 모아주셔서 감사합니다.

    답글삭제
  13. 제가 몰랐던 사이트도 많군요. 글 잘 봤습니다.

    답글삭제