Category Archives: a daily

일상 다반사

세번째 웹 표준의 날 후기

지난 주 토요일(2월 7일) 한국정보문화진흥원에서는 CDKclearboth가 주최한 제 3회 웹 표준의 날 모임이 있었습니다.
이번 모임은 “웹 표준을 넘어서” 라는 부제로 만든 자리였고 많은 분들이 이제는 공감 이상의 몸으로 느끼고 있는 웹 표준에 대해 그 후에 알고 대처해야 할 것들과 웹 접근성과 사용성 대해 발표하고 서로 대화하는 자리였습니다.

너무 오랜만에 생긴 모임이라 어찌나 반가웠던지 모임 안내글을 올리고 신청자를 받기위한 페이지를 등록하자마자 하루만에 선착순 인원이 마감되어 버리는 일이 발생했다고 합니다.

세번째 웹표준의 날 신청자 마감

후기는 그날 그날 바로 적어주면 좋겠지만 좀 늦은 관계로 이미 많은 후기가 올라와 있고 워낙에 나름 뿌듯하고 좋았기 때문에 더 적을 말이 생각나지 않지만 발표를 해준 찬명님, 지호님, 성민님, 현진님, KADO(한정기님, 문준기님), 조훈님, 현석님 그리고 사회와 발표와 이 모임을 할 수 있도록 힘써주신 윤표님께 너무 고맙고 아직 선배라고 할 수 없는 저에게 함께 할 수 있는 기회를 줘서 감사하다는 말 전하고 싶습니다.
그리고 스스로 스피커 겸 사진기사 활동을 해준 봄눈님께 감사 드리며(사진은 봄눈님 블로그에서 참고) 아침 일찍부터 해가 떨어질때까지 불만한번 하지 않고 열심히 도와주신 자원봉사 분들도 너무 감사드립니다.

다음 모임을 기다리며 참여했던 모든 분들이 조금이나마 서로를 의지하고 좋은 정보와 만남을 가질 수 있었던 자리였으면 좋겠습니다.
모두 수고하셨습니다. 🙂

IE, 7부터 바뀐 디자인보안 정책

2006년 12월 즈음 IE7이 출시되고 있던 것으로 기억된다.
(아마도 beta기간이 아니었나 싶다..)
당시 내가 속한 회사에서 제작 중이던 웹 사이트는 링크의 url을 기본적인 사이트 주소를 넣거나 #에 name을 붙여서 이동 하게 하거나 javascript로 이동하는 링크를 사용 했었다. 아마 대부분의 사이트에서 페이지 이동이나 컨텐츠 이동을 이렇게 하지 않았을까?

Link의 Pseudo Class :visited
IE가 아닌 브라우저를 이용해 웹 페이지를 제작해 본 사람이라면 링크의 url 경로가 스크립트로 구성 되어 있으면 :visited style이 적용 되지 않는다는 것은 잘 알 고 있을 것이다.
link의 pseudo-class중 :visited란? user agents에서 한번이라도 방문을 했는지 안 했는지를 구분하여 방문 하지 않은 페이지라면 :link로 인식 할 것이고 방문했다면 :visited로 인식하는 것을 말한다.(방문여부는 IE6 이하에서는 javascript 로 넘기는 링크라도 :visited를 인식하는 것을 보면 브라우저마다 기준이 다르지 않을까..?)

그렇다면 방문기록이 남을 수 없는 javascript로 이동한 경로는 그렇다 치더라도 #name으로 이동한 페이지는 방문 기록이 남게 된다.
웹사이트 방문기록 리스트
정상적이라면 방문기록과 href 의 url값을 비교하여 같다면 :visited로 인식이 되어야겠지만 IE7은 그렇게 되지가 않는다. 왜 그럴까?
그 당시 CDK에 글도 올려 보고 여러 사람들과 논의도 해 봤지만 그다지 중요하다는 생각이 들지 않는지 소리소문 없이 사라져 버렸는데 최근에 다시 듣게 되어서 정리하게 됐다.

CDK의 글을 보면 MS고객문의 답변 내용이 있는데 그 당시에는 답변에 대해 정확하게 정리가 되지 못하다 보니 고객문의 글을 100% 이해하기가 힘들었다. 특히 design이라는 단어가 뭘 뜻하는지 전혀 몰랐던 지라.. 그대로 묻혀 버렸는데 IE8에서도 동일하게 발생하고 있다 기에 다시 문의를 해본 결과 조금은 더 상세하게 답변을 들을 수 있었다.

답변 내용은…

[제목]
IE7: script에서 css visited 속성 사용할 수 없음.

[요약]
IE 7.0에서 CSS a:visited 속성을 기술해 주어도 href 에 # 이 들어가거나 javascript:xxx 형식으로 기술되면 기술된 속성이 반영되지 않아 색깔 구분이 안됨
샘플예제
<style> a:visited { color:blue } </style> <a href=”a.htm”> <– 정상동작
<a href=”javascript:showDetail(‘b.htm’)”> <– a:visited CSS 반영안됨
<a href=”#b” onclick=”javascript:showDetail(‘b.htm’)”> <– a:visited CSS 반영안됨

[원인]
Internet Explorer 7 의 강화된 보안 디자인으로 인한 현상으로, IE7 에서는 script 내에서 url history 정보를 보지 못하도록 디자인 변경되었습니다.
이로 인해 script 에서 CSS style 의 visited 속성이 적용되지 않는 것입니다.

[해결 방법]
고객사에서 관련 코드 수정하여 문제 해결.

제목이 script 사용으로 :visited가 안된 다고 되어 있지만 #이 들어도 마찬가지다.
좀 더 내용을 추가하자면 스크립트를 이용하여 이전 history 정보를 악용한 악성 사례들이 있어서 IE7 부터는 의도적으로 막았다고 한다.
자주 일어나는 일이 아니라서 잊혀져 있었던 일인데 원인을 확실히 알게 되어서 좋지만 이런 이유로 #name으로 이동하거나 링크 이동 후 자동으로 위치로 이동하기 위해 사용했던 링크 주소 방식은 방문기록에는 남지만 :visited로 인식하지 않는다니 아쉬움 생긴다.

해결방법?
IE에서는 보안정책이 강화되어 바꿀 수 없다고 하니 코드방식을 바꿔야 하지만 원천적으로 경로#name 을 인식하지 않게 되었으니 :visited를 인식할 수 있는 방법은 없을 것 같다
MS에서 제공해준 해결 방법이 있지만 사용하고 싶지 않은 건 나 뿐일까….;;

IE가 버려놓은 잘못된 습관 alt속성

앗! 저는 alt 입니다. ie에서만 보이죠

html, css좀 다룹니다.. 라고 하면 alt 속성 모르는 사람 있을까? 아마.. 없을 거다
시간이 꾀 지났지만 웹 표준이란 말이 나오면서 접근성과 함께 세트 메뉴처럼 딸려 나오는 건 항상 alt 속성으로 대체텍스트만 잘 지켜도 50점은 먹고 들어가는 거라고 할 정도로 언급을 했으니 말이다.

그렇다면 일반적인 사용자가 이런 것 들을 알 고 있을까?
모르긴 몰라도 아마 대부분의 사용자들이 이런 속성 따위에는 관심이 없을 거라 생각한다.
그저 본인이 이용하는 환경에서 잘 보이고 이용할 수 있게만 하면 만족할 데니 말이다..
문제는 여기에서 오는 것 이다.

이 글은 사용자의 입장이 아니라 제작자의 입장에서 생각한 내용이다.
alt는 어떤 속성일까? w3c에서는 alt속성에 대해 대상(이미지나 input, applet등)의 요소의 의미나 내용을 텍스트로도 제공할 수 있도록 할 때 쓰인다고 말하고 있다.
이렇게 alt속성을 제공 했을 때의 이점이라고 한다면 요즘과 같이 다양한 플렛폼에서 웹 페이지에 접근을 하더라도 최소한의 동등한 정보를 제공 할 수 있는 방법을 제공할 수 있다는 점과 검색봇이 컨텐츠를 검색 함에 있어도 도움을 줄 수 있다고 말하고 있다.
(물론 이 말은 반은 맞고 반은 이론상 그렇지만 그렇다고 100% 믿어도 나쁠 건 없겠지?)
여하튼 이런 의미와 기능을 가진 alt속성을 기획,개발,디자인에 까지는 바리지 않지만 클라이언트 사이드개발 쪽 사람이라면 제대로 알고 사용을 해야 하지 않겠는가?

작년부터 IE8 beta 씨리즈가 릴리즈 되면서 관련 업무를 진행 하고 있고, 주로 IE8에서 표현되지 못하는 버그나 오류를 테스트 하고 있는데 이런 문의가 온 적이 있다.

“IE8 에서 ooo 부분에 툴팁이 나오지 않고 있습니다. 수정해주세요…”

이미 IE8을 사용해 본 사람들이라면 대부분 다 알겠지만 IE8 부터는(정확히는 브라우저 모드가 IE8 standard mode 여야 한다) alt속성이 더 이상 시스템 툴팁으로 표시되지 않게 되었다.
(그전 까지 IE에서 생각하는 alt는 title속성과 동등하게 title요소가 없을 경우 대신 나타나는 속성정도로 인식되었으니..)
아마도 IE8이 엄격한 표준규칙을 지키려 노력한 브라우저인 만큼 이런 부분까지도 다른 브라우저들과 동등한 기능으로 바꾸려 했을거라 짐작된다.
그럼에도 불구하고 아직까지 10년 15년 전 브라우저를 못 잊은 사용자들의 낡은 습관 때문에 예전과 동일하고 손도 까딱 안 한 코드를 어떻게든 사용자의 입맛을 맞춰서 다시 바꿔줘야 한다고 하면 어떻게 설득 시켜줘야 할까..?
물론 title 속성을 이용해(이건 꼼수도 아닌 그냥 편법이다!) 툴팁이 나타나게 할 수도 있다.
하지만 title 속성의 사용이 alt 를 대체 하기 위한 코드는 아닌데 마냥 아쉽기만 하다.

일모리님 블로그에서는 alt와 title에 대해 정리가 잘 되어 있다.

Ie8 css Extension?

MS에서 IE8 부터 적용이 가능한 css extension을 제공한다고 한다.
ie css Extension
http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
기존 속성에 -ms- 를 붙여서 사용하면 되며 내용과 적용되는 예시속성이 있는데…
내용을 살펴보면 세가지 사항에 대해 -ms-를 붙여 사용할 수 있다고 한다.

  • CSS 스팩에 정의되어 있지 않은 MS 확장 속성일 경우
  • CSS 스팩에 정의되어 있지만 W3C에서 아직 권고후보 상태인 경우
  • CSS 스팩에 정의되어 있는 속성

대략 이런 속성에는 적용해서 사용 할 수 있다는데 쉽게 말하면 IE전용 속성이나 css속성중에 IE가 인식하는 css 범위에서는 모두 사용이 가능하다는 이야기 아닌가? 이걸 보면 사실상 IE8 전용 css hack 이라고 말하는 편이 나을것 같다..
아무튼 filter 속성의 opacity값 문제로 찬명님과 블로그댓글 채팅(?)ㅋ 중에 몇 가지 안 사실은 -ms-로 설정할 경우 속성값은 따옴표(“”) 로 감싸줘야 한다는 것이다.
예를들면..
opacity속성을 사용해서 투명도를 조절할 경우 크로스브라우저를 위한 코드여야 한다면 앞으로는 이런 코드가 되어야 한다.


#selector {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}

또는


#selector {
-ms-filter:"alpha(Opacity=50)";
filter:alpha(Opacity=50);
opacity: .5;
}

이렇게 해야 한다.

좀 의문인건 filter 속성경우 -ms-를 붙여서 사용해야만 IE8에서 실행되는데
IE전용 속성인 scrollbar- 속성 경우는 -ms-를 붙이지 않아도 된다.
아직 beta단계라서 그런건지.. ie속성을 ie에게 배신당한 기분은 나만 느끼는건가.. -_-;

저는 웹 퍼블리셔 입니다.

저는 “웹 퍼블리싱” 일을 하고 있습니다.

흔히 “코더”라고 부르는 직업이지만 컨텐츠의 구조를 파악하고 마크업의 의미를 잘살려 컨텐츠를 생산하며, 구조와 표현을 분리하여 어느것이 정보를 전달하기위한 컨텐츠이고 어떤것이 표현하기위한 컨텐츠인지를 인지할 수 있는 작업을하며 작업자들과의 사이에서 도움을 주는 역활을 합니다.
만약 코더를 무시하는 웹작업자들이 있다면 잘 알지도 못하면서 까부는 그녀석들에게 적나라하게 망신을 줄 자신이 있습니다.

예전엔 웹프로그래머였기때문에 지금에 이일이 그리 매력이 없어보였었는데 지금은 이일이 재미있습니다.
예전엔 미쳐 생각하지 못했었던 정보의 전달방법이나 웹에대한 표준, 구조와 표현의 분리를 통한 경량된 문서, 다양한 의미를 가지고 있는 다양한 Tag, 이런 것들을 활용해서 직접 만들어낸 사이트, 그 사이트를 통해 할 수 있다고 느낄수 있었던 확신 등..

주위에 도움도 많이 받았습니다. 여기까지 발전할 수 있게 동기부여를 해주신분들, 기술적 부분에 대해 아낌없는 질타를 하시며 가르쳐주시던분들, 도덕적 가치관이나 사회적 가치관으로부터 새로운 눈을 뜨게해주신분들 등..
그런데 이제 저에게 다시 물어봅니다. 뭐가 하고싶냐고.. “웹프로그래머로 다시 돌아갈래?”, “아니면 이일을 계속 할래?” 굉장히 헷갈리고도 고민되고도 어느하나 놓치기 싫은 결정이지만 직장생활에서 반드시 한가지에 결정을 해야한다면 “웹 퍼블리셔”를 하기로 결정했습니다.

지금 내가 흥미를 가지고 즐겁게 일을 할 수 있고, 이 일이 재미있고, 알고싶은게 너무너무 많기때문에 오랜고민하지않고 결정이 된거 같습니다.

이제는 확실한 마음가짐으로 좀더 발전을하기위해 한발더 달려볼까 합니다.

우리가 웹을 아름답게도 만들수 있고 그지 망나니로 만들수도 있습니다. 선택은 우리들의 몫이며 그 결과는 모두가 공유한다는것을 잊지 말아야겠습니다.