한국 웹 접근성 그룹(Korea Web Accessbiluty Group : KWAG) 사이트가 오픈했습니다. KWAG이 회원들의 자발적인 참여와 상호추천제로 이뤄진만큼, 사이트 자체가 위키를 기반으로 만들었습니다. 또한 회원 상호 간의 커뮤니케이션은 구글 그룹을 이용합니다.

KWAG의 웹 사이트 오픈이 국내 웹 접근성을 보장하기 위한 다양한 활동의 초석이 되길 바랍니다.

미디어 다음에서 뉴스를 읽던 중, 시선을 사로 잡는 기사를 발견했다. “백화점서 66만원에 산 코트값의 진실은?‘이라는 제목의 기사로, 백화점 코트 가격과 하청에 하청의 꼬리를 무는 생산구조가 마치 웹 에이젼시와 웹 사이트 제작 단가의 진실을 말하는 것 같다.

브랜드란 딱지를 떼고, 실제 품질로써 웹 사이트의 단가를 책정할 수 있는 그런 국내 웹 환경이 오길 바란다. 쓸데 없고, 재활용할 수 없는 코드들과 이미지, 플래시로 범벅된 웹 사이트에 돈을 낭비하고 있는 소비자(갑)는 이 글을 반드시 읽어 보시길…

일단, 참고할만한 신문(개인적으로 한겨레를 추천)을 하나 준비한 후에 드림위버를 실행시킨다.

파일을 새로 하나 만들고, 페이지 속성에서 제목/문서유형/인코딩을 변경한다.

디자인 보기 모드를 활성화 시키고, 워드프로세서 툴을 사용하던 것처럼, 편하게 글을 쓰기 시작한다. 글을 쓰다가 코드 보기 또는 분활 보기를 통해서 코드를 확인하면, 곳곳에 p 태그가 입력된 것을 확인할 수 있다.

제목글이나 목록형식, 또는 글자 강조 같은 꾸미기는 나중에 할 것이므로, 웹문서에 들어가야 할 내용들만 적당히 써준다. (한꺼번에 글을 완성할 생각보다는 차분히 내용들을 채워간다는 생각으로 글을 작성해야 한다.)

들어가야 할 내용은 저자(개발자)의 판단이 중요하다. 다른 사이트를 참고할 수도 있고, 자신이 나름대로 정리한 내용들이 있을 것이다. CSSLook.com을 기준으로 들어가야 할 내용들을 정리한 후, 드림위버로 작업한 모습은 예제1에서 확인할 수 있다.

이제, 준비했던 신문을 보자. 가장 상단에는 제호(신문사명)이 나오고, 배포일도 나오고, 커다란 글씨로 1면 톱기사 제목이 나오고, 여러 기사들이 단으로 나눠져 있고, 큰 글씨의 제목글들도 몇가지 크기로 분류돼어 있는 것을 확인할 수 있다. 또한 광고도 있다. ^^;

드림위버에서 무작정 작성한 글을 이제 꾸며보자. HTML 요소를 수정하는 것으로, CSS는 추후에 수정할 것이다. 신문의 가장 큰 글자인 톱기사 제목을 HTML에서는 첫번째 머릿글이라고 하고, h1으로 표현한다. heading 1의 줄임말인 것을 유추할 수 있을 것이다. 이와 마찬가지로 2번째 큰 제목을 h2, 3번째는 h3, 이렇게 h6까지 있다.

드림위버에서 작성한 글 중에서 첫번째 제목글이라고 판단한 부분을 선택한 다음, 하단에 속성메뉴 중에서 펼침메뉴로 돼있는 포맷에서 머릿글 1을 선택하면 된다. 이런식으로 적당히 머릿글1~6을 선택해서 포맷을 수정해준다.

신문 한켠을 보면, 그날의 기사 목록이 정리돼있는 박스를 발견할 수 있다. 이를 웹페이지에서는 메뉴라고 하며, 메뉴에 들어갈 내용을 선택한 후에 드림위버 하단의 속성바에서 비순차 목록 아이콘을 누른다. 선택했던 내용들이 ul, li로 둘러쌓인 모습을 코드 보기 모드에서 확인할 수 있다.

이와 같은 방법으로, 머릿글 1에서 6까지(가급적 3까지) 적당히 선택해서 수정하고, 목록들도 수정해준다. 목록은 순차적 목록(ol : Ordered List)과 비순차적목록(ul : Unordered List)이 있는데, 목록의 항목(li : list)들의 배열순서가 상관없는 메뉴는 ul을, 목록의 항목들의 배열순서가 상관있는 최근 글은 ol을 선택하면 된다.

이렇게 HTML의 수정이 끝난 결과는 예제2에서 확인할 수 있다.

엊그제인 16일부터 제작에 들어가서, 현재까지 30%의 진행율을 보이고 있다. 사이트 컨셉은 “웹디자인의 정도를 보여드립니다”와 “웹디자인의 정도로 안내합니다”로 정했다. 일단 급선무는 국내의 웹사이트 중에서 웹표준을 기반으로, (X)HTML + CSS + DOM + JS를 이용한 구조적으로 분리된, 충분히 의미있는, 그럼으로써 접근성이 뛰어난 사이트를 선정하는 것이다.

사이트를 선정한 다음, 스크린샷과 HTML + CSS + WAI 유효성 검사 결과와 테이블리스, 시멘틱 등 몇몇 납득한만한 객관적 기준을 통해서 사이트를 평가할 것이다. 물론 사이트 평가에 있어서 나의 주관적 견해가 포함될 수 밖에 없지만, 이는 답글/트랙백과 방문자들의 평가(별점 주는 방식)을 통하여 해소될 것이다.

현재로써 국내에 제작된 사이트들 중에서 위의 객관적 기준(웹표준과 관련된 기준들)을 모두 통과하는 사이트를 찾는 것은 무리다. 극소수의 블로그나 개인 사이트를 제외하고는 찾지 못할 수도 있다. 결국, CSSLOOK.com에 컨텐츠 업데이트 주기는 1달에 1번도 힘들 수 있다.

이런 문제 때문에, 공동 저자(운영자) 형식을 취할 수 없다. 또한 사이트 선정의 폭을 확장시킬 필요성이 있다. 이는 사이트 정체성과도 대립될 수 있는 문제이긴 하지만, 현재의 국내 현실을 인식하고 향후 발전적 미래를 예측/준비하기 위해서라도 어쩔 수 없는 선택일 듯 싶다.

현재까지 진행된 CSSLOOK의 구조에 의하면, 최상위 메뉴는 Home, Gallery, Submit, News, About, XML로 구성될 것이다. 또한, Gallery의 하위 메뉴는 HTML 검증, CSS 검증, WAI 지원, CSS 미디어타입 지원, 테이블리스, 시멘틱의 6가지로 분류될 것이다. Submit는 사이트 등록에 대한 내용과 신청양식을, News는 웹표준과 CSS에 관련된 국내/외 소식을 담을 것이다. About/XML은 굳이 소개하지 않아도 알 수 있지 않으까? -_-;

일단 약 5개 정도의 사이트를 미리 선정/평가한 후에 CSSLOOK.com이 오픈(22일)할 것이다. 어느 정도 내용을 미리 채운 후에 사이트를 오픈하는 것이 좋을 듯 싶다. 그후 10여개(기존 5+신규 5)의 사이트가 등록되고, 방문자들의 참여와 평가를 확인해서 필요하면, 개편할 것이다.

즉, 사이트가 등록되고 방문자들이 평가를 해야만 추후 컨텐츠를 재생산할 수 있기 때문이다. (예: 최근 답글 ㅜ.ㅜ)

혹시라도 CSSLOOK.com에 관심이 있거나, 미리 등록할 5개의 사이트에 의견을 주는 분들이 있다면 정말 기쁠 것이다. HTML 코딩이나 CSS를 통한 사이트 디자인은 전혀 어렵지 않은데, 사이트 컨셉을 통해 컨텐츠 구조화는 정말 어렵다. 이러다간, 오픈 몇일 후 다시 개편해야할 것 같다.

국내외 웹사이트 중에서 CSS를 기반으로 디자인된 사이트들을 소개하는 CSSLOOK.com을 제작하고 있습니다. 혼자서 작업하는 데 어려움이 있기 때문에, 관심있는 분들의 의견을 듣고 싶습니다.

‘아직 때가 아니다. 조금 빠르다.’라는 의견도 있지만, 국내에서도 작년 말 야후 코리아를 시작으로 많은 사이트들이 CSS기반으로 디자인되고 있습니다. 더욱이 최근 웹표준에 대한 책도 출간되면서, 웹표준과 그에 따른 CSS 디자인에 대한 인식이 나날이 높아지고 있습니다.

디자인에 있어서 벤치마킹은 무척 중요한 요소입니다. 국내에도 5 DAY와 DB 컷 등 많은 사이트들이 최근 오픈/개편된 사이트들을 소개하고 있습니다. 하지만 이들 사이트에선 웹표준을 준수하고, CSS로 디자인된 사이트를 찾을 수 없습니다.

해외에선 1년 전부터 웹표준 사이트를 소개하는 Web Stadards Awards와 CSS로 디자인된 사이트를 소개하는 CSS Vault가 오픈되어 활동하고 있습니다.

(X)HTML이 웹문서의 골격을 이룬다면, CSS는 웹문서의 외양을 꾸미는 것입니다. 국내 웹시장에서 웹표준에 대한 인식을 깨우고, CSS 디자인의 활성화를 위해서 CSSLOOK.com 사이트를 오픈할 예정입니다.

CSS룩에 대한 어떤 종류라도 의견이 있다면, 답글로 남겨주세요~ 개인적인 내용이라면, 이메일을 이용하셔도 좋습니다.