[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

2016년 3월 21일 월요일

[Book] 한 권으로 끝내는 정규표현식..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

한 권으로 끝내는 정규표현식
잰 고이바에르츠, 스티븐 리바이선 저
김지원 역
한빛미디어

책 제목은 잘 지었다고 생각하고 있습니다. 책을 처음 받고 약간 놀랐는데 자그만치 600페이지나 되는 두꺼운 책이었기 때문인데 정규표현식이 만만한다거나 쉬운거라고 생각하진 않지만 자그만치 600페이지라니 읽기도 전에 확실히 한권으로 끝나겠다는 생각을 들 정도였습니다.

이 책은 정규표현식의 모든 것을 다 다룬다고 할정도로 많은 내용을 다루고 있습니다만 정규표현식 자체가 좀 그러하듯이 각 문법에 대한 설명이 기본적으로 있고 책이 전체적인 구성이 정규표현식으로 해결할 어떤 문제를 주고 그 문제를 해결할 정규표현식을 보여주고 그에 대한 설명이 이어붙는 구성으로 처음부터 끝까지 이루어져 있습니다. 그렇다 보니 책을 읽으면서 오르고내리는 굴곡이 별로 없기 때문에 그냥 보기에는 상당히 지루하다고 할 수 있습니다. 딱히 정규표현식을 엄청나게 익혀야 한다거나 하는 등의 이유가 아니라면 이 책을 처음부터 차근차근 공부한 다른 것은 좀 어려운 일이 아닐까하는 생각이 들었습니다.

그보다는 이 책은 정규표현식에 대한 레퍼런스 북에 가깝습니다. 특히 이 책은 많은 언어별로 정규표현식을 설명하고 있습니다. C#, VB.NET, Java, JavaScript, PHP, Perl, Python, Ruby을 중심으로 각 언어별의 차이점을 일일이 짚어주고 있기 때문에 이 책을 차근차근 공부한다기 보다는 정규표현식이 필요할때 찾아보면서 사용중인 언어의 특징을 파악하면서 참고용으로 사용하는 것이 더 적합하다고 생각합니다. 단순히 정규표현식에 대한 사용법을 잘 모른다거나 좀 더 알고 싶어서 공부하려는 의도라면 이 책보다는 200페이지도 안되는 손에 잡히는 정규표현식이 더 적합한 책이라고 생각하고 있습니다.

각 언어별로 정규표현식의 차이가 있지만 일반적으로 이러한 부분을 외우고 있는 사람은 많지 않고 필요할때마다 검색하는 수밖에 없는데 HTML파싱, URL, 이메일, 전화번호 매칭 등의 실용적으로 쓰일 만한 예제들을 위주로 설명되어 있으며 중반부부터는 정규식 뿐만 아니라 각 언어에서 어떻게 사용해야 하는지 코드까지 담고 있기 때문에 틈틈히 참고하면서 보기에는 상당히 좋다고 생각합니다. 기초부터 차근차근 설명한다기 보다는 정규식의 특성 및 각 언어별의 차이점에 중점을 두고 있는 느낌이기에 정규표현식을 잘 모른다면 약간 어려울 수도 있습니다.


[EP]KWAG 13회 워크샵 - "Global Web Accessibility와 함께하는 콱" 후기 #2..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Techniques for WCAG 2.0 - HTML and XHTML Techniques - 윤좌진
이 세션은 HTML and XHTML Techniques for WCAG 2.0에 대한 부분으로 한글문서도 번역되어 제공되고 있습니다.



대체텍스트
텍스트는 어디서나 사용가능하기 때문에 대체텍스트가 가장 사용하기에 접합합니다. img를 사용할 때 alt로 중요한 당어를 반드시 제공해야 하며 form의 이미지 전송버튼도 alt로 대체텍스트를 제공해야 합니다.(간혹 value로 제공하기도 하는데 이는 잘못된 것입니다.) alt로 충분한 정보를 제공할 수 없다면 longdesc를 이용해서 자세한 설명이 있는 곳에 경로를 제공해야 합니다. 과거에는 longdesc에 긴 설명을 넣어야 한다는 의견도 있었지만 일반적으로 링크를 사용하며 반드시는 아니지만 html문서로의 링크를 권장합니다.

  • 동일한 의미의 텍스트와 이미지를 함께 사용하게 될경우에는 alt=""로 처리하여 대체텍스트를 제공하지 않습니다.
  • 이미지의 존재를 무시하도록 하며련 alt와 title을 공백("")으로 만들어 비워둡니다.
  • link에 대해서도 클릭했을 때 어떤 변화가 생기는지를 사용자에게 알려주기 위해서 링크텍스트를 제공합니다.
  • map의 area는 alt와 title을 같이 제공하는 것이 바람직한데 이는 map의 이미지가 나타나지 않았을 때를 위해서입니다.
  • object사용시에는 대체텍스트나 비대체텍스트를 제공해야 하면 이미지로 대체할때는 그 이미지의 대체텍스트를 제공해야 합니다.
  • embed에는 noembed를 사용합니다.
  • 프리픽스 문자어나 축약어를 사용할 때도 대체 텍스트를 제공합니다.
  • frame, iframe에도 title을 사용하며 frame간의 탐색이 용이하도록 합니다.

올바른 마크업

  • 스펙에 맞게 HTML을 사용해야 합니다.
  • 시작태그와 종료태그는 DTD에 맞게 사용합니다.
  • 올바르게 되었는지를 확인하는 1단계는 유효성감사입니다. 현실적인 어려움은 있지만 계속 노력해야 합니다.
  • title태그는 고유한 페이지 제목을 정해야 합니다.(한 웹사이트에서 계속 동일한 타이틀을 사용하지 않습니다.)
  • 문서의 주언어를 설정하여 사용되는 언어를 잘못인식되지 않도록 합니다.
  • 컨텐츠는 가시적인 제목을 지정하는게 좋으므로 h1~h6태그를 사용합니다.
  • 목록에는 ol, ul, dl을 사용합니다.
  • 정의형 목록은 dl, dt, dd를 사용하며 용어와 설명간의 관계를 확실하게 하는 것이 좋습니다.
  • 문장중 강조하려는 것은 의미에 맞는 마크업을 사용하는 것이 좋습니다.
  • 반복되는 블록을 그룹화 하기 위해서 frame을 사용할수 있지만 권장하지는 않습니다.(보통은 서버쪽 기술로 반복되는 블록을 처리합니다.)
  • 사용자측 리다이렉트를 하려면 meta태그의 http-equiv의 refresh속성을 사용하는데 0초 초과로 하면 사용자 히스토리에 남기 때문에 0초 초과로 하지 않습니다.
  • 화면구성이 가로스크롤이 나타도록 하는 레이아웃은 좋지 않습니다.



테이블

  • 테이블의 제목을 위해서 caption태그를 사용합니다.
  • 개요를 위해서는 summary속성을 사용하면 이는 caption과 내용이 중복되지 않도록 합니다.
  • 컨텐츠의 모양을 맞추기 위한 pre태그는 사용하지 않습니다.
  • 제목셀과 내용셀의 정확한 관계를 위해서 scopre, headers, id의 연결관계를 나타내는 것이 좋습니다.

링크

  • URI만으로는 충분한 정보를 제공했다고 할 수 없습니다.
  • 링크의 그룹을 위해서 ol, ul을 사용할 수는 있지만 부분별하게 사용하는 건 좋지 않습니다.
  • 목록이나 단락안의 a태그는 링크에 대한 충분할 설명이 제공되어야 합니다.
  • 새창을 열기 위해서는 target속성을 사용하여 사용자가 인식할 수 있도록 합니다.

Form(서식)

  • 논리적으로 순서에 맞게 작성하고 그럴수 없을경우에만 tabindex를 사용합니다.
  • 서식전송을 위해서 submit버튼이 제공되어야 합니다.
  • select요소의 동작을 실행하기 위해서도 버튼을 활용해야 합니다.
  • 폼컨트롤과 텍스트레이블을 label요소로 연결하며 label로 연결할 수 없을 경우 title로 대체텍스트를 적용합니다.
  • 폼은 fieldset과 legend요소를 사용하여 컨트롤들의 특징에 맞게 그룹화 합니다.
  • select에서는 option을 optiongroup로 묶을 수 있습니다.
  • 필수입력요소는 label이나 legend를 활용합니다.


내용은 알찼지만 스펙의 각내용의 대한 설명의 나열이었기 때문에 세션의 진행이 처음부터 끝까지 동일했기 때문에 장시간 집중해서 듣기에 좀 힘들었습니다. 어찌보면 이는 마크업의 특징상의 어쩔수 없는 부분이라고도 생각합니다. 다른 기술과는 달리 화려함이나 특별히 인상적인 부분없이 각 마크업의 나열식 설명이 될 수밖에 없기 때문에 듣는 입장에서는 약간 지루할 여지가 있다고 생각합니다. 다만 개인적인 의견으로는 스펙에 대한 설명을 처음부터 끝까지 다 하는것 보다는 상당부분은 번역된 문서로 해결될수 있으니 중요한 부분이나 실무에서 적용할수 있는 경험적인 테크닉의 공유쪽에 좀더 비중이 있었으면 하는 아쉬움이 있습니다.


Techniques for WCAG 2.0 - CSS Techniques - 연홍석
이 세션은 CSS Techniques for WCAG 2.0에 대한 내용으로 한글 번역문서도 제공되고 있습니다.

CSS는 표현을 담당하는 언어로 구조에 집중하게 해주는 수단입니다. CSS의 이점은 문서의 구조와 표현을 분리해 준다는데에 있습니다. WCAG의 4가지 원칙중에서 Perceivable와 Operable 2가지가 CSS에 관한 것이고 Understandable는 HTML, Robust는 신기술에 대한 것입니다.




  • spacer이미지 대신 CSS의 margin과 padding을 사용해서 레이아웃을 디자인합니다.
  • 구조적인 마크업을 기반으로 컨텐츠를 배치하여 CSS가 없더라도 구조화된 컨텐츠가 의미를 가지도록 합니다. CSS로 자유롭게 컨텐츠를 배치할 수 있으나 의미가 달라져서는 안됩니다.
  • letter-spacing속성으로 단어내부의 간격을 제어합니다. 띄어쓰기로 처리하면 스크린리더에서 의미가 달라질 수 있습니다.
  • DOM상의 순서가 시각적인 순서와 일치하도록 처리합니다. 순서가 화면과 다르게 되면 스크린리더를 사용하는 사용자는 혼란스럽습니다. 시각적인 순서는 위에서 아래, 왼쪽에서 오른쪽으로 진행됩니다.
  • CSS를 사용해서 포커스를 받을 때 외관을 변경하는 것이 좋습니다.(보통 배경이나 border를 변경합니다.) :focus를 사용하는데 IE7이하헤서는 적용되지 않습니다.
  • 텍스트 컨테이너의 크기를 em단위로 지정하여 텍스트가 커져도 잘리지 않도록 합니다.
  • CSS로 텍스트의 시각적인 표현을 제어하고 이미지텍스트는 사용을 지양합니다.
  • CSS를 사용해서 텍스트를 텍스트이미지로 대체하고 상호 전환할 수 있는 사용자 인터페이스 컨트롤을 제공할수 있습니다. 이는 IR(Image Replacement) 기법을 사용합니다.
  • CSS로 왼쪽/오른쪽 정렬중 하나를 지정합니다.
  • 브라우져의 리사이즈 시 행의 평균 글자수가 80자 이내가 되도록 컬럼폭을 상대적인 크기로 지정합니다.
  • 배너나 네비게이션같은 부가 컨텐츠에만 CSS로 텍스트와 배경의 색상을 지정하고 메인 컨텐츠에는 지정하지 않아 사용자가 메인 컨텐츠의 색상을 변경할 수 있도록 합니다.
  • CSS를 사용해서 컨테이너의 크기를 퍼센트값으로 지정합니다.
이 세션도 마찬가지로 문서의 스펙설명을 위주로 진행이 되었습니다. 특성 주제를 이용해서 관련된 스펙들에 대해서 설명하였는데 HTML세션과 마찬가지로 세션의 굴곡이 없는 스펙설명의 나열이었기 때문에 지루한 느낌이 드는 것은 어쩔수 없었습니다. 특성상 어쩔수 없다고 생각하는(개인적인 의견으로) 마크업과는 달리 CSS의 경우는 보여줄수 있는 요소들이 더 많았음에도 스펙위주로 설명이 된 것은 약간 아쉬웠습니다. 마지막에 약간의 데모시연이 있었지만 설명중간중간에 섞여서 구성되었다면 좀더 낫지 않았을까 하는 생각이 듭니다. 앞세션과 마찬가지로 좀더 현실적으로 구체적인 설명이 함께 되었다면 좋은 내용이 더 전달이 잘 되었을 것 같습니다. 스펙설명임에도 각 내용이 중요하다는 부분이라는 것은 굳이 언급하지 않아도 되겠죠 ㅎ


Techniques for WCAG 2.0 - Client-side Scripting Techniques - 김태곤
이 세션은 Client-side Scripting Techniques for WCAG 2.0에 대한 내용으로 한글번역문서도 제공되고 있습니다.(추가적으로 WCAG 2.0을 위한 ARIA 기법도 번역되어 있습니다.) 김태곤님의 발표자료는 블로그에 올라와 있습니다.



장치 독립성을 위해서 마우스 이벤트에 키이벤트를 같이 제공하여야 합니다. 다만 click에 대응하는 keypress에 대해서는 모든 키입력에 반응하기 때문에 Enter인지를 확인하는 코드가 추가되어야 합니다.
시간제어는 사용자에게 충분한 시간을 제공해 주어야 함을 의미합니다. 페이지에 제한시간이 있을 경우 제한시간의 중단, 조절, 연장중 최소한 1가지는 제공해 주어야 하며 실시간이 중요하거나 제하시간이 필수이거나 제한시간이 20시간 이상일 때 3가지 예외상황만 있습니다.
사용자 인지는 스크린리더같은 보조기술에서 얼마나 인식될 수 있는가 하는 부분입니다. 동적인 컨텐츠는 이벤트가 발생한 요소 바로뒤에 삽입해주어야 이상없이 스크린리더가 읽어줄 수 있습니다.


시간이 약간 초과된 관계로 이 세션을 빠르게 진행되기도 했고 스크립팅에 대한 부분이어서 흥미롭게 들었습니다. 키이벤트까지 추가되어야 한다는 것은 처음 듣는 얘기라서 정말 그렇게 해야하는 가는 약간 고민해야 보긴 해야겠지만 그외내용들은 생각지 못했던 부분이었던 관계로 상당히 알찼다고 생각하고 있습니다.

Epilogue
웹접근성에 상당히 관심이 있고 지지하고 있지만 관련한 실제 테크닉에 대해서는 많이 모르고 있었던 건 사실이었습니다. 퍼블리싱이 주 업무가 아니기 때문에 학습에 많은 시간을 할애하지 못한것도 사실입니다.

전체적으로도 꽤 의미있는 세미나였지만 마지막 전체 QA시간이 이 세미나에서 가장 인상적이었습니다. Q&A중에 한분이 질문을 하면서 자신의 내용을 공유하고 싶다고 하셨습니다. 보통 Q&A시간에는 질문이 아니라 쓸데없는 다른 자기 얘기하는 사람도 많기에 이번에도 그런가보다 하고 있었는데 이분이 나눠준 얘기가 아주 중요한 얘기였습니다.

이분은 실제로 약시 1급를 가진 시각장애인이셨는데 다른 시각장애인에게 접근성에 대한 많은 교육을 몇년동안 하셨습니다. HTML세션에서 얘기나왔던 longdesc에 대해서 테크닉적으로 여러 얘기를 나누었지만 국내 시각장애인중에는 longdesc를 어떻게 보는지 알고 있는 사람이 거의 없다고 하였습니다. longdesc가 있을 경우 스크린리더가 설명이 있다는 표시는 해주지만 그 설명을 보려면 단축키(Alt+Enter)를 눌러야 하는데 그에 대해서 아는 사람이 없기 때문에 longdesc를 개발자들이 사용하더라도 실제 시각장애인에게는 도움이 되지 않고 수백자 정도는 alt에 넣어주는 것이 오히려 좋다는 얘기를 공유해 주셨습니다.(이부분이 그동안 국내에서는 longdesc를 거의 사용안했기 때문에 그분들이 그걸 사용할 일이 없었기 때문에 기인한 일인지 원래 많이 쓰지 않는 기능인지는 잘 모르겠습니다.)

접근성에 대해서 생각하면 가장 어려운것이 이론으로만 어디서 찾아봤지 실제로 장애인들이 어떻게 사용하는지 모른다는 것이었습니다. 최근에는 관련자료도 많이 나와서 스크린리더가 어떻게 동작하는지에 대한 동영상들도 있고 정보문화진흥원에 가면 스크린리더를 체험해 볼 수 있는 시설이 있기는 하지만 말그대로 체험일뿐 실제 사용하는 사람과는 많이 다를 수밖에 없습니다. 구글도 접근성부분을 실제 장애인들이 많이 담당하고 있는 것으로 알고 있는데 국내에도 이런 실제적인 도움이 많이 필요하다고 생각됩니다.(명함을 받아오기는 했는데 개인적으로는 다음에 FRENDS에서 세미나라도 하게되면 이분께 이른부분에 대한 한세션을 부탁드리고 싶을 정도더군요. ㅎ)

오랜만에 회사에서 보내준 세미나인데 웹접근성에 대해서 생각을 많이 정리하고 동기부여도 많이 된 세미나였습니다. (물론 현실에서의 적용을 멀고 먼 길이지만요... 개인적으론 접근성은 테크닉보다는 마인드의 문제라고 생각합니다.)

[EP]KWAG 13회 워크샵 - "Global Web Accessibility와 함께하는 콱" 후기 #1..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

지난 7일 등촌동에 있는 한국정보문화진흥원에서 한국웹접근성그룹인 KWAG에서 진행하는 13회 워크샵이 진행되었습니다. 9월에도 세미나를 2개나 신청했다가 업무가 바빠서 참가를 못했었기에 이번에도 고민하다가 일단 신청해놓고 눈치살피다가 다행히도 갈 수 있게 되어 잽싸게 참석을 했습니다.

사용자 삽입 이미지


Web Accessibility: Progress, Resources, and Future Challenges - Judy Brewer (W3C WAI 의장)
첫 세션은 WAI(Web Accessibility Initiative)의 의장을 역인하고 있는 Judy Brewer의 세션이었습니다. 웹접근성에서 중요한 점은 한가지 특정장애가 아닌 여러가지 장애를 가진 사람들에게 영향을 미칠 수 있다는 것입니다. W3C 웹접근성 가이드라인(Web Content Accessibility Guidelines (WCAG) 2.0 - 워캑이라고 읽습니다.)을 준수하면 이 모든 것을 해결할 수 있으며 아래의 원리도 모두 적용할 수 있습니다.




웹컨텐츠 접근성의 원리

  • 인신의 용이성(Perceivable) - 컨텐츠가 인식되기에 용의해야 하며 모든 사용자가 동등한 수준의 정보를 얻을 수 있어야 합니다. 이미지는 대체 텍스트가 필요하고 미디어는 캡션등이 제공되어야 합니다. 또한 사용자들이 쉽게 컨텐츠를 인식하도록 배경색등도 고려되어야 합니다.
  • 운용의 용이성(Operable) - 사용자가 마우스, 키보드 혹은 머리나 몸을 이용한다고 하더라도 페이지를 조작할 수 있어야 하며 네비게이션을 수월하게 할 수 있어야 합니다. Form을 작성할 때는 충분한 시간을 사용자에게 제공해 주어야 합니다.
  • 이해하기 쉬워야 합니다.(Understandable) - 가독성도 높여야 하며 컨텐츠의 내용도 너무 어렵지 않게 구성되어야 합니다. 디자인에 일관성을 유지하게 되면 사용자들이 예측할 수 있기 때문데 접근성을 더 좋게 할 수 있으면 Form을 작성할때는 시기적절하게 추가정보를 제공해 주어야 합니다.
  • 견고성(Robust) - 장애인들이 사용하는 장비들(스크린리더, 음성인식, 눈으로 조작하는 장비 등)과 잘 호환될 수 있어야 합니다.

WAI(웨이)는 W3C의 일부로써 웹접근성에 대한 기반을 마련하는 것이 주활동입니다. W3C에서 새로운 표준을 만들 때마다 WAI가 함께 참여해서 접근성에 대한 검토를 하게 됩니다. 몇년전에 HTML 4.01과 CSS에 대한 접근성 검토를 하였고 HTML5에도 참여하고 있는데 현재 일부 접근성과 관련된 수정되어야 할 부분이 있어서 아직 확정되지 않은 상태입니다. 또한 웹사이트의 접근성을 체크하기 위한 툴을 개발하고 있으며 한국에서도 NIA가 한국어툴을 제공(찾아보니 현재 최신버전은 K-WAH 3.0이더군요.)하고 있는 것으로 알고 있습니다. WAI는 작업을 할 때 항상 많은 사람의 참여를 기다리고 있으며 누구나 참여할 수 있습니다.

웹접근성관련한 지침에는 ATAG, WCAG, UAAG가 있습니다. 이 3가지를 모두 적용해야 합니다.
ATAG(Authoring Tool Accessibility Guidelines)는 저작툴에 대한 접근성을 위한 지침입니다. 소프트웨어 개발자들을 대상으로 하고 있으며 어떻게 하면 접근성이 있는 소프트웨어를 만들수 있는가를 위한 것입니다. 오쏘링툴을 선택할 때 ATAG가 적용된 제품을 선택하면 접근성있는 웹사이트를 제작하는데 도움을 받을수 있고 2.0은 현재 Last Call Working Draft상태입니다. HTML에디터, CMS, 블로깅툴, 위키 소프트웨어가 모두 오쏘링툴에 포함됩니다. WCAG(Web Content Accessibility Guidelines)은 웹사이트 컨텐츠의 접근성에 대한 가이드라인을 제공하고 있으며 UAAG(User Agent Accessibility Guidelines)는 방문자와 사용자들을 위한 것으로 사용자들의 웹브라우저 같은 툴에 대한 가이드라인입니다.

올해 WCAG 2.0이 완성되었습니다. 아직 사용하고 있지 않다면 꼭 사용하기를 권하며 이 지침을 따르면 접근성을 상당히 향상시킬 수 있습니다. 1.0때에 비해서 접근성부분에서 많이 발전하였습니다. HTML, CSS등 많은 기술에 적용할 수 있으면 W3C의 표준기술들은 물론 표준이 아닌 실버라이트나 PDF등에도 적용할 수 있습니다. 더군다나 2.0에서는 개발자들에게 많은 여지를 주고 있기 때문에 개발자들이 탄력적으로 쉽게 적용할 수 있습니다. 현재 샘플코드등의 라이브러리를 확보하려고 계속 노력하고 있습니다.

WAI-ARIA(Accessible Rich Internet Applications)는 Ajax나 DHTML등을 사용할때 스트립팅에 대해서 많은 더움을 받을 수 있습니다. 다이나믹한 웹사이트는 접근성을 확보하기가 더 어렵기 때문에 WAI-ARIA는 유용하며 이는 가이드라인이 아닌 테크닉에 대한 것이기 때문에 WAI-ARIA를 적용하면 WCAG을 따르는데도 도움이 됩니다.

KWAG 13회 워크샵      KWAG 13회 워크샵


Q&A
1. 웹접근성과 유니버셜 디자인은 어떻게 다른가?

웹접근성이 결국은 유니버셜 디자인 중의 하나가 아닌가 생각합니다. 웹 접근성에 대한 접근이 비단 장애인뿐만 아니라 모두를 위한 것이기 때문입니다. 몇몇사람들은 이를 오해해서 특정 장애를 위해서 따로 사이트를 만들면 되지 않겠냐고 주장하지만 이는 어떤 장래를 가진 사람이 있는지 파악하기도 어렵고 컨텐츠를 업데이트해주는데도 문제가 있습니다. 가장 좋은 방법은 하나의 웹사이트를 접근성을 향상시켜 구축하는 것입니다.

2. WCAG 2.0을 제정할 때 가장 어려웠던 점은 무엇입니까?

가장 좋았던 점을 먼저 말하자면 전 세계에서 많은 사람이 오랫동안 함께 참여해서 2.0이 제정되었다는 것입니다. 어려웠던 점은 WCAG 2.0이 기술중립성을 갖도록 만드는 것이었습니다. 가장위에 원칙을 두고 그 아래 지침을 두고 그 아래 세부적인 내용을 두어 많은 곳에 적용이 될 수 있도록 하였습니다. 기술중립성이라는 것은 어떤 기술이든 적용할 수 있게 했다는 것이고 미래를 생각하며 만들었습니다.

3. 접근성과 사용성의 차이와 기준에 대해서...

웹접근성은 구체적으로 장애인들이 웹사이트를 사용하도록 한다는 것이고 사용성이라는 것은 좀더 일반적인 개념이라고 할 수 있습니다. 물론 둘 사이에 중복되는 부분이 있습니다.

4. 외부에서 한국의 접근성 정책과 수준에 대한 생각은 어떠합니까?

한국에서 많은 활동이 진행되고 있다는 것은 고무적인 일이라고 할 수 있으며 정책이나 교육들이 점점 늘어가고 있는 것으로 알고 있습니다. 하지만 앞으로 발전되어야 할 부분이 더 많다는 것을 들었고 민간이나 기업들에 더 많은 보급이 필요한 것으로 알고 있습니다.

Judy Brewer의 발표자료는 웹접근성 연구소에 올라와 있습니다.


저도 모르고 갔지만 Judy Brewer도 장애를 가진 사람이었습니다. 광과민성 발작때문에 세미나중에 플래시촬영이 금지가 되었으며 휠체어에 앉은채 진행이 되었습니다. 편견을 가지려는 것은 아니지만 장애를 가진 사람이 직접 접근성에 대한 활동을 한다는 것이 그것도 WAI의 의장직을 맡고 있다는 것이 꽤 인상적이었습니다. 훨씬 가치있고 실질적인 효과가 있으리라고 생각합니다.(국내에서는 이런 부분에서는 참 아쉽기만 합니다. 사람들의 활동이 아쉽다기 보다는 사회구조상 장애인들이 중요한 위치에 올라설 기반이 부족하다고 생각중입니다.)
아무래도 WAI 의장의 세션이었기 때문에 테크니컬적이지 않음에도 저에게는 상당히 유용한 세션이었습니다. 웹접근성에 대한 개념과 태도도 아주 명확했으며 그동안 막연히만 알고 있던 부분도 많이 정리가 되었습니다. 사실 저는 웹접근성을 장애인에 대한 문제가 아닌 웹의 보편성의 문제라고만 생각하고 있었는데 이부분은 제가 좀 오해하고 있었던것 같았습니다.(이부분은 진보넷의 "웹 접근성 국제 세미나, 2010"에서 이뤄진 댓글들을 보면 꽤 많은 도움이 된다고 생각합니다.) 그동안 웹표준뿐만 아니라 웹접근성에도 많은 관심을 가지고 지지하고 있었지만 세부적인 부분에 대해서는 많이 알지 못했는데 많은 동기부여가 되는 시간이었습니다.


Section 508 and the ICT Refresh of the 508 Standard - Timothy Creagan
Timothy Creagan은 미국 접근성위원회에서 재활법 508조에 대한 담당자입니다. 재활법 508조는 그전의 10년전 쯤에 제정된 255조가 많은 시간이 지나면서 환경이 달라졌기 때문에 새로 개정한 것입니다. 2001년에는 사용자들이 직접 애플리케이션을 가지고 있었고 각 기기들은 한가지 기능만 가지고 있었는데 이제는 많이 달라졌고 카테고리도 다양해 졌기 때문에 미정부에 납품하는 전자제품들 조달에 대한 새로운 508법이 제정되었다고 합니다. 508에 대한 제안을 하고 이를 공청회등을 통해 대중에게 검증을 받은뒤에 올초에야 마무리가 되었습니다. 이 작업은 WCAG과 조화를 이루었기 때문에 WCAG 2.0을 준수하면 재활법 508을 준수할 수 있습니다.




Timothy Creagan의 발표자료는 웹접근성 연구소에 올라와 있습니다.


웹접근성은 기업들의 입장에서는 동기부여를 강제하기가 어려운 점이 있기 때문에 관련 법 제정은 정말 중요한 부분이라고 생각하고 있습니다. 그럼에도 아무래도 법적인 얘기를 였기에 약간은 지루했습니다. ㅎㅎ


[jQuery]jQuery의 새로운 공식 플러그인 Templating과 Data Linking..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

지난 4일 jQuery 팀은 블로그를 통해서 Templating, Data Linking, Globalization 공식플러그인을 발표했습니다. 지난 3월에 열린 MIX 2010에서 Microsoft가 코드 공헌 및 리소스를 통해서  jQuery 프로젝트를 지원하기로 발표한 이후 MS는 템플릿기능일 제공하는 플러그인은 jQuery 커뮤니티에 리뷰하였고 뒤이어 data 동기화를 위한 Data Link 플러그인과 다국어화를 위한 플러그인인 Globalization 플러그인을 제공하였다고 합니다. 7달의 개발기간동안 jQuery의 베스트 프렉티스와 커뮤니티의 요구사항들을 충족시키기 위해서 jQuery팀과  Microsoft팀은 아주 밀접하게 일했으며 이 모든 코드는 jQuery처럼 제한없는 라이센스를 보장하고 있습니다.

Microsoft가 공헌한 Templates, Data Link, jQuery Globalization 플러그인들은 jQuery의 공식 플러그인으로 받아들여졌습니다. 공식플러그인이 됨으로써 이 플러그인들은 jQuery와 jQuery UI 라이브러리의 차기버전의 호환성이 계속 보장될 것입니다.  Templates 플러그인과 Data Link플러그인은 jQeury Core팀에서 관리될 것이고 Globalization플러그인은 jQuery UI 프로젝트에 포함될 것이며 Templates 플러그인은 1.5버전부터 Core라이브러리에 통합될 예정이라고 합니다.

공개된 이후 몇일 사이에 이 플러그인들에 대한 소식이 많이 눈에 띄어서 자료를 찾아보면서 정리해 봅니다. 자세한 사용은 찬찬히 만져보면서 써봐야 할것 같습니다. 둘다 상당히 매력적이지만 특히 템플릿 플러그인은 Script.aculo.us를 사용하면서 Builder를 유용하게 사용했기 때문에 jQuery를 쓸때는 이른 유틸리티함수들이 아쉬웠기 때문에 아주 유용할 듯 합니다.

jQuery Templates plugin
jQuery사이트를 통해서 API문서를 제공하고 있고 소스는 github에 공개되어 있으며 jQuery 1.4.2버전이 필요합니다. api문서를 참고하여도 되지만 demo용 코드를 참고하면 사용하는 방법에 대해서 알 수 있습니다.



JavaScript
1
2
var dataObject = {firstName: "John", lastName: "Resig"}
$("ul").append( "<li>${firstName} - ${lastName}</li>", dataObject, null );

위와같이 간단하게 템플릿을 사용할 수 있습니다.


JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script>
var arrayOfDataObjects = [ 
    { firstName: "Dave", lastName: "Reed" },
    { firstName: "Boris",lastName: "Moore" }
];

$( "#leadingOrTrailingText" )
    .tmpl( arrayOfDataObjects )
    .appendTo( "#test" );
</script>

<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
    ${firstName} <strong>${lastName}</strong> <br/>
</script>

복잡한 템플릿의 경우는 위 코드와 같이 템플릿을 따로 정의해 두고 사용하는 것도 가능하며 .tmplItem() 메서드를 사용하면 템플릿에 적용한 데이터 오브젝트를 가져올 수 있습니다.

jQuery Data Link plugin
Data Link플러그인도 API문서를 제공하고 github에 소스가 공개되어 있습니다만 아직 공개되지않은 jQuery 1.4.3버전에 의존하고 있기 때문에 jQuery 저장소에서 최신소스를 받거나 Data Link저장소에 포함되어 있는  jQuery파일을 사용하여야 합니다.

jQuery는 이미 data()같은 data API를 지원하고 있습니다. 이 data API는 문자열이아 아닌 데이터도 저장할 수 있으며 엘리먼트가 삭제될때 모두 제거해주기 때문에 성능을 향상시키고 메모리 누수도 피할수 있기에 데이터노드에 직접 데이터를 첨부하는것 보다 낫습니다만 Data Link 플러그인은 DOM객체와 엘리먼트 사이에 바인딩을 지원합니다.



JavaScript
1
2
3
4
5
var person = {};
$("form").link(person, {
    firstName: "first-name",
    lastName: "last-name",
});

위와같이 바인딩을 하면 person의 firstName이나 lastName의 값이 변경되었을 때 form의 값도 같이 변경되며 그 반대도 마찬가지입니다. 바인딩을 해제할 때는 unlink() 메서드를 사용합니다.