(과거) 방명록 - 신승식의 다른 생각

이 방명록에는 더 이상 글쓰기를 허용하지 않습니다. 첫째 이유는 블로그를 열었기 때문이고, 두 번째 이유는 스팸글이 너무 많아져 그것을 일일이 지울 수가 없기 때문입니다. 정확히 방명록에 대응하는 기능은 없지만 블로그의 모든 글과 모든 페이지에는 댓글을 달 수 있도록 하였기 때문에 그곳을 이용해주십시오.

저두 우연히 들렀는데요~
신승식씨의 글을 읽는게 좋네요~ 공감도 가고...
가끔씩 들릴께요...
안녕~

안녕하세요.. 형 저 현걸이예요.. 구글님께 뭘 좀 여쭤보다가 우연히 형 홈피를 발견했네요..

어떻게 지내시는지? 전 대전에 있어요..

형 뵌지도 오래 됐네요. 언제쯤 한번 뵐 수 있을지요..

안녕하세요 우연히 들렀습니다.
개인적으로 장애인에 대한 디자인을 관심을 갖고 있습니다.
너무나 건강한 사고와 지혜를 갖고 계신것 같아 많이 배우고 갑니다.
종종와서 좀더 배워가겠습니다.

안녕하세요?
저는 <유쾌한 심리학>을 만든 사람입니다. ^^
우연히 네이버에서 서핑을 하다가 님의 홈페이지에서 우리 책에 대해 쓴 글을 읽게 되었습니다.
좋은 글을 써주셔서 그냥 읽기만 하고 나가기엔 좀 미안해서 이렇게 인사드리고 갑니다.
새해 복도 많이 받으시구요.

오빠~ 한해가 또 끝나가네요
새해 복 많이 많이 받으시구요
2006년에는 좋은 일만 가득하세요~!

상세히 답변해 주셔서 너무 감사드립니다.

시간나는대로 책을 사서 읽어봐야겠네요.



왠지모를 사명감이랄까.그런 기분이 드네요.

열심히 공부해보겠습니다.^^

그 광고에 나오는 분이 전제덕님이였군요. 그리고 그 홈페이지 제작의 주인공이 백지은님이고... 유명한 분을 만나게 되어 반갑습니다.

시각 디자인을 공부하시는 분이 보편적 디자인에 관심을 가지게 되셨다니 무척 기쁩니다. 이제 주변에 보편적 디자인에 대해 공부하시는 분들이 우리 나라에도 조금씩 조금씩 늘어나기 때문에 예전보다는 쉽게 도움을 얻으실 수 있을 것입니다.

현재 전제덕님 홈페이지처럼 이미지를 많이 사용한 홈페이지는 전제덕님 자신처럼 시각 장애인이 보기가 힘듭니다. 그렇다고 이미지를 쓰지 말라는 것은 아닙니다. 다만 배경이 아닌 모든 이미지에는 그것을 대체하는 대체 텍스트라는 것을 반드시 넣어주어야 합니다. html에서는 <img src="picture.png" alt="그림 설명" /> 이런 식으로 표현해주라는 것이지요. 코딩하는 것에 익숙하지 않으시다면 드림위버 최신 버전(MX 이후 버전)에서 accessibility 옵션을 체크해놓고 사용하시면 좀 쉽게 대체 텍스트를 넣으실 수 있을 것입니다. 아마 이 이미지에 대한 대체 텍스트만 넣어도 시각 장애인에게는 접근성이 극적으로 향상될 수 있습니다.

좀 더 욕심을 부린다면, HTML, XHTML, JavaScript, DOM, CSS, WCAG 등 웹 표준에 맞게 홈페이지를 개편하는 것입니다. 그리고 테이블 위주로 된 레이아웃을 걷어내고 디자인 부분은 CSS에 맡기고, 의미와 내용 부분은 (x)html에 맡기는 것이 좋습니다. 이렇게 함으로써 시각 장애인을 포함한 여러 장애인, 컴퓨터 사용이 서툴거나 느린 노인, 우리말을 잘 모르는 외국인, 낮은 사양의 컴퓨터 사용자, 다른 기종 사용자, 느린 네트워크 사용자, 좁은 화면 사용자 등에게도 동등한 접근권을 보장할 수 있는 확률이 높아집니다. 이렇게 하려면 처음에는 기존의 학교나 학원에서 배웠던 웹 디자인 관행을 상당 부분 깨뜨려야 하므로 힘들 것입니다. 혼자서 그런 관행을 깨고 새로운 시도를 하기도 쉽지 않구요.

우선 참고할 만한 책을 소개드리는 것이 좋을 것 같습니다. (어쩌다 책장사가 되었네요..)

실용 예제로 배우는 웹 표준. 댄 씨더홈 지음, 박수만 옮김, 에이콘 출판 펴냄.

아주 쉽게 우리말로 쓰여진 웹 표준에 대해 개괄적으로 소개한 서적입니다.

HTML Utopia: Designing without Tables Using CSS. Dan Shafer 지음. Sitepoint 펴냄

테이블 디자인을 어떻게 걷어내고 CSS로 대체할 수 있는지에 대한 좋은 안내서입니다.

Building Accessible Websites. Joe Clark 지음. New Riders Publishing 펴냄

약간 오래 되었고, 분량은 많지 않지만 웹 접근성에 대해서는 바이블이라고 봐도 될 것 같습니다.

Build Your Own Standards Compliant Website Using Dreamweaver 8. Rachel Andrew 지음. Sitepoint 펴냄.

디자인 하시는 분들이 대부분 직접 코딩보다는 드림위버와 같은 저작 도구를 쓰기 때문에 최근에 나온 이 책이 상당히 실용적일 것 같습니다.

이 밖에도 관련된 책과 인터넷 자원은 뒤져 보시면 오히려 너무 많아서 선택하기 힘들 정도일 것입니다. 그 중에 우리 나라에서 접근성이나 웹 표준에 관심을 가지고 있는 많은 사람들이 오고 가는 커뮤니티를 소개해드립니다.

한국 모질라 사용자 모임 (http://www.mozilla.or.kr)

여기에 보시면 웹 표준 게시판에 웹 표준 관련 질문을 올리시면 곳곳의 전문가들이 답변을 해줍니다.

CSS Design Korea (http://css.macple.com)

여기에도 CSS나 웹 표준, 웹 접근성 관련 질문을 올리시면 도움을 받을 수 있습니다.

정보통신 접근성 향상 표준화 포럼 (http://www.iabf.or.kr)

정보통신부 산하 한국 정보문화 진흥원에서 운영하는 접근성 포럼으로 장애인과 노인 등의 접근성에 대한 관련 자료들이 많이 있습니다.

아무튼 보편적 디자인에 관심을 가지셨다니 다행이고, 실제 업무에서 적용하실 때 맞딱드리는 많은 문제점들은 언제든지 문의해주시면 기쁘게 도와드리겠습니다. 감사합니다.

안녕하세요.

저는 하모니카 마스터 전제덕씨의 홈페이지를 만든 백지은이라고 합니다.

음악을 좋아하시는 분이면 아실 수도 있겠네요.^^

전제덕씨는 시각장애인입니다. 어릴때 시력을 잃어 전혀 보이지 않는다고 합니다.

1년전 사이트를 만들 당시엔 보편적 디자인이라는 개념에 대해 전혀 알지 못했고

그냥 막연하게 시각장애인은 그들만의 방법이 있겠지..라고 생각했습니다.

옆에서 읽어주는 사람이 있겠거니, 라고 어리석을 착각을 했었습니다.

어느날 전제덕씨의 집을 방문했던 적이 있는데 컴퓨터에서 소리가 나더군요.

웹사이트를 소리로 읽어주는 프로그램이 있었는데 그런 프로그램이 있다는 사실을 그날 처음 알았습니다.

참 부끄러웠습니다. 그동안 너무 무지했구나 싶었구요.

제가 만든 사이트는 게시판과 간단한 소개글만 빼고 모두 이미지로 처리가 되어 프로그램이 전혀 읽지 못하고 있었습니다.




전제덕씨의 홈페이지를 만들때 너무 시각적인 아름다움에만 치중하여 기능적인 면을 무시하고

사용자를 전혀 고려하지 않은 디자인을 했다는 사실이 참 많이 부끄럽습니다.

(참고로 저는 시각디자인을 전공하고 있는 학생입니다.)


지금이라도 사이트를 시각장애인용으로 다시 만들려고 하는데

디자인만 하다보니 간단한 코딩정도만 할 줄 알고, 프로그램쪽으로는 전혀 하는 바가 없습니다.

제가 무엇부터 공부하면 될까요.?

어디서부터 손대야 할지 너무나 막막합니다.

죄송하지만, 도움 부탁드려도 될까요.










( 이제라도 제가 보편적디자인이라는 개념에 대해 알게 되어 너무나 다행이라고 생각합니다.

모든 디자이너들이 꼭 알아야 할 필수학이라는 생각이 드네요. 자주 들러서 공부해야겠습니다.)

고맙습니다. 베토벤 카페도 멋지더군요. 멋진 곡들이 많아서 북마크해놨습니다.

링크를 보고 이렇게 구경왔어요^^
정말좋은곳인것같습니다.
여기와서 너무좋고요...
여러가지로 무척 좋게 생각합니다

저는 아직 구현하지 못했구요. 대신 인터넷에 좋은 예제가 많이 있으니 가져다 쓰시면 될 것 같습니다.

마이어웹에 있는 것이 대표적일 것 같습니다.

http://www.meyerweb.com/eric/css/edge/menus/demo.html

오페라, 파이어폭스, 컹커러, 사파리, 모질라, 넷스케이프 등에서 다 잘됩니다.
단, IE에서는 CSS를 인식하지 못하기 때문에 풀다운은 안 됩니다. 단 graceful degradation이 되므로
IE에서나 아니면 일반 텍스트 브라우저에서나 사용은 가능합니다.

이밖에도 구글링 해보시면 많이 나옵니다.

안녕하세요~
제가 CSS만으로 풀다운 메뉴를 만들어보려고 하는데요...
몇일째 진도가 안나가네요....
자바 스크립트 없이 한다는 게 불가능하진 않을 것 같은데..
그래서 이래저래 자료를 찾다보니 신승식님의 사이트 까지 오게 되었습니다.

기회가 되면 구현해보신다고 하신 글이 있던데...
혹시 구현 하셨으면 방법 좀 알려주세요~~~

아....답답하네요...
왜 안될까......흑....

잘은 모르겠지만 행자부의 지침이 강제 조항은 아니더라도 행정 기관들은 상당히 신경을 쓸 수 밖에 없을 것 같습니다. 현재 우리 나라 홈페이지 현실에 비하면 엄청나게 진보적인, 또는 과격한(?) 내용을 담고 있으니, 이것을 그대로 지키려면 아마 구축 업체들이 상당히 힘들지 않을까 생각도 되구요. 또, 행자부의 담당 공무원들을 만난 적이 있는데 웹 표준과 접근성에 대해서 상당한 수준의 이해와 강력한 추진 의지를 가지고 있었습니다. 아래에 지침 문서 원본이 있으니 참조하세요.

http://www.mogaha.go.kr/warp/webapp/board/notice/view?id=424691

안녕하세요, 이곳에 종종 들리는 학생입니다.

Mozillazine에 들어갔다가 헤드라인 중에 Korea라는 대목이 보여서 살펴보니까

Korean Government Websites to Support Mozilla Firefox 라는 기사가 있더군요
http://www.mozillazine.org/talkback.html?article=7062

한국 모질라 그룹을 인용한 소식에 따르면, 우리나라 정부 차원의 홈페이지들은 모두 행자부의 감독을 받는데,
이 행자부에서 향후 홈페이지를 만들때 웹표준은 물론 접근성까지 고려해야하는 지침서를 만들어서
하달했다고 하는데.. 얼마만큼 기대해도 되는 것일까요? 사실 이 방면에는 비전문가라서 행자부에서
지침을 하달하면 홈페이지가 개편되기까지 얼마나 시일이 소효되는지, 또 강제력은 있는건지 등등.
이곳에 질문을 남긴다기 보다는, 해외 사이트에서 들은 국내 소식을 정작 국내에서는 별로 확인할 곳이 없어서
한번 들려봤습니다. ^^;;

그동안 우리나라 웹페이지들은 그 양에 비해 접근성과 웹표준 준수에서 많이 뒤쳐진다고 생각하고 있었는데..
이번 일을 계기로 뭔가 바뀌었으면 좋겠다는 바램입니다.

언제나 시작은 눈물로를 찾다가 들어오게 됐는데,.
원하는 곡은 못듣고 가지만,.
ㅇㅕ러글들 읽으면서 잊고지내던 것까지 생각하게 만든,. 그래서, 잠시지만,.
좋았습니다,..^^

선배님, 글쎄요, 제가 잘 아는 내용은 아니네요...

윈도우즈용 True Type 글꼴로도 안상수체가 있는 곳을 봤는데, 글꼴은 대부분 상용인 거 아시죠? http://www.sandoll.co.kr/ 에 가보니 상용으로 판매를 하고 있네요.

요즘에 워낙 글꼴이 많아서 뭘 추천해야할지는 잘 모르겠는데요. 글꼴의 폭을 좀 좁혀주시면 좋을 것 같습니다.

빨래줄 글꼴도 크게 보면 두 가지 정도로 다시 나뉘거든요. 가변폭(variable width) 글꼴과 고정폭 글꼴(fixed width)이 있는데, 대부분의 한글 글꼴은 다 고정폭이구요, (프로그램 소스나 타자기를 흉내내기 위해 쓰이는 monospace 글꼴들 제외하면) 대부분의 영문 글꼴은 다 가변폭이예요. 그런데 안상수체는 빨래줄 글꼴로도 의미가 있지만 아마 한글로서는 최초로 가변폭을 시도했다는 것이 특이한 점이지 않을까 싶네요. 즉, 우측에 모음이 있는 아, 야, 어, 애 등과 아래에 모음이 있는 오, 요, 우, 유 등의 폭이 다른 것이죠.

또 하나는 세리프(serif)가 있는 것을 찾으시는지 아니면 세리프가 없는 것을 찾으시는지 모르겠네요. 세리프가 있는 것은 흔히 명조체 계열로 생각하시면 되고, 세리프가 없는 것은 흔히 고딕체 계열, 즉 sans-serif 계열이 되지요. 아래아 한글에 있는 안상수체를 살펴보니 다 sans-serif로 되어있네요.

제 PC에 설치된 윈도우즈용 폰트 중에 빨래줄이면서, 가변폭에 해당하는 것으론, HY얕은샘물M 정도가 눈에 띄네요. 아마 한양 서체인데 워드 설치하면서 추가로 설치된 글꼴 같습니다. 빨래줄이면서 고정폭으로는 돋움한체, 바탕한체가 있습니다. 요곳들은 제가 예전에 큐닉스 글꼴 CD를 사서 설치한 것들입니다. 지금은 안 나오는 것으로 알고 있구요. 그 밖에도 많이 있을 것 같은데 위의 사이트를 한 번 가보시면 샘플들이 있으니까 원하시는 것을 찾으실 수 있을 거예요.

다시 글꼴 실험이 있나보죠? 재미있겠다...

아마도 승식이가 가장 잘 알지 싶어서 질문! ^^
안상수체는 윈도우 운영체제에선 지원되지 않나?  아래아한글전용글꼴로 있는 건 아는데, 윈도우즈 지원으론 없는지 하는 것이 질문 첫번째.
두번째 질문은 사실 안상수체를 찾는 이유는 빨래줄 또는 세벌식 글꼴 중에서 그걸 고른 셈인데, 다른 빨래줄 글꼴도 윈도우즈 지원은 거의 없는 거 같거든.
윈도우즈에서 지원되는 빨래줄 글꼴로 추천할만한 게 있는지...
없으면 아래아한글에서 작업하고 화면 캡처하고 뭐 그런 방법을 써야겠지만, 글꼴이 있으면 좀 더 편할 거 같아서 일단 질문하는 거야.
오랜만에 나타나서 뜬금없는 질문만 하네. 미안~ ^^;

피엡님, 안녕하세요? 답변이 늦었네요.
일주일간 Innovation camp라고 아예 일주일간 인터넷도 전화도 안 되는 곳에서 교육을 받고 왔었거든요.
제 생각엔 abbr과 acronym이 약자나 두문자의 본디말이 아닌 일반 설명으로 쓰는 것은 적절하지 않은 것 같습니다. W3C의 html 사양에도 다른 용도의 사용에 대해서는 언급이 되어 있지 않습니다.

http://www.w3.org/TR/html401/struct/text.html#edef-ABBR

HTML 요소를 원래의 의미적 목적에 맞지 않게 사용하게 되면, speech synthesizer, search engine indexer, translation system, spell checker 등에서 엉뚱한 결과를 낼 가능성도 생길 것 같습니다. 만약 단어에 대한 일반적인 설명을 하실 목적이라면, 제 생각엔 acronym이나 abbr보다는 span 요소와 title을 활용하시는 것이 더 적합하다고 생각됩니다. 저같은 경우도 이 페이지 곳곳에 <span title="자세한 부가 설명 또는 말을 바꾼 표현">원래 단어</span> 이런 식으로 많이 활용하고 있습니다. 즉 독립적으로 두었을 경우에 뜻에 오해의 소지가 있거나, 이해하기 어려운 경우, 특히 비시각적인 유저 에이전트를 사용할 때, 겉으로 드러나 텍스트만으로 의미를 파악하기 힘든 경우 이와 같이 쓰고 있습니다.

참고하십시오. 감사합니다.

이걸 '보편적 디자인' 게시판에 올려야 하나 여기에 올려야 하나 고민하다가 여기에 올립니다.
abbr이나 acronym 태그는 약자들을 표시하는데 쓰이는 태그가 아닌가요? 저는 그렇게 알고 약자들을 표시할 때만 사용해오고 있었는데, 어떤 분을 보니 이 두 태그들을 약자가 아닌 단어들을 설명하는데도 쓰고 계시네요. 예를 들자면 <abbr title="표준">standard</abbr> 이런식으로 말이죠.

abbr이나 acronym 태그들이 무엇을 나타내는데 쓰이는 것들인지 궁금합니다.
좋은 하루 되시길..^^;