HIWEB _:blog

‘전체콘텐츠’으로 분류된 글들.

1. 2012/02/06 HIWEB 웹퍼블리셔 사내교육 후기
2. 2011/09/03 이대역 웹접근성팀 사무실 (18)
3. 2011/08/26 웹접근성 준수지침 2.0 집중교육 (19)
4. 2011/06/21 하늘소망 웹접근성팀, 이젠 안녕
5. 2011/05/02 모바일 웹 관련자료 모음 (1)
6. 2011/01/06 아이폰으로 찍은 기타연주 (5)
7. 2010/09/18 ♡신의키스♡
8. 2010/09/04 장애인에 대한 에디켓 (1)
9. 2010/06/03 시각장애인체험 ‘어둠속의 대화’ (9)
10. 2010/02/24 2010년 상반기 하늘연소프트 웹접근성 워크샵 발표 (3)
11. 2009/12/30 내사랑 어쿠스틱 기타 (1)
12. 2009/12/21 요즘 작업중인 데생과 나의미술 (6)
13. 2009/12/21 프라모델 취미 (2)
14. 2009/11/06 보편적인 웹 접근성 관계 요소 (4)
15. 2009/08/25 몸과 마음이 지칠때
16. 2009/06/27 중국출장 웹접근성 커리큘럼 교육 (7)
17. 2009/04/30 UI/UX의 개발 프로페셔널 (1)
18. 2009/04/30 웹 접근성 실무예제소스
19. 2009/04/07 다소 복잡한 데이터 테이블 (2)
20. 2009/04/07 웹 접근성을 고려한 데이터테이블 (2)
21. 2009/04/03 [동영상] 시각장애인의 컴퓨터 활용 - 저시력자
22. 2009/04/03 [동영상] 개발자 여러분! 웹 접근성을 향상을 도와주세요
23. 2009/04/03 [동영상] 시각장애인의 컴퓨터 활용 - 전맹
24. 2009/04/01 장애인 차별금지법 시행이 임박했습니다
25. 2009/03/27 명함 받으시고 포인트 적립하세요 (3)
26. 2009/03/19 웹접근성 향상을 위한 국가표준 기술 가이드라인 발표
27. 2009/03/11 인터랙션 디자인. 관대하게 디자인 하자 (2)
28. 2009/02/28 크로스브라우징? CSS 핵은 왜?
29. 2009/02/22 잘 알려지지 않은 나의 사이트
30. 2009/02/06 웹 접근성 품질마크 실태조사 항목별 체크리스트

---

HIWEB 웹퍼블리셔 사내교육 후기

지난 2012년 2월 6일 HIWEB 본사에서 외부강사와 함께 웹퍼블리셔 사내교육을 실시하였습니다. 강사분들과 업무일정 때문에 불가피 하게 일요일에 진행되었지만, 모두 참석해 주셔서 뜻깊은 가졌습니다.

교육개요

• 교육명 : HIWEB 웹퍼블리셔 사내교육
• 교육기간 : 2012년 2월 06일 오전10시~오후9시, HIWEB 4층 본사
• 강사 :
  • 1 섹션 : 조훈(다음커뮤니케이션) -웹퍼블리셔의 효율화
  • 2 섹션 : 장성민(잡코리아) -HTML
  • 3 섹션 : 정찬명(NHN) -CSS
  • 4 섹션 : 김일규(HIWEB) -웹퍼블리셔의 미래

---

강의후기 사진

조훈님께서 웹퍼블리셔의 효율화 라는 주제로 포럼형태의

---

참가해주신 분 모두 너무 고생 많으셨습니다.

---

이대역 웹접근성팀 사무실

9월 3일자로 내용과 사진이 갱신되었습니다.

이대역으로 이사하다

웹표준 웹접근성 영역으로 HIWEB 4년이 넘었습니다.
최근 리뉴얼된 웹접근성연구소를 퍼블리싱한 ChinaHR Technical Information Center 웹접근성 팀장에서, 하늘연소프트 하늘소망 웹접근성 팀장을 거쳐, 금번 6월에 이대역쪽으로 사무실을 이전했습니다. 금번에도 역시 직책은 팀장으로 해주시더군요.
이사온지 두달, 약간의 변화가 있었습니다, 블로그에 사진갑니다.

여기가 말로만 듯던 고급 퍼블리셔들이??

중앙 퍼블리셔룸

저 멀리 전 스타 프로게이머출신 종국님 자리와 http://everstory.co.kr/ 웹표준 블로그를 운영하는 승일님 자리, 앞쪽에는 사내에서 가장 무서운 선희님 자리인데.. 무서워서 못찍네요 ㅠㅠ

사내 시각장애인 1급 송한흥 선생님께서 스크린리더기로 웹서핑중...
전체 팀원이 센스리더를 보유하고 있고, 또 실제 전맹의 스크린리더 사용을 함께 경험하므로써,
누구보다 장애인이 웹사이트를 이용하는 방법론에 대해 바르게 이해합니다. 따라서 창조적인 마크업이 가능합니다.

jQuery, Scripter 웹표준화룸

27인치 애플시네마와 아이멕으로 8개 브라우저를 띠우는 장호연 과장님, 단축키활용능력과 초속으로 움직이는 영타속도로 대부분의 개발자들을 농락하시죠.. 미술전공에 전직 기타리스트이며, 개발자 압박용(개발자가 와서 어떻게 개발 해야 하는지 웹 퍼블리셔에게 물어봅니다.)
옆에는 화정대리님 자리인데요, 일단 담배한탐 하시죠!

회사에 전직 기타리스트가 2명이나 있습니다. 휴식시간에 오브리 한번 ㅋㅋ

웹접근성 퍼블리셔룸

기계적인 업무보단 크레이티브한 업무가 원할하게 될 수 있는 자유로운 분위기 조성이 중요하다고 생각하여 구성되었습니다.

강의실, 웹퍼블리셔 무료 스터디룸

최근 나라디자인 정찬명님께서 웹접근성 준수지침 2.0 무료교육을 해주셨습니다. 책상들이 잠시 자리를 비웠네요. 개인시간도 많으면서 가정과 직장에서 모두 행복하게 편하게 일할수 있는 회사가 되야 겠습니다. 스터디룸 이용은 무료입니다. 그래도 화분은 챙겨 오실거죠?

---

웹접근성 준수지침 2.0 집중교육

웹접근성 강의 안내

장애인 차별금지 및 권리 구제등에 관한 법률시행 등 웹 접근성에 대한 관심과 수요 증가와 최근 개정된 한국형 웹 콘텐츠 접근성 2.0(KWCAG 2.0)에 맞추어 개발자들의 웹접근성 전문성 제고를 위해 웹 접근성 전문교육을 실시합니다.
웹 사이트 관리자 및 웹 접근성에 관심이 있는 민간 개발자들도 무료 참여가 가능합니다.

강의개요

• 교육명 : 웹접근성 준수지침 2.0 집중교육(Korean Web Content Accessibility Guidelines 2.0)
• 교육기간 : 2011년 8월 27일 오전9시~오후1시
• 강사 : NARADESIGN 찬명님
• 참가비 : 현금 22,000,000원(카드결제불가)
• 오시는길 : 이대역 HIWEB 본사 (지도새창보기)
• 참가자 : HIWEB 웹접근성팀, 웹 접근성에 관심 있는 민간 개발자들도 참여가능

참가안내

참가를 희망하시는 분은 하단에 참가 코멘트와 함께 찾아오시면 됩니다.

강의는 종료되었으며, 후기 사진이 추가되었습니다. 참가해 주신분은 후기를 작성해 주세요!

---

강의후기

집중중인 웹 퍼블리셔 참가자들

호연과장님 표정이 왜 이래?(앗 저런것도 있었구나 하는 표정?)

더운날씨에도 개정된 웹접근성 준수지침 2.0 에 대해 자세하고 친절하게 강의하시는 찬명님.

점심먹고 한 컷

---

참가해주신 웹퍼블리셔 현정님, 창수님, 선미님, 수연님, 진희님, 선영님, HIWEB 팀원, 그리고 찬명님, 모두 고생 많으셨습니다.

---

하늘소망 웹접근성팀, 이젠 안녕

하늘연소프트 웹접근성팀에서 퇴사를 하였습니다.

2009년 9월 하늘연소프트에 입사하여, 각종 웹접근성 프로젝트를 성공적으로 수행!? 하면서 정말 많은 것을 배우고 이번 6월에 퇴사를 하게 되었습니다. 1년 넘게 정들었던 팀원여러분과 회사동료분들과의 마지막 헤어짐이 참 많이 아쉬었습니다. 회식자리에서는 왜 그렇게 울었는지, 지금 생각하니 챙피할 정도네요..

회식 후의 모습이라 다들 한잔씩 들어간 빨간상태이므로, 회색으로 돌렸습니다. 무한한 공간과 무한한 시간속에 당신들과 함께 있었던 영광과 함께 너무 즐거웠습니다. 하늘소망이라는 타이틀처럼 모두가 소망하는 웹, 웹 접근성 향상에 항상 귀 기울여 노력해주세요. 많은 것을 배우게 해주셔서 너무 고마웠습니다.

웹접근성팀 원+원, 꽃잎밴드도 안녕

유능한 퍼블리셔분들께서 더 좋은 자리로 채워주시겠죠?

함께 있는 동안 즐거웠습니다.
너무도 많은 것을 배웠습니다.
회사가 존경스러웠습니다.
그리고 감사합니다.

---

모바일 웹 관련자료 모음

모바일 웹 관련하여 수집한 자료들입니다. 각각의 pdf 자료의 출처는 문서 자체에 기재되어 있습니다.
용량이 많을 경우 파일열람이 다소 느릴 수 있습니다.

문서자료

• 공공정보 제공지침 및 모바일 전자정부서비스 개발 지침 공청회 PDF 보기
• 모바일 웹 컨퍼런스 2010, 모바일 웹에서의 표준화 이슈 및 향후 전망 PDF 보기
• 모바일 접근성-현준호 PDF 보기
• 모바일 웹의 변화와 접근성-문상환 PDF 보기
• 한국형 모바일 웹 모범사례 표준 1.0 DOC 보기
• 한국형 모바일 웹 모범사례(ver 1.5)확장 가이드라인 DOC 보기
• 모바일 웹 최적화를 위한 CSS선택자 네이밍규칙 PDF 보기
• 모바일 웹 활성화를 위한 모바일OK 표준화 PDF 보기
• HTML5와 차세대 모바일 웹 PDF 보기
• 2019년 : Mobile의 미래 PDF 보기
• 실전 html5가이드 PDF 보기
• 오픈플랫폼확산에따른 국내외Mobile Web Browser 방향? PDF 보기
• 표준기반 모바일 상거래 사례- 인터넷서점 알라딘 PDF 보기
• 모바일웹 차별화 포인트 PDF 보기
• 모바일웹 실무반 오픈세미나 PDF 보기
• 모바일 웹과 사용자 인터페이스, 그리고 iPhone PDF 보기
• 모바일 브라우저의 성능 고찰 PDF 보기
• 모바일 웹과 풀브라우징에 대한 여섯가지 이슈들 PDF 보기
• 모바일 위젯의 현황과 전망 PDF 보기
• HTML5와 모바일의 변화 PDF 보기

외부링크

• W3C mobileOK Checker http://validator.w3.org/mobile/
• 모바일 웹 모범사례 - http://www.w3c.or.kr/Translation/mwbp_flip_cards/
• Mobile WEB2.0 Forum - http://www.mobileok.kr/
• 모바일 콘텐츠 - http://www.mobizen.pe.kr/

---

모바일 웹?

모바일 웹이란 무엇일까요? 한동안 바쁜 일상속에 살다가 제안서 작업으로 모바일에 대해 2주 정도? 진지하게 공부를 했다.
제가 내린 모바일 웹의 결론은,

스마트폰의 보급 및 확산, 모바일 인터넷 활성화 등으로 인터넷 이용환경이 유선에서 무선기반으로 급속 변화하여 기존 웹사이트의 풀 브라우징 인터페이스 단점을 해결하기 위해 모바일 웹을 구축한다.
결국 가장 베스트는 ONE WEB, 즉 데스크탑 환경과 모바일 환경을 최대한 단일화 방향으로 지향하고 최신 스마트폰의 성능을 고려하는 것, 데스크탑 웹사이트와 최대한 동등하게 정보를 제공하는 것!

결론! 관공서의 경우 콘텐츠가 매우 많고 광범위하므로, 풀브라우징 인터페이스 단점을 해결하기 위해 요약 정리한 모바일 웹을 필요로 하지만, 더 좋은 방법은 웹표준과 웹접근성을 준수하여 간결한 사이트로 지향하고 모바일 풀브라우징에서도 무리없도록 애초에 하나의 웹을 만들자. http://jennyhouse.info 모바일웹이 필요없다. ㅋㅋ

동일한 html 로 모바일접속과 데스트탑 접속을 구별하여 다른 css 를 적용할 수도 있다. 재작년 나의 기획작품 http://somang.skysoft.co.kr/

---

아이폰으로 찍은 기타연주

페이스북에 올렸는데, 블로그에도 한번 올려봅니다. 20원짜리 기타연주

Metallica - Nothing else matters(어쿠스틱버전)

메탈리카의 Metallica - Nothing else matters 라는 곡입니다.
원래는 rock 발라드에 가까운 노래곡인데 노래는 생략, 손톱이 짧은 상태에서 연주해서 그런지 강약이 잘 안됐네요.
손톱끝에 피킹마추기 바쁨 ㅎㅎ

알함브라 궁전의 추억(Recuerdos de la Alhambra)

알함브라 궁전의 추억이라는 스페인 기타연주곡입니다. 클래식기타로 연주해야 하는데 어쿠스틱으로,
이제 늙었는지 손에 힘이 없어 띡사리가 ㅡㅡ; 바레도 잘 안잡히고..한곡 연주하면 손가락에 힘이 다 빠져요.

사랑의로망스(Romance De Amor)

초등학교때부터 연주했지만 아직도 어려운 곡, 로망스

오랜만에 불연듯 기타를 꺼내고 잠시 있다가, 옆에 아이폰이 있길래 촬영해 봤습니다. 손톱도 짧고 굳은살도 없다보니, 연주가 많이 어색하네요. 다음에 연습좀 더 해서 손좀 풀고 다시 올려야겠습니다.

텍사스 블루스

내기타는? : 내사랑 어쿠스틱 기타

---

♡신의키스♡

젊은 아더왕이 복병을 만나 이웃나라 왕에게 포로신세가 되었다.

이웃나라 왕은 아더왕을 죽이려 하였으나 아더왕의 혈기와 능력에 감복하여 아더왕을 살려줄 하나의 제안을 한다.
그 제안이란, 그가 할 매우 어려운 질문에 대한 답을 아더왕이 한다면 아더왕을 살려주기로 한것이다.

이웃나라 왕은 질문에 대한 답을 찾을 기한으로 1 년을 주었고 아더왕이 1 년 안에 답을 찾아오지 못한 경우 처형하기로 하였다.
그 질문은 바로 ‘여자들이 정말로 원하는 것은 무엇인가? (What do women really want?)’ 였다.

이러한 질문은 현명하다는 사람들도 당황시킬 정도의 어려운 질문인데 하물며 젊은 아더왕은 어쩌랴.
아더왕에게는 풀 수 없는 질문으로 보였다.
그러나 죽음보다는 나았기에 아더왕은 이웃 나라왕의 제안을 받아들여 1년동안 그 질문에 대한 답을 찾기에 나선다.

아더왕은 자신의 왕국에 돌아와서 모든 백성들에게 묻기 시작했다.
공주들, 창녀들, 승려들, 현자들, 그리고 심지어 광대들에게까지 모두 물어보았다.
하지만 그 누구도 만족할 만한 답을 줄 수 있는 사람이 없었다.
아더왕의 신하들이 왕에게 말하기를 북쪽에 늙은 마녀가 한 명 사는데 아마 그 마녀는 답을 알 것이라고 그 마녀를 데려오는 것이 어떠냐고 제안했다.

그러나 그 마녀는 말도 안되는 엄청난 댓가를 요구하는 것으로 유명하였다.
1년이 지나 마지막 날이 돌아왔고 아더왕에게는 늙은 마녀에게 물어보는 것 이외에 선택의 여지가 없게 되었다.
늙은 마녀는 답을 안다고 선뜻 대답하였지만 엄청난 댓가를 요구하였다. 그 댓가란 아더왕이 거느린 원탁의 기사들 중 가장 용맹하고 용모가 수려한 거웨인과 결혼하는 것이었다.

아더왕은 충격에 휩싸였고 주저하기 시작했다.
늙은마녀는 곱추였고 섬찟한 기운이 감돌기까지 하였다.
이빨은 하나밖에 없었고 하수구 찌꺼기 같은 냄새를 풍겼으며 항상 이상한 소리를 내고 다녔다.
아더왕은 이제까지 이렇게 더럽고 추잡한 생물은 본적이 없었고 이런 추한 마녀를 자기의 가장 충성스러운 신하인 거웨인에게 결혼하라고 명령할 수가 없었다.

그러나 거웨인은 자기가 충성을 바치는 아더왕의 목숨이 달려있는 만큼 주저없이 그 마녀와 결혼을 하겠다고 자원했다.
결혼이 진행되었고 결국 마녀는 아더왕이 가진 질문에 대한 정답을 이야기하였다.

여자들이 정말로 원하는 것은 바로 자신의 삶을 자신이 주도하는 것, 곧 자신의 일에 대한 결정을 남의 간섭없이 자신이 내리는 것이라고 하였다. (What women really want is to be in charge of her own life)

정답을 듣자 모든 사람은 손바닥을 치며 저 말이야말로 진실이고 질문에 대한 정답이라고 하며 아더왕이 이제 죽을 필요가 없음에 기뻐하였다. 아더왕은 이웃나라왕에게 질문에 대한 답을 하였고 이웃나라왕은 그것이야말로 진실이며 정답이라며 기뻐하면서 아더왕의 목숨을 보장해주었다.

하지만 목숨을 되찾은 아더왕에게는 근심이 남아있었다.
자신이 가장 총애하는 거웨인의 결혼에 대한 것이었다.
아더왕은 목숨을 되찾은 기쁨에 넘쳐있었지만 동시에 거웨인에 대한 일로 근심에 쌓여있었다. 그러나 거웨인은 대단한 사람이었다.

늙은 마녀는 결혼하자마자부터 최악의 매너와 태도로 거웨인을 비롯한 모든 사람을 대했다.
그러나 거웨인은 한치의 성냄이나 멸시없이 오직 착하게 자신의 아내로서 마녀를 대했다.
첫날밤이 다가왔다.
거웨인은 자신의 인생에 있어서 최악의 경험이 될지도 모르는 첫날밤을 앞에두고 숙연히 침실에 들어갔다.

그러나 침실안의 광경은 거웨인을 놀라게 하기에 충분하였다.
거웨인의 인생에서 본적없는 최고의 미녀가 침대위에서 그를 기다리고 있었다.
놀란 거웨인이 미녀에게 어찌된 일이냐고 물었다.
미녀는 말했다.
자신이 추한 마녀임에도 거웨인은 항상 진실로 그녀를 대했고 아내로 인정하였으므로 그에 대한 감사로서 이제부터 삶의 반은 추한 마녀로, 나머지 반은 이 아름다운 미녀로서 있겠노라고 하였다.

그러면서 마녀는 거웨인에게 물었다.
낮에 추한 마녀로 있고 밤에 아름다운 미녀로 있을 것인가, 아니면 낮에 아름다운 미녀로 있고 밤에 추한 마녀로 있을 것인가.
거웨인에게 선택을 하라고 하였다.
거웨인은 이 진퇴양난의 딜레마에서 선택을 해야만 했다.

만일 낮에 아름다운 미녀로 있기를 바란다면 주위사람에게는 부러움을 사겠지만 밤에 둘만의 시간에 추한 마녀로 변한다면 어찌 살것인가. 아니면 반대로 낮에 추한 마녀로 있어 주위사람의 비웃음을 사겠지만 밤에 둘만의 시간에 아름다운 미녀로 변해 살것인가.

당신이라면 어떤 것을 선택하겠는가?

거웨인이 선택한 것은 아래에 씌여있다.
하지만 먼저 당신이 선택을 하고 선택한 후에 거웨인의 선택을 읽어보기를 바란다.

거웨인은 마녀에게 자신이 직접 선택하라고 말했다. 마녀는 이 말을 듣자마자 자신은 반은 마녀 반은 미녀 할 것 없 이 항상 아름다운 미녀로 있겠노라고 말했다. 이유는 거웨인이 마녀에게 직접 선택하라고 할만큼 마녀의 삶과 결정권, 그리고 마녀 자체를 존중해주었기 때문이라고 하였다.

---

장애인에 대한 에디켓

시각장애인

시각장애인에 관한 사전정보

• 시각장애인은 이동을 위해서 안내견이나 지팡이를 사용합니다. 안내견은 시각장애인이 걷는 방향을 따라 안전하게 길을 안내하도록 특수하게 훈련받은 동물입니다.
• 시각장애인 중에는 전맹과 약시가 있는데 돕는 방법은 각기 다릅니다. 무슨 도움이 필요 한지 정확하게 아는게 필요합니다.

시각장애인과 주변소음

• 시각장애인은 그들의 주변환경에 관한 정보의 대부분을 소리를 통해서 얻습니다. 지나치게 큰 소음은 목소리 교통신호 등과 같은 중요한 소리를 듣는데 혼동을 줍니다. 예를 들면 시각장애인이 사무실에 들어올 때는 복사기 소리를 내지 않는다던가, 안전하게 거리를 건널 수 있도록 경적을 울리지 않는다던가, 시각장애인이 처음으로 집을 방문했을 때 음악소리를 줄여주는 등 배려를 해주는 것이 좋습니다.

시각장애인과 지팡이

• 지팡이는 안내견과 마찬가지로 많은 기능을 할 수 있는 시각장애인을 위한 재활용구입니다. 지팡이의 뾰족한 끝으로 땅을 더듬으면서 걷고 턱을 찾고 장애물을 탐지합니다.
• 시각장애인의 허락을 받지 않고 지팡이를 만지지 않습니다. 시각장애인이 지팡이를 가지고 돌아다닐 때는 천천히 그리고 불완전하게 이동합니다. 그러나 반드시 도와주어야 할 필요는 없습니다. 커다란 어려움이 보일 때까지는 방해하지 않습니다.
• 당신이 시각장애인을 길 안내할 경우에는 지팡이의 반대편에 서서 당신의 팔을 내주어 그 팔을 잡고 안전하게 이동할 수 있게 합니다.

시각장애인과 함께 걸을때

• 시각장애인과 함께 걸을 때는 시각장애인이 사용하는 흰지팡이 반대쪽에 서서 자신의 팔을 시각장애인에게 내줍니다. 시각장애인은 팔을 잡고 걷게되면 훨씬 수월하게 걸을 수 있을 것입니다. 팔은 팔꿈치부분이나 팔꿈치 위를 잡게 하는 것이 좋습니다. 반대로 시각장애인의 팔을 잡는 것은 실례되는 행동입니다.
• 만일 시각장애인이 당신의 팔을 잡는 것을 좋아하지 않으면 시각장애인이 만질 수 있을 정도로 가깝게 붙어서 걷습니다. 시각장애인이 팔을 잡고 있을 때는, 갑자기 돌거나 또는 움직이는 행동을 하지않습니다. 계단 엘리베이터 또는 예외적인 어떤 곳에 접근할 때는 우선 멈춰 서서 처한 상황을 설명합니다.
• 뒤로 돌 때는 팔을 잡은 채로 같이 돌지 말고 시각장애인에게 방향 바꾸는 것을 이야기하고 팔을 놓으라고 한 다음 앞으로 얼굴을 마주보면서 방향을 바꾸고 다시 팔을 잡도록 합니다.
• 문이 닫혀진 곳에 있을 때는 돕는 사람이 문을 열어 주거나 또는 시각장애인의 손을 손잡이에 갖다 대주어 시각장애인이 직접 열도록 합니다. 그런 다음 안으로 안내를 해줍니다.
• 회전문의 경우에는 어느 쪽으로 열리는 지를 말해 주어야 합니다.

길 알려주기

• 시각장애인에게 길을 가르쳐 줄 때 가장 중요한 것은 정말 그 위치를 정확하게 알고 있는 지를 생각하여야 합니다. 만일 적절한 도움을 제공할 수 있다고 생각되면 가능한 한 정보를 구체적으로 알려줍니다.
• 방향과 장소를 알려줄 때는 전후좌우와 몇 발짝, 몇 미터 등 정확한 위치를 말해줘야 합니다.
• 길의 모든 상황을 상세히 설명하며 특히 도로상태 도로에 설치된 것 등 안전을 위협할 수 있는 것들을 상세히 설명해 줍니다.

정신지체 장애인

정신지체인에 대한 사정정보

• 정신지체인은 신체적으로 건강하여 비장애인과 의견상의 차이는 없으므로 이들이 장애인이라는 인식을 거의 하지 못합니다. 따라서 정신지체인을 도와주기 위해서는 먼저 이들을 정신질환자로 오인하거나 외견상의 장애인만 장애인이라는 인식에서 벗어나야 이들을 진정으로 도울 수 있습니다.

대화 할 때

• 정신지체인이 사용하는 말의 발음이 불명확하고 단어선택이 미숙하더라도 끝까지 주의 깊게 들어주어 이들이 말하고자 하는 의사를 정확히 파악해야 합니다.
• 비장애인은 발음을 분명하게 천천히 쉬운 단어를 선택하여 자신의 의사를 표현해야 하고 필요하다면 몸짓 등의 행동을 덧붙여 이해를 도울 수도 있습니다.
• 정신지체인이 지능이 부족하다고 해서 무조건 반말을 하거나 나이 어린 사람으로 대할 수 있는데 생활연령에 맞게 존칭어를 사용해 주어야 합니다.
• 정신지체인은 신체적으로 건강하여 비장애인과 의견상의 차이는 없으므로 이들이 장애인이라는 인식을 거의 하지 못합니다. 따라서 정신지체인을 도와주기 위해서는 먼저 이들을 정신질환자로 오인하거나 외견상의 장애인만 장애인이라는 인식에서 벗어나야 이들을 진정으로 도울 수 있습니다.

청각 장애인

청각 장애인과 대화시 몸짓과 얼굴표정

• 청각장애인이 특히 구화법을 모르는 청각장애인들에게 몸짓 및 얼굴 표정은 매우 유용합니다. - 색안경, 커다란 챙모자는 전체 얼굴 특히 눈을 가릴 수 있으므로 의사 소통에 오해가 있을 수 있습니다.
• 과장된 얼굴표정과 몸동작을 보일 필요는 없습니다.
• 입모양이 바로 보이도록 머리를 움직이거나 지나친 얼굴표정을 짓지 않습니다.애인이 내용을 읽고 있는 동안 그의 표정을 관찰하여 그가 내용을 이해하고 있는지 확인합니다.

언어장애인과 의사소통

• 많은 언어장애인들이 언어장애에도 불구하고 말로써 의사소통을 합니다.
• 언어장애인의 대화 속도는 비장애인만큼 빠르지 않으며 청각장애를 함께 지닌 경우 상대방의 대화를 이해하는데 더욱 시간이 걸림을 인식하여야 합니다.
• 얼굴, 눈을 바라보고 대화에 충분한 주의를 기울여야 합니다.
• 소음이 있는 곳에서는 가까이 앉습니다.
• 장애인의 말이 확실히 끝날 때까지 기다린 다음 적당하게 천천히 말을 합니다.
• 장애인이 오랫동안 이야기 할 때는 고개를 끄덕이고 몇 마디 말을하여 여전히 경청하고 이해하고 있음을 알립니다.
• 장애인이 말하는 동안 지치지 않도록 너무 길게 이야기하지 않습니다.
• 언어장애인이 말하는 것이 힘들어 보일지라도 그가 말하고자 하는 것을 끝마칠 때까지 기다립니다.
• 장애인의 말을 완전히 이해할 때까지 듣고 함부로 추측하지 않습니다. 청각장애인이 특히 구화법을 모르는 청각장애인들에게 몸짓 및 얼굴 표정은 매우 유용합니다.
• 색소통안경, 커다란 챙모자는 전체 얼굴 특히 눈을 가릴 수 있으므로 의사 소통에 오해가 있을 수 있습니다.

---

시각장애인체험 ‘어둠속의 대화’

빛이 전혀 존재하는 않는 완전한 어둠속 세상을 상상해본 적이 있으신가요?

아무 소리도 들리지 않을 것 같은 깊은 바닷속에서 수많은 소리들이 존재하듯이 아무 것도 보이지 않는 어둠 속이지만 우리가 생각하는 모든 것들이 존재합니다. 사람과 사람 사이의 물리적인 관계를 단절시키는‘어둠’이라는 극단적인 상황 속에서 시각 이외의 다양한 감각들을 활용해 진정한 소통의 발견이라는 발상에서 전시는 시작이 됩니다.

우리가 살아가는 시각중심적인 삶과는 반대로 빛이 없는 세상에서 살아가게 된다면 어떻게 될까요?

전시의 모든 과정은 완전한 암흑속 공간에서 시각장애인 가이드의 인솔 하에 이루어지며, 마치 온/오프라인이 혼재된 것 같은 어둠이라는 공간 속에서 스스로를 완전히 감추기도 하고 또 다른 모습으로 드러내기도 합니다. 하지만 어둠 속 여행을 완수하기 위해 서로가 서로를 의지하고 배려하는 과정을 통해 혼자가 아닌 함께함의 소중함을 깨닫게 되고 입장이 다른 서로에 대한 진정한 이해를 통해 가장 솔직한 자신의 모습을 발견하기도 합니다.

DIALOGUE IN THE DARK

90분간 빛이 완전히 차단된 곳에서 일상을 느껴보는 체험전시입니다.

빛이 완전히 없는 공간에 들어서 잔디 위의 바람과 자연의 향내음을 느끼고 얼마간의 시간이 지나서야,
먹먹한 세상 속 막막한 시공간을 벗어나 깊은 성찰의 시간은 못되더라도 잠시 무언가를 되돌아 볼 수 있는 시간이었습니다.

---

2010년 상반기 하늘연소프트 웹접근성 워크샵 발표

예행연습도 한번 못해보고 에드립모드로 한시간이나 발표 했습니다. ㅠ.ㅠ

호환성과 상호운용성을 설명하는중.. 저 손은 뭘했었지;;

개발자 여러분께 호소합니다

귀차니즘에 걸린 개발자 여러분, DTD 를 웹표준으로 선언했으면 개발진행시에도 표준태그를 사용합시다.

그리고 인간적으로

정성어린 퍼블리셔 소스들은 개발하면서 망치치 맙시다!

---

내사랑 어쿠스틱 기타

초등학교 5학년때 우연히 기타연주를 시작했다. 그동안 많은 기타들이 내옆에 있었지만, 이제 마지막까지 나와 함께할 내사랑 어쿠스틱 기타를 소개한다.

이 친구는 스페인에서 태어났고 생일은 2000년 7월 24일이다.

알함브라 어쿠스틱 기타 (Alhambra CW NW-3)

SPEC LIST

Birthday	24th July 2000.(spain)
TOP	Solid Red Cedar
SIDES & BACK	Solid Indian Rosewood
NECK	Utile with truss road
FINGERBOARD	Ebony
MACHINE_HEADS	Gold Plated
BINDING	Maple
ROSETTE	Natural coloured veneers
FINISH	Matt
Elect	Fishman On Board Blender
Versions	Cut Away
price	1,247 euros. (2,500,000 KRW)

흔히 올솔리드 기타라고 한다. 즉 합판이 아니라 전체를 원목으로 깍아서 만든 일명 원목기타다. 이 기타는 시간이 지날수록 나무의 수지성분이 깨지고 파괴되어 소리의 공명을 잘 받아들이게 되고 나무가 소리를 타는 에이징이 가능하다.

세월의 흔적으로 인한 피니쉬의 변색은 수수함과 오랜경험을 더한다.

개인적으로 외부보다는 내부가 더욱 맘에든다. 기타의 본고장 스페인의 제작기술이 녹아 있는 듯 하다.

기타의 라벨이 보인다. 이 친구를 알기위해 스페인으로 라벨을 보냈다. 온 답변은 다음과 같다.

Thank you very much for the pictures. Undoubtedly, they have been very useful to identify your guitar. After checking our database we can tell you that your guitar started to handcraft in the middle of November 1999 and it was finished at the end of July 2000.

픽업은 세계적으로 제일 유명한 피쉬맨이다.

기타내부로 들어갑니다.

이 친구의 속마음을 알게될 때 마다 더욱 사랑하게 된다.

사랑한다.

중학교1학년때, 고등학교1학년때

---

요즘 작업중인 데생과 나의미술

와이프 연필꽂이에 이름없는 4B 연필, 정체불명의 딱딱한 지우개가 있길래 무턱대고 시작한 그림입니다.

제가 데생을 처음 시작한것은 중학교 3학년,
예고입시를 위해서 미술학원에서 아그립파를 그리던 것이 생각이 나네요..

가운데 어린남자와, 어머니 부분은 어느정도 톤이 잡혀있고, 3단계 디테일 공사중에 2단계까지 완료된 화면입니다.

작은 사진을 보고 그리다보니, 그림자의 방향도 특별히 없어.. 대부분의 명암들은 뻥치면서 그리고 있습니다 ㅋㅋ

데생 작업이 반 이상 진행되니, 톤도 좋구 명암처리도 쉬우면서 잘 나오는 사진으로 다시 그려보고 싶지만...
이미 시작한거 완성까지는 꼭 해보고 싶네요..

퇴근 후에 시간이 되거나, 불연듯 생각날때마다 연필을 잡고 있지만.. 언제 완성될지는......

---

학창시절의 빛바랜 사진들

예술고시절 ‘움직이는 미술관’ 대상 수상

저는 상상력과 창의력, 감성과 감정이 전혀 없다는 것을 얼마전 다중지능적성검사를 통해 알게 되었죠.

뇌재능에서 말하기를 ‘그림을 잘 그린다’ 라는 관점은 크게 두가지 분류로 나눌 수 있다고 합니다.

좌뇌가 발달한 사람은 사물에 대한 논리적 분석력이 뛰어나 보고 그리는 것을 잘 하고 되고,
우뇌가 발달한 사람은 상상력과 창의력이 풍부하여 창조적인 분류에 속한 미술들을 잘한다는 것 입니다.

이것은 음악에도 똑같이 적용됩니다. 전자는 모창을 잘한다거나 연주인이라면 정교하게 균일화된 기계적인 음악을 잘하고, 후자는 텐션의 강약이나 음악의 느낌, 작곡, 감정에 더 치중하게 됩니다.

저는 전자쪽이며 조합형입니다.

담임 선생님과

저는 디자인실 어디에 있을까요?

따라서 저는 창의력이 들어가는 모티브 디자인이 너무 어려웠고, 반듯반듯 빠르고 정교한 평면구성이 쉬웠던 것 같습니다.

상담시 들었던 뇌재능 구조학에 따르면 실제 미술과 음악에 재능이 있는 사람들은 우뇌가 발달한 사람들로 이들은 대부분 감성이 풍부한 조용한 사람들입니다.
보고 베끼는 그림을 잘 그린다거나 테크닉컬한 음악을 잘 카피하는 사람은 실제 그 분야에는 소질이 없으나, 좌뇌의 분석력이 발달하여 잘하게 되는것이죠.

실제 음악과 미술에 소질이 없고, 감정이 없는 나

미술전공에 그림은 안그리고 허구헌날 기타만 치고 있는 1人

군생활 1/3 을 그림만 그리며.. 유일하게 남은 로미오와 줄리엣 군대 그림

지금 웹 접근성을 한다는 사실만 봐도, 저에 대해서 잘 알게됩니다.

---

프라모델 취미

메르세데스-벤츠 (Mercedes-Benz SLR McLaren)

52,000원에 벤츠를 구입하다!

원래 저는 자동차에 관심이 없는 사람인데, 최근에 메르세데스 - 벤츠가 좋아지기 시작했다.
아마도 언젠가는 성공해서 이 차를 살거라는 마음의 각오에서 프라모델을 시작한 것 같다.

주변의 모든 물건들이 벤츠 제작 작업장으로..

정신없이 자동차가 제조되는 작업전경.. 노트북도 작업장으로..
자세히 보시면 모 공공기관 웹 접근성 개편사업 완료보고 앞표지까지 빠레트로 -_-;

작업에 몰두중인 김군..

본인은 프라모델 초보로 프라모델을 쉽게 생각했다가 에나멜 색상을 추가로 구입했고, 생각보다 매우 정교해서 핀셋까지 구입했다.. 알고보니, 색상도 무광, 유광이 있더라.. 유광들을 지워내고 무광으로 다시 칠했다!

차 엔진부분.. 원래는 깔끔하게 그냥 칠하는 것으로 가이드라인에는 나와 있으나, 재구성했다.

자세히 보면 일부러 페인트 벗겨 무쇠 느낌을 주었고, 디테일하게 여러가지 색상들로 실제 엔진처럼 보이기 위해 색을 칠했다. 실제전부 플라스틱이다.. 일부 철사(노란)와 가죽선(갈색)들도 배기관으로 투입되었다.

사진상으로 크게 나왔지만, 실제보면 칠하는 것 자체가 어려울 만큼 매우 작고 정교하다.

---

완성작 스틸샷

시트를 깔았다.. 천을 수작업으로 재단하여 색칠했다.. 없는 스펙을 만든 이 뿌듯함!

비온 뒤의 벤츠를 연상했다. 앞 창문을 자세히 보면..

프로포션 하나는 정말이지 최고라고 말할 수 있겠다.

이 제품은 그야말로 진짜중의 진짜같다. 특이하게 점점 더 가격이 오르고 있는 CMC의 특징은 다른 메이커의 약 두배정도의 디테일과 하나하나 꼼꼼히 생각한 배려 등이 아닐까 싶다.

차껍질(?)은 은색 에나멜 스프레이로 도색했다.. 프라모델 초보라 명칭은 알 수 없음..

벤츠는 언젠가 내 차가 될 것이야!

보넷트의 열림은 슬라이딩방식으로 실제 SLR의 보넷트열림을 참조하였다고 한다. 내부의 계기판등의 디테일은 기존의 미니카등과 완전히 차별화될 정도로 정교하다

메르세데스 벤츠 그룹과 멕라렌이 합작하여 만들어낸 슈퍼카. 화살을 닮은 디자인은 빠르고 날렵함을 우아하게 표현한다. 그러나 이 우아함 속에는 거대한흡기엔진에 의한 괴물의 힘이 잠들어 있다.

나는 지금 이 차를 타고 상상을 즐기고 있다.

---

보편적인 웹 접근성 관계 요소

사람에 따른 분류

웹 제작자

• 웹 기획자(Planner) - 콘텐츠, UI/UX 개발 및 기획
• 웹 이용자(End User) - 사용자 생산 콘텐츠(UGC) 저작
• 웹 디자이너(Web Designer) - 웹 그래픽 설계
• HTML/CSS 개발자 - 문서 구조화 및 화면 렌더링 구현
• Javascript/AJAX 개발자 - Javascript 를 이용한 동적 UI 구현
• Flash/Action Script 개발자 - Flash 를 이용한 동적 UI 구현
• Server-side 개발자 - 웹 프로그램 저작

웹 이용자

• 어린이 - 웹을 처음 경험하거나 경험치가 낮아 사용능력이 떨어지며, 고급어휘, 외국어 능력이 떨어짐
• 노인 - 웹을 처음 접하거나 자주 사용하지 않아 사용하는 능력(이해)이 떨어지며, 신체기관의 노화로 인하여 시각, 청각, 지체기능이 정상인보다 떨어진다.
• 시각장애
  • 저시력 - 웹 저작자가 서체의 크기를 줄이는것을 제한하거나 서체의 크기를 조절할 수 있도록 지원
  • 색맹 - 색에의하여 내용을 구분하도록 하는 콘텐츠의 제한, 특히 적녹색맹이 가장 많음
  • 전맹 - 시력이 전혀 없고 청력에만 의존하는 사람, 마우스를 사용할 수 없음
• 청각장애 - 멀티미디어 콘텐츠의 음성을 인지할 수 없으므로 캡션(자막)이나 대체 텍스트에 의존
• 지체장애 - 팔이 불편하거나 없는 경우 마우스, 키보드의 사용에 제한이 생긴다
• 정신지체 - 지능이 70 이하인 경우로서 어린이의 웹 이용행태와 유사, 언어 및 사용능력이 모두 떨어짐
• 난독증 - 지능은 정상이나 글을 판독하는 것에 어려움을 느끼는 뇌질환
• 정상인 - 장애가 없으나 환경요인에 의하여 웹에 접근하는 것에 일시적인 어려움을 겪을 수 있다.
• 외국인 - 외국어에 대한 이해능력이 떨어지므로 보통 청각(오디오)보다 시각(문자)에 의존하게 되고 내용 이해에 더 많은 시간을 필요로 함

환경에 따른 분류

하드웨어환경(Hardware)

• 장치(Device)별 분류
  • 컴퓨터(PC)
    • 키보드 - 키보드만 사용하는 경우
    • 마우스 - 마우스를 사용할 수 없거나 정교한 사용이 어려운 경우
    • 모니티 - 1024*768 미만의 해상도, LCD등 색 재현력이 떨어지는 경우
    • 스피커 - 장치이상 또는 장치의 부재
    • 프린터 - 흑백 인쇄
    • 프로젝션 - 조명이 어두운 환경, 어루운 배경과 고 명도대비 요구
  • Mobile - 화면의 크기, 접속속도, 데이터 이용요금, 입력장치의 한계
• 접속(Network) 환경분류
  • 저속환경 - 고용량 파일 전송에 의한 지연
  • 접속불안정 - 권한(로그인) 세션 종료

소프트웨어환경(Software)

• 운영체제(Flatform)별 분류
  • Windows
  • Mac
  • Linux
• PC 브라우징 도구의 Vendor별 분류
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
• Mobile 장치의 화면 렌더링 방식에 따른 분류
  • 디자인 서식이 제거된 화면(Small Screen Rendering)
  • 디자인 서식이 포함된 화면(Full Browsing Rendering)
• 보조 도구 분류
  • 웹 이외의 문서 읽기전용 프로그램
    • Adobr Acrobar Reader(PDF)
    • MS Word Viewer(DOC)
    • 한글 Viewer(HWP)
    • MS Excel View(XLS)
  • 음성출력장치
    • 사용자 PC에 설치된 화면낭독기(Screen Reader) 환경 - Client-side TTS
    • 웹 페이지 저작자가 제공하는 TTC(Text To Speach) - Server-side TTS

원글자료출처 : 나라디자인, 웹 뒤에 숨은 Web

---

몸과 마음이 지칠때

우울할 때가 있습니다.

침울할 때가 있습니다.

머리 위에 먹구름이 가득한 날들을 보낼 때가 있습니다.

막막함을 넘어 답답하고 화가 나서 주저앉아 버리고 싶을 때가 있습니다.

이때 "내가 떠" 올릴 것은

살다 보면 먹구름 하늘도 있다. . . 하지만 오래 가지 않는다.

"곧" 갤것이다. . . 입니다.

터벅 터벅 집으로 올때. . .

문득 내가 지쳤구나.. 하는 생각과.. 보라색 하늘이 생각납니다.

우울함 속에서도 반짝이는 작은 불빛이 하나 있을 것입니다.

뚜렷이 떠오르는 설레임 하나 있을 것입니다.

그것이 바로 나의 비전이자 기쁨입니다.

행복하고 슬픈 것도,

이 모든 감정을 느낀 다는 것이 내가 삶을 누리고 있다는 증거라니,

조금만 멈추어 생각하면 모든 것이 감사할 일 밖에는 없는 것 같습니다.

---

중국출장 웹접근성 커리큘럼 교육

장춘시 IOSEF

중국 장춘시에 도착하자마자, 사내 퍼블리싱팀이 시정부 건물로 들어섰을때 가장 먼저 나를 반겨주던 태극기

퍼블리싱팀 사무실.. 이 양반은?

중국은 한국기업문화와 완전히 달랐다. 한국은 정말 일만 하는 나라다. 점심때는 모두가 게임을 한다.

퍼블리싱 통합스킴

한칸한칸 소중하게 작성했던 통합스킴

마음으로 대화를 나누던 퍼블리셔들

왼쪽부터 왕덕성, 황우, 나, 연지초, 따웨이, 왕춘위, 왕연초, 카이, 개발쪽(?), 소금림

항상 휴식타임은 이곳에서 (주변풍경은 북한과 흡사했다)

BODY 를 이용하여 최적의 CSS 를 설계중인 따웨이

중국에서 생일을 맞이하게 되었습니다.

너무도 감사하고 고마운 잊지못할 친구들

한달을 넘게 떨어진 와이프와 우리 소연이 네이트온 화상채팅중, 근데 우리 아들은 어디갔지?

휴일날 시내에서 한컷!

난 이제 떠난다. 흠집은 있었지만 후회는 없다.

---

UI/UX의 개발 프로페셔널

“당신이 생각하는 디자인^DESIGN이란 무엇입니까?

단순히 표현^{EXPRESSION인가요?}
그렇다면, 구조^STRUCTURE는 고려하였는지요?”

이상하게도 대한민국의 다수는 디자인이라는 용어의 개념을 잘못 이해하고 있는 것 같습니다. 디자인은 '생각하고 설계하여 제작하는 일'입니다. 단순하게 보기 좋으면 그만 이라는 생각은 접어서 주머니에 넣어두세요. 이 안에서 다루는 대부분의 내용은 구조 디자인입니다. 물론, 표현 디자인도 다루기는 합니다만, 현장에서 활약하는 여러분들에게 이미 표현력은 충분하다는 전제하에 이 과정은 만들어진 것이니까요.

이 안에서 표현력을 증강시킬 생각은 안 하시는게 좋을 거에요. 이 곳에서의 목표는 크로스 커뮤니케이션이니까요. 단편적인 사고를 벗어나 입체적인 사고를 할 수 있는 웹 구현자. 그것이 궁극의 목적이자 목표랍니다.

그런 사람이 되고 싶은 당신!

UX(User eXperience, 사용자 경험)과 UI(User Interface)의 차이는 인터렉션에 있습니다. UI는 기능 자체 즉 인터페이스만 고려한 것이고 UX는 인터페이스 설계를 할 때, 그 인터페이스에 대해 사용자가 어떻게 반응하고 사용하는 인터렉션까지 고려할 것이라 할 수 있습니다.

그래서 UX는 디자인 뿐만 아니라 사용자의 이용 행태를 캐치하여 디자인에 반영할 수 있는 안목이 필요합니다. 방망이 깍는 노인은 방망이질하는 아낙네의 인터렉션을 잘 이해하는 분이었을 겁니다.

UI (User Interface) 와 UX (User eXperience)

• UI - 사용자와 제품이나 프로그램과 의사 소통하기 위한(특정행위를 지시하기 위한) 것
• UX - 사용자가 제품이나 서비스를 사용함에 있어서 느끼는 것(경험하는것)

UI와 UX의 공통점은 무엇보다도 공급을 하는 쪽에서의 관점이 아니라 이를 사용하는 사용자의 관점에서 바라보고 있다는 것입니다. UI와 UX의 차이점은 UI는 사용자의 Need에 따른 Action의 편의성에 초점을 둔다면 UX는 이를 통하여 사용자가 느낄 수 있는 것에 초점을 둔다는 것이구요. 어떻게 보면 UI는 좀 더 이성적인 측면에 UX는 좀 더 감성적인 측면에 닿아 있을 수 있지만, 이 둘의 관계는 서로 완전히 분리되어 있다기 보다 동시에 발생합니다.

Action을 취하기 전에 인지단계에서도 사용자는 제품 및 서비스를 느낍니다. Action을 취하면서도 마찬가지이고 Action을 마쳤을 경우에도 마찬가지이죠.

---

웹 접근성 실무예제소스

그 동안 작업했던 웹 접근성 약 100개의 템플릿들을 올릴 예정입니다. 잠시만 기다려 주세요.

레이아웃

• CSS 를 이용한 디자인 변경 예제 : http://www.hiweb.kr/wcag/
• 서브메뉴까지 순차적으로 이동하는 레이아웃 : http://hiweb.kr/sample/ex02/
• 순차적인 이동하는 메뉴 룰오버 레이아웃1 : http://hiweb.kr/sample/ex11/
• 순차적인 이동하는 메뉴 룰오버 레이아웃2 : http://hiweb.kr/sample/ex12/

참고소스

• 순차적으로 이동하는 주요메뉴 : http://hiweb.kr/sample/ex01/
• scope 속성을 이용한 테이블 예제 : http://www.hiweb.kr/sample/ex00/table_sample02.txt
• headers 속성을 이용한 테이블 예제 : http://www.hiweb.kr/sample/ex00/table_sample01.txt

---

다소 복잡한 데이터 테이블

다수의 th 부모들이 존재할 경우

2008년 1분기 누적금액 현황

	수입			저축			프로젝트 금액
년월	주수입	부수입	수입총액	청약	적금	남는돈	프로젝트통장	추가금액	누적금액
달성율	5.1%
2008년 01월	3,450,000	0	3,450,000	100,000	1,000,000	0	0	0	51,000,000
2008년 02월	2,338,000	0	2,338,000	100,000	1,000,000	0	0	0	51,000,000
2008년 03월	4,700,000	0	4,700,000	100,000	1,000,000	0	0	0	51,000,000

복잡시런 테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample01.txt (새창은 Shitf+클릭)

여러개의 헤더셀을 포함한 큰 헤더셀이 있으며, 좌측 컬럼에도 헤더셀이 있습니다. 마크업을 살펴보겠습니다. summary 뒤에 있는 rules 속성은 셀의 구분선 표시형식을 정의하는 것으로 행 사이의 구분선을 표시할 경우에 ‘rows’, 열 사이에 구분선을 표시할 경우에 ‘cols’, 그룹핑 단위로 구분선을 표시할 경우에는 ‘groups’를 지정합니다. 이때 그룹핑은 thead, tbody, tfoot 이 되며 저는 ‘all’ 로 지정하였습니다. thead 속성에도 디자인이 가능하지만 rules 속성으로도 디자인이 가능합니다. colgroup 요소는 열의 그룹핑을 위한 요소로써, 둘 이상의 열을 그룹핑 할 경우 span 속성을 통해서 갯수를 정의할 수 있습니다. 내용셀과 헤더셀을 살펴보면 각 헤더셀에 id 를 부여하고, 여러개의 제목셀을 갖는 내용셀에는 headers 속성을 사용하여 현재의 내용셀의 제목이 여러개 존재함을 알리고 있습니다. 아니 근데,

테이블 하나가지고 div, css 코딩하는것도 아니고 접근성 개선사업으로 바쁜데 언제 이렇게 하고 있을까요?

더 단순한 마크업 방법이 있습니다!

scope 속성만으로도 위와 동일한 결과를 간단히 만들 수 있습니다. 바로 scope 속성값중에 ‘colgroup’ 속성값과 ‘rowgroup’ 속성값이 있습니다.

scope 의 colgroup 속성값으로 만든 동일한 결과를 만들다

scope 속성만을 이용한 해결법 예제소스 : http://www.hiweb.kr/sample/ex00/table_sample02.txt (새창은 Shitf+클릭)

scope 속성만을 이용한 예제와 같이, scope 속성값중 colgroup 값을 사용하여 행을 그룹화 하였고, 좌측 컬럼에 존재하는 헤더셀에는 scope 값으로 row 를 지정해 주어 모든 헤더셀과 내용셀이 명시적으로 논리적인 관계를 갖기 때문에 굳이 id, headers 속성을 사용하지 않아도 됩니다. 또한 html 의 파싱순서에 따라 화면낭독기는 좌상단으로부터 우하단으로 Z 모양으로 반복해서 읽을 것 입니다. 위 예제에는 없지만, 좌측 컬럼의 헤더셀이 rowspan 속성으로 상하셀이 결합되어 그룹화가 되어 있고 바로 옆에 또 다른 자식 헤더셀이 존재할 경우 scope="rowgroup" 이 되겠죠. 때문에 id, headers 속성까지 사용하는 일은 거의 전무하다고 판단됩니다.

이렇게 제목셀과 내용셀의 관계를 명시적으로 지정한 경우 화면낭독기 또는 그 외의 장치가 이것을 의미있게 받아들이는 경우 내용셀을 읽기 전에 현재 내용셀과 연관된 제목셀을 먼저 읽어 주는등 다양한 확장성과 향상된 경험을 줄 수 있습니다.

axis 라는 속성도 있습니다. axis 속성은 id 속성과 headers 속성으로 연결된 셀들을 카테고리화 할 수 있어서 사용자가 표로부터 원치 않는 정보(셀)를 제외한 보다 정확한 정보를 제공받을 수 있도록 처리하는데 도움을 줍니다.

우습게 시작했던 테이블이 가면 갈수록 어려워지는 건

테이블을 css 로 디자인하면서 언젠가 "아 thead 와 tbody 로도 디자인이 가능하구나" 라고 느꼈던것이 그리 오래되지 않았는데 rules 속성으로도 디자인이 가능하다는 것을 새로 알게 되었고, 절대 복합한 테이블에서 등장하는 axis 속성의 원치 않는 셀 분리, 헤더셀들의 그룹화, 스크린리더 읽는 순서 지정문제등 알면 알수록 어려워 지는 바로 이 테이블, 국내 스크린 리더의 미비한 지원 문제점까지 있는 이 상황에 저는 이렇게 생각해 봅니다.

Table 요소를 표로써 제대로 사용하는 것. 쉬운 결정이지만 결코 만만치 않은 일이다.

---

웹 접근성을 고려한 데이터테이블

테이블 요소는 가장 많이, 가장 쉽게 사용하는 요소중 하나이지만, 알면 알수록 어려워지는것이 바로 이 테이블인 것 같습니다. 기본적으로 테이블에서 자주 사용되는 속성(summary, caption, colgroup, thead, tfoot, tbody)은 알고 있으리라 생각하고 시작하겠습니다. 간단한 테이블 하나가 있습니다.

흔히 사용되는 테이터 테이블

김일규가 한달 사용하는 지출비 순위

순위	지출 용도	금액
한달 총 지출비 : 400,000원
1	교통비	200,000원
2	식대비	100,000원
3	개인 용돈	100,000원

상단테이블 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample03.txt (새창은 Shitf+클릭)

마크업을 살펴보면 summary 속성과 border 속성을 가지고 있고, caption, colgroup, thead, tfoot, tbody 요소를 차례대로 가지고 있으며, 프린터 출력시 tbody 가 두 페이지 이상으로 끊어질 때 페이지마다 tfoot 요소가 출력될 수 있도록 thead 와 tbody 사이에 tfoot 이 위치하고 있습니다. border 속성의 경우 css 가 지원되지 않는 경우 시각적인 가독성을 떨어뜨리는 문제로 기본값을 1로 정의하고 css 로 표현하였습니다.

테이블 Structure 보기

웹 접근성을 고려한 데이터테이블에서는 테이블의 내용을 이해할 수 있는 정보(summary/제목, caption/요약정보)를 제공해야 한다는 것은 누구나 알고 있지만, 조금 더 의미있게 설명하는 테이블은 거의 못본 것 같습니다. summary 에서는 테이블의 상세한 제목 또는 이 테이블을 통해 정보제공자가 전달하고자 하는 핵심 제목을 넣어야 합니다.

그럼, 상단의 테이블의 summary 는 어떻게 넣어야 할까요?

결국, summary 에서는 테이블의 모든 내용을 구구절절(1열 순위, 2열 지출용도, 3열 금액등..) 설명하는 것만이 아니라는 것을 알 수 있으며, 시각장애인은 스크린리더를 통해 이 테이블의 summary 만 들어도 테이블 내용을 직감할 수 있을 것입니다. 저는 이 테이블을 통해 한달에 교통비가 제일 많이 나간다는것을 호소하고 있는 것 입니다. caption 또한 summary 와 중복되지 않는 적절한 요약정보를 넣었습니다.

scope 속성의 col(세로로읽어라)속성값 row(가로로읽어라) 속성값으로 스크린리더에서 테이블의 읽는 순서를 지정해 주었으며, 이와 비슷한 id(너는) headers(너다) 직접연결 속성은 하단에서 설명하겠습니다.. 빠른 진행을 위해 abbr 속성을 사용하였고 음성 장치는 abbr 속성값의 약자만을 읽을 것 입니다.

그럼 하단예제로 제목셀과 내용셀의 논리적인 관계를 의미있게 설정하는 몇가지 방법을 보겠습니다.

제목셀과 내용셀의 읽는 순서를 연결해주자

보통 scope 속성은 테이블형식이 가로 세로가 일정할 때 사용됩니다. 다음과 같이 말이죠.

scope 속성의 col 예제

하이웹솔루션 문의제안 게시판

번호	제목	작성자
1	테이터 테이블에 대해서 알고 싶습니다.	이명박
2	뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요	노무현

scope 속성의 col 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample04.txt (새창은 Shitf+클릭)

th 제목요소에 col 을 지정하여 모든열의 범위를 지정하였으므로 스크린리더기는 다음과 같이 읽을 것 입니다.

“번호, 1, 제목, 테이터 테이블에 대해서 알고 싶습니다, 작성자, 이명박 번호, 2, 제목, 뭔 테이블 하나에 1년을 공부해도 더 배울게 있는거냐구요, 작성자, 노무현”

시각적으로 테이블을 보는것이 아니라, 음성으로 듣기 때문에 제목셀을 지그제로 한번 더 읽으므로써, 명확하게 테이블을 이해할 수 있습니다.

scope 속성의 row, id 와 headers 예제

문의제안 게시판 글보기

작성자	이명박	회원등급	부유층
본문내용
부유층을 섬기겠습니다.

scope 속성의 row, id 와 headers 예제 소스보기 : http://www.hiweb.kr/sample/ex00/table_sample05.txt

row 속성값으로 범위에 속한 행에 대하여 가로로 읽게 해주었으며, id 와 headers 속성으로 직접 연결해주었습니다. 물론 id="sample-content" 대신 scope="col" 만으로도 헤더셀과 내용셀의 명시적 연결이 가능 합니다. 읽는 순서는

“작성자, 이명박, 회원등급, 부유층, 본문내용, 부유층을 섬기겠습니다. ”

간단한 테이블이라면 headers 속성 대신 scope 속성만으로도 동일한 결과를 가져 올 수 있으며, headers 는 상황이 매우 복잡한 표나 영역을 설정하기 곤란한 경우에 사용합니다.

---

[동영상] 시각장애인의 컴퓨터 활용 - 저시력자

대본 보기

http://www.hiweb.kr/file/low_vision.html

동영상출처

정보통신 접근성 향상 표준화 포럼 > 장애없는 사이버세상 웹 접근성 향상 캠페인

---

[동영상] 개발자 여러분! 웹 접근성을 향상을 도와주세요

동영상출처

정보통신 접근성 향상 표준화 포럼

---

[동영상] 시각장애인의 컴퓨터 활용 - 전맹

시각장애인의 컴퓨터 활용 - 전맹-

1. 시각장애인의 컴퓨터 활용
2. 내 컴퓨터에서의 활용
3. 인터넷에서의 활용

대본 보기

http://www.hiweb.kr/file/blindness.html

동영상출처

정보통신 접근성 향상 표준화 포럼 > 장애없는 사이버세상 웹 접근성 향상 캠페인

---

장애인 차별금지법 시행이 임박했습니다

2009년 4월 11일 부로 장차법 유예기간을 끝으로 다시 1년전과 같이, 법적사태가 속출할텐데 자세히 알고 있는 사람은 많지 않은 것 같습니다.

그래서 법률과 시행령 찾아서 분석해 보았습니다.

• 제4조(차별행위)
  1. 장애인을 장애를 사유로 정당한 사유 없이 제한·배제·분리·거부 등에 의하여 불리하게 대하는 경우
  2. 장애인에 대하여 형식상으로는 제한·배제·분리·거부 등에 의하여 불리하게 대하지 아니하지만 정당한 사유 없이 장애를 고려하지 아니하는 기준을 적용함으로써 장애인에게 불리한 결과를 초래하는 경우
• 제20조(정보접근에서의 차별금지)
  1. 개인·법인·공공기관(이하 이 조에서 ‘개인 등’이라 한다)은 장애인이 전자정보와 비전자정보를 이용하고 그에 접근함에 있어서 장애를 이유로 제4조제1항제1호 및 제2호에서 금지한 차별행위를 하여서는 아니 된다.
  2. 장애인 관련자로서 수화통역, 점역, 점자교정, 낭독, 대필, 안내 등을 위하여 장애인을 대리·동행하는 등 장애인의 의사소통을 지원하는 자에 대하여는 누구든지 정당한 사유 없이 이들의 활동을 강제·방해하거나 부당한 처우를 하여서는 아니 된다.
• 제21조(정보통신·의사소통에서의 정당한 편의제공의무)
  1. 제3조제4호·제6호·제7호·제8호가목 후단 및 나목·제11호·제18호·제19호에 규정된 행위자, 제12호·제14호부터 제16호까지의 에정에 관련된 행위자, 제10조제1항의 사용자 및 같은 조 제2항의 노동조합 관계자(행위자가 속한 기관을 포함한다. 이하 이 조에서 “행위자 등”이라 한다)는 당해 행위자 등이 생산·배포하는 전자정보 및 비전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 수화, 문자 등 필요한 수단을 제공하여야 한다. 이 경우 제3조제8호가목 후단 및 나목에서 말하는 자연인은 행위자 등에 포함되지 아니한다.
  2. 공공기관 등은 자신이 주최 또는 주관하는 행사에서 장애인의 참여 및 의사소통을 위하여 필요한 수화통역사·문자통역사·음성통역자·보청기기 등 필요한 지원을 하여야 한다.

2009년 4월 11일 장차법이 시행됩니다.

저는 국내 최대 웹접근성 퍼블리싱 회사(사내 웹퍼블리셔 25명)에 근무하고 있으며, 퍼블리싱팀을 책임지고 있습니다. 사내 직원이나 주변 웹에 종사하는 한분 한분에게 웹접근성을 강요하거나, 세뇌교육을 실시하여 한명씩 물들이는 나날을 보내고 있었지만, 이제 정당하고 합당한 사유가 생겼습니다.

향후, 웹접근성 개선사업의 시장규모를 예측한다면 어느정도 될까요?

이 부분은 저 역시 찬명님께 조언을 얻었습니다.

다음주부터의 ‘장차법’ 이 시행됨에 따라 공공기관의 수요로 부터 이를 예측할 수 있습니다. 국내 웹 사이트 가운데 2009년부터 ‘장차법’의 적용을 받게 되는 공공기관(정부, 연구소, 교육기관)의 비중은 약 1.7% 정도 입니다.

go.kr(0.2%) + re.kr(0.2%) + 교육기관(1.3%) = 공공기관(1.7%)

이것으로 볼때, 2009년 현재 웹접근성 개선사업 기관의 수요는 1.7% 수준이라고 할 수 있습니다.

그러나 2013년 4월 11일 부터 이 법률은 모든 분야로 확대되기 때문에 그때 즈음이면 수요는 기하 급수로 늘어날 것입니다.

마무리

미국은 이미 1990년에 장애인차별금지법을 제정 운영하고 있으며, 호주 영국등의 선진국들도 이미 90년대나 2000년초에 도입시행하여 전자정보 및 비전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근되도록 되어 있습니다.

관련링크

국회법률지식정보시스템

---

명함 받으시고 포인트 적립하세요

위와 같은 이미지일때 대체텍스트는 어떻게 넣어야 할까요?

1. alt 값으로 쭉 넣어준다.
2. 하단에 보이지 않는 문서로 대처한다.
3. longdesc 속성으로 대체문서를 작성하여 보완한다.

답변을 달아주시는 분께는 명함 무료배송과 더불어 20,000 포인트를 적립해 드립니다.

짤리기전에 응모해주세요.

---

웹접근성 향상을 위한 국가표준 기술 가이드라인 발표

웹 접근성 국가표준인 인터넷 웹 콘텐츠 접근성 지침의 준수여부를 평가할 수 있는 기준을 새로 마련하여 2009년 3월 17일 공포하게 되었습니다. 기준의 명칭은 웹 접근성 향상을 위한 국가표준 기술 가이드라인이며, 총 18개 항목으로 구성되었습니다.

본 작업을 해주신 충북대 김석일 교수님, 성신여대 노석준 교수님, 신현석님, 신승식님, 정찬명님, 조훈님 등 많은 전문가 여러분과 본 작업을 검토해 주신 포털업체 관계자, 장애인단체 등 많은 분들께 감사드립니다.

18개 항목은 다음과 같이 구성되었습니다.

웹접근성 향상을 위한 국가표준 기술 가이드라인

1. 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.
2. 배경 이미지가 의미를 갖는 경우, 배경 이미지의 의미를 이해할 수 있도록 대체 콘텐츠를 제공해야 한다.
3. 동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단(자막, 원고 또는 수화)를 제공해야 한다.
4. 색상을 배제하여도 원하는 내용을 전달할 수 있도록, 색상 이외에도 명암이나 패턴 등으로 콘텐츠 구분이 가능해야 한다.
5. 서버측 이미지 맵을 제공할 경우, 해당 내용 및 기능을 사용할 수 있는 대체 콘텐츠를 제공해야 한다.
6. 프레임을 제공할 경우, 해당 내용을 이해할 수 있도록 적절한 제목(title 속성)을 제공해야 한다.
7. 깜빡이는 콘텐츠를 제공할 경우, 사전에 경고하고 깜빡임을 회피할 수 있는 수단을 제공해야 한다.
8. 모든 기능을 키보드로 이용할 수 있어야 한다.
9. 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip navigation)를 제공해야 한다.
10. 시간 제한이 있는 콘텐츠를 제공할 경우, 시간 제어 기능을 제공해야 한다.
11. 새 창(팝업창 포함)을 제공할 경우, 사용자에게 사전에 알려야 한다.
12. 데이터 테이블을 제공할 경우, 테이블의 내용을 이해할 수 있는 정보(제목, 요약정보 등)를 제공해야 한다.
13. 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.
14. 해당 페이지를 잘 이해할 수 있도록 페이지 제목()을 제공해야 한다.
15. 콘텐츠는 논리적인 순서로 구성되어야 한다.
16. 온라인 서식을 제공할 경우, 레이블()을 제공해야 한다.
17. 애플릿, 플러그인(ActiveX, 플래시) 등 부가 애플리케이션을 제공하는 경우, 해당 애플리케이션이 자체적인 접근성을 준수하거나 사용자가 대체 콘텐츠를 선택하여 이용할 수 있어야 한다.
18. 마크업 언어로 구현할 수 있는 기능(링크, 서식, 버튼, 페이지 제목)을 자바스크립트로만 구현하지 말아야 한다.

PDF 파일보기 (제정일 : 2009년 3월 17일)

웹접근성 향상을 위한 국가표준 기술 가이드라인 다운로드 : http://www.hiweb.kr/accessibility_technicalguide.pdf

---

인터랙션 디자인. 관대하게 디자인 하자

사람들이 컴퓨터를 이용해서 하는 작업은 언제나 쌍방향으로 상호작용하는(인터랙티브하다) 라고 말할 수 있습니다. 컴퓨터와 소프트웨어는 도구이며, 그 목적은 사람들이 언어, 숫자, 그림들과 상호작용을 하는 일을 돕는것이죠. 다만 요즘은 인터랙티브하다고 여겨지지 않았던 일, 예를 들어 책읽기, 보기, 오락과 같은 행위에 컴퓨터가 사용되고 있는 것입니다. 가장 중요한 것은 무엇을 보고 무엇을 무시하느냐의 결정을, 디자이너가 아닌 방문자들이 하고 있음을 뜻합니다.

인터페이스 디자인, 그러나 인터랙티브 디자인을 하나의 프로세서로 접근하면 생각만큼 복잡하지 않습니다.

정보 디자인

자신이 추구하는 커뮤니케이션 목표를 명확하게 하고, 그러한 목표를 만족시키는 디자인을 통해 자신의 아이디어를 표현하는 것을 의미합니다. 이미 존재하는것을 수도 있고, 완전히 새로운 것일 수도 있습니다.
어느 쪽이든간에, 정보 디자인부터 시작해야 합니다.

• 목표정하기
• 사용자가 무엇을 하고 싶어하는지 규정하기
• 사용자에게 콘텐츠가 어떻게 전달될지 결정하기
• 콘텐츠 리스트 만들기
• 콘텐츠 조직하기

구조의. 보이지 않는. 손.

정보디자이너는 정보의 출입을 통제하는 존재입니다. 비록 이용자가 스스로 선택한다 할지라도, 그들이 맨 처음 보게 되는 것, 그들이 갈 수 있는 곳, 그리고 그들이 전혀 볼 수 없는 곳 등의 선택사항은 전부 여러분에 달려 있습니다.

당연한 사항 알고 있지만, 풀어 볼까요?

디자이너가 콘텐츠를 배열하는 것은 모든 정보 단위에 쉅게 도달할 수 있는 방법을 결정합니다. 그리고 이것을 좀더 쉽고 빠르게, 그리고 보다 직접적으로 하나이상의 토픽에 접근할 수 있게 만들다 보면, 필연적으로 하나의 관점을 만들게 됩니다. 하나의 관점을 부여하는 것이 전혀 나쁠 것이 없습니다. 디자이너의 관점은 종종 흥미 있는 것을 만들어 내기 때문이죠. 그런데 디자이너가 우선 순위를 암시하는 방법으로 토픽을 배열할때, 무의식적으로 편견을 만들어 낸다면 문제가 생기게 됩니다.

• 사용자에게 방향을 제시해 주는 가이드 시스템
• 내비게이션과 진입경로 디자인하기
• 모든 화면의 구성 내용 결정하기

제발 콘텐츠의 부담좀 줄입시다!

메인 내비게이션은 콘텐츠로 가는 관문이기 때문에, 어떤 다른 화면보다 훨씬 더 자주 사용됩니다. 따라서 이 곳에 사용자가 한두 번 정도밖에 사용하지 않는 가정용 아이템으로 배치한다면, 문제가 생겨납니다. 내비게이션과는 아무런 관계가 없는 잡동사니들로 화면을 채워지는 꼴이 되겠죠.

• 이동을 최소화 : 가장 간단하고 짧은 경로로
• 깊이를 최소화 : 가능한 최소한의 단계만 (불필요한계가 많을수록 불필요한 이동만 유발)
• 중복을 피하자 : 같은 화면에 동일한 장소로 접근하는 경로들 (어디루 가야할지 혼란스러워함)

관대하게. 만들어라.

인터페이스는 사람들이 예측하는 방식으로 작동할 경우에 한해 직관적이라고 말할 수 있습니다. 사용자들은 마우스를 클릭하면 어디로 가거나 어떤 장면을 보게 될 것이며, 똑같은 아이콘은 똑같은 기능을 할 것이라는 기대를 하죠. 잡다구리한 장애물들을 제거하고 직접적으로 콘텐츠와 상호 작용하도록 만드는 것. 마우스를 클릭했을때 딸깍 하는 컴퓨터 사운드보다 더욱 친절한 디자인.

혹시 이글을 보시는 분은 포토샵 기술 디자이너?

---

크로스브라우징? CSS 핵은 왜?

이 포스팅에서 언급하고 있는 CSS핵(hack)들은 대부분 옛날 브라우저들을 대상으로 한 것들이라 아마도 활용도가 그다지 높지 않으리라 생각하지만 해외사이트에 사용하고 있는 경우가 많으므로 알아두면 해외사이트를 분석할때도 상당히 도움이 되리라 생각한다. 또 CSS핵(hack)의 사용시 많은 주의를 기울여야 하며 CSS 문법상 맞지 않는 경우도 많으므로 주의하여야 한다. 일단 웹표준에 의한 사이트 제작이 익숙해지면 브라우저의 버그를 CSS핵이 아니라 CSS구조를 이용하여 회피하는 방법도 자연스럽게 익히게 되리라 생각한다. CSS핵은 정말 피치못한 경우에만 사용해야 한다.

Netscape 4 제외시키기

Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {/*/*/ color:white; /* */}

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.

Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {/* \*/ color:white; /* */}

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ {color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p {color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p {color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p {color /**/:white;}

Star Hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p {_color:white;}

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p {#color:white;}

Star 7 Hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns Hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.

Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 {color:red;}

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 {color:red;}

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {width:500px; voice-family: ""}""; voice-family:inherit; width:400px;}

Win IE 5용 패스필터

@media tty { i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";} }/* */

Win IE 5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";} }/* */

Win IE 5-5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */

모던브라우저용 패스필터

@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

IE7에만 적용

*+html body

IE7를 포함한 모든 IE에만 적용하는 방법은

*+html body, * html body

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)

html>body

IE7을 제외한 모던브라우저에만 적용

html>/**/body

---

잘 알려지지 않은 나의 사이트

“우리나라 건축기술과 건축문화의 우수성을 알리는 데 일조하고 싶습니다.”

[fn 이사람] 초고층 건축물 전문사이트 제니하우스 운영 김일규씨

“제니하우스(www.jennyhouse.info)”라는 초고층 건축물 전문 인터넷사이트를 개설, 관심을 모으고 있는 김일규씨(29·사진)가 밝힌 포부다.

경남예술고 미술과 출신인 김씨가 운영하는 제니하우스 인터넷사이트가 최근 초고층 건축물 전문 사이트로 자리매김하고 있다.

이 홈페이지는 세계 유수의 초고층 건축물과 현재 추진 중인 초고층 건축 계획을 총 망라해 관련 정보를 제공하고 있다. 클릭 몇 번으로 내로라 하는 전 세계 건축물의 현황을 모두 훑어볼 수 있다. 현지인과 여행자, 유학생들이 찍은 외관 사진과 건물에서 내려다본 도시 조망사진까지 실시간으로 업데이트해 제공된다. 심지어 북한 평양의 도시 풍경도 구경할 수 있다.

김씨는 2004년 우연한 계기로 이 홈페이지를 만들었다. 평소 관심을 가져왔던 초고층 건축물에 대한 정보를 인터넷에서 구하기 어려웠기 때문이다. 홈페이지 개설 후 김씨는 여러 외국 사이트를 돌아다니며 초고층 건축 정보를 끌어 모으는 데 주력했다.

초고층 건축에 대한 관심이 갈수록 높아지자 일반인들이 생생한 사진과 글을 올리기 시작했다. 그 결과 국가별 중소도시의 건축물에 이르기까지 세밀한 자료가 쌓이면서 지금은 홈페이지에 300여개의 카테고리가 만들어졌다.

“지금까진 세계 초고층 건축물을 소개했지만 앞으로 몇 년 후면 아랍에미리트 두바이의 버즈두바이를 포함해 수많은 ‘한국산’ 초고층 건축물들이 모습을 드러냅니다. 관리시스템을 업그레이드해 더 많은 방문자들에게 효과적으로 정보를 제공할 생각입니다.”

김씨는 지금 제니하우스 홈페이지에 대한 대대적인 개편작업을 진행 중이다. 개편 후 방문객들이 올리는 사진들은 모두 저작권 보호를 받게 된다.

방문객이 신규 건물을 등록하면 자동으로 기존 건축물 순위가 바뀐다. 이처럼 방대한 자료가 쌓이면서 김씨는 체계적인 관리방안을 놓고 고심하고 있다. 개인이 운영하기에는 정보 축적속도가 빠르고 운영비 부담 또한 만만치 않기 때문이다.

김씨는 “앞으로 초고층 건축뿐 아니라 도시계획이라는 큰 틀에서 건설업 관계자들과 네티즌이 토론하는 장으로 사이트를 발전시키고 싶다”면서 “적게나마 건설업체로부터 운영비라도 지원받아 국위선양 차원에서 홈페이지 개선에 도움이 됐으면 좋겠다”고 말했다.

파이낸셜뉴스 cameye@fnnews.com 김성환기자

---

기사원문보기

http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=102&oid=014&aid=0000330379

---

웹 접근성 품질마크 실태조사 항목별 체크리스트

1. 인식의 용이성 (43점)

인식의 용이성 체크리스트와 배점

항목 [13]	지표 [26]	웹 접근성 품질마크 체크리스트[53]- 의무 27, 권고 21, 권장 5	중요도
1-1. 텍스트 아닌 콘텐츠의 인식	1-1-1. 텍스트가 아닌 콘텐츠에는 모두 대체 텍스트가 제공되어야 한다.	(1) 텍스트가 아닌 콘텐츠에 대해서는 대체 텍스트를 제공하고 있는가?	(1의무) 11점
	1-1-2. 대체 텍스트의 내용은 적절하게 제공되어야 한다.	(2) ~링크, ~버튼과 같이 중복된 내용을 대체 텍스트로 제공하지 않으며, 콘텐츠를 파악할 수 있는 구체적인 설명을 제공하고 있는가? (3) 콘텐츠 이미지의 경우 이미지를 설명하는 적절한 대체 텍스트를 제공하고 있는가? ※ 이미지의 의미가 없는 경우 대체 텍스트를 blank(alt="")alt=""로 제공 (4) 대체 텍스트의 내용이 길거나 복잡한 경우 longdesc 속성을 이용하여 적절한 추가적인 정보를 제공하고 있는가?	(1의무) 7점
	1-1-3. 정보가 있는 콘텐츠를 배경 이미지로 사용하지 않아야 한다.	(5) 텍스트로 표현이 가능한 내용을 전부 이미지로 제작하여 배경으로 삽입하는 경우 대체 텍스트를 넣을 수 없으므로, 일반적인 텍스트로 표현하거나 전경 이미지와 대체 텍스트로 표현하고 있는가?	(1의무) 3점
1-2. 멀티미디어 매체의 인식(영상매체의 인식)	1-2-1. 동영상 등의 시청각 멀티미디어 콘텐츠에는 동기화된 자막이 제공되어야 한다.	(6) 동영상, 오디오 등 멀티미디어 콘텐츠는 동기화된 자막을 제공하고 있는가? ※ 동기화된 자막이 원칙이나, 콘텐츠의 내용을 즉시적으로 충분히 이해할 수 있는 자막 또는 원고를 제공할 경우 허용됨 실시간 멀티미디어 콘텐츠는 동기화된 자막을 제공하고 있는가?	(1의무) 10점
1-3. 콘텐츠의 시각적 명료성(색상에 무관한 인식)	1-3-1. 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.	(7) 색상 이외에도 명암이나 패턴으로 콘텐츠 구분이 가능한가?	(1의무) 3점
	1-3-2. 전경색과 배경색은 충분한 대비를 가지고 있어야 한다.	(8) 흰 바탕에 밝은 회색글자처럼 판독이 어려운 색조합을 피하고, 흰 바탕에 검정 글자처럼 판독이 쉬운 대비가 큰 색조합을 제공하고 있는가?	(2권고) 4점
	1-3-3. 텍스트는 쉽게 읽을 수 있도록 충분한 크기로 제공되어야 한다.	(9) 약시자 저시력자나 다양한 환경의 사용자도 텍스트를 쉽게 읽을 수 있도록 적절한 크기로 텍스트를 제공하고 있는가? 사용자가 텍스트의 크기를 키우거나 줄일 수 있도록 텍스트 크기를 상대적인 단위로 적용하고 있으며, 크기가 변하더라도 내용을 인식할 수 있도록 바르게 표시되고 있는가?	(2권고) 5점

2. 운용의 용이성 (25점)

운용의 용이성 체크리스트와 배점

항목	지표	체크리스트	중요도
2-1. 이미지맵 기법 사용 제한	2-1-1. 서버측 이미지맵을 불필요하게 사용하지 않아야 한다.	(10) 불필요하게 서버측 이미지맵을 사용하는 경우는 없는가? (11) 서버측 이미지맵을 사용할 경우, 해당 내용 및 기능을 동등하게 사용할 수 있는 대체 수단을 제공하고 있는가?	(1의무) 1점
2-2. 프레임의 사용 제한	2-2-1. 불필요하거나 과도하게 많은 프레임을 사용하지 않아야 한다.	(12) 화면을 분할하거나 외부 콘텐츠를 불러들이는 용도 이외로 프레임을 사용하는 경우는 없는가? (13) 한 페이지 내에 과도하게 많은 수(4개 이상)의 프레임을 사용하는 경우는 없는가?	(1의무) 3점
	2-2-2. 각 프레임의 title속성을 적절하게 제공하여야 한다.	(14) 프레임 별로 적절한 title속성을 제공하고 있는가?	(1의무) 2점
2-3. 깜빡거리는 객체 사용 제한	2-3-1. 깜빡이는 콘텐츠를 사용할 경우, 이에 대한 경고 및 제어방안을 제공하여야 한다.	(15) 깜빡이는 콘텐츠가 있을 경우 사전 경고를 제공하고 있는가? (※ 깜박임 기준: 초당 3~49번 4~59번을 깜박이는 콘텐츠) (16) 깜빡임을 중지 또는 제어할 수 있는 컨트롤을 제공하고 있는가? (17) 동영상/멀티미디어 콘텐츠를 정지된 상태에서 제공하고 있는가?	(1의무) 3점
2-4. 키보드로만 운용 가능	2-4-1. 키보드만으로 모든 콘텐츠를 제어할 수 있어야 한다.	(18) 키보드만으로 콘텐츠가 제공하는 모든 기능에 대한 제어가 가능한가? ※ 온라인 입력서식은 중요도가 높으므로 '3-3-2'항목에서 별도 체크 (19) 키보드로 폼 컨트롤, 링크, 객체 사이를 이동할 때, 논리적 이동 순서가 적절한가? (20) <select>(목록상자) 사용시 해당 목록을 선택한 후 [이동]버튼을 반드시 제공하고 있는가? (키보드로 모든 목록을 선택할 수 있는 방법을 제공) (21) focus만으로 급격하게 상황이 바뀌지 않으며, 활성화(activate)에 의해 상황이 바뀌고 있는가? (22) 하위 메뉴를 제공하는 주(상단) 메뉴의 경우, 키보드만으로도 서브 메뉴를 이용할 수 있는가?	(1의무) 9점
2-5. 반복 내비게이션 링크	2-5-1. 반복되는 링크가 많은 페이지를 효율적으로 이용하기 위한 스킵 내비게이션 링크를 제공하여야 한다.	(23) 스킵 내비게이션을 제공하고 있는가? (24) 링크가 이동되는 위치보다는 링크로 인해 건너뛰는 부분을 알려줄 수 있도록 링크명을 정하는 등 제공 내용이 적절한가?	(3권장) 3점
2-6. 반응 시간의 조절기능	2-6-1. 이용에 시간제한이 있는 콘텐츠의 경우 경고 및 시간조절 기능을 제공하여야 한다.	(25) 이용에 시간제한이 있는 콘텐츠의 경우 경고를 적절히 제공하고 있으며, 경고의 시점(사전경고, 시간 만료전 재경고 등)이 적절한가? (26) 이용에 시간제한이 있는 콘텐츠의 경우 시간 설정을 변경할 수 있는 기능을 제공하고 있는가?	(2권고) 2점
	2-6-2. 팝업창을 불필요하게 사용하지 않아야 한다.	(27) 사용자의 입력 없이 자동으로 발생하는 팝업창을 사용 하는 경우는 없는가? (28) 사용자의 입력에 의해서 발생하는 팝업창은 미리 팝업창임을 알리고 있는가?	(2권고) 2점

3. 이해의 용이성 (22점)

이해의 용이성 체크리스트와 배점

항목	지표	체크리스트	중요도
3-1. 데이터테이블 구성	3-1-1. 테이블에 대한 summary와 caption을 제공하여야 한다.	(29) summary 속성을 통해서 미리 표의 전체 내용과 표의 항목을 내용을 요약해서 전달하고 있는가? (30) 표의 제목을 <caption> 태그로 제공하고 있는가? ※ <h1>~<h6> 태그를 이용하여 표의 제목을 제공할 수 있음	(2권고) 3점
	3-1-2. 데이터 테이블을 의미적으로 이해할 수 있도록 적절히 태그를 사용하여야 한다.	(31) 행단위 구분을 위한 태그를 제공하고 있는가? ※ <thead>, <tbody>, <tfoot> 등 열단위 구분을 위한 태그를 제공하고 있는가? ※ <colgroup>, <col> 등 (32) 제목셀과 내용셀의 구분을 위한 태그를 제공하고 있는가? ※ <th>,<td> 등 (33) 헤더는 1행과 1열에 행과 열의 범위를 구분하여 적절히 배치하고 있는가? (34) colspan, rowspan이 많이 사용되어 헤더 구조가 복잡한 테이블의 경우 적절하게 사용되고 있는가? (35) 헤더에 긴 내용이 들어갈 경우 abbr속성을 사용해 약어를 표시하고 있는가?	(2권고) 3점
3-2. 페이지의 논리적 구성	3-2-1. 의미에 맞는 적절한 HTML태그를 사용하여야 한다.	(36) 모든 문서마다 문서의 제목(<title>)을 제공하고, 문서의 제목은 문서의 특성을 잘 나타내도록 간단명료하게 기술하고 있는가? (37) 제목 (<h1>~<h6>), 문단 (<p>), 목록, (<ul>,<ol>, <dl>) 등을 나타내기 위한 적절한 HTML태그를 사용하고 있는가? (38) 디자인 요소를 CSS를 사용하여 분리하고 있는가? (39) 스타일 시트 기능을 해제하여도 콘텐츠를 이해할 수 있는가?	(2권고) 3점
	3-2-2. 콘텐츠의 내용은 선형화(순서대로 나열) 했을 때에도 무리 없이 인식을 할 수 있어야 한다.	(40) 레이아웃을 설정하는 CSS(테이블을 사용했을 경우는 테이블)를 제거하여도 콘텐츠의 구성 순서가 논리적으로 배치되는가?	(1의무) 3점
	3-2-3. 레이아웃 테이블 작성에 테이블의 구조 정보를 정의하는 태그를 사용하지 않아야 한다.	(41) <caption>, <thead>, <tbody>, <tfoot>, <th>, <td> 등 테이블 구조화를 위한 태그를 레이아웃용 테이블에 사용하는 경우는 없는가?	(3권장) 1점
	3-2-4. 각 링크의 목표 위치를 명확하게 하여야 한다.	(42) 주변 맥락을 제거하고 링크만 독립적으로 접근하여도 링크의 목표 위치가 명확히 드러나도록 링크 텍스트를 만들거나, 부가적인 설명을 title 속성으로 제시하고 있는가?	(3권장) 2점
3-3. 온라인 서식 구성	3-3-1. 각 서식 제어 요소를 설명하는 레이블을 사용하여야 한다.	(43) <label> 태그를 이용하여 서식 제어 요소와 레이블을 서로 연결하고 있는가? ※ id와 for를 이용할 수도 있고, 서식과 레이블을 <label>태그로 감쌀 수 있음※ id와 for를 적절히 매칭시키고 있는가? (44) 전화번호, 우편번호와 같은 필드를 여러 개로 나누어 입력해야 하는 경우 정확한 title 속성을 제공하고 있는가?	(1의무) 3점
	3-3-2. 키보드만으로도 온라인 서식 입력 및 서식 간 이동이 가능하여야 한다.	(45) 키보드만으로 서식의 이용이 가능한가? ※ 주민등록번호 입력시 자동으로 포커스가 이동되지 않아야 하고 않고 있는가? (46) 키보드로 서식을 이용할 때 포커스의 이동 순서가 논리적인가?	(1의무) 4점

4. 신기술적 진보성 (10점)

신기술적 진보성 체크리스트와 배점

항목	지표	체크리스트	중요도
4-1. 신기술의 사용	4-1-1. 스크립트, 애플릿, 플러그인 등 부가 어플리케이션에 의한 콘텐츠는 자체적인 접근성을 지니고 있어야 한다.	(47) 자바스크립트, 자바애플릿, ActiveX, 플래시 등 외부 콘텐츠가 자체적인 접근성을 지원하고 있는가? 내비게이션, 검색, 로그인 등 주요한 요소에 플래시 등의 플러그인이 필요한 콘텐츠를 사용하는 경우가 있는가?	(2권고) 3점
	4-1-2. 부가 애플리케이션이 작동하지 않을 경우에도 동일한 내용을 전달할 수 있는 대체 콘텐츠를 제공하여야 한다.	(48) 대체 콘텐츠는 간단명료하면서 원본과 동일한 기능을 수행하고 있는가? (49) 텍스트 브라우저로도 해당 기능을 제어하고 있는가? (50) 링크는 자바스크립트 없이도 작동하고 있는가?. ※ 자바스크립트로만 링크를 구성하지 않아야 함	(1의무) 5점
	4-1-3. 부가 애플리케이션의 설치가 요구되는 페이지는 해당 페이지에서 직접 어플리케이션을 설치할 수 있는 링크를 제공하여야 한다.	(51) 어플리케이션의 링크나 어플리케이션을 다운받을 수 있는 페이지의 링크를 제공하고 있는가?	(3권장) 2점

---

• 공공기관 웹접근성 품질마크 실무
• 웹 접근성 컨설팅
• 웹 접근성 자문
• 월급쟁이의 50억 프로젝트 신화