안녕하세요. 웹표준화팀 윤좌진 입니다.

엑스비전 테크놀러지에서 6월 30일날 센스리더 프로페셔널을 출시했다고 합니다. 이번 글은 센스리더의 새로운 버전으로 인해 수정 및 개선되는 사항에 대해 정리 하려고 합니다.

먼저 지난 이야기를 조금 하자면 이미지의 alt 텍스트가 비어있을경우 센스리더는 파일명 읽어주는 문제가 있었습니다. 이 때문에 엑스비전테크놀러지에 제작 의도에 대한 문의를 한적이 있었는데 그 당시에는 웹사이트 대부분이 대형 사이즈의 이미지를 4등분 또는 조각조각 잘라서 페이지를 만드는 사이트가 대부분이였고 기타 이미지의 활용도가 지금과 같지 않았을 뿐만아니라 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 부터) 하니 기존에 파워버전을 사용하시던 분은 업그레이드를 통해서 이용이 가능하며 신규로 구매하시거나 윈도우 비스타 환경에서 사용해야 하는분은 프로페셔널 버전을 구매하면 된다고 합니다.
(기존 파워버전은 윈도우 비스타에서 작동하지 않는 문제가 있고, 프로페셔널은 가능합니다.)

보편화 기간

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

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

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

끝으로

이번 개선사항으로 인해 접근성을 고려해서 웹사이트를 제작하는 분들이나 직장에서 센스리더를 이용해 업무를 보시는 시각장애인 분들에게 많은 희소식이 될 수 있을 것 같습니다.
개인적인 아쉬운 부분이 있다면 엑스비전테크놀러지 공식사이트를 좀 고쳤으면 좋겠다는 생각이 드는데 이런 소식들이나 자료이용을 사이트에서 얻을 수 있으면 좋지 않을까 생각합니다.
브라우저 개선사항 외 기타 세부 개선사항에 대한 정보는 아래 링크에서 확인하실 수 있습니다.
센스리더 프로페셔널 세부정보

안녕하세요? 웹표준화팀 정찬명 입니다.

여러분은 대학시절 어떤 동아리 활동을 하셨나요? 저는 생긴것 답게 ‘독서토론동아리’에서 활동했었습니다. 작년 연말 팀 내에서 ‘가장 책을 많이 읽을 것 같은 사람’으로 지목되기도 했었는데 이것이 ‘생긴것 답게’의 증거라고 치죠.(주의:생긴것과 실제 다독률에는 현저한 차이가 있음) 대학시절에는 책이 너무 좋아서 동아리에 가입했다기 보다는 ‘이제 대학생도 되었으니 책도 좀 읽자’라는 의지가 있었는데요. 기대만큼 그 의지는 따라주지 못했지만 그 때 읽은 책들이 인생관에 적지않은 영향을 주었던것 같습니다. 제가 가입한 동아리에서는 ‘사회과학’서적을 주로 읽었습니다. 특히 유물론을 알기 쉽게 풀어쓴 책들을 재미있게 읽었죠. 저는 오늘의 포스팅을 위하여 다시 유물론 책을 뒤적거렸고 ‘양질전환의 법칙’이라는 말을 찾아 냈습니다. ‘질적인 변화는 양적인 변화에 의해서만 일어난다’ 라는 것이 바로 ‘양질전환의 법칙’이고 오늘의 팁은 여기서 부터 시작하겠습니다.

저희와 같은 직군에서 근무하시는 분들은 HTML/CSS 편집도구(드림위버, 에디트플러스…)를 하루중 얼마나 다루실까요? 하루종일 옆에서 시간을 측정하면서 지켜본 적이 없으니 정확히 알 수는 없지만 추측해 보면 하루중 절반이 넘지 않을꺼라고 생각합니다. 메일 읽어야죠. 성실하게 답장 해야죠. 구두로 대화를 하거나 회의에도 참석 해야죠. 포토샵도 다뤄야 하구요. 어떤 HTML 엘리먼트와 CSS 기법을 사용해야 하는지 창의적인 고민도 해야하고. 4대 브라우저에서 렌더링 테스트도 해야하고. 렌더링된 화면은 디자이너의 시안과 일치하는지 일일이 대조도 해야 하구요. 커피 마시고 담배 태우고 밥도 먹어야죠. 이런 시간들을 제외하고 남는 시간이 편집기를 다루는 시간이 되겠죠. 따라서 저는 하루중 8시간을 근무하지만 실제로 편집툴을 다루는 시간은 4시간 미만일 것으로 추정 하고 있습니다. 이 4시간동안 편집툴을 사용하는 개발자들의 작업 효율은 과연 비슷할까요?

제가 처음 드림위버의 단축키를 과도하게(?) 사용하기 시작한 계기는 위와같은 질문으로부터 시작되었습니다. ‘단순한 작업을 빠르게 처리하면 보다 창의적인 일에 시간을 소비할 수 있다’는 생각이었고 소규모 에이젼시에 근무하던 시절에는 정말로 대부분의 일정을 앞질러 나아갔습니다. 남는 시간에는 관련분야의 전문지식을 읽거나 습득한 지식을 블로그에 포스팅 하는 등 ‘생각대로’하면 되었습니다. 지금은 뭐 남는 시간에는 주로 매일같이 올라오는 ‘BTS’를 해결하고 있습니다만. ㅜㅜ (BTS : Bug Tracking System) BTS는 아무리 해치워도 끝이 없네요.(이게 다 IE 때문이야!) 제가 하고싶은 이야기는 여러분이 ‘질적으로 달라지기 위해서는 반드시 양적인 변화가 필요하다’라는 것이고 하찮아 보이는 드림위버의 단축키 활용은 여러분의 성장에 도움이 된다는 겁니다. 드림위버 단축키 활용법 소개하는데 ‘양질전환의 법칙’까지 들먹거리는건 제가 생각해도 참 유별나다 싶지만 제가 도구 사용법만 알려드리면 별로 재미가 없지 않나요?

이제 시작 할께요! 제가 즐겨 사용하는 단축키를 모두 소개해 드릴텐데요. 이러한 단축키들은 드림위버에서 기본적으로 제공하는 것도 있고 제가 만들어 사용하는 것도 있습니다. 제가 만들어 사용하는 단축키는 우측에 ‘사용자 정의’라고 적어두겠습니다.

• 엘리먼트 삽입
• div : Ctrl+Alt+D (사용자 정의)
• h1~h6 : ‘Ctrl+1′ ~ ‘Ctrl+6′
• ul : Ctrl+Alt+Shift+U (사용자 정의)
• ol : Ctrl+Alt+Shift+O (사용자 정의)
• li : Ctrl+Alt+Shift+L (사용자 정의)
• dl : Ctrl+Alt+Shift+F (사용자 정의)
• dt : Ctrl+Alt+Shift+T (사용자 정의)
• dd : Ctrl+Alt+Shift+D (사용자 정의)
• a : Ctrl+Alt+A (사용자 정의)
• p : Ctrl+Shift+P
• img : Ctrl+Alt+I
• strong : Ctrl+B
• em : Ctrl+I
• table : Ctrl+Alt+T
• form : Ctrl+Alt+F (사용자 정의)
• fieldset : Ctrl+Alt+S (사용자 정의)
• 테이블 편집
• 테이블 셀 합치기 : Ctrl+Alt+M
• 테이블 열 삭제 : Ctrl+Shift+’-’
• 테이블 행 삭제 : Ctrl+Shift+M
• 빠른 이동/선택/삭제
• 단어 단위로 이동 : Ctrl+방향키
• 단어 단위로 선택 : Ctrl+Shift+방향키
• 단어 단위로 삭제 : Ctrl+BackSpace, Ctrl+Del
• 주석 삽입
• HTML 주석 삽입 : Ctrl+Alt+C (사용자 정의)
• CSS/JS 주석 삽입 : Ctrl+Alt+Shift+C (사용자 정의)
• 코드 접기/펼치기
• 코드 짝 맞추어 접기 : Ctrl+Shift+C (사용자 정의)
• 선택한 코드 펼치기 : Ctrl+Shift+E
• 코드 자동완성 : Space, Ctrl+Space
• HTML Validation 검사 : Shift+F6
• 디자인뷰/코드뷰 전환 : Ctrl+`
• 열린 탭간 이동 : Ctrl+Tab

제가 즐겨쓰는 단축키는 모두 30개 정도이고 직접 만들어서 활용하는 ‘사용자 정의 키’는 13개 로군요. 보시면 아시겠지만 빈도 수가 높은 엘리먼트는 모두 단축키를 할당해서 삽입하고 있으며 직접 타이핑 하는 것은 거의 속성 뿐인데 이마저도 자동완성 기능을 사용합니다. 이것이 바로 제가 현재의 콘텐츠를 마크업하기 위한 최적의 구조를 고민하고 창의적인 CSS 기법에 보다 많은 생각의 에너지를 투자할 수 있는 비법 입니다. 한 순간에 모두 외우려고 하기보다는 필요할 때 마다 하나씩 순차적으로 셋팅하면서 머리보다 손으로 익히시는 것이 효과적 입니다.

사용자 정의 단축키 셋팅은 이렇게 하세요!

File > Keyboard Shortcuts. 키보드 단축키 대화상자를 엽니다. 

Current set > Duplicate set. 드림위버의 기본 단축키 셋에 대한 사본을 만듭니다. 

Name of duplicate set. 단축키 사본의 이름을 작성 하시구요. 

Commands. 단축키를 설정하고 싶은 명령을 찾아낸 다음 나만의 단축키를 만듭니다. 

만약 원하는 명령이 어디 숨어 있는지 찾기 어렵다면 Export set as HTML 명령으로 현재 설정된 기본 단축키 목록을 HTML 파일로 내보내기 하세요. 

누구나 쉽게 따라할 수 있고 매우 적은 노력으로도 ‘양질전환의 법칙’을 실천할 수 있는 팁이 아닐까요?(자뻑ㅡㅡ;)
감사합니다.

안녕하세요? 정찬명 입니다.
오늘의 드림위버 팁은 코드 들여쓰기 설정 입니다.

저희 웹표준화팀에는 들여쓰기 규칙이 있습니다.
그리고 드림위버는 생성되는 모든 엘리먼트의 들여쓰기와 줄 바꿈 설정을 사용자 정의 할 수 있습니다.

모든 코드의 들여쓰기를 일일이 Tab으로 결정하신다면 사실 이런 기능은 그다지 유용하지 않다고 생각하실 수 있습니다.
하지만 외주작업된 문서나 오래전에 작업된 여러사람의 손을 거친 헝클어진 코드를 ‘단 한 순간에 제자리로’ 돌려놓을 수 있다면 얼마나 좋을까요?

우선 코드를 자동으로 정렬시켜주는 단축키를 소개 드립니다.
모든 코드의 줄 바꿈과 들여쓰기는 코드 중첩에 따라 가지런히 자기 자리를 찾을 것입니다.

코드 자동 정렬 단축키 Alt+(C-A)
콘텍스트 메뉴 명령으로는 ‘Commands > Apply Source Formatting’ 입니다.

하지만 저희 팀 공식 가이드에 맞추어 드림위버를 미리 셋팅하지 않았다면 모든 엘리먼트의 들여쓰기와 줄바꿈은 드림위버 초기값에 의하여 결정될 것입니다.(자식이면 무조건 1Tab 들여쓰기 됨)

저희 팀 가이드에 의하면 기본적으로 부모와 자식간에 1Tab 들여쓰기 하지만 thead, tbody, tfoot, tr, li, dt, dd 와 같은 엘리먼트들은 예외처리를 두어서 들여쓰기를 하지 않도록 하고 있습니다. 이런 규칙들은 여러분들이 속한 조직에서 얼마든지 만드실 수 있죠.^^

따라서 팀내 가이드에 맞게 드림위버를 셋팅하는 방법을 설명해 드리겠습니다.
일단 엘리먼트들의 들여쓰기나 줄바꿈을 어느곳에서 설정하는지 아셔야 겠죠?

콘텍스트 메뉴 ‘Edit > Tag Libraries’ 에 위치해 있습니다.
이곳에서는 모든 엘리먼트의 ‘줄바꿈, 들여쓰기, 대소문자 설정’을 미리 셋팅할 수 있습니다.

우선 li 엘리먼트의 들여쓰기를 제거해 보도록 하겠습니다. Tag Library Editor 대화상자를 열었습니다.
li 엘리먼트의 부모는 ol, ul 이므로 li 엘리먼트를 직접 수정하지 않고 부모 엘리먼트인 ol, ul 엘리먼트를 찾아서 자식의 들여쓰기를 제어해야 합니다.

상기 대화상자를 보면 ol 의 Contents 항목에 대하여 Formatted But Not Indented 라고 옵션을 변경한 것을 볼 수 있습니다.
Formatted But Not Indented 라는 것은 ol 엘리먼트의 자식 엘리먼트(또는 텍스트)인 li 가 li에 지정된 코드포멧(줄바꿈, 대소문자)에 따르도록 하지만 ‘들여쓰기만은 따르지 말라는 명령’ 입니다.

따라서 ol의 자식들인 li 엘리먼트는 줄바꿈은 되지만 들여쓰기는 더이상 생기지 않을 것입니다.
이와 같은 원리로 table, thead, tbody, tfoot, ol, ul, dl 엘리먼트의 자식들에 대하여 들여쓰기 되지 않도록 팀내 가이드에 맞게 변경해 보세요.

이렇게 셋팅해 놓고 기존의 코드를 마구~마구~ 헝클어 놓은 다음 Alt+(C-A) 해보세요.
모든 코드가 다시 제 자리로 돌아와 있을 것입니다 ^^;

잘 안되시는분 손 드시면 자리로 가서 친절하게 개인지도 해드리겠습니다. ^^
감사합니다.

안녕하세요 웹표준화팀 최대영입니다.

지난 18일 여러가지 향상된 기능(자바스크립트의 구동속도 향상, 스마트 주소창, 피싱보호 기능 추가….)들을 갖추고 FF3의 정식버전이 릴리즈 되었습니다. 

 아래는 float속성을 지닌 div의 하위에 float속성을 가진 div가 위치하였을 경우 FF3와 FF2의 차이점에 대하여 정리하였습니다.

위의 소스를 보시면 parent의 div안에 child div가 양쪽 으로 float 속성을 가지며 놓여 있을 경우 parent부모의 표현이 FF2와 FF3에 차이점이 생겼더군요

아래와 같이 표현 되는 브라우저는 저희가 지원하고 있는 IE계열 모든 버전의 브라우저(5.5, 6.0, 7.0)와 FF2에서 아래와 같이 보여지게 됩니다.

그리고 아래와 같이 표현 되는 브라우저는 FF3와 Opera(test version 9.27), safari(test version 3.0.4)에서 아래와 같이 보여지고 있습니다.

FF2와는 달리 FF3에서는  parent div의 width를 auto로 인식하고 줄어 들어 보입니다.

위의 이슈는 parent div에 width값을 부여해 주시면 간단하게 FF2와 FF3의 View를 동일하게 맞출 수 있습니다.

그럼 즐거운 좋은 하루 되세요