아직 세미나의 성과와 개선점 등에 대한 평가는 진행되지 않았습니다.
곧 평가에 대한 내용으로 전반적인 후기를 작성하도록 하겠습니다.

이 포스팅에는 댓글을 통해 이번 세미나에서 느낀 점이나 개선점 등 후기를 작성해주시거나, 본인의 블로그 등에 작성한 후기를 트랙백 걸어주시면 감사하겠습니다.

• 마시마로님 : 웹 개발자를 위한 스크린 리더 이해
• 마지니님 : 웹 개발자를 위한 스크린 리더 이해를 다녀와서
• 나인환님 : 웹 개발자를 위한 스크린 리더 세미나
• 호이님 : 웹 개발자를 위한 스크린 리더 세미나 후기

세미나를 준비하며

저도 마찬가지지만, 웹 개발자들은 여러 지침과 웹 표준/웹 접근성에 대한 이해를 통해 웹사이트를 개발하고 있지만, 실제로 장애인이 어떻게 보조기기를 통해 내가 만든 웹사이트를 이해하고 사용하는지 늘 궁금합니다. 또한 작업을 하면서 지침 등을 어떻게 적용해야 하는지에 대해 어려워하고 있습니다. 왜냐하면 실제로 장애인이 웹사이트를 사용하는 모습을 본 적도 없고, 실제로 본인이 사용해 본 적도 없기 때문입니다.

몇 달전 술자리에서 이런 저런 얘기를 하던 중, 백남중 팀장님께서 개발자들에게 스크린 리더에 대한 이해를 높일 수 있는 자리가 있으면 좋겠다는 말씀을 하셨습니다. 자리에 있던 다른 분들도 호응이 좋았고, 그날 이후 백남중 팀장님 외 여러 분들과 이를 현실화하기 위한 논의를 진행했습니다.

백남중 팀장님은 현재 시각장애인복지관에 근무하고 계시며, 다양한 웹 접근성 활동을 하고 계시는 분으로 많은 분들이 익히 알고 계실 겁니다. 복지관에서는 맹인분들에게 스크린 리더 사용법을 가르치고 계시며, 오랜 기간 보조기기에 대한 보급/교육 등을 진행하고 계신 분입니다.

세미나의 의미

이번 세미나는 저도 궁금하고, 아마 여러분들도 궁금해하실 스크린 리더에 대한 자세한 설명과 장애인분들의 웹사이트 이용 형태에 대해 이해할 수 있게 되는 의미있는 자리가 될 거라 생각합니다.

사실 이런 자리에 대해 처음에는 모두들 조심스러웠습니다.
너무 보조기기에 의존적으로 보이지 않을까, 특정 업체의 기기를 홍보하는 자리인가 등등 오해를 받을 수도 있을 것 같았습니다.

하지만, 순수하게 받아들여주셨으면 합니다. 어떤 다른 의도도 없고, 많은 분들이 궁금한 것들을 더 많은 분들과 함께 듣는 자리가 될 것이고, 이를 바탕으로 좀더 다양한 “사용자”를 이해하는 자리 정도로 생각해주셨으면 좋겠습니다.

세미나 개요

• 일시 : 2009년 9월 26일 토요일 14:00~17:00
• 장소 : 잡코리아 14층 강당 (약도)
• 대상 : 현재 웹 개발(웹 디자이너, 웹 프로그래머, 웹 기획자, 마크업 개발자 등)에 종사하면서, 스크린 리더를 활용한 시각장애인의 인터넷 활용, 웹 문서 개발에 관심이 있으신 분.
• 참가인원 : 40명 (선착순)
• 강사 : 백남중 (한국시각장애인복지관)
• 일정
  • 1부 (14:00~15:20)
    1. 시각장애인이란? (정의, 수, 직업 등)
    2. 정보장애 대처 방법(시각, 청각, 촉각)
    3. 시각장애인용 보조공학기기
    4. 시각장애인용 SW/HW 발달
    5. 음성합성장치와 TTS, 그리고 스크린 리더
    6. 운영체제, 응용 프로그램에 대한 접근
    7. 커서모드 뷰모드 차이
    8. 스크린 리더 기본 기능
  • 휴식(15:20-15:40)
  • 2부 (15:40-17:00)
    1. 인터넷 접근 역사 (동영상)
    2. 가상커서란?(기본 개념, 옵션 설정)
    3. 가상커서를 활용한 웹 서핑 실제(폼 콘트롤의 음성 출력 문제, 이동 및 찾기 문제, 표, 이미지, 멀티미디어 접근 문제)
    4. 스크린 리더의 사용성
    5. 저시력인 문제
    6. 신기술 문제(Flash, Ajax, 자바스크립트 등)
    7. 기타
• 참가비 : 없음 (단, 뒤풀이가 있을 경우 참가비는 있을 수 있음 ^^)

참가신청

참가신청은 아래 주소에서 하시면 됩니다.

http://www.onoffmix.com/e/astar2/1061

세미나 장소는 제가 다니고 있는 잡코리아에서 진행할 예정입니다.
장소가 협소해서 인원은 그리 많이 모집하지는 못합니다. 선착순 40명 정도로 생각하고 있습니다. 또 후원을 받지 않으니 먹을 것도 없습니다. ^^;
여러분은 열정과 물음표만 가지고 오시면 됩니다. ^^

[덧붙이는 글]

이번 세미나를 위해 몇 달째 강의방향을 고민하시고, 아무런 대가없이 이런 교육을 하시겠다고 하신 백남중 팀장님께 이번 세미나를 준비하는 분들을 대표해서 정말 감사드립니다.
그리고, 이 세미나를 위해 옆에서 계속적으로 피드백을 주고 있는 비티, 엽, 미희 등 멋쟁이들도 감사.

또한 장소를 허락해주신 잡코리아에 감사드립니다.
처음으로 외부행사를 위해 공간을 열어주셔서 더욱 영광입니다. 특히, 이사님께서 흔쾌히 허락주셔서 감사드리고, 늘 요상한(?) 일을 벌이는데도 잘 믿고 밀어주시는 디자인팀 팀장님에게도 감사드립니다.

최근 회사가 비용절감을 위해 이것저것 조치를 취하는 상황이라 힘들줄 알았는데, 관련부서에서 구매를 진행했다는 소식을 들었습니다. 조만간 센스리더가 도착할 것 같습니다.
센스리더가 오게 되면 제가 하고 있는 작업뿐만 아니라 다양한 내용들을 이제는 문제없이 테스트할 수 있을 것 같아 벌써부터 흥분됩니다. 또한 블로그 포스팅도 센스리더와 연관지어서 해볼 수 있을 것 같습니다.

센스리더

센스리더는 화면낭독 프로그램을 뜻합니다.
종종 “스크린리더기”라고 표현하는 경우를 포스팅이나 카페에서 보게 되는데, 스크린리더는 기기가 아니라 프로그램을 말하는 것입니다. 따라서 “스크린리더기”라고 하는 것이 아니라 “스크린리더”, “스크린리더 프로그램”, “화면낭독 프로그램” 등으로 표현하는 것이 옳은 표현입니다.

센스리더는 단순히 웹사이트의 콘텐츠를 화면으로 출력하는 것만을 뜻하는 것이 아니라, 컴퓨터를 켜는 순간부터 끄는 순간까지 모든 것들을 소리로 출력하는 프로그램으로 컴퓨터를 사용하는 시각장애인 등은 대부분 보유하고 있다고 봐도 무방합니다.

얼마전 모 업체에서 장애인들이 웹에 접근하기 위해서는 웹 기반의 TTS 솔루션이 훨씬 효율적이고, 웹 접근성을 보장하는 웹사이트를 개발하는 것보다 효과가 크다는 내용으로 한창 이슈가 된 적이 있었습니다. 물론 해당 업체의 TTS 솔루션이 몇몇 장애인들에게 웹에 접근하는 과정을 단순화시킬 수도 있지만, 이를 가장 좋은 방법으로 생각하는건 문제가 있습니다.
우선 컴퓨터를 켜고 브라우저를 실행시키는 과정을 생각치않고, 단순히 웹사이트를 이용하는 것만을 가지고 판단하는건 옳지 못한 논리적 비약이 아닌가 합니다. 해당 내용에 대해서는 아래 링크들과 글에 달린 댓글들을 참고하시면 충분히 고수분들의 의견을 들으실 수 있을 것 같습니다.

• 웹 기반 TTS(Text To Speech) 솔루션 백해무익.
• 웹 접근성에 대한 오해 [1] [2]
• 음성 및 텍스트형 별도 홈페이지에 대한 잘못된 정보 (덧글 맨 아래 RNG님께서 작성하신 부분 필독!)
• 음성 출력 솔루션과 텍스트 전용 페이지는 필수 아님.

사용자와 센스리더

웹 사이트를 개발하다보면 기획자, 디자이너, 개발자 모두의 공통적인 이슈가 존재합니다.
바로 “사용자는 어떨까?”입니다.
기획자는 사용자를 중심에 두고 콘텐츠 생성과 UI/UX를 고려한 기획을 하려고 노력합니다. 디자이너는 본인의 디자인을 통해 사용자가 해당 콘텐츠를 어떻게 받아들일 것이며, 어떤 디자인 요소들이 사용자에게 도움을 줄 것인지를 고려해서 디자인을 하게 됩니다. 개발자들도 마찬가지로 사용자를 중심에 두고 개발을 하게 됩니다.

하지만, 이러한 사용자에 대한 고려에서 은연중에 사용자의 폭을 특정 부류에 한정짓는 오류를 범하게 됩니다.
사용자는 다양한 주위 환경과 다양한 개인적인(신체적인) 환경을 가질 수 있음에도 불구하고, 대부분 비장애인, 평균적인 학력 등의 기준을 자신도 모르는 사이 규정하게 됩니다. 비단 이런 오류는 웹 접근성을 고려하지 않고 작업하는 제작자뿐만 아니라, 웹 접근성을 고려하는 제작자에게도 해당되는 얘기입니다.

사용자들 속에 장애인들이 사용하는 센스리더 등에 대한 고민은 그리 많지 않습니다. 엄밀히 말해서, 장애인을 고려하지만, 실제 출력되는 내용에 대해 잘 알지 못한다는 것입니다. 즉, 보조기기를 통해 출력되는 방식에 대한 고려보다는 “이렇게 읽어주겠지?!” 와 같은 어림짐작으로 만족하는 경우들이 많습니다.

호환성과 센스리더

사용자를 고려하고 있기에 웹 개발자들은 귀찮고도 귀찮은 브라우저 호환성 테스트를 끊임없이 진행합니다. 만약 사용자를 고려하지 않는다면 가장 최신의 브라우저에 맞게 작업하고 브라우저 업그레이드를 강제하면 끝날 일입니다. 하지만, 사용자들의 다양한 환경을 고려해야하기에 이를 할 수 밖에 없습니다.

다양한 브라우저들의 호환성을 확보하는 작업은 그리 쉽지 않습니다. 특히나 Internet Explorer 6 이하의 브라우저는 마크업하는 개발자들의 흰머리를 갈수록 늘리는 주범이기도 합니다. 오죽하면 “개발자 좀 살려주세요“라고 하는 부탁의 업그레이드 캠페인을 열겠습니까? (제발 해주세요 T.T). 하지만, 사용자들을 고려하면(또는 회사방침상) 이런 테스트하는 상황이 당연하게 여겨집니다.

우리가 브라우저 호환성을 위해 최소 6가지의 브라우저(Internet Explorer 6, 7, 8, FireFox, Opera, Safari 등)를 체크하듯 장애인이 사용하는 보조기기에 대한 호환성도 확보되어야만 합니다.
이는 단순히 장애인을 배려하고 위하고 동정하는 수준이 아닙니다. 당연히 해야할 다양한 환경에서의 호환성 확보를 위한 필수부가결한 작업인 것입니다. 왜냐하면, 장애인도 사용자이기 때문입니다.

웹 개발자(웹 디자이너)와 센스리더

웹은 엄청나게 빠른 속도로 변화발전하고 있습니다. 개발자들은 새로운 언어, 새로운 기술을 배우기 위해 밤낮으로 공부를 해야 겨우 최근 트렌드를 읽어낼 수 있고, 디자이너들도 빠르게 업데이트되는 다양한 툴과 디자인 패턴들을 몸에 익히느라 고생이 많습니다.

이런 상황에서 센스리더와 같은 보조기기는 빠른 속도로 변화하는 웹 개발 트렌드를 전혀 따라오고 있지 않습니다. 아니, 따라올 수 없습니다. 수준급의 개발자들이 포진해 있어서 바로바로 새로운 기술을 적용할 수 있는 상황이 아닙니다. 얼마되지 않는 매출을 올리는 보조기기 업체에서 얼마만큼의 노력을 하고 있는지는 알지 못합니다. 하지만, 확실한 것은 보조기기는 절대로 웹 개발 기술 발전의 속도를 따라올 수 없다는 것입니다. 따라가면 멀어지고, 또 따라가면 멀어지는 상황이 될 것이 자명합니다.

그렇다고, 웹 접근성을 고려해야하는 당연한 웹 개발 풍토속에서 개발자들은 신기술보다 웹 접근성을 더 고려해야만 할까요? 그래서 훨씬 편하고, 효과적인 신기술을 사용하지 않고, 보조기기가 지원하는 정도의 기술로만 웹사이트를 개발해야만 할까요? 그렇지는 않다고 생각합니다.
현 시대의 웹은 과거와 달리 단순히 정보공유의 공간으로서 존재하는 것이 아니라 복잡한 사회구조의 한단면이면서 이윤추구의 장소가 되었습니다. 이런 상황에서 신기술 도입을 제약하긴 어려운 일입니다. 그로 인해 생길 갈등은 오히려 웹 접근성에 대한 인식을 왜곡할 수도 있기 때문에 더욱더 신기술과 웹 접근성의 관계를 잘 정의내려야만 합니다.

웹 개발자(웹 디자이너)는 사용자의 범위에서 장애인을 늘 포함시켜서 작업을 해야합니다. 장애인에게 최적화된 웹 사이트를 개발해야한다는 건 아닙니다. 최소한 장애인들이 사용함에 있어 콘텐츠를 인지하지 못하거나 불편해해서는 안된다는 것입니다. 이를 위해서는 웹 개발자(웹 디자이너)는 장애인이 사용하는 보조기기에 대한 기본적인 출력방법 등은 알고 있어야만 합니다.

웹과 센스리더

이런 얘기를 들어보셨을 겁니다.

저도 여러번 들었던 얘기지만, 웹 접근성 때문에 자바스크립트도 못쓰고, 플래시도 못쓰면 도대체 기업들은 웹사이트를 어떻게 만들라는거냐라고 합니다. (물론 자바스크립트, 플래시 모두 사용해도 웹 접근성에 문제가 크지는 않습니다. 어떻게 사용하냐의 문제입니다.) 장애인을 고려하다가 회사망하면 책임질 수 있느냐라고 합니다. (왜 망하는지는 잘 모르겠습니다. ^^;)

위와 같은 얘기를 들을때 가장 많이 듣게 되는 단어가 “현실”입니다. 현실적으로 불가능하고 현실적으로 뒤로 미뤄야할 항목이라는 말을 많이 듣습니다. 또 신기술이 봇물처럼 쏟아지는 현실에 “웹 접근성”이 끼어들어 웹발전을 가로막고 있다고 합니다.

(웹발전이 뭐길래 웹 접근성이 이런 대우를 받아야만 할까요? 웹이 “사람”보다 우선인건가요?)

위에서도 언급했지만, 센스리더 등은 웹발전의 걸림돌이 되어서는 안됩니다. 보조기기는 웹발전의 동반자가 되어야 합니다.
그러기 위해서는 웹 개발자들도 그렇지만, 보조기기도 “표준”을 준수해야하고, “표준”에 대한 지향을 목표로 삼아야만 합니다.
표준에 맞게 마크업을 하고, 웹 접근성에 대한 고려도 충분히 한 코드를 표준에 맞게 출력하도록 제작한 보조기기가 표준에 맞게 출력해주는 것이 가장 이상적인 웹 개발과 보조기기의 관계일 것입니다.

내가 센스리더를 구매한 이유

별 필요도 없는 이런저런 말들을 했지만, 제가 센스리더를 구매한 이유는 한가지입니다.
바로 “센스리더 사용자는 어떨까?“라는 것입니다.

실제 업데이트되고 있는 센스리더를 통해 사용자들의 환경을 이해해보려고 하는 것입니다. 이를 웹개발을 하면서 적용하기 위함입니다. 물론, 센스리더에 맞춰서 작업하겠다는 것은 아닙니다. 하지만, 최소한 센스리더를 통해 웹을 접하는 분들도 사용자이기 때문에 최대한 사용과 접근에 문제가 없도록 하겠다는 겁니다. 제가 디자인하고 제가 마크업한 콘텐츠에 가능한 모든 사용자의 환경을 고려하고 테스트를 진행하겠다는 것입니다.

마무리하며

우리가 알지 못하고 느끼지 못하고 있지만, 실제 많은 장애인들이 웹사이트를 항해하면서 비장애인과 동등하게 콘텐츠를 얻길 바라고 있습니다. 웹 접근성이 보장되지 되지 않은 웹사이트를 이용할 수 있는 꼼수를 배우면서까지 콘텐츠를 얻어가는 장애인들의 얘기를 들을때면 웹을 만드는 한 사람으로 한없는 부끄러움을 가지게 됩니다. 하지만, 최근들어 주위에 웹 접근성에 대한 올바른 생각과 따뜻한 마음을 가진 분들이 자꾸자꾸 늘어가고 있어서 다행이고, 행복합니다.

사람들과 만날때 늘 드리는 말씀이 있습니다.

누구나 미래를 단정할 수 없습니다. 또 누구나 세상을 혼자만의 힘으로 살 수는 없습니다. 누구나 장애, 노화에 자유롭다 할 수 없습니다. 우리의 일, 우리를 위한 일이라고 생각하고 따뜻한 마음으로 웹 접근성을 바라보았으면 합니다.

전 함께 살아가는 이 세상에 함께 살아가는 주체들이 모두 행복하고, 평등하길 바랍니다. 가진 자들이 가지지 못한 다수를 억압하는 현실이지만, 우리가 뜨겁게 살아갈 수 이유는 바로 평등하고 사람답게 살 수 있는 세상이 올거라는 희망이 있기 때문일 것입니다.

사람사는 세상, 사람이 주인되는 세상을 위해 함께 웃어보아요~

[추가글]
어제 시청광장에 다녀왔습니다.
얼마전 노무현 대통령을 잃고, 이젠 김대중 대통령마저 세상을 떠나셨습니다.

비통하고 또 비통한 감정을 누를수가 없습니다.
부디 2MB, 매국노들, 간신배들, 기회주의자들 없는 하늘나라에서는 평온한 삶을 사시길 바랍니다.
행동하는 양심으로 민주주의 시대를 열어오셨던 김대중 대통령님의 영면을 기원합니다.
T.T

벌써 한달여라는 시간이 흘렀지만, 아직도 많은 사람들 가슴속에는 그때의 그 슬픔과 분노, 허탈감이 그대로 남아있을거라 생각합니다.
일하다가도 문득문득 그 소탈한 웃음과 주름이 떠오른곤 합니다.

언론보도를 보니, 노무현 대통령을 죽음으로 몰아갔던 검찰, 한나라당, 이명박씨는 정신을 못차리고, Que Sera, Sera(될대로 되라) 를 외치고 있습니다.
아마도 이 정권이 끝나는 그 날까지도 우리가 힘들여 피워냈던 민주의 꽃은 겨울잠을 잘 것 같습니다.
다시금 민주의 꽃이 피려면 물질보다는 “가치”를 삶의 중요한 부분으로 인식하는 공감대가 형성돼야할 것입니다.

오늘 문득 너무 보고 싶은 노무현 대통령을 생각하며, 짧은 글 하나 남깁니다.
그리고, 노제 당시 마눌님이 속한 노래패 우리나라가 시청앞 광장에서 부른 노래를 첨부합니다.

바꿔야지 바꿔야지 생각은 많았는데, 디자이너라는 이유에서인지 스킨을 만든다는게 쉽지가 않더군요.
왠지 상당히 비쥬얼적인 디자인을 해야할 것 같다는 압박감 같은게 있었습니다. ^^;
그런데, 보시다시피 결론은 제가 좋아하는 심플한 스킨으로 하루만에 뚝딱 해결을 했습니다.
이러다가 절대 스킨 못바꿀 것 같다는 생각에 마음을 바꾸게 된거죠.

이번 개편의 가장 큰 이유는 사실 “워드프레스 버전 업그레이드“였습니다.

기존에는 3년전의 버전인 2.3을 그대로 사용하고 있었습니다. 현재 사용하고 있는 2.7 버전에서는 버전 업그레이드와 플러그인 업그레이드가 관리자에서 쉽게 가능하지만, 과거버전의 경우는 재설치를 해야만 합니다. 그게 귀찮아서 아마도 버전을 그대로 유지한 듯 합니다. 그래서 향후를 대비하여 버전을 올려야겠다고 생각합니다.

게다가 스킨도 제가 제작한 것이다보니 그 당시 필요없다고 생각한 기능(예:trackback 등)들을 모두 삭제를 해버렸습니다. 그런데, 필요없다고 생각한 여러가지가 원래는 필요한 거더군요. 제대로 워드프레스를 활용하지 못하는건 상당히 불편하더군요.

플러그인도 몇가지 추가하고, 불필요한 것들은 삭제하였습니다.
방명록도 기존에는 플러그인을 사용해야만 가능했으나 최근 버전들은 Page에서 코멘트를 사용할 수 있으니 해당 플러그인은 삭제했습니다. (그런데, page의 댓글쓰기 선택은 실제 워드프레스에서 적용이 안되더군요. 흠.. 그래서 방명록 페이지 뿐만 아니라 다른 페이지에도 댓글쓰기가 붙어버렸습니다.)
플러그인 관련해서는 다시 정리해서 글을 쓸 예정입니다.

어쨌든 이번에 모처럼 버전도 올리고, 스킨도 바꿨으니 이젠 정말 글을 좀 써봐야겠습니다.
그동안 쓰다만 글들도 모두 마무리하고, 남들 시선 신경쓰지 않고, 마음껏 제 생각을 끄적여보는 공간으로 만들어보겠습니다.

스스로 만든 감옥에서 이젠 출소하겠습니다…

민간개발자 웹접근성 전문교육

말그대로 전문교육이어야하는데, 실제로는 그렇지만은 않습니다.
이런 이름은 어떨까요.

민간개발자 웹접근성 마주하기

그렇습니다.
전문교육이라고 하기에는 여러모로 부족한게 많습니다.
교육내용이 그렇다는걸 먼저 말하기보다 교육분야가 너무 광범위하다는걸 먼저 말해야겠습니다.
(오늘은 그냥 갑자기 생각나서 쓴 것이고, 교육후에 제대로 정리해볼 생각입니다.)

오늘 이 글을 쓰게 된것은..
내일도 교육인데, 이제 3번밖에 남지 않은 교육이 너무 아쉬워서입니다.

뭐랄까. 음….
곧 삶의 활력소를 잃는게 아닌가 걱정할 정도로 마음이 짠~하네요.

남은 3번의 교육
특히 다음주 부산교육을 위해 이제 자야겠습니다.
이번 교육을 통해 강사라는 직업이 그리 만만한건 아니라는 사실을 알게 되었습니다. ^^

이번 교육에서 제가 목표로 삼았던 것..

웹접근성 교육이 법을 피해가는 교육이 아니라,
법과 무관하게 함께 살아가는 세상을 만드는 방법을 함께 공유하고, 함께 느껴보자.

내일도 열심히 달려보겠습니다.

(교육이 끝날때쯤 이번 교육에 대해 한번 써볼랍니다. 포스팅이 너무 없어서 이젠 글쓰기가 두렵네요. ^^)

어제 퇴근하는 길이었습니다.
지하철에서 여전히 멍하게 프린트해놓은 글들을 억지로 번역하고 있었습니다.
하지만, 예전만큼 열의를 가지고 보지 못하고 있었습니다.

강남역.
사람들이 우르르 탑니다. 2호선의 짜증이 밀려들기 시작했습니다.
자리를 굳건히 잡고, 프린트물을 가방에 집어넣고, 또 멍….

뭘하고 살지, 뭘해야하지, 왜 안된걸까, 난 뭐가 부족하지, 난 이 일을 계속할 수 있을까…. 이런저런 절망적인 생각…..

그런데, 45도 위치에 있는 어떤 여자분의 손에 눈길이 갔습니다.
거기 보이는건, ‘CSS 마스터 전략‘과 ‘실용예제로 배우는 웹표준‘!!!
깨끗한걸 보니 이제 공부 좀 해보려고 구매하신 것 같았습니다.

  갑자기 웃음이 나더군요.
그 책을 찢어질때까지 열심히 보던 제 모습이 떠올랐습니다.
보고보고 또 보고, 밑줄이 많아서 형광펜으로 칠하고, 집에 와서 스프링노트에 다시 정리하고…

그 순간, 깨달았습니다.
왜 내가 웹표준으로 내 길을 정한건지 생각이 났습니다.
근래에 들어 그 ‘초심’을 잃고, 다른걸 바라고 있었던 겁니다.

내 주위 환경이 어떤 식으로 변하든 어떤 상황이 되든 지키려했었던 내 바램에 대해 잊고 있었습니다.
한동안 그 사명이 아닌 다른 것을 바라고 있었던 겁니다.
부끄러웠습니다. 정말.

‘성공하는 삶’이 아니라 ‘긍정하는 삶’을 살기로 했었던 제 자신을 이제 다시 찾기로 했습니다.
다시 열심히 살아볼랍니다.
열정적이고 순수하게…. ^^

새롭게 디자인된 브라우저 형태가 상당히 시선을 끌고, 특히 엄청난 기능들이 추가되었습니다.

[firefox 3 for 윈도우]

[firefox 3 for Mac]

자세한 기능들은 여기(한글번역본도 추가되었네요.)에서 보실 수 있습니다.

설치후, 기존 firefox 2 사용자라면 어마어마하게 빨라진 랜더링 속도에 입이 쩍 벌어질 것입니다.
자세한 기능을 나열한 Guide에도 있지만, 랜더링 속도가 엄청나게 빨라졌고, 기존에 메모리를 많이 차지하던 것도 많이 개선되었습니다.

단적으로 잡코리아 사이트를 예로 들자면,
메인도 마찬가지지만 특히 업직종별 채용공고 리스트의 경우 10번 중 6번은 스크립트 중지 또는 브라우저 다운현상을 겪었었습니다.
하지만, firefox 3에서는 그런 현상이 전혀 나타나지 않습니다.
더불어 랜더링 속도도 기존 IE의 최소 2.5배 정도 차이가 나던 것이 현재는 비슷하거나 오히려 더 빨라졌습니다.

마크업 개발자로서 상당히 모질라 재단에 감사를 해야할 정도입니다.
항상 firefox를 중요하게 여기면서도 선뜻 주브라우저로 설정하지 못했었던 이유가 이젠 없어졌으니까요.

하지만, 잡코리아에 작업한 내용들을 훑어보니 감사만 할수는 없을 듯 합니다.
특히 서브글로벌의 경우 메뉴와 검색바 사이에 공간이 생겼습니다.

기존에는 IE 6, IE 7, Opera, Safari, Firefox 2 모두 동일하게 문제가 없었으나 firefox 3에서는 몇가지 CSS 랜더링 차이가 있는 것 같습니다.
firefox 3의 CSS 지원이 더 확장되고 더 세밀해지면서 어설프게 CSS를 사용해서는 안될 듯 합니다.
또한 javascript 지원에서도 기존과 다소 차이가 있을거라는 말을 들었습니다.
정확한 내용은 모르니 패스.

Firefox는 IE와는 차이가 있습니다.
IE는 강제로(?) 사용할 수 밖에 없는 브라우저라면, firefox는 기능적인 측면뿐만 아니라 편리성때문에 개별적으로 다운로드하여 설치하는 브라우저입니다.
즉, IE보다 충성도가 높은 브라우저입니다.

firefox 3가 출시되고 24시간만에 전세계 800만 이상이 다운로드했다는 사실(2008.06.20 현재 1300만)을 듣고 상당히 놀랐습니다.
한달여 전부터 진행된 Download Day 행사를 통해 예약을 했었는데, 그게 주요했던 것도 있지만, 그만큼 표준을 지원하는 브라우저에 대한 사용자들의 요구가 강하다는 반증이겠죠.

IE 7이 출시되었지만, 아직까지도 대부분의 접속자들은 IE 6을 사용하고 있습니다.
IE 7을 강제하려고 했지만, 그렇게 쉽게 사용자가 늘어나지 않았습니다.
그래서 마크업시 IE 7뿐만 아니라 IE 6에서도 랜더링 테스트를 해야합니다.
하지만, firefox는 얘기가 좀 다를듯 합니다.
충성도 높은 firefox 사용자들은 거의 대부분 firefox 3로 옮겨올 것입니다.

현재 잡코리아 내에서 마크업 개발을 하고 있거나 사용중이신 분들은 마음편하게 firefox 2를 버리고 3로 갈아타시기 바랍니다.
그래서 firefox 3에서의 문제점이나 버그들을 빨리 공유해주시기 바랍니다.

firefox 3 출시에 맞춰서 대충 적어봤습니다.

[부연]

IE 7 이 출시되었을때 각 포탈들에게 자사 사이트에 최적화된 IE 7 을 내려받도록 했었습니다.
firefox 도 현재 네이버와 다음에서 자사 사이트에 최적화된 firefox 3 를 만드는 작업을 하고 있습니다.
firefox 가 이제는 비주류가 아니라 주류라는 의미가 되겠죠?

저역시도 처음에 가장 힘들었던 것이 바로 어떤 상황에 어떤 마크업을 하느냐였습니다.
이걸 dt로 해야하나? heading 몇으로 해야하나? fieldset을 넣는게 맞나? label은 항상 해야하나?….

늘 그런 고민으로 지우고 다시 하고, 또 생각이 바뀌니까 또 지우고 다시 하고.. 이런 상황이 계속 반복되었습니다. 마크업한다는 것이 얼마나 어려운가에 대한 절망감으로 스스로 더욱 단련되어야 한다고 결심하곤 했습니다.

시간이 지나 Markup에 자신이 생기게 되었지만, 늘 2% 부족하다는 느낌을 지울수가 없었습니다.

그러던 중 이 고민에서 해방시켜줄 실마리를 찾게 되었습니다.
사실 처음 웹표준을 접하는 사람들은 누구나 비슷한 내용을 들어봤었을 원론적인 얘기였습니다. 하지만, 처음에 들었던 것과 달리 그 글은 마크업의 실마리를 제공해주었습니다.

개인차가 있겠지만, Semantic Markup에 주된 관심사를 가진 저는 SEO를 다루는 원문의 한 문단일 뿐인 이 부분을 읽고, 지하철에서 전율을 느끼고 머리가 뻥 뚫리는 기분을 느꼈습니다.

본질적인 Markup

웹으로 연결된 수많은 사람들에게 자신(우리)의 생각을 표현하며, 그 정보를 모든(처음부터 ‘모든’은 아니었지만) 사람들과 공유하고자 하는 ‘마음’에서 시작된 웹은 나날이 발전/확장되어 이제는 정보공유 그 이상의 의미를 가지게 되었습니다.
그 이상의 의미때문에 저와 같은 웹관련 업종에 종사하는 사람들이 많이 생기게 되었으니 이전 시기에 웹을 발전시켰던 분들께 우선 감사부터 드리겠습니다.
하지만, 발전이라는 것이 늘 그렇듯 ‘초심’을 잃어가고, ‘변질(왜곡)’되어가는건 어쩔 수 없나봅니다.

초기의 웹은 아름답고 세련된 디자인으로 콘텐츠를 전달하는 것에는 미흡했습니다. 하지만, 전달하고자하는 콘텐츠에 담긴 ‘마음’만은 정확히 표현했습니다.
화면을 볼 수 있는 사람이건, 볼 수 없는 사람이건, 들을 수 있는 사람이건, 들을 수 없는 사람이건 웹은 모든이에게 동등한 ‘마음’을 전달하는 도구였습니다.

하지만, 현재의 웹전반을 보고 있노라면 ‘마음’이 없다는 생각이 듭니다. 현재의 웹은 ‘마음’보다는 ‘비쥬얼, 사업성, 사용성’ 등에만 매몰되어 있는 것 같습니다.

디자인은 웹 디자이너가 콘텐츠를 어떻게 보여줄지에 대한 오랜 숙고를 통해 만들어진 비쥬얼 언어입니다. 디자인과 마크업을 병행하는 대다수의 웹 디자이너와 웹 퍼블리셔들은 이 비쥬얼 언어를 한번더 마크업 언어 즉, HTML로 표현하게 됩니다.

그런데, 여기서 웹 디자이너(웹 퍼블리셔)들은 뿌리깊은 관성에 빠지게 됩니다.
바로 다수의 사용자(비장애인)들이 많이 사용하는 브라우저(IE)에서 제대로 보여지기만(비쥬얼) 하면 된다는 개발방식입니다. 이런 개발방식으로 인해 중첩된 table(div)을 사용하게 되고, 각 태그들이 의미보다는 표현을 위해 사용되게 됩니다. 그 결과 웹은 스스로 일부 사용자/사용환경에서의 접근을 제한하고, 이들에게 소외감을 안겨주었습니다.

이런 잘못된 생각의 근원은 바로 HTML을 ‘배치’의 개념으로 배우고 이해했기 때문입니다. 디자인이 디자이너의 ‘마음’을 담은 섬세한 언어라면 HTML도 마찬가지로 ‘마음’을 담는 언어여야 합니다. ‘배치’는 CSS를 통해 완벽하게 표현될 수 있습니다.

보여지는 디자인이 전부인 사람들도 있지만, 그 디자인보다 HTML로 소통하는 사람(환경)도 있다는 것을 깨달아야 합니다. HTML로 소통하는 사람(환경)에게 ‘마음’이 담기지 않은 HTML은 이해하고 해석하기가 쉽지 않습니다.

그렇기 때문에, HTML을 ‘배치’의 수단으로 사용할 것이 아니라 소통의 수단으로 사용해야합니다. 즉, 본질적인 Markup은 ‘마음’을 담아내는 것입니다.

마음을 담은 Markup

위에서 언급했듯 웹 디자이너는 우선 디자인을 통해 사용자들과 소통합니다.
그리고, 웹 디자이너(웹 퍼블리셔)는 HTML로도 소통해야합니다.
이때, 두 가지의 소통은 동등해야 합니다.
쉽게 말해 디자인에서 강조됐던 타이틀은 HTML에서도 강조된 타이틀이어야 합니다.

이건 비단 웹표준을 지키는 의미뿐만 아니라, 웹접근성 향상과 SEO(Search Engine Optimizing)와도 밀접한 관계가 있습니다.
‘마음’을 담아 소통하는 Markup은 이 3가지를 한번에 얻을 수 있는 최적의 방법입니다.
제작자들이 ‘마음’을 담기만 한다면, 일반 사용자와 소외 계층 사용자(장애인/노인) 뿐만 아니라 기계에게까지 ‘마음’이 전달되게 됩니다.

전 웹 디자이너/웹 퍼블리셔 분들께 제가 알고 있는 가장 쉬운 Markup 방법을 알려드리고 싶습니다.

웹표준 경진대회 홈페이지에 있는 글이 인상적입니다.

게다가 대상은 iPod Touch 라니…
저도 시간이 되는한 참여해볼까 합니다. 결심을 지켜야할텐데…
제작시 인터넷 웹콘텐츠 접근성 지침까지 지켜야하는 재밌는 조건이 더욱 흥분시킵니다. ^^

2008년 6월에 있을 웹표준의 날에 결과가 발표된다고 합니다.
설마 제 생일에 행사가 있지는 않겠죠.. 음.. 걱정인데요.. 6월 9일…

여러분도 참여해보세요~~

민재의 세번째 입원.
의사는 입원을 권하진 않았지만, 민재의 열이 집에서는 도저히 잡히질 않아서 결정하게 되었습니다.
치료를 받으면 그래도 집에서보다는 빨리 나을테고, 우리도 마음이 편할 것 같아서…
생각해보면 우리의 마음때문인지도 모릅니다.
민재보다 그걸 지켜보는 우리 마음이 더 힘들어지지 않기 위해 민재에게는 힘든 입원을 하기로 한거죠.

어린이집을 다니고 나서부터 감기를 달고 사는데, 당분간은 어린이집도 안보내기로 했습니다.
너무 어려서인지 감기나 다른 질병으로부터 스스로를 지키지 못하니깐 더 몸을 만들고(^^) 보내기로…

덕분에 일에 대한 생각으로부터 벗어나 민재와 가족만 생각하게 된건 좋은 것 같습니다.
일때문에 요즘 계속 같이 잠들지도 못했는데, 병원에 있는 동안에는 가족만 바라보니깐 행복합니다.
민재가 아프지 않을때도 이제는 더 민재를 생각해야겠습니다.

민재 어서 나아라~!!!
참고로 민재는 몸이 약하지 않습니다. 병원에 오는건 우리때문이니깐.

사진을 올리는 이벤트였는데, 평상시였으면 포기했을건데….

왜냐하면 사진을 찍어야하니깐. 또 그걸 컴퓨터로 옮겨야하고….
이것저것 귀찮은데…

그런데! 지금은 나에겐 맥북이 있지 않은가. ㅎㅎㅎ맥북에는 카메라가 달려있쥐~~~ 바로 찍어서 올렸습니다..

이렇게 썼어요.
내 자리에서 찍은건데, 뒷자리는 바로 팀장님 자리..

firefox는 나에게 미래를 만들어준 은인!
그렇습니다. 이것저것 저의 미래를 바꾸는 역할을 한 것들이 있지만, 파이어폭스도 상당부분 저의 삶에 영향을 줬습니다. 그래서 저렇게 문구를 잡았구요. (사실 100칸 다 차면 끝나는 이벤트라고 해서 급한 마음에 했는데, 아직도 다 안찼다는..T.T)

바램이 있다면, 파이어폭스의 점유률이 높아져서 IE 가 획기적으로 변화하는 상황을 만들어줬으면 좋겠습니다.

파이어폭스도 좋지만, 제 경우 잦은 다운으로 스트레스를 많이 주는 브라우저이기도 합니다. 파이어폭스의 안정성 문제인지 제 컴퓨터 문제인지 모르지만, 하루에도 몇번씩 다운되는 브라우저로 하루종일 일을 하기에는 아직 좀 힘이 듭니다.

그런 이유와 더불어 보편적으로 많이 쓰는 IE 를 위한 일(?)을 하는 직업이라 IE 의 변화를 항상 기다립니다. 파이어폭스가 그 변화를 만들어주는 역할도 해주길, 좀더 해주길 바라면서…

다시한번 10주년 축하합니다. 100주년까지 살아있고 싶다~~

렌더링 방식에서는 IE 7 보다는 좀더 최신 웹표준방식을 따르고 있다라고 할 수 있을 것 같습니다. (그들의 말로는. 아직 체크못함)
하지만, 기존 웹표준 브라우저들에서 문제가 없었던 form 영역과 iframe 영역의 해석방식이 차이를 보이고 있더군요.
잡코리아를 제일 먼저 띄워보니 iframe과 form을 사용한 부분들에서 문제가 발생하더군요.

이것에 관해 글을 좀 써볼까 했으니 좋은 글이 있어 링크를 겁니다.

IE8 베타 드디어 출시, 해결책, 새기능

평소 이런저런 IE 8 에 대한 정보를 얻으러 가던 정말 멋진 일모리님의 블로그입니다.
꼭 한번 방문하시고, 다른 글들도 다 보시길… ^^

한가지 덧붙이자면, IE 8 자체에 Developer Tool 이 있더군요.
firefox 의 플러그인인 Developer Tool 에 비하면 좀 촌스럽게 느껴질지 모르겠습니다.
하지만, firefox Developer Tool 이 지원하는 내용보다 좋은 점이 있었습니다.
바로 제작자가 작성한 CSS 스타일을 그대로 보여준다는 점이었습니다.
firefox 는 작성하지 않더라도 여러 방식으로 스타일이 ‘없음’을 나타내려고 하는데, IE 8 의 경우는 아니었습니다.
제 생각에는 그건 firefox 보다는 좋았습니다.

시간나면 관련해서 더 훑어볼 생각!! ^^

어쨌든…. ^^
늦게 일어났지만, 아침일과중 중요한 한가지를 지나칠 수는 없습니다.
바로 민재와 (잠깐) 놀아주기죠.
밤에 자주 늦다보니 민재와 놀아줄 시간이 아침밖에 없거든요. T.T

오늘도 민재와 잠시 놀려고 민재를 안고 안방을 나왔습니다.
그리고는 숫자자석이 붙어있는 냉장고 앞으로 가서 ‘이건 뭐지? 이건 뭐야?’ 이러면서 숫자놀이를 하는데, 갑자기 민재가 6을 잡더니 ‘육‘ 하더군요.

6

그 정도야 한참전부터 하던거니 놀라지 않았죠.
그런데, 이놈이 갑자기…
6이라고 적힌 숫자자석을 뒤집고는…

다시 뒤집고는..

이러는겁니다.

9

6을 뒤집으면 9가 된다는 그 나이에 어울리지않는 ‘논리’적 사고를 하는 것에 우리 둘은 놀라자빠지는줄 알았습니다.
(보통의 부모들은 이럴때 괜히 ‘천재! 천재!’ 이러면서 호들갑을 떨지요. 애 낳아보세요~ ㅋㅋ)
숫자 6을 뒤집으면 숫자 9가 된다는 사실을 알고, 설명하는 민재의 모습이 너무나도 예뻤습니다.

이상은 오늘 아침에 일어난 ‘가정사’입니다. ㅋㅋ
그럼 이제부터 ‘논리적 비약’을 해볼까 합니다.
말그대로 ‘비약’입니다. 위와 너무 연관짓지는 마세요~

Semantic Markup

요즘 회사에서 Semantic Markup 과 CSS 에 대한 수업을 진행하고 있습니다.
수업내내 제가 가장 강조하는 것은 주로 ‘Semantic Markup‘ 입니다.

CSS 는 기술적인 측면으로, 경험과 공부로 충분히 일정 수준까지 도달할 수 있습니다.
하지만, ‘Semantic Markup’ 은 경험과 공부보다 ‘논리적 사고’가 더 필요한 부분이라고 저는 생각합니다.
기획서를, 또는 시안을 보면서 이를 논리적으로 고민하고, 구조적으로 Markup 하는 것은 ‘개개인의 논리적 사고’를 요하는 일입니다.
다들 아시겠지만, ‘Semantic Markup’은 웹표준/웹접근성의 기본이고, 이를 능숙하게 해낸다면 CSS 로 스타일을 입히는건 그리 어려운 일이 아닙니다.

웹표준을 처음 접하고 들었던 생각은 ‘디자인/코딩’을 8년을 했음에도 불구하고, Headings, Fieldset, caption, dl 태그 등이 어색하다는 것이었습니다.
사실 처음에는 ‘새로 생긴 태그인가’라는 생각도 했었습니다. ㅡ..ㅡ;
(이게 대한민국의 웹개발 현실이 아닐까 합니다. 물론 최근 웹표준이 화두가 되면서 변하고 있지만..)
하지만, 웹표준을 공부하면서 만난 모든 태그들은 이미 과거부터 존재했던 것들이었습니다.
그동안 제가(다수의 디자이너/개발자/코더) 몰랐던 거지요. 아니 필요가 없었던 거지요.

‘Semantic Markup‘은 문서(웹페이지)를 “구조화“시키는 것입니다.
구조화는 곧, 문서(웹페이지)의 내용들이 “체계를 가진다”는 것입니다.
기존에 사용했던 방식은 문서(웹페이지)를 “작성“했던 것이구요.
다시말해 지금까지의 문서(웹페이지)는 “체계가 없었다”는 것이구요.

구조화와 작성은 6과 9처럼 단순히 “(생각의/개발방식의) 전환“만으로도 전혀 다른 결과물을 만들어낼 수 있습니다.
6을 뒤집어 9가 되면 전혀 다른 개념의 숫자가 되듯, 기존에 ‘작성‘했던 문서(웹페이지) 개발방식에서 벗어나, Semantic Markup 을 통해 ‘구조화‘ 하는 개발방식으로 전환시키면 전혀 다른 개념의 문서(웹페이지)가 됩니다.
‘작성‘된 문서(웹페이지)가 ‘구조화‘된 문서(웹페이지)가 되면 본질부터 변하게 됩니다.

기존에 문서(웹페이지)를 ‘작성‘하면서, 제목에 어떤 강조의 스타일을 주기 위해서는 font 를 사용해서 글자크기를 키우고 색을 줬습니다

font

font 는 단순히 제목을 강조하기 위해 스타일을 주기 위한 의미없는 태그입니다.
일반적으로 장애를 가지지 않은 사람이 보기엔 이것은 ‘제목’이지만, 장애를 가진 분들에겐 그냥 ‘글’일 뿐입니다. 그리고, 검색엔진에게도 그냥 ‘text’ 일뿐입니다. 이들에게는 이 ‘제목’이 아무런 의미를 가지지 않는(의미를 주지 않는) ‘글, text’ 일 뿐입니다.

하지만, 문서(웹페이지)를 ‘구조화’하기 위해, H 태그를 사용하고, font 와 마찬가지로 글자크기를 키우고 색을 주게 되면 얘기가 달라집니다.

h1

이제 장애유무와 상관없이, 그리고 검색엔진 등에게 ‘제목’은 ‘제목’이 되는 것입니다.
이 변화는 우리가 상상하는 것보다 더 의미를 가지게 됩니다.

스크린리더(Screen Reader)등과 같은 ‘화면음성변환기’를 사용하는 장애인분들이 문서(웹페이지)를 쉽게 이해할 수 있도록 할 수 있고, 이미지나 스타일을 보길 원하지 않는(볼 수 없는) 일부 사용자에게도 문서(웹페이지)의 의미를 전달할 수 있고, 검색엔진의 크롤링을 직간접적으로 도와 부수적 이익을 얻을 수 있고, 개발/디자인/퍼블리싱의 효율성을 높일 수 있고… 등등

이처럼 웹접근성을 극대화할 수 있는 Semantic Markup은 (생각의/개발방식의) 전환을 통해 가능해집니다.
솔직히 말해 위의 장점보다 더욱 웹표준 방식을 제가 선호하는 이유는 훨씬 쉽고, 효율적이라는 것입니다.
처음에 접했을 때는 ‘이런거 안해도 되잖아’ 하면서 외면하려했지만, 지금은 ‘이거 아니면 이젠 못해’가 되어버렸습니다.
웹접근성의 향상을 통해 ‘사회적 책임’을 다할 수 있고, 업무를 효율적으로 처리할 수 있고, 회사이익에 도움이 될 수 있는 웹표준!
(생각의/개발방식의) 전환을 통해 Semantic Markup으로 웹표준을 시작합시다!!!

<덧붙이며>
‘비약’에 대한 질타는 없길 바라며… ㅋㅋㅋ
이글의 의도는 생각의 전환으로 사물/사회를 변화시킬 수 있다는 것입니다.
민재가 6과 9를 뒤집듯…. ^^

그리고, 6월 9일은 블로그의 날이던가요?
그날은 제 생일이기도 합니다!!! ^^

저에게 있어 기존에 크게 신경쓰지 않았던 곳 중에 하나가 바로 ‘페이징’‘pagination’입니다.
(물론 저의 경우입니다. 대부분의 디자이너분들은 아닐거라 생각합니다. ^^)

미리보기

위와 같은 pagination 어떠세요?
네이버에서 쓰고 있는거랑 비슷하죠? 플리커도 이런 스타일을 쓰고 있죠..
크게 디자인 요소를 넣지 않았지만, 깔끔하고, 발랄한 느낌을 가진 pagination이라는 느낌이 듭니다.

그럼 한번 이 pagination을 만들어볼까요?
pagination작업시 HTML은 아래와 같이 간단합니다.

HTML

<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a href="#">10</a></li>
</ul>

이제 HTML은 손을 댈 곳이 없고, CSS로 평범한 숫자들의 목록을 이쁘게 만들어 볼까요?
CSS는 아래와 같습니다.

CSS

ul {
	list-style:none;
	float:left;
	display:inline;
}
ul li {
	float:left;
}
ul li a {
	float:left;
	padding:4px;
	margin-right:3px;
	width:15px;
	color:#000;
	font:bold 12px tahoma;
	border:1px solid #eee;
	text-align:center;
	text-decoration:none;
}
ul li a:hover, ul li a:focus {
	color:#fff;
	border:1px solid #f40;
	background-color:#f40;
}

간단하죠.
물론 더 간단하게 예쁘게 만드실 수 있는 분들이 많을거에요. ^^

어쨌든 위내용을 정리해보면,

1. 목록을 우선 float 시켜서 가로로 배열하고,
2. 각 li 들의 a 값을 이용해서 width 값을 고정시키고,
3. a 에 비활성화 상태의 스타일을 정의하고,
4. a의 hover 선택자에서 활성화 상태의 스타일을 정의하면 끝!

이런 간단한 과정으로 밋밋한 pagination을 깔끔한 pagination으로 만드실 수 있습니다.

실제 웹사이트에서 사용할때는 ‘이전’, ‘다음’, ‘현재페이지’ 등도 표현해야하는데, 이번 예제를 이해하시면 금방 적용하실 수 있어서 그 부분은 빼도록 하겠습니다.
그리고, IE 5.5 에서도 동일하게 보이게 하기 위해 들어가는 CSS도 빼도록 하겠습니다.
그 부분은 미리보기에 담겨있습니다.
(Mac 등에서는 확인을 못했습니다. T.T)

더 좋은 방법이나 문제점이 있으면, 답글 부탁드립니다~

display:inline-block을 이용한 pagination 방법 (2009-07-09)

float을 사용했을 경우 page 수에 따라 가운데 정렬하는 부분에 어려움이 생깁니다.
항상 10개가 기본으로 나온다는 보장이 없기때문에 가운데 정렬을 기본으로 해야하는데, 이를 위해서 display속성의 값들 중에서 “inline-block“값을 사용해서 만들어보도록 하겠습니다.

inline-block

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

display:inline-block은 W3C의 CSS 2 명세에서는 없었고, CSS 2.1 권고후보에서 추가된 값으로 해당 요소를 block 박스로 만들지만, inline 요소와 같은 흐름을 가지게 하는 값입니다. 즉, inline 요소가 가질 수 없는 top(bottom) margin 과 top(bottom) padding, width를 가질 수 있게 됩니다.

HTML은 동일하고 CSS만 추가해보겠습니다.

ul {
	text-align:center;
}
ul li {
	display:inline;
	vertical-align:middle;
}
ul li a {
	display:-moz-inline-stack;	/*FF2*/
	display:inline-block;
	vertical-align:top;
	padding:4px;
	margin-right:3px;
	width:15px !important;
	color:#000;
	font:bold 12px tahoma;
	border:1px solid #eee;
	text-align:center;
	text-decoration:none;
	width /**/:26px;	/*IE 5.5*/

}
ul li a.now {
	color:#fff;
	background-color:#f40;
	border:1px solid #f40;
}
ul li a:hover, ul li a:focus {
	color:#fff;
	border:1px solid #f40;
	background-color:#f40;
}

display:inline-block의 경우 Firefox 2에서 적용이 안되는 문제가 있어 display:-moz-inline-stack;를 별도로 제공해야합니다. 하지만, 회사마다 지원 브라우저의 범위가 있으므로, 저희처럼 Firefox 2에 대한 지원은 하지 않기로 한 곳은 없어도 무방합니다.
작업내용은 미리보기에서 확인하실 수 있습니다.

들어가며

장애인 차별금지 및 권리구제 등에 관한 법률(이하 ‘장차법’)의 시행이 이제 2달 반 남았습니다.
2007년 4월 10일에 제정된 이 법은 작년 11월 시행령(안)이 만들어졌고, 곧 정식법안으로 만들어질 것입니다.

(시행일) 이 법은 공포 후 1년이 경과한 날부터 시행한다.

즉 2008년 4월 10일부터 시행한다는 뜻입니다.

하지만, 다수의 민간기업들 특히 IT 기업들은 이 법의 파급효과에 대해 준비, 인지를 하지 못하고 있습니다.
국가 및 지방자치단체, 공공기관들은 ‘웹 접근성 품질마크‘ 등과 같은 계도와 강제의 지시들이 있어왔기때문에 준비(물론 에이전시들이 해야할 일들이지만)를 하고 있었다고는 하지만, 작년 공공기관들의 웹 접근성 품질마크 심사를 직접 진행해보니 아직 공공기관들의 갈길도 멀게만 보입니다.

웹 접근성(Web Accessibility)이란?

W3C WAI 에서는 다음과 같이 정의하고 있습니다.

Web Accessibility means that people with disabilities can use the Web.

이 부분을 해석하는 방법에 대한 논쟁이 좀 있기는 합니다.
‘장애를 가진 사람’ 이라고 해석하는 경우와 ‘불리한 조건을 가진 사람(인터넷환경, 기기환경 등)’ 이라고 해석해야한다는 입장이 있으나, 둘다 어떤 경우라도 웹에서 제공하는 정보는 누구나 접근할 수 있어야 한다는 점에서는 원칙적으로 동일할 것이라 생각합니다.
이것에 대한 많은 토론이 있었고, 현재도 있고, 미래에도 있을 부분이므로 우선 패스~

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities.
- Wikipedia

웹 접근성이란, 어떠한 사용자(장애인, 노인 등), 어떤 기술환경에서도 전문적인 능력 없이도 웹 사이트에서 제공하는 모든 정보에 접근하고 이용할 수 있도록 보장하는 것을 말한다.
- 한국정보문화진흥원

우리 회사 사이트가 장애인이나 노인들이 이용할 수 없어? 맥(Mac)에서는 이용할 수 없어? 라고 물으시면 이렇게 답해드리겠습니다.
네. 이용할 수 없습니다.
왜 이용할 수 없을까요? ^^;
그럼 다시 장차법으로 돌아가 볼까요…

장차법에서의 웹 접근성

장차법은 웹 사이트에 국한된 법은 아닙니다. 사회전반적인 모든 영역에 걸쳐 장차법은 그 파급효과가 있습니다.
그렇기때문에 더욱 무서운(?) 법이라고 할 수 있습니다.

제1장 총칙, 제1조(목적)
이 법은 모든 생활영역에서 장애를 이유로 한 차별을 금지하고 장애를 이유로 차별받은 사람의 권익을 효과적으로 구제함으로써 장애인의 완전한 사회참여와 평등권 실현을 통하여 인간으로서의 존엄과 가치를 구현함을 목적으로 한다.

모든 생활영역에서 장애를 이유로 한 차별은 있을 수 없으며, 장애인과 비장애인간의 권리는 차등이 있어서는 안된다는 것입니다.
내가 받는 혜택, 정보, 서비스 등은 타인도 모두 똑같이 받을 수 있어야 한다는 것입니다.
다른 영역은 회사 입장에서는 당장 큰 관심사가 아닐터이니 가장 관심을 가져야할 웹과 관련된 항목을 위주로 설명을 해보도록 하겠습니다.

장차법에서는 웹 접근성에 관한 정확한 명시는 없으나 정보접근에 관한 차별금지 항목이 있습니다.

제20조(정보접근에서의 차별금지)
① 개인·법인·공공기관(이하 이 조에서 “개인 등”이라 한다)은 장애인이 전자정보와 비전자정보를 이용하고 그에 접근함에 있어서 장애를 이유로 제4조제1항제1호 및 제2호에서 금지한 차별행위를 하여서는 아니 된다.

여기서 전자정보는 “정보화촉진기본법 제2조 제1호”에 명시되어있는 정의를 따른다고 되어있습니다.

“정보”라 함은 자연인 또는 법인이 특정목적을 위하여 광 또는 전자적 방식으로 처리하여 부호·문자·음성·음향 및 영상 등으로 표현한 모든 종류의 자료 또는 지식을 말한다.

그리고, 장차법 시행령에는 정보통신관련 조항에 직접 웹 접근성을 명시하고 있습니다.

제15조(행위자 등의 단계적 범위)
웹 접근성(장애인 등 누구나 신체적ㆍ기술적 조건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있는 정도를 말한다)을 보장할 수 있는 웹사이트

즉, 웹 접근성을 보장하지 않는 웹사이트는 차별행위를 한 것이고, 이는 처벌대상이 된다는 뜻입니다.

그 전에도 장애인 차별에 관한 법안이나 내용들은 있어왔고, 우리 스스로도 장애인을 차별해서는 안된다는 생각들을 많이 했습니다.
하지만, 이제는 생각으로 그쳐서는 안되는 시절이 되었습니다.
(의도하였든 의도하지 않았든) 차별을 좀 해도 괜찮았던 과거와 달리 차별은 곧 처벌의 대상이 됩니다.

장차법의 차별정의

차별을 추상적으로 개인적인 감정에 의해 판단하지 않게 하기 위해, 장차법에서는 차별을 명확히 정의하고 있습니다.
제4조(차별행위)에서 6가지의 금지하는 차별의 경우를 살펴보겠습니다.
참! 그것만 피하면 되겠네.. 라는 안일한 생각은 마세요. 빠져나가기 힘듭니다.

제4조(차별행위) ① 이 법에서 금지하는 차별이라 함은 다음 각 호의 어느 하나에 해당하는 경우를 말한다.

1. 장애인을 장애를 사유로 정당한 사유 없이 제한·배제·분리·거부 등에 의하여 불리하게 대하는 경우
2. 장애인에 대하여 형식상으로는 제한·배제·분리·거부 등에 의하여 불리하게 대하지 아니하지만 정당한 사유 없이 장애를 고려하지 아니하는 기준을 적용함으로써 장애인에게 불리한 결과를 초래하는 경우
3. 정당한 사유 없이 장애인에 대하여 정당한 편의 제공을 거부하는 경우
4. 정당한 사유 없이 장애인에 대한 제한·배제·분리·거부 등 불리한 대우를 표시·조장하는 광고를 직접 행하거나 그러한 광고를 허용·조장하는 경우. 이 경우 광고는 통상적으로 불리한 대우를 조장하는 광고효과가 있는 것으로 인정되는 행위를 포함한다.
5. 장애인을 돕기 위한 목적에서 장애인을 대리·동행하는 자(장애아동의 보호자 또는 후견인, 그 밖에 장애인을 돕기 위한 자임이 통상적으로 인정되는 자를 포함한다. 이하 “장애인 관련자”라 한다)에 대하여 제1호부터 제4호까지의 행위를 하는 경우. 이 경우 장애인 관련자의 장애인에 대한 행위 또한 이 법에서 금지하는 차별행위 여부의 판단대상이 된다.
6. 보조견 또는 장애인보조기구 등의 정당한 사용을 방해하거나 보조견 및 장애인보조기구 등을 대상으로 제4호에 따라 금지된 행위를 하는 경우

다행히도 조항마다 ‘정당한 사유 없이’라는 빠져나갈 구멍을 만들어놓았네요. 하지만, ‘정당한 사유’를 설명하기란 그리 쉽지 않을 것 같습니다.
웹사이트 제작에 장애인을 차별할 수 밖에 없는 정당한 사유란 무엇인지 정확히 변호해줄 유능한 변호인단을 구한다면 모를까…

‘장애를 고려하지 아니하는 기준을 적용’은 곧 ‘장애를 고려하는 기준을 적용하라‘는 말과 같습니다.
즉, 웹사이트 제작시 세세한 부분까지 장애인의 입장에서 만들어야한다는 것입니다.
간단한 예로, 시각장애인을 위해 대체텍스트와 구조적인 markup 을 해야하고, 지체장애인과 청각장애인을 위해 키보드 접근성을 높여야하고, 영상의 경우 반드시 자막을 넣어주어야 합니다. 더 자세한 내용은 다음에 알려드리도록 하겠습니다.

처벌규정

가장 관심있는 부분이겠죠? 그거 좀 안지켰다고 뭐 큰일나겠어? 기껏해야 1-2백만원 벌금내면 되지…..
라고 생각하신다면 오산입니다.(참고로 기업뿐 아니라 개인 웹사이트도 포함입니다. ^^;)

제46조(손해배상)
① 누구든지 이 법의 규정을 위반하여 타인에게 손해를 가한 자는 그로 인하여 피해를 입은 사람에 대하여 손해배상책임을 진다. 다만, 차별행위를 한 자가 고의 또는 과실이 없음을 증명한 경우에는 그러하지 아니하다.

제49조(차별행위)
① 이 법에서 금지한 차별행위를 행하고 그 행위가 악의적인 것으로 인정되는 경우 법원은 차별을 한 자에 대하여 3년 이하의 징역 또는 3천 만원 이하의 벌금에 처할 수 있다.
② 제1항에서 악의적이라 함은 다음 각 호의 사항을 전부 고려하여 판단하여야 한다.

1. 차별의 고의성
2. 차별의 지속성 및 반복성
3. 차별 피해자에 대한 보복성
4. 차별 피해의 내용 및 규모

③ 법인의 대표자나 법인 또는 개인의 대리인·사용인, 그 밖의 종업원이 그 법인 또는 개인의 업무에 관하여 악의적인 차별행위를 한 때에는 행위자를 벌하는 외에 그 법인 또는 개인에 대하여도 제1항의 벌금형을 과한다.

변호인단의 능력이 좋아서 고의 또는 과실이 없음을 증명할 수 있다면 모를까 저 ‘악의적’이라는 표현을 벗어나기란 쉽지 않을 것 같습니다. 게다가 법인 뿐만 아니라 개인에 대하여도 벌금형을 과한다고 합니다.
회사가 알아서 하겠지.. 란 생각도 슬슬 버려야할 때인 것 같습니다. 회사뿐 아니라 작업자도 처벌의 대상이 될 수 있으니까요.

그럼 처벌이 될때까지의 과정은 어떨까요?
장차법에는 그 과정을 명시하고 있습니다.

진정 -> 직권조사 -> 장애인차별시정소위원회 -> 법무부장관에게 권고내용 통보 -> 시정명령(법무부장관) -> 불복시 30일 이내에 행정소송 제기(또는 시정명령 확정) -> 시정명령 이행상황 제출요구(법무부장관)

이런 과정을 걸쳐서 마지막에 처벌을 받게 되는데, 이 과정중에 (기업의 입장에서는) 우려되는 곳이 있습니다.

제38조(진정)
이 법에서 금지하는 차별행위로 인하여 피해를 입은 사람(이하 “피해자”라 한다) 또는 그 사실을 알고 있는 사람이나 단체는 국가인권위원회(이하 “위원회”라 한다)에 그 내용을 진정할 수 있다.

피해를 입은 사람은 그렇다고 할 수 있지만, ‘그 사실을 알고 있는 사람이나 단체’라는 부분에서 우려가 됩니다.
즉, 직접적인 피해를 입지 않았지만, 웹 사이트를 살펴보니 웹 접근성이 떨이진다고 생각이 든다면 누구든 진정서를 제출할 수 있다는 말이 됩니다.
이는 도덕적이지 않은 경쟁사와의 관계를 가진 경우에 더욱 긴장해야할 사항이 아닌가 봅니다.
어떤 식으로든 제 3자를 통해 진정서를 제출할 수 있습니다.
이것이 시정명령으로 연결되지 않더라도 충분히 보도자료를 통해 해당 기업을 비방을 할 수 있습니다.

그럼 우린 언제부터 해당되지?

장차법에서는 시행에 관한 단계적 범위가 명시되어 있습니다.

1. 공공기관 : 2009년 4월 11일부터 적용
2. 법 제3조제8호에 따른 법인 : 별표 2, 별표 4 및 별표 5에서 정하는 단계적 범위를 따르며, 그 외의 법인은 2013년 4월 11일부터 적용함

○ 노동부 [사업장의 단계적 범위(제5조 관련)]

1. 상시 300인 이상의 근로자를 사용하는 사업장과 국가 및 지방자치단체 : 법 시행 후 1년이 경과한 날 (‘09.4.11)
2. 상시 100인 이상 300인 미만의 근로자를 사용하는 사업장 : 법 시행 후 3년이 경과한 날(‘11.4.11)
3. 상시 30인 이상 100인 미만의 근로자를 사용하는 사업장 : 법 시행 후 5년이 경과한 날(‘13.4.11)

○ 정보통신부[제15조 관련-행위자의 단계적 범위]
법 제3조 제4호에 따른 공공기관 : 1년 이내 시행
법 제3조 제8호에 따른 법인 : 법에서 규정하고 있는 법인은 소정의 단계적 범위를 따르며 나머지 법인은 5년 이내 시행

일반 기업의 경우 맨 아래 ‘법 제3조 제8호’에 따라 위 ‘사업장의 단계적 범위’에 해당하는 조건에서 시행일을 확인해야합니다.
만약 직원이 200명이라면 2009년 4월 11일부터 소송에 휘말릴 수도 있다는 뜻도 되겠죠.
30명 이하로 모두 쪼개서 따로 법인을 만들어버리면 시간을 좀 벌 수 있을까요? ^^;

개인적인 소견

윗 글을 읽어보시면 기업입장에서 ‘무서운 법’ ‘나쁜 법’ ‘역차별 법’ 이라는 것처럼 쓰고 있으나,
개인적으로는 전혀 그런 생각을 하고 있지 않습니다. 오히려 해외 사례를 봤을때 많이 늦은 감이 있죠.

장차법으로 인해 많은 기업들의 불만이 외적으로 표출될 것입니다.
하지만, 법이라는 테두리안에서 그 불만은 그리 큰 힘을 가지지 못할 것이라 생각합니다.
현재 메이저 IT 기업들, Naver, Daum 등은 이미 내부적인 가이드라인과 웹 접근성 관련 TF, 세미나 등을 통해 이를 준비하고 있다고 합니다.
구글과 야후는 이미 법적 강제를 받고 있는 외국기업이기 때문에 이미 가이드라인이 있을 것이구요.

그럼 이들의 행보가 단지 법에 의한 제재때문일까요? 전 그렇게 생각하지 않습니다.
웹 접근성을 높이면서 웹표준에 맞춰서 작업을 했을 경우에 생기는 이익이 기존 방식보다 훨씬 크다는 내부적인 판단이 더 컸기때문이라고 생각합니다. 거기에 덧붙여서 기업의 사회적 책임에 대한 논의도 있었을거라고 생각합니다.
즉, 웹 표준을 지켜서 작업을 했을 때의 이점이 기존 방식보다 업무효율을 향상시켰고, 부수적으로 웹 접근성을 향상 시켰던 사례를 가이드화시킨 것이죠.

장차법으로 인해 어떤 식으로든 피해를 보게 될 많은 기업들, 저 역시 걱정됩니다.
하지만, 수십년동안 사회전반적으로 피해를 봤지만, 아무도 관심가져주지 않았던 소외계층들의 고통보다 크겠습니까?

글을 마치며

누구든 장애의 위험에서 안전하지 않습니다. 또 누구든 나이를 먹고 눈이 침침한 노인이 됩니다.
다시 한번 언급하지만, 웹 접근성을 지키는건 장애인들만을 위한 것이 아닙니다. 비장애인들에게 많은 혜택을 주는 것입니다. 기업입장에서도 다양한 혜택(시간, 돈 등)을 안겨주는 것입니다.

지금부터 하나씩 바꿔나가지 않으면 한번에 바꿀 수 없습니다.
절대 “6개월에 모든 사이트 웹 접근성 맞춰..” 라는 식으로 해결될 문제가 아닙니다.

그럼 웹 접근성이 웹 퍼블리셔나 코딩을 담당하고 있는 사람만의 몫일까요?
절대 그렇지 않습니다.
웹 사이트는 혼자서 만드는게 아닙니다. 다양한 직군들이 함께 만들어가는 것입니다.
웹 접근성을 고려하지 않는 기획, 구조적 markup과 웹 표준을 모르는 디자이너, 개발자, 웹 접근성을 모르는 마케터가 어떻게 웹 접근성이 높은 웹 사이트를 기획, 제작, 마케팅할 수 있습니까?
그리고, 웹 접근성에 대한 이해나 필요성을 모르는 상사나 간부가 어떻게 회사내 웹 접근성 향상을 지원하고 장려할 수 있습니까?
이는 모두의 몫입니다.

이후 다양한 고민으로 더욱 꼼꼼히 대응방안을 모색해야할 것이라 생각합니다.

지금 시작해도 늦습니다.

[참고글]

• 정찬명님의 ‘장애인차별금지 및 권리구제 등에 관한 법률’과 대응방안
• 장애인차별금지 및 권리구제 등에 관한 법률

[글작성이후 신문기사 스크랩]

• 장애인 `인터넷 접근성` 좋아진다 (디지털 타임스. 2008.01.21)

실제로 웹표준을 지켰다!고 할수는 없을지도 모른다.
웹표준을 지키려고 노력한 첫번째 잡코리아의 시도라고 하는게 더 맞는 말인 것 같다.
아직 풀어야할 숙제가 많이 남은것도 사실이다.

html 마크업과 css 를 사용해서 웹을 만들었다고 해서 웹표준은 아니기 때문일 것이다.
또한 웹표준이 전부가 아니라, 웹접근성을 얼마나 향상시켰느냐가 더 중요하기 때문이기도 하다.

• javascript 와 asp 등에서 접근성에 위반되지만 사용할 수 밖에 없었던 부분.
• 끔찍했던 IE 문자중복버그.
• 이유는 알수없지만, 아마도 생성파일을 만드는 도중에 발생하는 빈번한 브라우저 다운현상.

등등 어려움이 많았지만, 꼼수와 잔머리로 대충 마무리하고 오픈시켰다.

잡코리아 메인의 경우는 과거 차지하던 리소스에서 무려 49.6%라는 어마어마한 양으로 줄이는데 성공했다.
실제로 잡코리아 메인이 이 정도로(물론 지금도 느리다 ^^) 빨리 뜨는걸 본건 연휴시기 이후로 처음이다.

메인만큼의 큰 웹표준 작업이 없었던 나에게 실제로 웹표준을 지켜서 웹을 만들면 이렇게 용량을 줄일 수 있다는 사실을 알게한 경이로운 작업이었다.
기존에 부스로고 하나를 보이게 하기 위해 총 19줄을 사용했으나 이제는 4줄로 줄었고, 사용한 코드조차 워낙 단순해서 아마 그런 것 같다.

다음 포스트부터 잡코리아 웹표준화 작업을 하면서 겪었던 문제, 해결책 등 여러 부분에 있어서 공유할 예정이다.
많은 질책 부탁드립니다.~

(어떤 페이지들을 바꿨는지 말해도 되는지 몰라서.. 혹시 문제 생길까봐…. 눈에 보이는 메인만 다룰 예정입니다~~)

이명박 지지 연예인 35명

선택은 자유!
해석도 자유!
외워두는 것도 자유!
니들 다 외운다!!!!!!!!!!!!!!!

요즘 하는 일이 있다.
회사일도 무척 바쁘고, 정신없지만, 어찌보면 현재 가장 중요한 일이 이것일 것이다.
운이 좋아서 웹 접근성 품질마크 심사위원이 되었다.
나름 올해 목표로 정했던 어떤 것에 충실히 해답을 만들고 있는 중에 가장 큰 성과이지싶다.

아직은 배워야할게 산더미같지만, 더 나를 발전시킬 수 있는 기회라고 생각하고, 열심히 하고 있다.
거의 심사는 끝나가지만 아쉬운 부분들이 있어서 다시한번 체크해보고 있다.

처음. 이 분야에 관심을 가지면서 생각했던 결심들을 잊지 않으려 노력한다.
기술로서의 웹 접근성과 웹 표준이 아니라, 지식인으로서의 웹 접근성과 웹 표준을 지향하자.

그동안 내 자신을 위해서만 살았던 세월, 혼자서 변절자라 말하며 살았던 몇년.
스스로 던져주는 면죄부일지 몰라도 그 면죄부라도 잡고 열심히 하자.

네이버(언제부터인가 언론사의 역할을 하고 있으면서 안한다고 우기는 웃기는 회사), 오마이뉴스, 민중의 소리, 자주민보, 독립신문(똘아이들 노는 모습이 웃긴 곳. 사실 언론도 아니다)

요몇일 정치판을 뒤흔들고 있는 ‘이회창’ 효과. 나역시 이회창 변수에 대한 나름의 분석도 해보고, 대선판에 대한 생각도 정리해보고 했었다.
하지만, 오늘 자주민보의 이창기 기자님의 글을 보고 내 분석의 편협함을 깨달았다.
물론 누구나 이 분석이 옳다고 생각하지는 않을 것이다.
하지만, 현재 우리가 살고 있는 대한민국의 상황, 즉 미국으로부터 자유롭지 못한 상황을 인지하고 분석한다면 충분히 설득력있는 분석이리라 생각한다.
개인적으로 이창기 기자님을 만나서 대화해보지는 못했지만, 늘 대단한 글로 날 초라하게 만드는 분이다.

Rollover(롤오버)메뉴를 만들때 기존에는 javascript의 도움을 받아왔다.
난 개발자가 아니기 때문에 기존에 사용하는 사이트에서 긁어오거나 에디터에서 자동으로 생성되는 소스를 그대로 사용했던 기억이 있다.
그런데, CSS로 Rollover메뉴를 쉽게 만들 수 있는 방법을 아는 순간 경악했다.
이런 간단한 방법이 있단 말인가! 왜 몰랐지.
역시 공부를 해야해…. 라며 자책했다.
소스? 어마어마하게 줄어든다. 게다가 전혀 모르는 소스가 아닌 아는 소스라는 사실!

Html

<ul id="tab">
	<li id="gi"><a href="#">채용정보</a></li>
	<li id="ht"><a href="#">헤드헌팅</a></li>
</ul>

CSS

#tab {
	list-style:none;
}
#tab li {
	float:left;
}
#gi a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/01.gif) no-repeat left top;
}
#ht a {
	display:block;
	width:60px;
	height:25px;
	text-indent:-5000px;
	background:url(/cssdic/ex/rollover/02.gif) no-repeat left top;
}
#gi a:hover {
	background-position:0 -25px;
}
#ht a:hover {
	background-position:0 -25px;
}

위 방법은 html에서 메뉴를 이미지가 아닌 텍스트로 구성하고, 이미지 대체 기법으로 작업한 것이다.
그냥 바로 메뉴 이미지를 넣고 해도 무방하다. (text-indent 삭제)

원리는 CSS의 :hover가상클래스를 이용한 방식이다.
마우스 on상태와 over상태의 두 상황이미지를 하나로 만들고,
마우스 on시에 :hover가상클래스를 이용해 위치값을 변경해서 이미지가 바뀌게 하는 것이다.

이 방식말고도 여러 방식들이 가능하고, IE에서는 버그(?)도 있다.
버그 관련해서는 따로 포스팅 할 기회가 있을 것 같다.

어쨌든 디자이너들은 이 방식으로 개발자한테 당당해지자!!!
별것도 아닌걸 가지고 콧대세우는 개발자말이다……..

국내 동호회나 포럼 등에 다양한 정보가 있었다면 좀더 수월한 작업이 될 수 있었겠지만, 아시다시피 자료가 충분하지 않습니다.
먼저 앞서가신 분들이 좋은 자료를 정리해주시면 좋으련만… T.T
필요에 따라 구하다보니 엉뚱한걸 설치했을 수도 있습니다.
혹시 더 좋은 Plug-In 이 있거나 업데이트 정보가 있다면 덧글로 알려주세요~
^^

지금 생각은 워드프레스 초보로서 설치부터 스킨 수정에까지의 작업을 몇 차례에 걸쳐서 포스팅할 생각입니다.
저처럼 어려워해서 도전못하시는 분들이 쉽게 사용할 수 있는 포스팅을 해봐야겠습니다.
혹시 잘못된 점이나 개선점이 있으면 포스팅시 쿡쿡 찔러주세요.

조금 훑어보다가 바로 워드프레스를 포기했다. 귀찮게 느껴졌다.
어차피 글쓰는 공간인데 뭐면 어때라고 생각했다. 귀차니스트…… T.T;

그러던중. 블로그 관리 전혀 안하던중.. 무언가 전환점이 필요했다.
나 자신의 나태함이 너무 싫었다.

그래서 워드프레스를 다시 설치하기로 맘먹고, 팠다!
어려워보일뿐, 스킨만드는게 훨씬 쉬움을 알게된 순간! 머리를 한대 맞은 느낌~ 땡~~~ 땡~~

그렇게해서 지금의 워드프레스 스킨이 탄생했다.
복잡한 디자인을 했다가는 시간이 너무 낭비될 것 같아서, 네이버 블로그에서 썼고, 지난번 태터에서도 썼던 스킨을 약간 변형해서 작업을 했다.

디자이너로서 폰트의 크기에 많은 고민을 했다.
결론은 좀 없어보여도(?) 폰트 사이즈를 키우자는 쪽으로 결정했다.
내용 위주의 블로그를 꾸미는데 있어서 폰트의 작은 것보다는 큰게 낫다고 판단했다.

현재 80% 정도 작업된 듯 하다.
Favorite Link에 사용한 플러그인을 전부 정리할 예정이다. 아직 전부는 정리하지 못했다.

열심히 블로깅 하기로 결심!!
아직 주제를 정하지는 못했지만, 너무 블로그에 목숨걸지 않으면서 즐기는 블로그를 해볼 생각이다.
능력도 안되면서 어려운 말 써가는 보여주기식 블로그는 절대 하지말자고 다짐!

격려의 말씀 많이 부탁해요~~~

설치시 체크리스트

퍼머링크 변경후 페이지 에러

1. root 에 내용이 없는 .htaccess 파일을 생성시킨다.

2. index.php 파일의 속성을 666 으로 변경한다

차근차근 하다보면 고집도 더 생기겠지.
머리 아프다. 어쨌든…

사진을 찍고 싶었는데, 그냥 있는 사진으로 하자고 해서. .쩝..
사진은 좌측부터..

상구형, 백자형, 광석이형, 정환이형, 마눌님~~~~, 일규누나, 선희누나

우리나라 블로그 놀러가기

몰랐던 내용, 알고 싶었던 내용, 크게 고민하지 않았던 내용 등 좋은 내용이 많다.
국내 번역된 웹표준 3종세트(? 아시는분들은 다 아시는)는 같은 내용이라도 여러 장에서 따로따로 설명이 되어 필요한 내용을 종합해야하는 불편함이 있었는데,
‘웹표준 교과서’는 그 책들보다는 잘 정리해놓아 내용찾기가 상당히 편해졌다.

아직 국내에서 발간한 책이 없는 것은 많이 아쉽지만,
이렇게 조금씩 정리가 된 책들이 나와서 나같은 초보들에게는 상당히 큰 힘이 된다.

그래도…. 교과서는 참고서가 필요한 법…..
조금 아쉽기는 하다……

어쨌든 다들 고생많이 하셨다고 말씀드리고 싶다.
직접 말씀드리고 싶지만… ㅋㅋ 인맥이 좁아서.. ^^

[2009-07-24 추가] 웹표준 교과서서평

웹표준 교과서를 처음 본것이 2007년.처음 그 책을 만나고..

웹표준 교과서를 처음 본것이 2007년.
처음 그 책을 만나고 3가지에 놀랐다.

하나의 “두께”다.
현재까지 나온 웹표준 관련 서적 중 가장 두꺼운 것이 교과서라기보다는 참고서같은 인상이었다.

두번째는 “무게”다.
상당히 두꺼운 책이기에 무거울거라 예상했지만, 의외로 너무나 가벼웠다.
가방에 넣고다녀도 크게 무게가 느껴지지 않을 정도였다.

세번째는 “내용”이다.
예제와 설명을 곁들인 서적들이 몇권 출간된 상황에서 웹표준 교과서의 내용은 흡사 W3C의 HTML 명세서를 보는듯한 느낌이 들었다.
세부항목들을 나눈것에서부터 각각의 항목별 설명들이 너무나도 자세하게 나와있었다.

웹표준 교과서는 1페이지부터 끝까지 읽는 책은 아니다.
공부하려고 쭉 읽는 경우가 아니라면 굳이 모두 보고 ‘책걸이’를 하는 책은 아니다.
궁금할 때 필요할 때 필요한 부분을 찾아서 보는 것이 훨씬 더 유용한 책이다.

웹표준에 대해 좀더 진지하게 공부를 하고 싶다면, 그리고 늘 뭔가 찾는 습관이 있다면 반드시 가지고 있어야할 필독서라고 추천할 수 있을 것 같다.

한가지 아쉬운 점이 있다면 ‘찾아보기’ 부분이다.
색인을 통해 찾을 수 없는 항목들이 너무나 많다. 현재로서는 책을 모두 이해하고 어떤 부분에 뭐가 있는지 개인적으로 체크해두지 않으면 놓치게 되는 항목들이 많다.
이번에 새로 책을 찍게 된다면 찾아보기 부분을 좀더 보강해야할 것이다.

그리고, 웹표준을 하는 사람들의 목적 중 하나인 웹접근성에 관한 내용도 보강이 필요하다.
각 HTML 요소별 웹접근성 향상 방법론이 병행된다면 더할나위 없이 좋은 책이 될 것이다.

이 책은 일본인이 쓴 책이다.
2009년에는 한국의 누군가가 ‘웹표준 참고서’를 반드시 써주길 기대한다.
꼭 그랬으면 좋겠다.

작성된 곳 및 관련 링크

• Naver 책 서평
• 교보문고 책 서평
• 춮판사 블로그의 관련 글

생각지도 않았는데, div, ul, li 등이 보였다.
오호라~ 당연히 css를 사용해 스타일을 입힌 ‘웹표준’ 작업이 진행되었겠지 싶었다.

‘이야.. 인크루트에도 괜찮은 사람이 있기는 있나보네’

라고 걱정과 부러움이 교차했다.
(걱정은 인크루트가 먼저 앞서간다는 것에서 기인했고, 부러움은 그런 생각을 하는 사람이 있고 일을 추진할 수 있었다는 것에서 기인했다.)

하지만, 그 생각도 잠시!
체크를 해볼 생각으로 우선 소스보기를 다시 띄워봤다.
그런데…!

첫줄에 DOCTYPE 선언이 없는 것이다. ㅡ..ㅡ;
이런! 된장!
낚였다!

DOCTYPE 이 없더라도 소스에서 뭔가 특별한 노력이 보일거라 기대했지만, 소스도 엉망이었다.
자세히 둘러보니 웹표준을 지키자는 의도에서 진행된 것이 아니었다.
파일 사이즈를 조금 줄여서 서버비용이나 한번 아껴보자는 생각(그런데도 중첩에 중첩에 중첩)이나,
잘 모르는 윗사람들한테 우쭐대기 위해서거나..

아래를 쭉 둘러보고, CSS 파일도 보고, Validator 도 돌려봤다.
처참하다.
기본적인 대체텍스트(alt)도 없고, table 요소도 기존처럼 레이아웃용으로 사용하고…
마크업에 스타일과 구조가 예전처럼 뒤엉켜있다.

DOCTYPE 선언이라도 되어있었다면,
웹표준을 지켜보자는 첫 삽으로 생각하고, 격려의 글을 쓰고 싶었으나
그냥 단순한 ‘삽질’인 것 같아 할 말이 없다.

괜히 싫은 회사라서 그런지 말이 좀 심했나.
나도 뭐 똑같지 뭐.. ㅋㅋ

나도 첨에는 어떤건지 몰랐는데, 마눌님이 회상부분에 노래를 부르게 되었다고 해서 찾아봤더니
반응들이 꽤 좋은 애니였다.

오늘 9시에 마눌님 노래부른게 나왔다고 한다.
아침 출근길에 전화로 자기 이름도 나왔다고 자랑했는데
졸고 있다가 받아서 뚱하니 받았더니 상당히 삐진 모양이다.
미안해…….. T.T

어쨌든 오늘 한 부분을 다운받아 보고 싶은데, 영 자료가 없다.
그래서, 마눌님이 연습할때 보던 영상에 마눌님이 부른 노래를 입혀봤다.
실제 애니에서 이 장면인지는 잘 모르겠는데, 아마 비슷할 것 같다.

마눌님.. 미안해.. 사랑해~

내가 맡은 부분이 아니었으나 이러저러한 이유로 내가 하게 됐는데,
전체적으로 디자인이 바뀌기는 했으나… 내용부분은 안했다.
실제로 작업된건….
메인, 서브 3개 메인(연봉검색, 연봉통계, 연봉매거진) 뿐…
쩝…

요즘 미친듯이 하고 있는 웹표준에 맞춰서 작업하고 싶었으나..
역시나 현실은 아직도…….
완전 table 과 table 의 연속…. ㅋㅋ

이렇게 살면 안되는데…… 으 …………..

이거 끝나면 좀 시간이 돼서 그동안 생각만 하던 일들을 벌이고 싶었으나
바로 다음 프로젝트 투입!
미치겠다.. 쩝…

30D 산 날 박팀이 찍어보겠다며 날 찍은 사진. ㅋㅋㅋ
역쉬 사진 찍기 싫어하는 나!
(들고 있는건 사용하던 D30.. 아직 안팔고 있다. T.T 아까워서)

그런데!
그냥 한번 혼자 해보자고 설치를 시작해보니, 이유를 알아버렸다.
이유는…

“너무 쉽다.”

ㅋㅋㅋㅋ

그래도 얼마나 쉬운지 알려주기 위해 설치법을 적어볼까 한다.
설치법 이후에 플러그인과 테마에 대한 내 경험을 계속 써볼까 한다.
즐거운 포스팅이 될 것 같다.

1. 워드프레스 2.x 다운받기

2. wp-config-sample.php 수정 및 파일명 변경

압축을 풀면 다음과 같은 파일들이 보입니다.

이 중에서 wp-config-sample.php 을 메모장에서 열고 약간의 수정을 해야하는데요.
DB_NAME, DB_USER, DB_PASSWORD, HOST 등을 개인계정에 맞게 적어주세요.

수정한 후에 저장하고 메모장을 닫는다.
그리고 wp-config-sample.php의 파일명을 wp-config.php로 변경한다.

3. ftp로 올리기

이제 내 컴퓨터에서 해야할 일은 끝났구요.
현재 사용하고 있는 ftp 프로그램을 이용해서 계정에 올리시면 됩니다.
전 개인적으로 wp 라는 폴더를 만들고 그 안에 모든 파일들을 넣었습니다.

4. install 시작하기

자~ 이제 파일은 다 올렸으니 거의 끝나갑니다.
파일을 다 올린 이후 이제 install 을 할건데.
주소창에…

http://홈페이지 주소/wp(업로드한 폴더이름)/wp-admin/install.php

적고 엔터~

그럼 아래와 같은 시작화면이 나오게 됩니다.

아래 First Step >> 클릭~

5. First Step

Weblog title 과 Your e-mail 을 작성하고 Second Step >> 클릭~

6. Second Step

예!
이제 다 됐습니다. ㅋㅋㅋ
엄청 쉽죠?
물론 설치 후에 플러그인이나 테마 등에서 여러 난관(언어장벽 등 ㅋㅋ)을 만나게 되겠지만,
설치가 다 되니 기분이 엄청 좋더라구요.

이 단계에서 제일 중요한건 임의로 제시되는 비밀번호를 반드시 체크해야한다는 것입니다.
복사해놓으면 되겠지라는 안이한 생각은 금물…
저 한번 복사내용 날아가서 암담 ㅡ..ㅡ;
귀찮지만, 적거나 메모장에 남겨두면 깔끔합니다.

그런 다음 아래 적여진 wp-login.php 를 클릭해서 로그인 페이지로 가시면 됩니다.

7. 로그인

왠지 세련된 페이지가 나왔습니다.
멋있죠? ㅋㅋ
방금전에 적어두셨던 아이디와 비밀번호 기억하시죠?
그걸 적고 로그인!

8. 워드프레스 관리자

로그인을 하니 아래와 같은 관리자가 나왔습니다.
영어의 압박이 갈수록 심해집니다. 조심조심. ㅋㅋㅋ

9. 비밀번호 및 개인정보 변경

아까 적어뒀다가 로그인한 비밀번호를 외운다는건 힘들겠죠.
바로 비밀번호를 변경해야합니다. 기억할 수 있는걸로.
그리고 그곳에서 여러 정보들도 넣어보세요~

상단 메뉴에서
User -> Edit
에서 수정하시면 됩니다.

이것으로 워드프레스 설치하기 끝!
진짜 쉽죠?
겁내하시지 말고 그냥 설치하세요..
이제 더 어려운 것들 시작입니다.
저도 잘 모르는 부분이니 열심히 공부해서 또 적을께요~~

^^

여러 불만들과 짜증과 의욕 등등 여러 감정들이 교차되는 요즘이다.
기업이 개인을 이용한다는 사실 정도야 직장인들이라면 모두들 알고 있는 사실이겠지.
아니 개인뿐만이 아니라 기업도 알고 있는 내용이지.

하지만 얼마나 이용한다는 사실을 눈감아줄만큼 환경을 만들어주느냐가 중요하다는 사실은 왜 모를까.
그냥 나라는 놈을 이용해주는 것만으로도 감사해야하는건가.
훗………..

밤중에 잡생각이 많이 든다.
오늘은 마눌님 부산 콘서트가 있어서 내려가고, 민재랑 둘이 있다.
방금 민재가 자다가 일어나서 배고픔을 울음으로 호소했다.
우유를 먹였다.
그러니 만족한 얼굴로 다시 잠들었다.
옆에서 그냥 누우려다가 잠시 컴퓨터를 켜고, 자리에 앉아본다.

처음 이 도메인을 사고 호스팅을 하면서 많은 희망사항들을 정리했었는데,
결국은 또 버려진 블로그가 되려나보다.
회사일 빨리 정리하고 공부한 내용들을 정리해야겠다..
쩝..

지금 밝히기는 그렇고, 현재 3가지를 준비중이다.
나를 위한 공부지만, 여러 도움들을 구해야할 일들이 될 것 같다.
하지만, 열정은 잊지 말자.
내 좌우명처럼…

열정적으로

지리산에 올해는 좀 자주 가볼까 한다.
마눌님이 허락해줘야하겠지만. ㅋㅋㅋ

총각때는 생각나면 그냥 짐싸고 가버렸는데,
결혼하니깐 ‘그냥’이라는건 없다.

아기보느라 힘든 마눌님을 두고 떠난다는게 쉽지가 않다.
그래도 작년말에 마눌님이 허락하셔서 다녀올 수 있어 너무 좋았다.
오랜만에 맡은 지리산의 냄새란……….. 음

이번 여름이나 봄 정도에 한번 더 갔으면 하는 바램………

^^

20분 정도 전에 도착했는데, 아직 20명 정도밖에 와있지 않았다.
준비하기로 했던 분들이 분주히 준비를 하고 있었고, 일찍 간 김에 명찰 준비하는걸 도와드렸다.
그 사이에 후니님 만나서 살짝 인사를 했다.
안면이 있는 사람이 없어서 친한척 하고 싶었으나 나말고도 친한 사람들이 많은 사람이니 여의치 않았고,
그냥 혼자 왔다갔다~~
밖에 있는데, 시각장애인 한분이 택시에서 내리셔서 건물로 들어가는 모습이 보였다.
행사에 참석하신건가? 음..

그렇게 예정보다 좀 늦은 시간에 행사가 진행되었다.

(기대 기대 기대)

(사진출처: http://www.flickr.com/photos/okoru/tags/kwag/)

처음 발표하신 분은 글로만 뵙던 충북대 김석일 교수님이었다.
“웹접근성 현황과 발전방향”에 대한 내용으로 발표를 하셨다.
교수님이라 그런지 역시 설명이나 내용이 정리가 잘 되었고, 강하고 의욕적인 메시지가 많았다.
말씀중에 생각나는 것은 세가지다.

1. 웹접근성보다 중요한 것이 있다는 듯한 의도적 착시현상이 생길 수 있다. (비지니스적 접근의 경우)
2. 미래(2010년)의 웹접근성은 기술의 문제는 기본이고, 이제 디자인에 중점을 둬야한다.
3. 웹접근성에서 (오프라인) 컨텐츠 접근성으로 확대될 것이다.

언젠가 꼭 개인적으로 뵙고 많은 고견을 듣고 싶다는 생각을 많이 했다.

다음 발표는 회사명은 생각안나는데 장애인 화면 읽기 프로그램을 만드는 회사에 다니신다는 김정호님이었다.
주제는 “시각장애인의 인터넷 사용 방법”
행사 전에 잠시 밖에 있을때 택시에서 내리시던 시각장애인이 바로 김정호님이셨다.

개인적으로 이날 모임에서 가장 의미있는 시간이었다.
회사에서 팀원들에게 강의를 진행할 때도 계속 시각장애인의 스크린리더 프로그램이 어쩌고 저쩌고 말은 했지만,
실제로 보지 않았으니 설명하는 입장에서도 상당히 추상적이었다.
그런데, 실제로 시각장애인이 어떻게 웹서핑을 하는지 직접 보여주시는 것이다.
심장이 콩닥콩닥 거렸다.
너무나 불편하고 너무나 어려웠다. 이렇게밖에 접근할 수 없단 말인가. 탄식뿐이다.
만약만약 우리 회사 사이트를 여기서 열어봤다면, 난 쥐구멍이라도 찾으려 했을 것이다.
신경을 썼다고 하는 사이트들이 저 정도인데, 아무 생각없는 우리 회사는… 으…………..

처음 생각했던 내 미래에 대해 더욱 강한 필요성을 느끼게 하는 시간이었다.
웹마저 소외계층을 만들어서는 안된다!

다음으로 “모바일 웹에서의 접근성”을 발표하신 김휴철님,
“웹컨텐츠 접근성 지침 2.0 개발”에 대해 발표하신 현준호님,
“웹접근성을 위한 시멘틱 마크업 사례 오피(ohpy)”을 발표하신 김주희님.
등이 있었다.

발표가 모두 끝나니 2시 20분에 시작했던 행사가 끝이났다. 6시가 좀 안되는 시간이었다.
기념사진찍고, 홍보차 방문한 오피에서 나눠준 기념품 받아서 집으로 왔다.

사실 기대에 비해 조금 실망스럽긴하다.
TF팀을 나누고, 서로 토론하고 다음을 기약하는 모임이 될 줄 알았는데
그냥 강연회같은 분위기다.
기존에 비공개로 시작했던 사람들간의 교류만이 남고… 전파교육과 같은 형태랄까.
나름대로 TF팀을 선택하고, 그곳에서 어떤 주제로 어떤 얘기를 해야겠다고 준비했었는데….

어쨌든 의미있는 모임이다.
국내에서 웹접근성을 고민하는 모두가 모인것은 아니지만, 이 작은 시작이 큰 흐름을 만들 수 있길 바란다.

워크샵 안내

• 일시 : 2007년 4월 28일 토요일, 오후 2시
  • 워크샵 시작 이틀 전부터는 참가 신청을 받지 않습니다. 미리 신청해주세요.
  • 워크샵 시작 이후에는 참석하실 수 없습니다. 반드시 시작 10분 전까지 도착해주세요.
• 장소 : 이화여대 포스코관 261호
• 인원 : 90명
• 문의 : 조훈(i@hooney.net, 019-9231-0318)

프로그램

KWAG은 회원들의 자유 발표를 보장/장려합니다. 발표를 원하시는 분은 아래 목록을 수정해서 “[분류] 발표할 내용 – 이름(소속)” 형식으로 작성해주세요. 물론 원하시는 토론 주제를 작성하실 수 있습니다.

• [기조연설] 웹 접근성 현황 및 향후 방향 – 김석일 교수(충북대학교)
• [발표] 시각장애인의 웹 사이트 이용 실태 – 김정호 팀장(엑스비전)
• [발표] KWCAG 2.0 개발 TF – 현준호 부팀장(한국정보문화진흥원)
• [발표] 모바일 웹의 접근성 – 김휴철 부사장(케익소프트)
• [발표] 웹 접근성 향상을 위한 시멘틱 마크업의 사례:www.ohpy.com – 김주희(나우콤)
• [토론] 웹 접근성 & 장애인 사용성

하지만, 욕심과 관심때문인가.
교육이 끝이 나고, 정말 미친듯이 공부와 실습을 한 것 같다.
이 얼마나 오랜만에 느끼는 ‘열정’인가.

미리 사놓은 1권의 책과 교육후에 구매한 2권의 책을 몇번이나 정독했을까.
온통 밑줄과 내 생각으로 끄적인 흔적들이 남아있다.

웹접근성에 대한 고민은 사실 그전까지 크게 하지 않았다.
하지만, 교육이후 웹접근성이라는 것이 얼마나 중요한지 깨닫게 되었다.
소외된 소수의 집단 (다른 마땅한 단어가 생각나지 않아 선택)
그들역시 웹에 의한 정보를 공유할 권리가 있음에도 지금까지 간과하고 살았다는 것이 부끄러울 따름이다.

회사를 위해서가 아니라 나를 위해서가 아니라 우리 모두들 위한 웹을 위해 노력할 생각이다.
오랜만에 아주 오랜만에 가슴이 뜨거워짐을 느낀다..

<노래하는 마눌님~>

<공연중인 노래패 우리나라>

<내가 좋아하는 마눌님 사진~ 재작년에 일본공연갔을때~>

집사람이 일본 공연간지 벌써 6일째..
공연 잘하고 있다는 통화만 계속 하고 있다..
민재 보고 싶어서 징징 거릴줄 알았는데, 잘 견디며 지내고 있다.
소중한 동포들께 많은 힘 드리고 왔으면 좋겠다… ^^
사랑해~~~

자세한 정보는 이곳!!!에서~~