부침개 블로그

MS에서 IE8 부터 적용이 가능한 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에게 배신당한 기분은 나만 느끼는건가.. -_-;

올초 3월부터 시작된 IE8 beta1과 8월에 beta2, 9월 한국화버전까지 MS의 Internet Explorer(IE)도 버전업그레이드와 브라우저 변화에 노력중이다.
변화의 대표적인 예로 크로스브라우징을 맞춰야 하던 분들이 골머리를 앓고 있던 IE만의 렌더링 방식인 haslayout지원을 IE8에서는 더이상 적용되지 않도록 버리고 표준모드와 Quirks mode의 렌더링이 제작자의 의도와 맞도록 맞추고 있고, Firebug와 같은 디버그 툴의 사용 용도가 높아서 인지 IE8에서는 기본으로 기존에 개발자도구(Developer Toolbar)를 탑제해서 설치되고 있다.
이외 브라우저 충돌시 자동으로 복구를 해주는 기능이 있는데 개인적으로 이 기능은 좋은 인상을 주지 못하고 있는것 같다. 다음과 같은 상황이 있다면 말이다.. 예를들어 사이트에 들어가자마자 충돌이 나는 사이트가 있다면 브라우저를 자동으로 복하기 때문에 브라우저가 복구 된다고 한들 또 오류가 나고 또 복구 하고…. 무한으로 반복하기에 결국 브라우저를 종료시키지 않고서는 상황이 끝나지 않을것 같기 때문이다.
좋고나쁨을 아직까지 정확히 판단하기는 어렵지만 beta인 만큼 여러 시도로 다양한 기능과 개선사항을 보여주고 있는것 만은 사실이기에 기대가 되기도 한다.

신규기능
최근 브라우저들은 속도개선을 주로 내세우며 사용자들이 보다 더 빠르게 브라우저를 이용할 수 있는 것에 집중을 하고 있다.
IE브라우저는 웹표준도 웹표준이지만 이런 면에서도 유난히 좋은 인상을 주지 않는 것이 사실이지만 사용자의 이용율을 무시할 수는 없는 거의 절대적인 비율이기 때문에 이런 추가되는 기술이나 신규기능에 대해서 민감하지 않을 수는 없다.
IE8에서 내가 관심있는 신규기능은 Accelerator, Webslices이며, 두 신규 기능에 대한 간단한 설명과 현재 서비스에서 적용시 고민해 봐야할 문제에 대해 이야기 해보려 한다.
참고로 추가되는 새로운 기능이나 기술은 IE8 백서에서 더 자세히 찾아볼 수 있다.

Accelerator
Accelerator(액셀러레이터)는 beta1에서 Activity로 소개되었던 기능에서 이름이 변경된 것이다.
정보를 하나의 서비스로만 이용하지 않고 서비스 제공자가 규격화 된 xml코드를 이용해서 제공해 놓은 다양한 서비스들로 다르게 접할 수 있도록해주는 기능이다.
쉽게 이야기해 정보서비스를 이용함에 있어 사용자가 다양한 서비스를 끊김없이 이용할 수 있도록 제공해 주는 기능이다.

예를 들자면..
기존에는 현재 보고 있는 웹페이지에서 다른 관련된 정보나 서비스를 이용하기 위해서 관련 키워드나 웹사이트 주소를 복사하거나 외워서 브라우저 주소창에 치거나 검색폼에 작성후 검색하고 원하는 서비스 페이지로 이동하는 방식이였다.
하지만 액셀러레이터 기능을 이용한다면 이런 절차를 줄여줄 수 있다. 액셀러레이터는 현재 페이지에서 관련 키워드나 페이지 그 자체를 자신의 브라우저에 추가된 액셀러레이터를 이용해서 바로 이용할 수 있도록 하고있기 때문이다.
위에서 이야기 했던것 처럼 사용자가 정보를 이용함에 있어 불필요한 절차를 조금이라도 줄여줄 수 있도록 해 주는 기능이라 할 수 있지만 이 기능에도 약간에 문제가 있다.
하나는 해당 서비스를 제공하기 위해 서비스 제공자는 서비스 페이지 어딘가에는 액셀러레이터를 설치할 수 있는 링크를 제공해야 한다. 한번은 설치를 해야 한다는 것이다.
다른 하나는 마우스 오른쪽 클릭이 제한된 곳이나 드래그로 컨텐츠의 하이라이트가 제한된 곳에서는 제한을 풀어야 할지 말아야 할지에 대한 고민이 생기게 된다는 것이다.
액셀러레이터는 키워드를 드래그 했을때 액셀러레이터 버튼이 활성화 되거나 마우스 오른쪽 버튼을 이용해서 사용하거나 브라우저 상단 페이지 메뉴에서 이용할 수 있게 되어 있다. 일반 적으로 가장 편한 방식이 키워드를 드래그 후 나타나는 메뉴를 이용해서 사용하는 것이 가장 좋겠지만 어떠한 이유에 의해 이런 기능을 막아놓은 사이트라면 액셀러레이터를 위해서 풀지 고민이 생기게 될 것이다.
액셀러레이터는 검색,사전,지도,메일 등 카테고리의 구분만 명확하다면 다양한 서비스와 연동을 할 수 있기에 그 매력이 상당히 높아 보이지만 위의 사항에 문제가 생긴다면 쉽지 않은 고민이 생길거라고 생각된다.

Webslices
Webslices(웹슬라이스)는 MacOS의 Webclip widget과 똑같다는 생각이 들었다.

hAtom 마이크로포맷 기술을 이용해서 서비스 제공자가 사용자에게 이용하고 싶은 콘텐츠만 쉽게 전달할 수 있도록 해주는 기능으로 사용자 입장에서는 즐겨찾기와 유사하게 취급되나 RSS의기능과 같이 정보갱신을 인식해 항상 최신정보를 유지하며 정보를 이용할 수 있게 해주며 정보제공자는 기존 마크업을 이용해서 제공할 수도 있다는 장점이 있다.
단순히 html만을 이용해서 제공할 수 있기 때문에 편리하지만 웹슬라이스 역시 고민해야할 점이 없는것은 아니다.
첫째로 기존 html 구조가 웹슬라이스를 제공하기위해 적합하지 않은 구조라면 웹슬라이스를 구현하기 위한 최소한의 골격을 마춰야 하는 단점이 있다.
두번째 문제는 사이트를 접속하지 않고 원하는 정보만 볼 수 있다는 장점은 사이트 접속으로 인한 수익(광고나 연동되는 기타서비스)을 추구하던 서비스에서는 그리 적합하지 않은 기능이기 때문이다.
때문에 ebay와 같은 상품의 꾸준한 정보갱신을 원하는 사용자가 많은 서비스라면 꾀나 적합한 기능이라 생각되지만 다양한 정보를 한곳에 다 표현하고 있어 정말 필요할것만 같은 한국의 포털메인 사이트와 같은 곳에서도 과연 좋은 기능일지 고민해봐야 하지 않을까 생각된다.

끝으로
Accelerator와 Webslices가 매우 매력적인 기능인건 분명하다.
beta지만 벌써부터 대응하고 있는 사이트도 생기고 있고.. 이런 현상은 IE가 단순히 사용율이 높기 때문만은 아닐 것이다.(정말 이런 기능이 필요했던 사이트도 있을 것이고…)
지금은 접목하기 힘든 서비스라도 기존 서비스를 잘 연구한다면 좋은 방향으로 사용할 수 있지 않을까 생각된다.
참고로 ebay와 Auction에서는 벌써 대응을 하고 있는중이고 꾀 잘 사용하고 있다고 보인다.

CDK는 웹 표준과 웹 접근성을 전문으로 다루는 커뮤니티이다.
1회, 2회의 웹 표준의 날 행사와 1회 웹 표준 경진대회, 스텐다드매거진 등의 온, 오프라인 활동을 하면서 이제는 누군가의 커뮤니티가 아닌 멤버 모두들의 커뮤니티로 성장해 가고 있다.

올해는 기대하고 있는 3회 웹 표준의 날의 소식이 불투명해 졌기 때문에 개인적으로 아쉬운 면이 있지만 이러한 아쉬움을 달래주기라도 하듯 미니워크샵을 가지고 있다고 하는 반가운 소식이 있어 알려 주려 한다.
일명 cdk 미니워크샵이라고 불리는 이 모임은 금요일 퇴근시간후 2~3시간 정도의 시간 여유가 있고 알고싶은 정보나 궁금한 것이 있는 사람 혹은 정보를 공유하려 하는 사람이라면 누구나 참여가 가능한 모임으로 이러한 소수의 사람들이 만들어 가는 모임이다.

벌써 3회까지 진행된 모임이며 이 모임은 어떠한 주제를 연장하면서 진행하는 것이 아니라 그날 모이는 사람들이 직접 주제를 정해서 이야기 해보는 모임인 만큼 개인적으로는 정말로 알찬 모임이 되지 않을까 생각된다.
한 동안 오프라인 모임이 뜸해 목말라 있던 차에 온라인 상 글타래를 열어서 질문 답변 만 하던 것을 벗어나 이러한 모임을 이끌어 가고 있는 현석님과 윤표님에게 감사드리며 모임장소가 신촌과 강남 쪽에서 진행을 하고 있는것 같아 기회가된다면 나도 한번 참여해 보려고 한다.

그동안 진행됐던 1회 미니워크샵 과 2회 미니워크샵 은 CDK wiki 에서 확인이 가능하니 참여하고 싶거나 내용이 궁금한 분은 미리 확인해 보는것도 나쁘지 않을것 같다

작년 겨울쯔음인가.. 이미지의 alt 텍스트가 비어있을경우 센스리더는 파일명을 그대로 읽어줘 버리기 때문에 엑스비전테크놀러지에 문의를 한적이 있다.
시대적 이유가 가장 컸었던걸로 기억하는데 당시 웹사이트는 대형 사이즈의 이미지를 4등분 잘라서 하나의 페이지로 만드는 사이트도 있었고 기타 이미지의 활용도가 지금과 같지 않았을 뿐만아니라 alt 속성에 대한 인식이 거의 전무한 상황에서 당시 최고의 웹에디터라 불리였던 나모웹에디터 에서 img 태그를 생성하면 alt 속성이 자동으로 생성되기 때문에 거의 빈 속성으로 남겨두고 사이트를 오픈하는 경우가 많았다고 한다.
그렇게 제작된 사이트를 정상적인 방식으로 센스리더를 이용하면 심할경우 센스리더가 아무것도 읽지 못하는 경우를 격게 된다고 한다.
(img 로 도배를 하고 alt 는 =”" 이라면 이해가 간다..)
그러니 울며 겨자먹기로 파일명으라도 읽게해서 이미지라고 라도 표현을 하게하려는 의도로 어렴풋 기억난다. 하지만 이제는 달라졌지 않았겠는가? 웹표준 마크업은 왠만한 웹에이전시나 기타 웹사이트를 제작하는 곳에서는 모르는 사람이 없을테고 접근성을 높이기위해 대체콘텐트에 관심을 가지는 이들도 꾀 많다.
그래서 이번에 출시하는 센스리더 프로페셔널 버전은 alt 속성에 대한 정확한 인식은 물론이고 다른 부분까지도 개선 되었다고 한다.

세부 개선사항

그동안 표준코드를 제대로 해석하지 못해 아쉬움이 많았던 센스리더가 이번 업그레이드에서 개선되는 개선사항은 다음과 같다.

• 이미지에 longdesc 속성이 있는 경우 읽어주도록 수정.
  이번 수정으로 인해 애매했던 이미지에 longdesc설정이 정상적으로 url로 연결이 되어 있으면 alt+엔터키를 이용해서 해당 설명 url을 새로운창으로 열어줄 수 있게 됐다고 한다.
• 테이블에 summary 속성이 있는 경우 음성출력이 되도록 수정.
  summary 속성이 있으면 테이블이라는 표시 다음줄에 summary내용을 알려주도록 개선 되었다.
• ul, ol, dl태그 지원. 목록 항목으로 음성이 출력가능
  이번 개선으로 리스트 태그의 사용구분을 명확하게 할 수 있게 됐다. ol, ul, dl 태그가 있으면 목록시작과 끝을 알려주며 목록이 몇개인지 목록시작시 나타나고 목록안에 또 목록이 있으면 목록 단계를 알려줌으로 서브 목록임을 나타낼 수 있게 되었다.
• accessibility를 적용한 플래시 지원.(예: 네이버 로그인 보안 2단계)
  accessibility를 적용한 플래시를 지원하도록 추가된 기능이다. 네이버외 기타 여러 페이지에서 인식이 되는것이 확인됐고 보면 요즘은 플래시 제작시 accessibility에 콘텐트를 작성하는 분들이 많다는게 느껴진다.
  accessibility 지원할 수 있도록 개발하는 방법은 adobe 접근성 리소스 센터에서 참고할 수 있다.
• id를 통한 스킵 네비게이션 처리 지원
  스킵네비게이션이 ID를 인식하지 못하고 name으로만 이동이 가는한 것을 ID도 인식할 수 있도록 수정되었다. 예전 이 문제로 인해 ID와 name을 모두 선언했어야 했지만 그부분이 개선되었다고 할 수 있다. 하지만 당분간은 계속 지금과 같이 설정해야 하지 않을까 생각된다.
• 이미지의 alt에 내용이 없을 경우 처리하지 않도록 변경
  alt=”" 으로 설정된것은 파일명을 나타내지않도록 수정한 것이다. 이제 의미없는 이미지 태그를 사용시 빈 alt텍스트를 기입해도 파일명을 읽어주지 않는다.
• 편집창의 이름이 웹표준에 맞게 작성되어도 적용되지 않던 문제 개선
  이 말은 label 태그를 인식하게 했다는 뜻이다. 단, 편집창 외에 체크박스, 라디오버튼 등은 아직 인식되지 않는다고 한다.

이외에도 테이블을 좀더 잘 읽어줄 수 있도록 테이블 모드기능과 fieldset, abbr, acronym 태그를 인식할 수 있도록 수정되었으며 accesskey가 있으면 바로 정보를 알려 줄 수 있도록 수정되었다고 한다.
위에 설명한 개선사항은 프로페셔널과 기존에 사용하던 파워버전도 동일하게 적용된다고(Power 1.5v 부터) 하니 기존에 파워버전을 사용하시던 분은 업그레이드를 통해서 이용이 가능하고 신규로 구매하시거나 윈도우 비스타 환경에서 사용해야 하는분은 프로페셔널 버전을 구매하면 된다고 한다.
(기존 파워버전은 윈도우 비스타에서 작동하지 않는 문제가 있다. 프로페셔널은 가능)

보편화 기간

문제는 언제쯤 보편화가 될 것인가인데 이렇게 센스리더가 기존버전의 업그레이드와 신규빌드가 출시 됐다고 하지만 이용자들에게 보편화 되려면 시간이 꽤 걸리지 않을까 생각된다.
왜냐하면 현재 센스리더의 구입 비용이 만만치 않고 구입비용 지원이 된다고 하지만 그 시기가 항상 인것은 아니기 때문이다.
(power 1.5 버전 업그래드이는 무료로 할 수 있다는 소식이 살짝 반갑네 ^^)
참고로 시각장애인들이 센스리더와 같은 보조장비를 구입하는 경로는 다음과 같다고 한다.
(한국시각장애인복지관 도움)

• 개인구입(100% 비용지급)
• 정보문화진흥원에서 1년에 1회 시행하는 장애인 정보보조기기 보급사업에서 장비에 따라 본인부담 10~20%가격으로 구입할 수 있도록 지원
• 장애인고용촉진공단에서 시행하는 취업장애인을 대상으로 1인당 1천만원까지 보조기기구입금 지원

다만 이번 파워 1.5v 업그레이드와 프로페셔널 버전 출시로 인해 웹사이트쪽의 개선도 있었지만 기타 환경과 응용프로그램 쪽에서도 개선사항도 많아(특히 오피스와 한글워드프로세서 지원강화) 빨리 변경을 원하시는 분들도 있지 않을까 생각된다.

끝으로

이번 개선사항으로 인해 접근성을 고려해서 웹사이트를 제작하는 분들이나 직장에서 센스리더를 이용해 업무를 보시는 시각장애인 분들에게 많은 희소식이 될 수 있을 것 같다.
좀 아쉬운 부분이 있다면 엑스비전테크놀러지 공식사이트를 좀 고쳤으면 좋겠다는 생각이 아주많이든다.. 사이트에서 얻을 수 있는 정보가 너무 없기때문이다.
브라우저 개선사항 외 기타 세부 개선사항에 대한 정보는 아래 첨부문서 참고하기 바란다.
센스리더 프로페셔널 세부정보

정말 오랜만에 블로그에 글을 적어 보는 것 같다
입사한 뒤로 블로그를 너무 멀리 했던지 온라인상으로 알고 지내던 분들과도 점점 멀어지는 기분도 들고.. 입사한지 1년이 가까워지는 지금에서야 다시 블로그에 글을 쓰니 그동안 참 너무 무신경했다는 생각도 든다
(사실은 글을 간간히 적었는데 모두 Publish 하지 못하고 Draft해 놓고 있어 어떻게 처리해야할지 난감한…-_-)

요즘 IE8에 대한 Beta1 테스트 때문에 Firefox3 에 대해서는 전혀 모르고 있었는데
몇일전 Firefox3 Download 소식을 듣고서야 알게 됐다.
외견상의 변화와 보다 편리한 사용성을 위한 기능들 그리고 보안강화 등은 일반 사용자들이 느끼는 부분이고,
웹 개발자나 확장 기능 개발자들이 에게는 많은 벡엔드 기능을 추가 되었다고 한다.
나야 웹표준과 접근성에 관심이 있다보니 기술적인 부분보다는 달라지는 렌더링과 css개선과 확장여부 등이 더 궁금했었다.
(자세한 Firefox 3에 추가된 새로운 기능은 Mozilla Developer Center 를 참고하면 된다)

Firefox3는 Firefox2 보다 향상된 표준에 가까운 HTML 렌더링을 한다고 한다.
Acid2 Test를 봐도 알겠지만 Firefox2는 통과하지 못한다는 것을 알 수있고 Firefox3는 통과 한다고 하지 않았나..
무엇이 달라졌는지 모든 부분에 테스트를 해봐야 겠지만 우선 Form 컨트롤러들의 레이아웃 렌더링에 차이가 발생하는 것을 발견했다.
(이미지 사이즈를 보지말고 숫자를 보도록 하자.. 캡쳐를 잘못해서 사이즈가 다르다..-_-)

위 표를 보면 모두 조금씩 크기 차이가 발생했는데 특히나 checkbox, radio, select 는 기본으로 차지하는 사이즈가 달라지니 미리 대비를 해야 할 것 같고 textarea의 경우 예제에 cols, rows 속성값이 나와있지만 cols, rows 선언값에 대한 width, height 값이 차이가 났었다.

위 문제중 checkbox, radio와 텍스트를 함께 사용한 예를 보면
일단 <input type=”checkbox”>, <input type=”radio”> 는 4px의 차이가 나는데(border의 차이를 빼면 2px 차이가 난다)
아래 예 처럼 텍스트와 함께 쓰일 경우 Firefox2와 달리 차이가 발생하게 된다.

Firefox 3	Firefox 2

위와 같은 현상을 막기 위해서는 input에 vertical-align 을 지정해주면 해결 되지만 vertical-align을 줄 수 없을 상황이 올 수도 있으니 변경되는 상황에 대해 잘 파악하고 대비해야겠다.
그리고 select 의 높이 차이와 textarea 의 cols, rows 차이는 각각 width, height 값을 선언해주면 해결되므로 미리 알고 있도록 하자

Firefox3가 표준렌더링에 더 완벽하게 마춰졌기 때문에 기존 Firefox2 에서 제대로 보였던 페이지라 할 지라도 제대로 보이지 않을 수도 있다.
이건 내 생각이지만 올바른 css 코드와 마크업으로 작성했다면 큰 문제는 없지 않을까 생각한다.