deutism » cross browsing

작업의 범위와 웹 접근성 그리고 웹 접근성 품질마크

deute — Thu, 13 Jan 2011 02:31:17 +0000

2002년말 당시에 저는 모 에이전시에서 초대형 사이트의 리뉴얼 프로젝트 진행 했었습니다. 이 사이트는 그 당시에도 IE6 뿐 아니라 IE5.5, IE5,IE4,NS4.7, MAC IE5.2 등등 그당시의 소위 잘나가던 브라우저들을 모두 맞춰야했었던 프로젝트였습니다. 페이지의 레이아웃을 테이블로 사용하긴 했지만 크로스브라우징은 구현하려고 노력을 많이 했던 프로젝트 였습니다.

그런데 사실 제가 다녔던 그회사는 좀 특이했습니다. 크로스 브라우징은 기본으로 해야한다는 마음가짐을 가진회사였고 제가 첫번째로 다닌 회사가 그 곳이었기 때문에 저는 크로스 브라우징에 대한 생각이 너무 당연 했습니다. 그런데 그다음에 옮긴 두번째 회사에서는 굳이 크로스 브라우징은 클라이언트가 원하지 않으면 신경쓰지 않아도 된다였습니다.

뭐 알았다고 했지만 이미 몸에 밴 습관(라인을 위한 1*1px 빈이미지, padding margin 트릭등)들은 변하지 않았습니다. 오히려 크로스 브라우징이 IE6만 신경쓰는것보다 더 쉬웠을 정도였으니까요. 공수가 많이 드는일도 아니었습니다. 내가 기본이라고 생각하는 범위가 넓으면 넓을수록 내가 얻어가는것과 결과물의 퀄리티는 넓어 질 수 밖에 없다고 생각합니다.

요 몇해사이 웹 접근성 품질마크가 나름 이슈가 되고 있습니다. 웹 접근성 연구소에 온라인 자문 서비스라는 것이 있는데요. 부족하지만 저도 자문을 조금씩 하고 있는데, 자문을 좀 하다보니 웹 접근성 제고와 방법에 대한 자문 요청이 아닌 NIA에서 시행하는 웹 접근성 품질마크의 기준이나 방법에 대한 자문 요청이 많아 지더라구요. 그만큼 웹 접근성 품질마크가 한국 웹 접근성에 큰 영향을 주었다고 생각되기도 하지만, 웹 접근성의 향상을 위한 토론과 문의등을 해야하는 게시판에서 품질마크의 기준에 대해서 문의가 나오는것은 좀 문제가 있다고 봅니다. 이 문제는 자문을 요청하는 사람도, 자문을 하는사람도, 그리고 게시판을 관리하는사람 그리고 품질마크를 담당 하는사람 모두에게 조금씩 문제가 있다고 봅니다.

일단 제가 몇번 얘기했지만 한국의 웹 접근성은 웹 접근성 품질마크가 전부가 아닙니다. 웹 접근성 품질마크는 최소한의 것이라고 생각합니다. 웹 사이트를 만들어서 납품하는 분들은(까놓고 말하겠습니다.) 웹 접근성을 고려해 웹 사이트를 만드는것인지 웹 접근성 품질마크를 고려해서 웹 사이트를 만드는것인지 잘모르겠습니다. 대부분의 업체들은 웹 접근성을 고려해 웹 사이트를 만들다 보니 부가적으로 품질마크 획득도 가능했다 정도겠지요:) 정말 이런것이길 바라겠습니다.

서론에서도 말한것과 같은 느낌으로 내가 항상 웹 접근성을 지켜서 웹사이트를 만들것이고 그것을 위해 노력하겠다라고 한다면 만들어진 웹페이지의 접근성의 퀄리티는 훨신 좋아 질것이고 쉽게 생각이 들것입니다. 웹 접근성을 고려한 사이트를 만들때 “어느부분까지만 지원하면 되”가 아니라 “이부분도 지원하면 더 좋아져”가 항상 드는 생각이기를 바랍니다.

웹 접근성 품질마크는 언제나 최종목적이 아닌 웹 접근성 구현을 위한 작은 한 단계 또는 부가적으로 얻어지는 작은 선물이라고 보시는게 좋을것 같습니다.

또한 웹 접근성 품질마크측에서도 좀더 능동적인 자세를 보여주었으면 하는 바램입니다. 자문게시판에 평가 카테고리가 있긴하지만 제 생각에는 품질마크는 별도의 게시판을 따로 구성하여 관리하는것이 좋을것 같습니다. 너무 영향력이 커져버린 웹 접근성 품질마크이기 때문에, 좀더 능동적이고 개방적인 제도가 되었으면하는 개인적인 바램입니다. 우리나라의 웹 접근성 향상을 위해 노력을 많이 해주셨는데 맨날 불평 불만만 말씀드려서 죄송합니다.

자문을하는 저도 좀더 열심히 공부하고 다각도로 생각의 폭을 넓혀서 항상 더 많은 도움을 드릴수 있도록 노력하겠습니다. 제가 아직은 많이 부족하지만 열심히 하는 모습은 보여드릴려고 노력하겠습니다.

올해는 만들어지는 모든 사이트가 웹 접근성은 기본으로 지켜지는 그런 한해가 되었으면 좋겠습니다.

에디터 만들기! 1부

deute — Fri, 22 May 2009 01:38:12 +0000

요즘 대부분의 게시판이나 블로그툴에는 HTML에디터라고 불리우는 Online Rich Text Editor(이하 RTE) 가 사용되고 있지요.
우연히 허접한 실력으로 만들 기회가 생겨 회사 게시판에 사용되는 에디터를 만들게 되었고 만들면서 느낀점들을 한 두개 정도 공유하려 합니다. 에디터를 만들어 보신분이라면 볼필요도 없는 내용이 될것이고, 저처럼 온갖 삽질을 하던사람에게는 조금 도움이 되지 않을까 생각해 봅니다.

일단 작업을 시작했을때 생각보다 자료가 별로가 없었고, 그 마저도 크로스 브라우징 논의 자체가 없었습니다. 그와중에도 이미 Xquared나 Smart Editor 같은 훌륭한 에디터가 나와 있었으나, 소스가 너무 어려웠어요 =_=;;;;

openmaru의 Xquared 는 깔끔한 코드를 산출해준다는 장점이 있었습니다. 기존의 에디터는 대부분 HTML4.01를 기준으로 태그를 생성해 주거든요. 그런데 Xquared의 경우는 상당히 깔끔한 XHTML 1.0 베이스의 코드를 만들어주는데 그 장점이 있었습니다. 별것 아닌것처럼 보일지 모르겠지만 저는 아직 그 방법을 완벽히 찾지는 못했거든요. 그외에도 여러 좋은 기술들이 있지만 일단 그 당시 생각한건 저정도…;
NHN의 Smart Editor는 지도나 책 같은 다양한 부가 기능 지원과 레이아웃 지원등 최고의 서비스 회사답게 에디터에 많은 서비스를 담아내었습니다.
외산 에디터도 많습니다만 뭐 FCK Editor가 제일 좋다는 얘기만 들었는데 저는 정이 안가더라구요..(English………….)

첫번째 제 목표는 크로스 브라우징이 었습니다. 마침 4대 브라우저에서(IE5.5, Opera 9.5, Firefox 2+ and Safari 3) 모두 에디터를 만들 수 있다는 소식을 들었거든요.
firefox 에서는 midas라는 코드네임을 가진 프로젝트의 형태로서 지원을 했습니다. 저는 데모화면을 보면서 희망을 가지기 시작했어요.

이제 에디터가 무엇이라는것은 알았으니 맨땅에 헤딩만 하면되겠죠? 자 이제 삽질 시작됩니다.
제가 좀 찾아보니 에디터는 자바스크립트를 이용하여 페이지의 designmode 라는 속성으로 출발을 하게 됩니다.
쉽게 말해서 문서를 직접 디자인 할수있게 만들어 주는 속성이 랄까요? designmode는 HTML의 속성은 아닙니다. 표준속성도 아닐거구요. 그래서 스크립트로 접근을 해주어야 합니다.
iframe을 designmode 로 변경을 해줌으로써 iframe내의 문서를 편집 할 수 있게 되는거죠. 자바스크립트를 잘 모르시는분들도 차근차근 따라하면 쉬울것이라 생각되는데요?
만약에 iframe의 id속성 값이 “editWindow” 라고 한다면, 일단 iframe에 접근을 해야하니 제일많이 보는 getElementById()를 이용하는게 속편하겠죠?

document.getElementById(“editWindow”) //iframe으로 접근!

iframe 안에 우리는 글을 쓸것이니 프레임내의 document 부분으로 접근을해야겠죠? iframe내의 document는 접근하는방법이 약간다릅니다. 아래의 코드가 정답이라고 보시면됩니다.

document.getElementById(“editWindow”).contentWindow.document.designMode = “on”;

로 지정을 해주면 해당 iframe은 수정 할 수 있는 iframe, 즉 에디터가 됩니다. 쉽죠? 에디터가 이렇게 완성되었습니다. =_=/
참고로 풀소스를 한번볼까요?

에디터 만들기

아 진짜 간단합니다.

참고로 contentWindow는 frame이나 iframe의 window를 나타나는 개체입니다. IE의 경우에는 생략이 되어도 상관없지만 기타 브라우저에서는 꼭 필요한 속성 입니다. 이걸 몰라서 에디터는 IE만 된다고 하는사람도 있었을 정도니까요:)

이제 에디터 영역은 만들었으니 각종 스타일이나 이런것을 넣을수 있어야 겠죠?
그건 다음시간으로 넘어갑시다~ 캬캬캬캬캬캬캬캬

참고로 이글은 에디터를 만드는데만 포커스가 맞춰져있습니다. 에디터에 대한 즐거운 생각, 더나은 에디터의 컨셉 등은 다음글을 보시는게 도움이 될듯합니다.