최근 웹표준과 웹 접근성이 화두가 되면서 많은 사람들의 관심을 가지고 있으시다고 생각합니다.
어떤 분들은 단지 웹표준 준수 코딩을 div 코딩이라고 부르기도 합니다. 테이블을 단지 div로 교체 하는 일도 벌어집니다
아마도 div 코딩이라는 말때문에 벌어진 일이 아닌가 하는 생각을 해봅니다.
사실 웹표준이라는건 의미에 맞는 태그들을 사용하자는 것인데 말이죠.. 안타깝습니다.

저도 웹표준 과 웹접근성 그리고 시각장애인들이 사용할 수 있는 사이트를 만들던중 제목과 같이 사실 시각장애인이 우리 보다 더 많은 것을 보고 있다는 생각이 들었습니다.

물론 많은 홈페이지들이 단순히 보여지는 것만을 위해서 코딩하거나 제작 하기 때문에 시각장애인들이 접근하고 사용하기가 매우 어렵지만..
실상 시각장애인들이 사용하시는 스크린 리더기를 사용하는것을 옆에서 지켜본 결과 리더기에서는 css 스타일을 필요로 하지 않기 때문에 파싱된 DOM 만을 읽어 들이기 때문에 DISPLAY:NONE 속성은 읽혀지지 않는다... 이렇게 되면 우리가 보고 있지 않은, 숨겨놓은 것들도 접근이 된다는 것입니다. (이렇게 생각해보면 보는 것만으로 사용하는 사용자들은 오히려 접근이 제한되는 컨텐츠들이나 속성들이 있는 것이 된다. 그러니까 피차 일반인거다.)
그래서 사이트 제작 당시 시각장애인분을 모셔놓고 시연을 부탁 드렸는데 난감한 질문을 하셨다...
"여기있는 체크박스는 어떤 용도지요?" 
아마도 display:none 속성으로 체크박스를 숨겨 놓았을 것이고, 당연히 그에 맞는 label 요소는 없을 것이었다.
결국 그분의 질문에 대답을 할 수 없었고 소스 분석으로 그 체크박스를 찾아 내었다..

시각장애인분께서 시연 하시면서 스크린 리더는 DOM파싱만 되면 바로 내용을 확인 할수 있고, 스크린 리더기에서 자주 사용하는 내용이나 링크를 등록할 수 있기 때문에 훨씬 빠른 접근이 가능하다 하셨다.

그렇다 시각 장애를 가지고 계신 분들이라고 해서 인터넷을 전혀 못사용하거나, 그저 몇몇 사이트만 접근 할 수 있는 상황은 아니다. 그리고 그분들이 사용 가능하게 만드는 것도 크게 어려운 일은 아니다.

시연 도중에 자주 사용하시는 이메일을 보여주셨는데 마침 시연 하는날 리뉴얼이 되있었나보다. 우리는 쉽게 어디다 글을 쓰고 어디다 주소를 적어야 할지 알 수 있었지만, 그분은 자주 가는 메뉴로 넘어갔을때 그 위치가 나오지 않았다. 우리는 전혀 몰랐던 사실이었다.모양은 바뀌지 않았지만 DOM 구조가 바뀐 모양이다. 워낙 능숙 하신 분이어서 이내 원하시는 곳을 찾으 실수 있었다.

이날의 경험은 값진 것이었고 .. 조금은 충격적인 것이었다.

그렇다 시각장애인은 우리보다 더 많은 것을 보고 있다.
그렇다보니 불편을 느끼는 것이다. 상위 호환이 안되는 것이다.

우리는 아직 하위 버전인것이다. 지금 하고 있는 것처럼 더 활발한 연구와, 기술 보급을 통해서 상위버전으로 업데이트해야 할 것이다. 


ps. 처음으로 글다운 글을 써보는 것 같다... 머 원래 논리적이지 못하고, 말주변이 없어서 간간히 뭔소린가... 아니면 당연한거잖아 하겠지만... 그리고 존대말에서 갑자기 반말로 바뀌는 등... (귀찮아서 수정을 안했습니다.) 
이런 모든 장애 사항에도 불구 하고 읽어주셔서 감사합니다.~
개발자 K씨를 재회한 것은 8년만의 일이다. 그는 나와 함께 일했던 직장에서 이직한 이후에 4번이나 더 이직을 했는데, 현재는 실직 상태에서 직장을 구하고 있었다. 솔루션을 개발하는 회사에서는 비전이 없어 그만 두었고, 대기업 계열 SI업체를 들어갔으나 개발이 아닌 관리를 시켜서 그만두었고, 포털에 들어갔는데 할 일이 별로 없고 회사 상황이 정치적이어서 그만두었다고 했다. 그리고 마지막 회사는 소위 벤처기업이었는데, 6개월이나 임금을 받지 못한 상태에서 사장이 사실상 야반도주를 해서 회사가 망했다고 했다. K씨는 자바를 정말 잘 다루던 개발자였는데, 일반적인 기준에서 볼 때 성격이 좋다고 얘기하기는 힘든 사람이었지만 그 정도면 무난하다고 할 수 있었다. 다만 여느 개발자와 마찬가지로, 타인의 욕구에 관심을 가지거나 커뮤니케이션 스킬이 뛰어난 사람은 아니었다. 다음은 그가 한 얘기이다. “회사 경영은 나하고 상관이 없다고 생각했어요. 제가 경영이나 관리 같은 것은 잘 모르고요. 회사에서 벌어지는 정치 게임은 질색이에요. 저는 그저 개발만 하고 싶었어요. 그런데 개발에 집중할 수 있는 조직이 참 없더라고요. 이제 저는 어떻게 해야 할까요?” 필자는 그날 K씨와 새벽까지 술을 마실 수 밖에 없었다. 개발자가 개발자답게 일하고 성장할 수 없는 것이 바로 한국의 현실이다. 성장을 하는 것이 아니라 사라져 가고 있다. 개발자는 어떤 사람인가? 문제를 발견하고 문제를 해결하고, 스펙에 따라(또는 창조적으로) 무언가를 만들어 내고, 오랜 시간 동안 한 자리에 앉아서 화면만을 째려보며 몰입할 수 있기에 개발자다. 그것이 그들의 특징이며 그렇기 때문에 개발을 할 수 있는 것이다. 개발자에 대해 IT업계의 다른 직종들은 어떻게 생각하고 있을까? 단편적이지만 그들의 생각을 살펴보자. 어떤 영업맨은 “저한테 저렇게 열 시간 동안 앉아 있으라고 하면 절대 그러지 못할 거 같네요. 어떻게 저럴 수 있나요?”라고 필자에게 반문하기도 했다. 어떤 마케터는 “그들은 쿠폰에 항상 도장을 찍더군요. 작은 것에 민감한 거 같아요. 시야가 좁고 자신들의 분야 외에는 거의 관심이 없는 거 같더군요. 게임이나 애니, 미드 같은 것을 좋아하고. 업계나 시장 돌아가는 상황에 대해서는 관심도 없고...”라고 얘기했다. 실제로 마케터들은 개발자와 함께 일하는 경우가 별로 없어서 그들을 잘 모른다. 원거리에서 그들을 바라볼 뿐이다. 반면에 개발자와 함께 협업하는 경우가 많은 요구분석가, 웹기획자들 중 상당수는 다음과 같은 얘기를 했다. “그들은 커뮤니케이션 스킬이 없어요. 중요한 대화에는 제대로 응하지 않다가 자신들과 상관이 있는 이슈가 나오면 발끈해요. 무조건 안 된다고만 하죠. 도무지 협상이라고는 할 줄 모르는 사람들이에요.” 혼자서 일하는 1인 개발자가 아닌 이상, 대부분의 개발자는 조직에서 협업을 해야 한다. 프로젝트 매니저와 대화해야 하고, 기획자/디자이너/동료 개발자와 협업을 해야 한다. 프로젝트에 따라서는 고객과 직접적인 커뮤니케이션을 해야 하는 경우도 있다. 그리고 사내정치를 피해갈 수 있는 개발자는 거의 없다. 직간접적으로 영향을 받을 수 밖에 없다. 그런데 한국에서 사내정치는 중소기업에서 대기업, 인터넷기업까지 만연되어 있다. 많은 개발자들이 정치를 싫어한다. 정확히 표현하면 정치가 미치는 부정적인 영향을 싫어한다고 할 수 있을 것이다. 하지만 조직이라는 것은 그 안에 있는 수많은 조직구성원들이 지위 고하에 따라 자신의 목표와 이익을 추구하는 곳이다. 그리고 그들간의 이해관계는 상충될 수 밖에 없다. 그래서 누군가는 희생자가 된다. 안타깝게도 그 대상은 대부분 개발자이다. 개발자는 현실적인 일정 하에서 보다 나은 기술을 이용하여 높은 품질의 소프트웨어를 만들고 싶어하지만, 어떤 사람들은 기술 자체나 품질은 전혀 상관없이 일자 또는 비용만이 그들의 관심사이다. 그렇다면 그것은 잘못된 것인가? 그럴 수도 있고 아닐 수도 있다. 상황에 따라 답이 다르다. 현실은 단순한 흑백논리로 설명되지는 않는다. 패배하지 않기 위해 이것만은 기억하자 사내정치에서 살아남기 위해서 개발자가 알고 있으면 유용할 세 가지 지침을 제시한다. 다음의 세가지 지침은 서로 연동된다. 1. 나의 목표와 주변의 이해관계를 파악하고 있어야 한다. 자신이 원하는 것이 돈인지 명예인지 지위인지, 아니면 개발을 통한 자아실현인지, 개인생활의 추구인지 명확히 알고 있어야 한다. 또한 나의 목표를 실현하는데 있어 가장 큰 장애물이 무엇인지 알고서 그것을 관리해야 한다. 자신의 목표와 상충되는 목표를 가진 이해관계자의 욕구를 파악하고 그것과의 타협점을 찾아야 한다. 하지만 사실, 대부분의 경우 목표를 실현하는데 있어서 가장 큰 장애물은 자기자신의 성격이다. 그렇지만 성격을 수양하는 개발자가 과연 몇 %나 될까? 아는 것과 실천은 완전히 별개의 단계이다. 2. “너와 나의 진실은 다르다”는 사실을 이해하고 있어야 한다. 자신이 믿는 것만이 정의이고 진실이라는 생각이 들 때, 숨을 세 번 크게 내쉬면서 상대편의 입장에서도 과연 그럴까 다시 한번 생각해 보기 바란다. 내가 알거나 느끼는 것을 쉽게 드러내서는 곤란하다. 대부분의 경우 그것은 설익은 판단이고 타이밍이 적절치 않은 경우가 많다. 하지만 자신의 감정을 주체하지 못하고 ‘욱’한 나머지, 준비도 안된 상태에서 회사를 그만 두어 버리고 경력을 망치는 개발자들이 많다. 퇴사 후 놀고 있는 당신을 사내정치인들은 비웃고 있다. 3. “군자에게는 실수를 해도 소인배에게는 실수를 하지 말라”는 격언을 기억하기 바란다. 이 말은 필자가 회사 생활에서 곤란을 겪는 후배들에게 숱하게 해주었던 말이다. 이 말을 처음 들었을 때의 임팩트는 상당히 크다. 군자(君子)는 점잖고 덕이 있는 사람이다. 그래서 군자는 누가 실수를 해도 그 이유를 스스로 파악하여 너그럽게 이해해준다. 하지만 소인배는 조금만 불이익을 당하거나 무시를 당했다고 느끼면 바로 삐지며, 심할 경우 끝까지 따라다니며 괴롭힌다. 그런데 사람이란 군자에게는 존경심을 갖고서 공손히 대하고 소인배는 무시한 나머지 함부로 대한다. 그것이 인지상정이다. 하지만 만일 그 소인배가 당신의 직장상사라면? 사내정치는 어느 나라에나 존재한다. 한국뿐만 아니라 미국에도 일본에도 있다. 하지만 한국에서 더욱 사내정치가 심할 수 밖에 없는 이유가 있다. 한국은 아직까지 IT업계뿐만 아니라 사회의 여러 분야에서 전문가의 개념이 불분명한 나라이다. 제대로 된 전문가가 출현하고 그 가치를 인정받는 지식사회가 되기까지 앞으로도 꽤 많은 시간이 걸릴 것이다. 한국은 아직은 선진 지식사회가 아니다. 그러므로 고급지식을 가진 사람들이 별로 없을 뿐만 아니라, 설사 있다고 하더라도 그것을 인정하지 못하며, 설사 인정한다고 할 지라도 필요로 하지 않는다. 실력을 인정하는 기준이 없으니, 사내정치가 판을 친다. 전문가를 필요로 하지 않는 사회, 자기계발이 살길 궤변으로 들릴 지 모르지만, 우리 업계에 전문가가 없는 것은 전문가를 필요로 하지 않기 때문이다. 조직 내에 사내정치인이 승진하고 인정받는 것은 조직의 상층부가 몰라서 그런 것이 아니라 그런 사람을 선호하기 때문이다. 성장은 커녕 생존을 이야기해야 하는 현실이 안타깝지만, 일단 생존해야 자기계발을 하고 경력관리를 하면서 기회를 노릴 것이 아닌가? 사내정치를 잘 할 필요는 없지만(그리고 개발자의 특성상 잘 하지도 못 할 것이다), 희생자가 되어서는 곤란하다. 이것이 바로 필자가 개발자 K씨에게 한 말이다. 개발자는 자신의 개발력과 장점을 해치지 않는 선에서, 이해관계자를 파악하고 그들의 욕구를 다루는 능력을 갖추어야 한다. 자신의 목표를 분명히 해야 하며, 감정에 치우쳐서 일을 그르치지 말아야 한다. 그러지 못한다면 결국 희생자가 될 뿐이다. 그러한 희생을 몇 번 당하다 보면, 개발업에 대한 애정이 식어버려 자기계발을 등한시하게 될 뿐만 아니라 성격까지 나빠져서 더욱 더 안 좋은 상태에 처하게 된다. 그렇게 사라져간 개발자들이 참 많다. 이런 조언을 하는 것에 대해 한편으로는 미안하게 생각한다. 언젠가 개발력만으로도 인정받을 수 있는 사회가 오면(너무 낭만적인 표현이다), 사내정치 대신 좀 더 아름다운 세상에 대해 이야기하겠지만 지금은 아니다. 정신을 똑바로 차리고 이 난세에서 생존하기 바란다. 환경을 바꿀 수 없으면 자신을 바꾸어야 하며, 자신을 진화시킨 개발자에게는 반드시 기회가 올 것이다. 세상은 장기적으로 볼 때 스스로 혁신하는 사람의 편이니까 말이다. @

메타(META)태그란


메타태그는 html문서의 <head>와</head>사이에 입력하는 특수태그로서 문서의 설정요소 들을 http서버에서 만들어진 특정 프로토콜 (컴퓨터간의 정보 교환을 위한 규칙을 말함) 에 연결합니다. 검색 사이트는 디렉토리 서비스라는 형식이 있고 검색 로봇이라는 것이 있는데 디렉토리 서비스라는 것은 사용자가 사이트에 관한 정보를 일일이 입력해서 검색을 하면 검색엔진에 등록된 사이트 중에서 입력된 정보와 적합한 사이트를 연결시켜 주는 방식이고 검 색로봇이라는 것은 대부분 메타태그를 이용하여 정보를 찿습니다. html문서의 <head> 부분 에삽입이 되면이 검색로봇이 검색엔진에 등록된 사이트를 주기적으로 돌아다니며 메타태그 를 색인해서 데이타를 갱신하게 됩니다. 따라서 자신의 홈페이지를 작성할때 메타태그를 적 절히 삽입해서 검색사이트 에 등록을 하는것이 바람직 하다고 봅니다.마감태그는 없습니다.


홈페이지를 작성한 도구를 알려주는 메타태그 소스
<meta name="generator" content="메모장">


메타의 한글지원 태그

인터넷 익스플로러5.0이나 넷스케이프 커뮤니페이터4.5에서는 언어를 자동으로 지원하므로 문서에 charset 을 설정하지 않아도 한글이 깨지지는 않습니다.그러나 웹  버전이 다른 경우한글이 깨져 나오는 경우가 있으므로 한글이 있는 html문서를 작성한다면 항상 다음과 같은 태그를 사용하는 것이 좋습니다.그러나 주의할 점은 다음과 같이 한글폰트charset=euc-kr로 설정을 해 주면 인터넷 익스플로러 에서는 아무 문제가 없지만 넷스케이프의 경우는 기본적으로 영문폰트(Western(ISO-8859-1))로 인코딩하여 문서를 보여 줍니다. 따라서 <meta charset=euc-kr>을 설정 하면 넷스케이프에서는 한글이 깨져 나오기도 합니다.그런데 반대로<meta charset=iso-8859-1>사용하면 넷스케이프에서는 한글이 깨지지 않는데 익스플로러에서 문서를 보게되면 최신 버전임에도 한글이 거의 다 깨져 나옵니다.이때는 메타 소스를 수정 하는 수 밖에 없습니다 익스플로러 에서는 <meta charset=euc-kr>을 설정해 주고 넷스케이프에서는 <meta charset=iso-8859-1> 을 설정해서 삽입해 주면 한글이 깨지지 않는답니다.다음과 같이 각각 다르게 메타태그를 삽입해 주면 됩니다
익스플로러 <meta http-equiv="Content-Type" content="text/html;charset=euc-kr">넷스케이프 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">


주제어 설정 메타태그

주제어 메타태그를 삽입하면 검색엔진에서 키워드로 검색을 했을때 수없이 많은 사이트중에우선순위로 상위리스트 그룹에출력이 됩니다.자신이 만든 홈페이지가 키워드 검색시에 상위리스트에 입력이 되게 하려면 다음과 같은 메타태그 를 쓰면됩니다.단어는 콤마로 구분하죠 <meta name="keywords" content="태그,tag, html,태그연습,태그연습장, 태그기초,태그공부,태그의모든 것,태그란?,자바스크립트,자바에플릿"> 검색엔진에서 위에 나열된 단어중 태그 혹은 태그연습 이라고 검색어를 입력하고 검색키 를누르면 검색 사이트에 출력이 됩니다.물론 자신의 사이트가 검색엔진에 등록이 되어 있어야 겠죠


홈페이지에 대한 소개를 나타내는 메타태그

검색엔진 에 출력된 사이트 들을 보면 홈페이지 이름과 함께 홈페이지에 대한 설명이 입력되어 있습니다.키워드와 함께 검색엔진으로 검색 하였을때 홈페이지 에 대한 설명 부분은 여기에 설정된 글들이 나타나는 것입니다 메타태그가 지정되어 있지 않은 경우 검색로봇은 페이지상 단으로 부터 몇줄만 설명으로 가져가기 때문에 검색자에게 정확한 결과를 보여줄 수가없겠죠 아래소스 content 부분만 자신의홈에 맞게 수정하면됩니다 <meta name="description" content="홈페이지를 꾸밀수 있는 자바에플릿 자바스크립트소스모음과스타일시트 각종 태그소스 자료 제공">


몇초후 다음 페이지로 자동 로딩하기

자신의 홈페이지 주소가 바뀌었거나 첫화면에 몇초동안 의 로고나 이미지를 보여준 후 메인페이지로 갈때나 슬라이드 효과를 낼때 사용합니다. CONTENT=5는 5초후 를 의미 합니다
<meta http-equiv="refresh" content="5;URL=http://www.netian.com">


  트레지션 효과 메타태그
  페이지를 이동할때 화면을 여러가지 모양으로 바꿔주는 태그입니다.
<meta http-equiv="Page-Exit" content="revealtrans(duration=2.0,transition=23)">
<meta http-equiv="Page-Enter" content="revealtrans(duration=2.0,transition=23)">

+ Recent posts