컨퍼런스는 신청자 접수를 시작한지 20시간만에 650좌석이 모두 매진될만큼 큰 관심을 끌었습니다. 발표자들은 단순히 프리젠테이션을 공개하는 것에서 끝나지 않았고 책(실전 HTML5 가이드)으로 만들어 배포할 것을 처음부터 염두했습니다. 때문에 컨퍼런스 참석자들에게는 책자로 제공이 되고 참석하지 못한 분들께도 무료(CCL 3.0)로 배포가 되었습니다.

저는 CSS3에 대한 소개자료 집필과 발표를 맡았습니다. CSS3는 어떤 HTML 버전을 선택하더라도 사용할 수 있는 HTML 버전과 무관한 기술이기 때문에 특별히 HTML5에 대응한다고 보기는 어렵습니다. 단지 HTML5와 같은 시기에 개발이 되면서 브라우저 벤더들이 이를 현실로 구현했기 때문에 주목을 받은것 뿐입니다. 엄밀하게 따져서 굳이 HTML5 오픈 컨퍼런스에 포함되지 않아도 무방하지만 빠졌을 때 아쉬움이 남을 수 있는 섹션이라고 이해하시면 될 것 같습니다. 소개팅 자리에 그냥 이성이 등장하는 것보다 예쁘거나 멋진 이성이 등장하기를 바라는 것과 같은 마음으로 이해하시면 될 것 같습니다.

CSS3는 아직 권장 표준이 아닙니다. 그러나 대중적인 브라우저 벤더들은 일부 스펙(모듈)을 현실 속에서 이미 구현했습니다. text-overflow, word-wrap, @font-face와 같은 속성이나 규칙들은 이미 IE 6~8 브라우저에서도 사용할 수 있습니다. 마이크로소프트에서 이미 오래전에 제안하고 자체적으로 구현했지만 이제서야 CSS3 스펙으로 수용되면서 다시 세상의 빛을 보게 된 샘이죠. 이 밖에도 브라우저들은 실험적으로 또는 정식으로 CSS3 속성들과 선택자들을 앞다투어 지원하고 있습니다. W3C에 의해 권장 표준이 되는 것이 공식적인 표준이라 할 수 있지만 이미 많은 브라우저 벤더들에 의해 구현되어 있다면 사실상 표준이라고 볼 수 있으며 실무에서 유용하게 사용할 수 있습니다.

CSS3의 기교와 데모에 관한 자료들은 검색을 통해서 외국의 자료들을 쉽게 접하실 수 있습니다. 그러나 IE 점유율이 97%에 이르는 한국의 상황을 감안하면 한국의 웹 개발자에게는 뭔가 추가적인 정보를 제공해야 한다고 생각 했습니다. 최신 표준 브라우저의 지원 현황 뿐만 아니라 IE 6~8 브라우저에서도 사용할 수 있는 기법들을 소개하고 만약 IE 브라우저가 지원하지 않는 속성이라면 fallback을  제공하는 방법도 소개해야 한다고 생각 했습니다. CSS3가 아무리 뛰어난 기술이라 해도 낡은 브라우저에서 사용할 수 없다면 흥미는 곧 반감될 것입니다. 여기서 fallback이란 CSS3를 지원하지 못하는 상황에서 이를 대체할 수 있는 대안들 입니다. 마이크로소프트의 filter 속성이나 자바스크립트 라이브러리가 그러한 예 입니다.

CSS3를 소개하는 것이 저의 역할이었지만 저는 다음과 같은 메시지를 가장 중요하게 기억해 달라고 청중에게 부탁 했습니다.

더 좋은 도구를 선택한 사용자에게는 더 향상된 경험을 주자. 이것은 좋은 도구(브라우저)를 선택하지 않은 사용자를 차별하는 것이 아니며 그래서도 안된다. 중요한 것은 ‘경험의 질’을 높이는 것이지 어떤 사용자를 ‘포기’하자는 것이 아니다.

최근 웹 표준을 준수하지 않는 낡은 브라우저라는 이유로 IE6 브라우저를 지원하지 않는것을 마치 대단한 업적이 되는 것과 같이 말하는 것은 옳지 않다고 말했습니다. 아직까지 상당히 많은 사용자 수를 확보하고 있는 낡은 브라우저(IE6, 국내 42.84%)를 지원하지 않는 것은 웹 표준의 목표인 상호 운용성(하위 호환성이 포함된 개념)과 대치되는 것이라고 설명 했습니다. 웹 표준은 목표가 아니라 수단일 뿐입니다. IE6가 웹 표준 준수율이 낮다는 이유로 배척하는 것은 옳지 않다고 생각합니다.

발표자료(참고자료) 내려받기 + 북마크

• 실전 HTML5 가이드 내려받기 - http://html5.creation.net/html5-guide.pdf
• CSS3 소개 – http://naradesign.net/ouif/css3/
  • CSS3 소개(인쇄용) – http://naradesign.net/ouif/css3/documentation.html
  • CSS3 소개(발표용) – http://naradesign.net/ouif/css3/presentation.html
• 참고(구글에서 제공하는 HTML5/CSS3 프리젠테이션) 추천 – http://slides.html5rocks.com/

몇 가지 오류 정정

• gradient 속성과 animation 속성을 설명하는 과정에서 ‘linear’라는 단어의 발음을 ‘라이니어’라고 잘못 발음 했습니다. ‘리니어’라고 발음해야 합니다.
• 프리젠테이션에는 흥미를 유발하기 위하여 ‘여우’가 두 번 등장하고 ‘늑대’는 아예 등장하지도 않았는데 제가 ‘늑대’라고 잘못 말했습니다. ‘여우’로 정정 합니다. 
• ‘우리나라’를 ‘저희나라’라고 잘못 표현했습니다. ‘저희나라’라는 표현은 청중이 외국인인 경우에 ‘우리나라’를 겸손하게 표현하기 위하여 사용할 수도 있는 표현이지만 이를 포함한 모든 상황에서 국가를 낮추어 부르는 것은 적절하지 못한 표현이라는 의견이 있다는 것을 뒤늦게 알았습니다.

두 가지 아쉬운 점

• 유료 세미나 자료를 무료로 웹에 공개하는 것이 불편하다고 느끼는 분이 있어서 제 마음도 불편했습니다. 이 세미나를 주최한 누구도 특정 계층에게만 좋은 정보가 폐쇄적으로 공유되는 것에 찬성하지 않을 것입니다. 이 컨퍼런스는 HTML5 ‘독점’ 컨퍼런스가 아닙니다. 지금은 생각이 바뀌셨길 바랍니다.
• CSS3 또는 제 발표에 대하여 궁금증을 가진 분들은 Q&A 시간에 질문자로 선택받지 못했습니다. 편파적인 진행에 감사드립니다. (농담입니다. ㅎㅎ)

웹 표준 프로젝트 멤버, 발표자, 후원자, 자원봉사자, 긍정적이든 부정적이든 여러가지 피드백을 보내주신 여러분들께 두루 감사드립니다.

제가 요즈음 싸부로 모시는 행복한고니의 jQuery 강의를 들을 기회가 있었는데 이런걸 알려 주더라구요. jQuery를 잘 쓰려면 먼저 세 가지 순서를 기억해야 하는데 그것은 바로 ‘선택하고-실행하고-조정하라’는 것이었습니다. 오늘 제 포스팅은 ‘선택’과 관련된 이야기 입니다. jQuery 코드는 아직 한 줄도 없지만 사실 저는 jQuery 강좌를 시작한 것과 다를 바 없습니다.

저 jQuery 잘하냐구요? 아니요. 저는 제가 이미 알고 있는 것들을 글로 옮기는 일에는 사실 흥미가 없습니다. 주로 모르는 것을 잘 알기 위해 글을 쓰는 편이죠. 얼마전 라디오를 듣는데 어떤 교수님께서 이런 고백을 하십니다. "교수들은 사실 학생들을 가르치는 척 하면서 배운다" 라구요. 이것은 교수님들만의 이야기는 아닌것 같아요.

참, 그리고 한 가지 더 추가 하자면 CSS는 낡은 브라우저(IE6)에서 선택자 사용을 지원하지 못하는 호환성 문제가 있지만 자바스크립트는 그렇지 않습니다. jQuery는 아래 표시된 모든 브라우저에서 똑같이 선택자 사용을 지원합니다. 이것 또한 jQuery의 장점 이라고 할 수 있겠네요. CSS를 이용해서 뭔가 선택하지 못하는 경우 jQuery를 이용하면 선택할 수 있으니까요.

가령 게시판을 제작할 때 짝수 행 <tr> 만을 선택하여 배경색을 지정하려는 경우 tr:nth-child(even) 이라는 CSS 선택자를 사용할 수 있지만 IE 6~8 브라우저는 아직 CSS 3 선택자를 지원하지 않기 때문에 표현이 불가능 합니다. 그러나 jQuery는 이렇게 ‘선택+실행’ 할 수 있습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
  $('tr:nth-child(even)').css('background','red');
});
</script>

odd는 홀수를 의미하고 even은 짝수를 의미하죠. 아직 자바스크립트 또는 jQuery를 배울만한 동기가 없으셨던 분들께는 새로운 동기부여가 되었으면 좋겠습니다. 아주 쉽다는 것을 깨닫고 한 번 사용하기 시작하면 걷잡을 수 없이 빠져드는 매력이 있답니다. 그러나 과유불급. 어느곳에 쓰고 어느곳에는 쓰지 말아야 할지 정확히 알고 쓰는것이 더 중요합니다. HTML/CSS 만으로도 충분히 가능한 일을 JS에게 완전히 의존하는 코드를 보면 저는 이렇게 이야기 한답니다. "건방지게 어딜 나서? 겸손할 줄 알아야지. 넌 항상 HTML/CSS 다음이야." 라구요.

문제 1 _ CDK는 무엇의 약어 입니까?
[CSS Design Korea]

문제 2 _ KWAG은 무엇의 약어 입니까?
[Korea Web Accessibility Group]

문제 3 _ CSS, HTML, XHTML 무엇의 약어 입니까?
[Cascading Style Sheet, Hyper Text Markup Language, eXtensible Hyper Text Markup Language]

문제 4 _ W3C는 무엇의 약어 입니까?
[World Wide Web Consortium]

문제 5 _ 이 이미지가 사용되는 테스트의 이름은 무엇입니까?
[Acid2 Browser Test]

문제 6 _ DOCTYPE 선언은 닫힘 태그가 있다?
[X - 없습니다.]

문제 7 _ XHTML 태그의 속성 및 값은 소문자만 사용할 수 있다?
[X - 속성은 소문자로만 작성해야 하나 값은 대문자 사용 가능합니다.]

문제 8 _ 오래된 웹 브라우저들을 위해 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 Standards Mode를 대신하여 사용되는 웹 브라우저의 기술을 나타내는 용어는?
[Quirks Mode - Quirks Mode는 IE5 브라우저를 흉내낸다]

문제 9 _ 다음 중 대중적인 브라우저에서 Quirks Mode로 랜더링 되는 DTD를 모두 고르시오.
1. DTD 없음.
2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
5. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
6. <!DOCTYPE html>
[1번, 5번. 참고 - http://naradesign.net/wp/2007/03/27/118/]

문제 10 _ 하이퍼링크에서 밑줄을 없애기 위한 방법으로 맞는 것은?
1. a { text-decoration:no underline; }
2. a { decoration:no underline; }
3. a { text-decoration:none; }
4. a { underline:none; }
[3번]

문제 11 _ 소문자로 작성된 영문 단어의 첫 글자를 대문자로 바꾸는 CSS 스타일은 무엇입니까?
1. CSS로는 불가능하다.
2. { text-transform:uppercase; }
3. { text-transform:capitalize; }
[3번]

문제 12 _ IE6 브라우저에서 float과 margin을 같은 방향으로 설정 했을 때 발생하는 더블 마진 버그를 예방하는 방법은?
1. width 값을 부여한다.
2. { position:relative; }
3. { display:inline; }
4. { zoom:1; }
[3번 - IE6 브라우저는 float과 margin의 방향이 같은 경우 두 배의 마진이 발생한다. 이 때 display 속성을 inline으로 바꾸면 더블 마진 버그가 발생하지 않는다. 그러나 float 속성이 부여된 요소는 display 속성이 block이 된 상태로써 이 값은 어떤 경우라도 덮어 쓸 수 없기 때문에 이 요소의 display 속성은 여전히 block 이다.]

문제 13 _ CSS 속성 중 cursor 속성의 값으로 올바르지 않은 것은?
1. default
2. help
3. pointer
4. hand
[4번 - hand라는 값은 MS IE 전용 값으로써 비 표준 속성이다. 그러나 IE 5.5 버전 이하의 브라우저는 pointer라는 값을 지원하지 않고 hand라는 값을 지원하는데 hand라는 값은 pointer와 같은 모습으로 랜더링된다.]

문제 14 _ CSS의 속성 가운데 박스의 border-color 속성이 지정되지 않은 경우 border-color의 값은 color 속성의 값으로부터 상속 받는다?
[O - 정답 입니다. border-color의 값이 지정되지 않은 경우 color의 값은 border-color의 값이 됩니다. 즉, border-color 를 지정하지 않은 요소에 color:blue 값을 지정하는 경우 이 요소의 border-color는 blue가 됩니다.]

문제 15 _ <input> 요소의 type 속성은 생략할 수 있다?
[O - 생략할 수 있습니다. 생략하는 경우 type 속성의 기본 값은 text가 됩니다. 한편 사용자의 입력 내용을 서버로 전송하려면 반드시 name 속성을 사용해야 합니다. 그러나 문법적으로는 어떤 속성도 필수로 요구하지 않습니다.]

문제 16 _ Transitional DTD를 사용하는 HTML 또는 XHTML 문서에서 CSS font 속성은 table 요소에 상속되지 않는다?
[X - 상속 됩니다. 그러나 DTD가 Quirks Mode인 경우에는 상속되지 않습니다.]

문제 17 _ <textarea> 요소는 row 속성과 col 속성을 생략할 수 있다?
[X - 반드시 작성해야 하는 속성으로서 생략할 수 없습니다.]

문제 18 _ CSS 속성 중 background-color는 Javascript에서 backgroundcolor로 표기한다?
[X - 대소문자에 유의해야 합니다. Javascript 에서는 CSS 속성을 카멜 케이스로 표기하는데 background-color는 backgroundColor 라고 표기 합니다.]

문제 19 _ <button> 요소에 type 속성을 지정하지 않는 경우 type 속성의 기본값은 button 이다?
[X - button  요소에 type 속성을 지정하지 않으면 기본 값은 submit이 되어 form을 전송하게 됩니다. 따라서 form을 전송하기 위한 목적이 아니라 단순하게 UI를 조작하기 위한 버튼(예:닫기, 인쇄) 이라면 type 속성을 button 이라고 정확히 명시해 주어야 합니다. 한편 IE6~7 브라우저는 button 요소에 type 속성을 지정하지 않는 경우 type 값이 button으로 동작하므로 혼동하지 않도록 유의해야 합니다.]

문제 20 _ XHTML 1.0 문서는 어떤 종류의 DTD를 가지고 있습니까?
[Strict, Transitional, Frameset]

문제 21 _ 웹 접근성 국가 표준의 4가지 원칙은 무엇입니까?
[인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 신기술적 진보성(Robust)]

문제 22 _ CSS를 발명한 사람은 누구 입니까? 두 명을 고르세요.
1. Eric Meyer
2. Håkon Wium Lie
3. Tim Berners Lee
4. Bert Bos
5. Jeffrey Zeldman
[2번, 4번]

문제 23 _ 다음은 HTML DTD 문서가 문법을 정의하는 기호에 관한 설명입니다. 맞지 않는 것은?
1. A | B : A 또는 B로써 순서에 무관하게 사용할 수 있다.
2. A || B : A 또는 B로써 순서를 지켜야 한다.
3. A, B : A 그리고 B는 순서를 지켜야 한다.
4. A & B : A 그리고 B는 순서에 무관하다.
[2번 - || 기호는 DTD에 없습니다.]

문제 24 _ 다음은 HTML DTD가 문법을 정의하는 기호에 관한 설명입니다. 맞는 것을 모두 고르시오. 
1. A : A는 필수적이며 한 번만 사용할 수 있다.
2. A+ : A는 필수적이며 한 번 이상 사용해야 한다.
3. A? : A는 생략하거나 한 번만 사용할 수 있다.
4. A* : A는 생략하거나 한 번 이상 사용할 수 있다.
5. +(A) : 추가적으로 A를 사용할 수 있다.
6. -(A) : 예외적으로 A는 사용할 수 없다.
[1번, 2번, 3번, 4번, 5번, 6번 모두 맞는 설명 입니다.]

문제 25 _ 웹 접근성 준수를 의무화한 이 법률의 이름은 무엇입니까?
[장애인차별금지 및 권리구제 등에 관한 법률로써 줄여서 장차법이라고도 부릅니다. 이 법률은 웹 접근성 뿐만 아니라 사회 전반에 걸쳐 발생하는 장애인의차별에 관한 문제를 다루고 있습니다.]

문제 26 _ <title> 요소는 생략할 수 있다?
[X - 생략할 수 없습니다.]

문제 27 _ XHTML 문서에서 fieldset 요소를 사용하는 경우 legend 요소는 생략할 수 있다?
[O - 생략할 수 있습니다. 그러나 HTML 문서에서는 생략할 수 없습니다.]

문제 28 – HTML/XHTML Transitional 문서에서 address 요소는 자식 요소로 어떤 블럭 요소도 포함할 수 없다?
[X - 거의 모든 블럭 요소를 포함할 수 없습니다. 그러나 유일하게 P 요소를 포함할 수 있습니다. 한편 HTML/XHTML Strict 문서에서는 P 요소를 비롯하여 어떤 블럭 요소도 포함할 수 없습니다.]

문제 29 – inline 요소로 분류되면서도 block 요소와 inline 요소를 모두 포함할 수 있는 요소 이름을 아는대로 쓰시오.
[button, map, object, iframe, applet, ins, del]

문제 30 – iframe 요소는 HTML5(WD) 버전에서 폐기 되었다?
[X - 2010현 현재 초안에 의하면 폐기되지 않았습니다. 현재라는 단서를 붙인 것은 스펙이 아직 확정되지 않았기 때문입니다.]

문제 31 - CSS3(WD)의 border-radius 속성을 이용하여 좌측 상단의 모서리를 둥글게 처리하고자 한다. 이 때 표준 초안에서
제안하고 있는 속성의 표기법은?
1. border-radius-left-top
2. border-left-top-radius
3. border-radius-top-left
4. border-top-left-radius
[4번 - border의 수직(top, bottom) 방향을 먼저 작성하고 수평(left, right) 방향을 작성한 다음 radius를 작성 합니다.]

문제 32 – ‘I18N’은 무엇의 약어 입니까?
[internationalization(국제화) - 첫 글자인 'i'와 마지막 글자인 'n' 사이에 포함된 알파벳의 개수가 '18'개인데 이것을 'i18n' 으로 줄여서 표기하고 있습니다. W3C의 국제화 활동 참고. http://www.w3.org/International/]

고생하셨습니다. 몇 문제 맞히셨나요? 어떤 문제가 어렵게 느껴지셨나요? 새롭게 배운 지식이 있으셨나요? 너무 많이 틀렸다고 낙심하지는 마세요. 제가 주관적으로 판단하건데 20문제 이상 맞히셨다면 충분히 훌륭하다고 생각하구요. 16문제 이상 맞히신 분들도 양호한 편이라고 생각합니다. 문제는 16문제 미만인데요. 내년에도 이러시면 곤란해요. ^^

1. 제1회(2006년 9월) - 제1회 Css Design Korea 참가 후기.
2. 제2회(2006년 12월) - 2nd Web Standards Day, 웹 표준 개발자들의 잔치.
3. 제3회(2009년 2월) - 웹 표준을 넘어서…

최근에 만났던 몇몇 분들께서는 저를 보고 마치 연예인 보는것 같았다는 말씀들을 해주셔서 좀 쑥스럽기도 한데요. 제가 이 행사를 통해서 신현석님, 조훈님, 윤석찬님, 만박님을 처음 뵐 때에도 그랬었답니다. ㅋㅋㅋ

웹 표준이라는 주제에 관심을 가지고 알고자 했을 때 이 분들이 없었다면 무척 많은 시행착오가 있었을꺼예요. 시행착오는 뭐 지금도 하고 있기는 하지만 이 분들 덕분에 조금 더 쉽게 지나왔기에 항상 존경하고 스승같이 생각하고 있습니다. 때때로 이 분들의 어떤 생각에는 공감하지 못하는 상황에서도 그 사실만은 변함이 없답니다.

제4회 웹 표준의 날 행사 분위기는 참여했던 다른 분들의 포스팅을 통해서도 확인하실 수 있기 때문에 행사 풍경을 전해드리는 것은 생략하고 웹 표준의날에 대한 개인적인 바램을 적어볼까 합니다.

웹 표준의날은 동종 업계에서 동료 의식을 지닌 분들이 모여 옳은 철학과 최신 정보와 인맥을 교류하는 장으로 자리매김 되었다고 생각합니다. 지금도 부족함이 없지만 더 많은 것을 바란다면 ‘이 분야의 칭찬거리’를 발굴하는 장으로 거듭났으면 합니다.

저는 제2회를 제외하고 모두 발표자로 참여했었는데요. 이제는 저보다 더 뛰어난 후배님들께서 나서주셨으면 합니다. 저와 같거나 오히려 더 뛰어난 능력을 가진 분들이 많다는 것을 저는 잘 알고 있습니다.  아무리 나이가 어리고 경력이 짧아도 자기 분야에 대한 옳은 철학과 열정을 지닌 분들을 존경합니다. 다음 웹 표준의 날에는 그런 후배님들이 나와서 웹 표준의 날을 상큼하게 빛내 주셨으면 좋겠습니다. 

그리고 이번에 새롭게 시작된 골든벨 형식의 웹 표준 경진대회도 좋았는데요. 다음 회차부터는 ‘유니버설 웹 어워드’ 라는 주제로 특정 기간 동안 제작된 웹 사이트 가운데 웹 표준과 웹 접근성을 잘 지켜서 장애가 있고 없고를 떠나 누구나 이용할 수 있도록 만들어진 그런 사이트를 ‘추천하고 발굴하고 시상’하는 것은 어떨까요?

이런 상이 있다면 웹 표준의 날은 어쩌다 한 번 오는 그런 날이 아니라 누구나 손 꼽아 기다리는 그런 날이 되지 않을까요? 그 어떤 경품보다도 값진 상이 되지 않을까요?

그리고 갑자기 쌩뚱맞을 수도 있지만 저와 같은 업계에서 저와 같은 직군 ‘웹 디자이너, 웹 퍼블리셔, UI 개발자, 웹 개발자’로서 종사하는 동료 여러분께 한 가지 제안을 드리고 싶습니다. 일은 넘치고, 전문 인력은 턱없이 부족하고, 연봉 수준은 이런 상황에 맞지 않게 너무 짜고, 지금 하고 있는 일은 마치 노동집약형 산업이 아닐까? 라고 생각하지는 않으시는지요?

이런 상황을 타개하는 방법으로써 저는 다음과 같은 행동 강령이 필요하다고 생각합니다.

1. 첫째, 매일 야근을 하지 않으려면 더 많은 전문 인력이 시장에 투입되어야 합니다. 하루라도 빨리 부사수가 채용되길 원하신다면 여러분들의 지식을 아낌없이 회사 밖에 있는 후배들에게도 나누어 주세요.
2. 둘째, 노동집약형 산업을 벗어나려면 부가 가치를 만들어야 합니다. 완벽한 HTML/CSS/JS 코드를 생산하는 일보다 더 중요한 것은 그 코드의 가치를 인정 받는 일 입니다. 여러분의 코드가 단순히 문법적으로만 유효한 코드가 아니라는 것을 증명해 주세요.
3. 셋째, 협업하는 분들이 웹 표준 모른다고 구박만 하지 마시고 친절하세요. 우리가 하고 있는 일의 가치를 가장 가까이에서 제대로 평가해 줄 수 있는 분들이고 저희를 필요로 하는 분들이기 때문입니다.

CSS3 말고 요런걸 발표할껄 그랬나요? ^^; CSS3 발표자료는 여기 있습니다.  9 Useful CSS3 Properties.

• ul > li > (p+p)
• ul > li > (hx+p)
• ul > li > dl > (dt+dd)
• dl > (dt+dd) + (dt+dd) + (dt+dd) …
• dl(dt+dd) + dl(dt+dd) + dl(dt+dd) …

오늘 제가 선택한 방법은 첫 번째 방법 이었습니다. 이 방법이 정답이라고 단적으로 말하기는 어렵고 다른 방법이 틀렸다고 말하기도 어렵습니다. HTML 구조에 정답이 있는것은 아니니까요. 하지만 제가 첫 번째 마크업을 선택한 이유를 설명드려 보겠습니다. 솔직히 말씀 드리자면 이 선택에 대한 확신은 아직 없습니다.

• 질문과 답변 목록은 ‘목록’ 이기 때문에 일단 ‘ul, ol, dl’ 요소 가운데 하나를 사용하는 것이 적합하다고 판단 했습니다.
• ‘ol’ 목록은 항목의 배치 순서에 의미가 있는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서를 바꿔도 의미가 달라지지 않는 비 순차 목록이라고 판단해서 제외 했습니다.
• ‘ul’ 목록은 항목의 배치 순서에 의미가 없는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서에 의미가 없다고 판단해서 사용 했습니다.
• ‘dl’ 목록은 정의 목록으로써 질문과 답변 형식에 사용해도 괜찮다고 판단 했지만 한 쌍의 ‘dt+dd’ 요소를 한 번 더 감싸주는 마크업이 필요한 경우 CSS 스타일을 적용하는데 제한이 발생하기 때문에 제외 했습니다.
• ‘dl+dl’ 형식은 ‘dl’ 요소를 ‘항목의 그룹핑’ 아닌 단 하나의 ‘항목’에만 적용했기 때문에 의미에 맞지 않다고 판단해서 제외 했습니다.
• ‘li > dl > (dt+dd)’ 형식은 목록 안에 또 다른 목록을 포함시키는 형태로써 하나의 항목을 두 번이나 목록 요소로 중첩 마크업 하는 것이 남용이라고 판단해서 제외 했습니다.
• ‘ul > li > (p+p)’ 형식으로 마크업 하는 것은 ‘질문/답변’을 모두 각각의 문단으로 볼 수 있기 때문에 적합하다고 판단 했습니다. 그러나 ‘질문’과 ‘답변’을 동일한 요소 ‘p’로 마크업 했다는 점에서 여전히 뒷맛이 개운치가 않네요.
• ‘li > (hx+p)’ 형식은 목록 안에 제목(hx) 요소가 들어가는 형태로써 의미상 가장 적합하다고 판단 했지만 목록 안에서 ‘hx’ 요소를 사용하는 것이 ‘hx’를 남용하는 것은 아닌지 구조의 적절함에 확신이 서지 않아서 제외 했습니다. 그러나 만약 ‘li>(p+p)’ 구조를 선택하지 않았다면 이것을 선택했을 것입니다.
• 만약 한 쌍의 ‘(dt+dd)’ 요소를 ‘dl’ 요소로 직접 감싸는 대신 ‘di’(definition item)와 같이 한번 더 묶어주는 마크업 요소가 존재 했다면 저는 ‘dl’ 요소를 선택했을 것입니다. 제가 이상적이라고 생각하는 마크업 구조는 ‘dl > di > (dt+dd)’ 이런 구조 인데 ‘di’ 요소는 실제로는 존재하지 않는 요소이므로 착오 없으시길 바랍니다.

a 요소에 유효한 URL 사용하기

질문은 ‘a’ 요소로 마크업 되어 있고 ‘href’ 값으로는 유효한 ‘URL’(#a1, #a2, #a3 …)이 포함되어 있습니다. 유효하다는 것은 링크의 목적지가 존재하고 링크 주소를 따라가면 기대했던 자원이 있다는 것을 의미 합니다. 만약 누군가에게 특정 ‘질문/답변’ 항목을 링크 주소를 통해 알려주어야 한다면 여러분은 마우스 우측 버튼을 눌러 ‘링크 주소 복사’ 기능을 이용할 수 있을 것입니다. URL이 유효하지 않다면 이런 편의는 불가능한 일입니다. ‘href’ 값으로 의미 없는 값 ‘#’을 넣는다면 클릭 또는 키보드 Enter를 내리 쳤을 때 키보드 포커스는 페이지 맨 처음으로 이동해 버리기 때문에 화면 낭독기 사용자(시각 장애인)는 처음부터 다시 탐색을 시도해야 합니다. 유효한 URL을 작성하는 것은 사용성과 접근성을 모두 높여주는 일로써 되도록 모든 링크에는 유효한 URL 값을 포함해야 합니다.

관련글

• FAQ의 의미 있는 마크업은? - 추지호
• 목록(ol ul dl)의 올바른 활용 문제 – 백남중

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.

중첩 목록(ul>li>ul>li) 구조로 마크업 했고 현재 페이지 활성 상태를 표시 하려면 해당 li 요소에 .active 클래스를 추가(서버측 스크립트로)해 주면 됩니다. 계층 구조가 무한대로 깊어지는 상황도 처리가 가능 합니다. ‘+/-’ 토글 버튼에 키보드가 접근해서 하위 목록 토글 인터렉션을 조작할 수 있습니다.

예제를 새 창으로 보기

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.

메뉴 건너 뛰기 링크란 하나의 웹 사이트에서 모든 페이지에 걸쳐 반복해서 등장하는 글로벌 네비게이션과 로컬 네비게이션을 건너 뛸 수 있는 링크를 말합니다. 마우스를 함께 사용하는 사람은 이 링크가 왜 필요한지 알기 어렵지만 키보드만으로 웹을 탐색하는 사람들에게는 상당히 중요한 의미를 갖습니다.

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A) 2.4.1 블럭 우회: 여러 웹 페이지에서 반복되는 콘텐츠 블럭을 우회할 수 있어야 한다. (수준 A)

WCAG 2.0 : 2.4.1

헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법

시각 장애인은 마우스 포인터를 볼 수 없기 때문에 키보드만으로 웹을 탐색을 합니다. 물론 Tab키와 방향키 만으로 탐색을 하는 것은 아닙니다. 화면 낭독 프로그램은 ‘링크만, 헤딩만’ 따로 모아서 탐색할 수 있고 특히 ‘링크’ 텍스트를 설명력 있게 제공하는 것도 당연히 좋지만 적절한 ‘헤딩’을 제공하는 것은 더더욱 중요합니다. 헤딩은 콘텐츠 블럭을 건너 뛸 수 있는 단서가 되기 때문이고 시각 장애인에게는 불필요한 콘텐츠를 잘 건너 뛰게 해주는 것이 매우 중요합니다. 시각이 있는 사람들도 자각하지 못하는 사이에 이미 불필요한 콘텐츠를 무시하는 것에 학습되어 있습니다. 눈에 잘 띄도록 만든 배너를 빠르게 무시하는 것은 방법이라기 보다 본능적인 반응에 가깝습니다. 헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법 입니다.

반복되는 콘텐츠 블럭을 우회하는 방법

콘텐츠와 콘텐츠 사이를 빠르게 건너뛰기 위하여 시각 장애인에게 헤딩(h1, h2, h3, h4, h5, h6) 정보가 중요하다는 사실을 말씀드렸습니다만 사실 오늘의 주제는 ‘메뉴 건너 뛰기’ 입니다. 메뉴에 헤딩을 제공하는 사람은 별로 없고 제공해야 한다는 지침도 없으며 오히려 제공했을 때 더 어색하고 불편할 수 있습니다. 따라서 메뉴에는 보통 헤딩이 없습니다. 하지만 한 두 페이지 정도만 탐색해 보면 시각이 있고 없고를 떠나서 누구나 그것이 메뉴라는 것을 알게 됩니다. 같은 패턴의 데이터가 반복 되기 때문입니다.

이렇게 모든 페이지마다 지속적으로 반복되는 네비게이션들을 키보드 사용자는 어떻게 탐색해야 할까요? Tab키를 계속 누르고만 있어야 할까요? 다 필요해서 있는 것이니 반복 되더라도 계속해서 탐색하고 듣고 있어야 하는 것일까요? 아닐껍니다. 건너 뛸 수 있는 장치를 제공해 주어야 합니다. 이미 위에서 ‘WCAG 2.4.1′ 구절을 인용했지만 블럭을 우회할 수 있어야 한다는 지침은 ‘수준 A’ 입니다. 수준 A는 최소한 지켜야 하는 수준으로써 가장 중요하다는 의미와 맞닿아 있습니다. 우리는 반복되는 콘텐츠 블럭을 건너 뛸 수 있도록 하기 위하여 ‘메뉴 건너 뛰기’ 링크를 제공할 수 있습니다.

메뉴 건너 뛰기 링크에 관한 쟁점

메뉴 건너 뛰기 링크를 제공해야 한다는 의견에는 거의 모든 웹 접근성 전문가들이 동의하지만 그것을 제공하는 방법에는 크게 다음과 같은 세 가지 다른 구현 방법이 있습니다.

• 메뉴 건너 뛰기 링크는 시각이 있는 사람도 볼 수 있도록 웹 페이지 최 상단에 항상 노출해야 한다.
• 메뉴 건너 뛰기 링크는 시각이 있는 사람에게는 방해가 되므로 숨김 처리하고 키보드가 접근할 때에만 노출해야 한다.
• 메뉴 건너 뛰기 링크는 시각이 있는 사람에게는 방해가 되므로 항상 숨김 처리 해야 한다.

여러분은 어떤 의견에 동의 하시나요? 저는 두 번째 방법을 가장 좋은 방법이라고 생각하고 있습니다. 만약 여러분이 ‘네이버’ 웹 페이지를 개발한다면 여러분들은 모든 네이버 웹 사이트 최 상단에 ‘메뉴 건너 뛰기’ 링크를 넣어야 한다고 생각 하시나요? 저는 그렇게 생각하지 않습니다. ‘메뉴 건너 뛰기’ 링크는 시각이 있는 사람에게는 오히려 건너 뛰고 무시해야 할 콘텐츠가 됩니다. 마우스를 조작하는 사람에게 이 링크는 필요치 않으니까요.

그렇다고 해서 항상 숨김 처리 하는 것도 문제가 됩니다. 왜냐하면 시각 장애인만 이 링크를 사용하는 것은 아니기 때문 입니다. 시각은 있지만 손과 발을 자유롭게 사용할 수 없는 지체 장애인은 마우스 스틱이라는 빨대 모양의 막대를 이용해서 키보드만으로 웹을 탐색 합니다. 손과 발이 자유롭지 못하기 때문에 입에 막대를 물고 키보드를 두드립니다. 메뉴 건너 뛰기 링크에 접근 했을 때 링크가 화면에 보여야 하는 이유는 이렇게 시각은 있지만 키보드만을 사용할 수 밖에 없는 장애인들에게 유용하기 때문 입다. 간혹 TV에서 팔이 없는 지체 장애인이 발로 마우스를 조작하는 모습을 본 기억이 있으실 껍니다. 하지만 발이 있다고 해서 모든 지체 장애인이 발로 마우스를 자유롭게 조작하는 것은 아닙니다.

키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크

키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크 예제를 만드는 것은 정말 쉽습니다. 자바스크립트는 필요치 않고 HTML과 CSS만으로 가능합니다. <a> 요소의 width, height, overflow 속성을 조절해서 기본적으로 화면에 보이지 않도록 처리한 다음 a:focus 상태일 때에는 width, height 값이 auto가 되도록 처리하는 것입니다.

글로벌 네비게이션을 본문 콘텐츠보다 늦게 마크업 하는 경우

글로벌 네비게이션을 본문 콘텐츠보다 나중에 마크업 하는 경우도 있습니다. 화면에 보이는 것과 마크업 순서를 다르게 처리 한다고 해서 항상 논리적인 순서가 잘 못 되었다고 말 할 수는 없습니다. 지금 제가 사용하고 있는 Textyle 블로그와 WordPress 블로그는 모두 본문 콘텐츠가 먼저 마크업 되고 글로벌 메뉴가 나중에 마크업 되어 있습니다. 이런 경우라면 ‘메뉴 건너 뛰기’ 링크보다 ‘본문 건너 뛰기’ 링크가 더 적절할 것이고 나아가 ‘건너 뛰기 링크’는 생략해도 됩니다. 본문 콘텐츠는 모든 페이지에서 반복되는 내용도 아니고 많은 링크가 포함되어 있지도 않기 때문 입니다.

지나치게 많은 ‘** 건너 뛰기’ 제공은 오히려 공해

반복되는 블럭을 건너 뛰어야 한다는 지침을 잘 못 이해해서 모든 웹 페이지 상단에 굉장히 많은 ‘** 건너 뛰기’ 링크를 제공하는 경우가 있습니다. 이것은 오히려 건너 뛰어야 할 공해 콘텐츠가 됩니다. 건너 뛰어야 할 것은 ‘반복되는 블럭’인데 마치 한 페이지의 ‘목차’ 처럼 제공하는 경우가 있다는 것입니다. 건너 뛰기 링크는 보편적인 경우에 ‘메뉴 건너 뛰기’ 하나면 충분 합니다. 한편 모든 페이지에서 반복되지는 않지만 상당히 많은 버튼이나 링크가 존재한다면 해당 블럭을 건너 뛸 수 있도록 건너 뛰기 링크를 제공하는 것이 좋습니다.

• 네이버 뉴스 클러스터링 – 키보드가 접근 할 때 화면에 보이는 메뉴 건너 뛰기 링크 하나를 제공하고 있다.
• 네이버 스마트에디터 베이직(오픈소스) - 본문에 등장하는 콘텐츠로써 키보드가 접근 할 때 도구 모음을 건너 뛸 수 있는 링크를 제공하고 있다.
• 미디어 다음 – 화면에 보이지 않는 메뉴 건너 뛰기 링크 하나를 제공하고 있다.

메뉴 건너 뛰기에 관한 더 많은 의견들

• Skip Navigation은 Quick Link가 아닙니다. - 성민장군
• KWCAG 2.0 의 Skip Navigation(건너뛰기 링크) – 본문으로 가면 그만? - 양군팩토리

Lined Tab Navigation

Faced Tab Navigation

List Item Navigation

Tab Navigation 예제의 특징

• 중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.
• 목록의 계층 구조가 논리적으로 마크업 되어 있다.
• 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.
• jQuery 사용.

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.

특징

• 중첩 목록(ul>li>ul>li) 구조로 마크업 했습니다.
• 키보드만으로도 조작이 가능하고 키보드의 접근 순서는 논리적으로 처리되어 있습니다.
• 서브메뉴 토글에 jQuery의 .slideDown() 및 .slideUp() 효과를 사용 했습니다.
• 이미지를 한 번 사용 했습니다.

유의사항

간혹 이런 수직 메뉴의 서브 메뉴 펼침 동작을 onmouseover 이벤트 헨들러로 처리하는 경우가 있는데요. 그런 경우 사용성이나 접근성이 정말 나빠집니다. 

사용성이 나빠지는 이유는 아래쪽에 있는 메뉴를 선택하기 위하여 링크 위를 onmouseover 하는 순간 해당 링크의 서브 메뉴가 펼쳐지는데 이는 보통 원치 않는 동작이기 때문입니다. 

접근성이 나빠지는 이유는 마우스와 동등하게 키보드가 접근할 수 있도록 onmouseover 헨들러와 onfocus 헨들러를 병행해서 작성하지 않는 경우 입니다. 이런 경우 키보드가 서브 메뉴를 펼칠 수 없기 때문에 키보드 사용자는 서브 메뉴에 접근할 수 없습니다. onmouseover 헨들러를 사용했다면 반드시 onfocus 헨들러를 병행 작성하여 동등한 기능을 처리할 수 있도록 해야 합니다.

따라서 수직 메뉴를 드롭다운 형태로 열고 닫는 오늘의 예제와 같은 경우 onmouseover 이벤트 헨들러 사용은 절대적으로 피하는 것이 좋고 onmouseover 이벤트 헨들러 사용은 보편적인 다른 모든 경우에도 최소화 하는 것이 좋습니다.

이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.