컨퍼런스는 신청자 접수를 시작한지 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.

NHN 신사옥은 경기도 성남시 분당구 정자동 178-1번지에 위치해 있고 건물 이름은 ‘Green Factory’ 입니다. 그동안 분당 정자와 서현등 여러곳에 사무실을 두고 있었지만 2010년 4월부터 순차적으로 본사 직원들이 이곳에 입주해서 근무하기 시작 했습니다.

신사옥은 국토의 대동맥이라 불리는 경부고속도로 서울 톨게이트와 가까운 곳에 있습니다. 상행선을 타고 오시면 서울 톨게이트를 지나기 직전 우측에 NHN 심볼이 붙어있는 초록색 건물을 발견하실 수 있습니다. 

건물은 중앙에서 제어하는 초록색 루버를 통해 다양한 이미지를 외벽에 표현할 수 있다고 합니다. 입주하기 몇일 전 ‘NHN’이라는 회사 이니셜이 건물 외벽에 표현된 적이 있었는데 그 밖에도 더 다양한 이미지가 프로그램 되어 있다고 합니다.

1층 로비는 외부에 공개되어 있습니다. 지역 주민을 위해 도서관을 준비하고 있고 6월부터 운영할 예정이라고 하니 가까운 곳에 살고 계시면 방문하실 수 있습니다. 자연 채광할 수 있게 벽면이 유리로 되어 있어서 에너지도 절약하고 NHN이라는 회사가 어떻게 생겼는지 궁금한 외부인들이 분위기를 살짝 엿볼 수 있는 기회도 주네요.

1층에는 작은 기념품 매장도 있습니다. 대한민국에서 유일하게 단 한 곳만 존재하는 이 기념품 매장은 ‘NHN+네이버+한게임’ 기념품을 판매하는 ‘NHN Store’ 입니다. 1층의 개방된 공간에 위치한 것을 보아서 누구나 이용이 가능할 것으로 예상되는데요. 기념품 판매 여부가 궁금하시면 내일 직접 방문해서 확인해 보도록 하겠습니다.

외부인이 신사옥을 방문하실 때 어떤 정보도 없이 그냥 방문증만 받아 오시면 다소 당황하실 수도 있는 부분인데요. 엘리베이터 조작방식이 기존의 경험과 약간 다르게 설계되어 있습니다. 엘리베이터에 탑승하시면 ‘열기, 닫기, 비상호출’ 버튼과 ‘현재 층 안내화면’ 밖에 없습니다. 원하는 층으로 이동하고자 하는 조작이 모두 엘리베이터 밖에서 ‘키오스크(터치기반의 조작화면)’로 이루어지기 때문입니다. 원하는 층을 누르면 ‘H1 승강기를 이용하세요’ 이런 안내 메시지를 보여줍니다. 엘리베이터가 많고 저층부(L)와 고층부(H)가 나뉘어 있기 때문에 잘 골라서 타야하고 자신이 몇번 승강기를 타야 하는지 잘 기억해야 합니다. 물론 원하는 곳에서 잘 내려줍니다. 분당 300미터를 이동하는 빠른 승강기이고 저층부에서 고층부로 쉼없이 한 번에 이동하면 귀가 멍멍해지기도 한답니다.

지하 1층에는 사내 식당이 있습니다. 점심 시간에는 2개의 식단. 저녁 시간에는 1개의 식단이 매일 교체 되는것 같구요. 가격은 4,500원이고 직원들의 사원증으로 결제가 됩니다. 결제된 금액은 월급에서 알아서 빠져 나갑니다. 회사 주변에는 이렇게 착한 가격에 이정도 식단이 없기 때문에 앞으로 특별한 약속이 없는 한 밖에 나가서 식사할 일은 거의 없을 것 같군요.

저녁에 나왔던 백반인데 메뉴 이름은 기억이 나지 않고 양념 돼지고기 찜 같은 음식이 메인 요리로 나왔습니다. 저렴한 가격을 생각하지 않더라도 충분히 착하고 훌륭합니다. 맞은편에 앉은 모델은 얼굴이 나오지 않아서 좀 그렇기는 하지만 제 옆에서 늘 함께하고 있는 행복한고니 입니다. 자바스크립트 관련 질문은 허당인 제게 하지 마시고 앞으로 이 친구에게 해주세요. ㅎㅎ

지하 식당은 쾌적하고 좋습니다. 화면 가운데 기둥과 벽면의 콘크리트가 보이시나요? 페인트를 사용한 곳을 찾기가 힘듭니다. 천장 부분도 자세히 보시면 별도의 보드로 마감된 것이 아니라 골격이 전부 노출되어 있는데요. 흉한 느낌은 전혀 들지 않고 천장이 높아서 시원스러운 느낌입니다. 건물 전체가 이런 콘셉으로 되어 있습니다. 콘크리트 벽과 천장을 다른 재료로 마감하면 더욱 많은 비용이 들겠죠?

이곳은 4층에 있는 카페테리아 입니다. 메뉴는 커피 전문점과 거의 비슷하고 가격은 700원 안팍이랍니다. 이 곳 역시 사원증으로 결재를 하는 곳인데요. 직원들이 단체로 가위 바위 보를 하고 있으면 보통은 커피값 내기를 하는 겁니다. 최근에는 사원증 여러장을 한꺼번에 센서에 갖다 대서 운이 나쁜 직원의 사원증으로 결제가 되도록 하는 최첨단 복불복 시스템(?)을 이용하기도 한답니다.

4층에는 Play Ground 라는 휴게공간이 있는데요. 휴게공간으로 이동하는 통로 벽면에 이끼와 풀들이 자라고 있습니다. 아래는 물이 흐르는데 금붕어도 살구요. 잘 자랐으면 좋겠네요. ^^

이곳이 바로 4층의 Play Ground 입니다. 초등학교 놀이터를 옮겨온것 같죠? 정글짐에 올라가보고 싶었지만 차마 용기가 나지 않아서 아직… ㅎㅎ

4층 Play Ground. 정글짐에서 눈을 오른쪽으로 돌리면 작은 홀과 단상이 보입니다. 피아노도 있고 스피커도 있는걸 보니 작은 콘서트라도 할 수 있겠네요. 바로 앞 테이블에 알록달록한 퍼즐도 보이시나요?

신사옥에 먼저 입주한 사우님들은 자기가 담당하고 있는 서비스 로고를 퍼즐로 만든 다음 미투에 포스팅 하는데 그게 어떻게나 부럽던지 저녁 식사 후에 저도 이렇게 하나 완성 했습니다. 제가 담당하고 있는 서비스는 ‘Open Source XE‘ 입니다.

이곳은 4층의 옥외 휴게실 입니다. 흡연을 할 수 있는 곳은 이곳 4층과 28층 옥상 뿐입니다. 4층은 옥외 모든 공간에서 흡연을 할 수 있는것은 아니구요. 사진 왼쪽 구석(사진에는 보이지 않지만)에 흡연 가능한 장소가 따로 지정되어 있어서 지정된 장소에서만 흡연을 해야 합니다. 비 흡연자들이 옥외의 맑은 공기를 마실 권리를 보호해 주는 것이지요.

지금 보고 계신 분들이 저를 제외한 저희 팀원들 모두 입니다. 저 포함해서 현재 모두 7명이고 저희 팀 이름은 ‘오픈UI기술팀’ 입니다. 저희 팀을 아시는 분들은 눈에 익은 얼굴도 보이고 낮선 분도 보이실꺼예요. 제가 따로 소개해 드리지 않을테니 각자 알아서 PR들 하셔요. ㅋㅋ  정기 주간회의를 마치고 티타임을 갖고 있습니다.

이번에는 27층으로 올라가 볼까요? 27층은 식사와 함께 회의를 하거나 외부 손님을 접대하기에 적당한 공간 입니다. 셀러드와 제과가 상시 비치되어 있고 점심과 저녁에는 메인 요리와 사이드 요리가 있는 식단이 준비가 됩니다. 오늘 점심을 이곳에서 먹었습니다.

같은 27층의 인접한 다른 공간 입니다. 지하 1층 사내 식당과 비교하면 뭔가 조금 더 고급스러운 느낌이 나죠?

점심의 메인 요리는 ‘해물철판 떡 볶음’ 이었어요. 사이드 요리는 ‘스푸’ 였는데 정확히 뭐였는지는 기억이 나지 않고 메인과 서브의 합은 5,500원 이었습니다. 지하 식당보다 비싸기는 하지만 그래도 회사 밖에 나가서 먹는것보다 여전히 저렴합니다.

떡이 너무 많아서 양이 적은 저는 해산물을 먼저 먹고 떡을 많이 남겼어요. 그걸 먹고 싶으면 먹으라고 했다가 동생들한테 타박이나 듣고… ㅎㅎ

신선한 야채 셀러드류가 한 접시에 3,000원 입니다. 꽉~꽉~ 눌러 담아야겠죠? 이런게 모두 27층에 있구요. 저희 회사에 손님으로 오셔서 27층에서 접대를 받으셨다면 최고의 접대를 받으시는 샘입니다. 물론 밖에 나가면 더 비싸고 고급 음식 많지만 적어도 한 번은 이곳을 경험해 보셔야죠? 그런데 계속 이곳만 온다면…? 그건… 평소에 행실을 잘 생각해 보심이… ㅋㅋㅋ

이번에는 제가 소속된 UIT(User Interface Technology)센터가 있는 20층으로 가볼께요. 엘리베이터 홀에서 사무실로 들어오면 가장 먼저 눈에 들어오는 공간 입니다. 우편함도 있고 간단한 나무 테이블과 의자가 있는데요. 이곳은 아무래도 직원들이 휴식하는 공간이라기보다는 외부인을 간단하게 접견하거나 또는 면접을 보러 오시는 분들이 잠깐 기다리기에 적당한 장소 같습니다. 물론 면접을 보러 왔는데 이런 곳이 아니었다고 따져 물으셔도 저는 책임 없습니다. 이건 제 추측이니까요. 그런데 딱 이곳에서 면접을 기다리시게 된다면? 익숙한 곳이라 마음이 조금은 더 편하시겠죠? 우측 담장 건너편이 바로 사무공간 입니다. 오시면 쫄지 마시구요. UIT센터에 근무하는 미투 친구 아무나 소환해서 음료수라도 사달라면서 긴장 푸세요. 설마 저희 센터에 미투 친구 한 명도 없이 혈혈단신 입사하시는 분은 없겠죠? 능력도 중요하지만 대인 관계도 중요하지 않겠어요? 서로 돕고 살야야 할 사람들과 소통할 수 있는 커뮤니케이션 능력 말입니다.

해가 떨어지고 다들 퇴근한 뒤에 찍어서 약간 어두침침 하군요. 이곳이 바로 그린팩토리의 공돌이 공순이들이 네이버와 한게임의 톱니바퀴를 굴리는 공간 입니다. 다양한 배경과 전문 분야를 지닌 분들이 치열하게 일하는 곳이죠. 낮에 사진을 찍었으면 창가 쪽에서 순광이 들어와서 더 예쁘게 나왔을텐데 조금 아쉽네요. 조명은 빛이 직접 내려오지 않고 천장에 한 번 반사되서 내려오게 되어 있구요. 낮에는 초록 루버에 뚫린 구멍 때문에 자연 채광이 됩니다. 초록 루버는 중앙에서 프로그램으로 제어하면 건물 외벽에 무언가를 표현할 수 있는 도구가 되기도 하구요.

사무 공간 바로 옆에는 벽면이 유리와 철제로 장식된 회의실이 여럿 있습니다. 노출 콘크리트와 함께 잘 어울리는 느낌으로 역시 금속 질감이 그대로 드러나 있구요.

차가운 느낌의 철제 벽면과는 사뭇 다른 느낌이 나는 회의실 내부 입니다. 나무 테이블과 부드러운 소파 그리고 커튼 때문이겠죠? 빔프로젝터와 흰색 칠판까지 거의 모든게 완벽한 회의실 이군요. 모든 회의실이 이런것은 아니구요. 정말 딱딱하고 불편한 의자가 있는 회의실도 있습니다. 회의를 빨리 끝내야 할 때에는 일부러 그런 회의실을 선택하는 센스가 필요하겠지요.

아. 이런 공간도 있어요. 사무공간 외곽인데요. 간단하게 둘이 앉아서 담소할 수 있는 공간입니다. 이 공간 오른쪽 초록 루버 사이로는 서울 톨게이트가 보여요. 평일 근무 시간에 서울 톨게이트 소통 상황이 궁금하시면 가깝게 지내는 NHN 직원을 소환해 보세요. ^^

이런 공간은 태어나서 처음 이군요. 양치질 전용 공간인데요. 점심 시간이면 화장실에서 몇 개 안되는 수도 꼭지를 부여잡고 양치질 하는 사람을 기다려본 경험이 다들 있으실껍니다. 공간이 반대쪽에도 하나 더 있으니 여섯명이 동시에 수도 꼭지를 점유할 수 있군요.

아직 정리가 덜 끝난 저의 책상이라고 소개할 뻔 했지만 이게 평소의 제 스타일 그대로 입니다. 살짝 너저분 하죠? 좌측에 있는 독서대는 노트북 거치대로 지금은 맥북이 올라가 앉았습니다. 그리고 바로 옆에는 차마버리지 못하고 책상 위에 굴러다니는 옴니아와 현재 만족스럽게 사용하고 있는 블랙베리도 보이네요. 깜빡하고 사진을 찍지 못한 공간이 하나 있는데 4층 휴게실에 있는 N-touch Zone 이라는 공간 입니다. 각종 스마트폰, 아이패드, 날개없는 선풍기등 평소에 접하기 어려운 혁신적인 IT 제품들을 체험할 수 있는 공간이랍니다.

제가 대신 전해드리는 NHN 신사옥 투어 즐거우셨나요? 절대 그럴리가 없겠지요. 왠만하면 직접 와서 보세요! 입사를 하시던가!

안녕하세요? NHN 오픈UI기술팀에 근무하는 정찬명 입니다. 저는 장애인이 아니며 그 분들을 잘 알고 있는 것도 아닙니다. 다만 한 가지 공통점은 있습니다. 바로 ‘특별한 어떤 욕구를 느낀다’는 것입니다. 그리고 이 욕구는 장애인이건 비장애인이건 모두 특수하고 다양합니다. 이 점이 제가 생각하는 유니버설 디자인의 출발점입니다.

‘분리’와 ‘별도의 배려’라는 해결책에 대해

얼마 전 한 국가 산하 기관에서는 마우스의 드래그 앤 드롭을 이용한 비밀번호 입력장치를 세계 최초로 개발했다는 소식을 발표 했습니다. 그러나 마우스를 사용할 수 없는 장애인이 어떻게 사용할 수 있는지, 보충 설명이 없었기 때문에 장애인 단체는 장애인에 대한 배려 없음을 강력하게 비판 했습니다. 어떤 분들은 “장애인을 위한 별도의 방식을 만들어 보완하면 된다”는 대안을 제기하기도 했습니다. 하지만 저는 동의할 수 없었습니다. ‘별도의 배려’라는 해결책은 장애인과 비장애인을 성급히 구분하기 때문입니다.

‘장애인차별금지 및 권리구제 등에 관한 법률’은 차별에 대해 ‘장애를 사유로 정당한 사유 없이 제한, 배제, 분리, 거부 등으로 불리하게 대하는 경우, 그리고 이와 같은 사유로 불리하게 대하지 않지만 장애를 고려하지 않은 기준을 적용함으로써 장애인에게 불리한 결과를 초래하는 것’이라고 정의하고 있습니다.

마우스를 사용한 비밀번호 입력장치는 의도하지 않았지만 장애인을 해당 서비스와 분리시키는 결과를 가져왔습니다. 법 조항을 엄밀히 따지자면 차별에 해당할 수 있을 것입니다. 하지만 ‘차별이냐 아니냐’ 보다 더 중요한 일이 있습니다. 애초부터 장애인, 비장애인 모두가 이용할 수 있는 방법을 고민할 수는 없었을까 하는 것입니다. 

장애인 전용 엘리베이터를 이용하도록 하는 것을 과연 장애인들은 원할까요? 장애인 전용 홈페이지를 이용하도록 하는 것을 장애인들은 원할까요? 그 누구도 특별한 욕구가 있다고 해서 특별히 분리되는 것을 원하지는 않을 것입니다.

다양한 욕구의 수용 방법에 대해

우리가 접하는 모든 제품들은 가치의 산물입니다. 어떤 제품이 시장에 나오기까지 수 많은 사람들의 가치가 개입 됩니다. 디자이너는 더 아름답게, 엔지니어는 보다 기능적으로, 영업사원은 그 제품이 더 많이 팔리기를 원할 것입니다. 제품은 시장에 나오기까지 이런 다양한 가치들을 아우르기 위하여 치열하게 경합하게 되고 소비자들은 그런 가치의 총합인 물건을 구입하게 됩니다. 그렇다면 시장에서 많은 사람들에게 오랜 시간 사랑 받는 제품은 어떤 공통된 가치를 포함하고 있을까요? 다양한 공통점이 있겠지만 그 중의 하나는 바로 ‘다양한 욕구’에 대한 수용 이라고 생각 합니다.

제 아들은 아직 초등학교에 입학하지 않은 어린 남자아이 인데요. 가끔 공중 화장실에서 미안한 생각이 들 때가 있습니다. 화장실의 남자 소변기가 너무 높은 곳에 매달려 있기 때문입니다. 엘리베이터를 탔을 때에도 비슷한 경험을 합니다. 고층으로 이동해야 하는데 아이는 수직으로 배치되어 있는 층별 버튼 가운데 키가 닿지 않는 버튼이 있습니다. 여섯 살이면 혼자서도 엘리베이터를 조작할 줄 아는데 키가 작아서 어른의 도움을 필요로 하는 경우가 있습니다.

휠체어를 탄 지체 장애인도 마찬가지 입니다. 엘리베이터의 버튼은 보다 낮은 곳에 수평으로 배치해 두면 애초부터 모두가 편하지 않았을까요? 또 시각 장애인을 위해 점자 버튼을 추가하는 일은 비효율적인 발상일까요?

최근에는 ‘터치’로 작동하는 전자제품들이 많이 쏟아져 나오고 있는데요. 이런 제품들이 오랜 시간 사랑 받으려면 무엇을 개선해야 할까요? 조작 방법을 시각에만 완전히 의존하도록 하지 않는다면 주머니 속에 넣고도 간단한 기능은 조작할 수 있지 않을까요? 다양한 사람들의 욕구를 처음부터 고려하는 것은 비용만 많이 들어가는 골치 아픈 일일까요?

특별한 시선은 불편할 수 있습니다

어떤 분들은 장애인을 장애우라고 부르기도 하는데요. 한국장애인단체총연합회에서는 이와 같은 용어의 사용을 중단할 것을 요청 했습니다. 사실 장애를 가진 분들 가운데는 ‘친구’ 이상의 연배를 가진 분들도 많습니다. 이분들을 모두 뭉뚱그려 ‘친구’라고 부르는 것은 우리 사회의 장애인에 대한 어떤 시각의 단면일 수도 있습니다.

잘 아시는 것처럼 장애인은 특정 집단으로 분류하거나 시혜의 대상으로 보는 시선에 대하여 거부감을 느끼고 있습니다. 때문에 장애인을 위하여 ‘무엇을 했다’ 라는 생색내기도 그리 달갑게 받아들이지 않습니다. 특별한 시선과 동정의 눈빛은 오히려 벽과 같다는 게 장애인들의 입장입니다.

저는 개인적으로는 ‘장애라는 말을 사람에게 쓰는 것 자체가 문제가 아닐까’라는 생각을 합니다.  진짜 장애는 ‘다른 욕구를 지닌 사람을 돕지 못하는 환경’에 있는 것이지 ‘조금 다른 사람’에게 있는 것이 아니기 때문입니다. 장애 유무를 떠나서 누군가는 나와 조금 다른 것을 자연스럽게 받아들일 수 있도록 모두가 더 노력해야 될 것 같습니다. (물론 저를 포함해서 ^^) 앞으로 네이버 서비스가 차별, 다름이 없는 서비스가 될 수 있도록 더 노력하겠습니다. 감사합니다.

관련 포스트

‘어둠 속의 대화’ 전시 체험
‘모두를 위한 설계’ 유니버설디자인

전적으로 마우스(드래그 앤 드롭)를 이용한 비밀번호 입력 방식으로 키보드 사용자는 이용할 수 없다.

시각장애인은 마우스 포인터를 볼 수 없기 때문에 마우스를 사용할 수 없습니다. 또한 팔을 자유롭게 사용할 수 없는 지체 장애인은 마우스를 사용할 수 없기 때문에 마우스 스틱(빨대 모양의 막대기)이라는 장비를 이용해서 키보드를 두드립니다. 태어 날때부터 이런 장애를 지닌 사람도 있고 불의의 사고를 당해서 이렇게 되신 분들도 있습니다. 이런 장애인들은 비밀번호를 어떻게 입력해야 하나요?

더군다나 한국인터넷진흥원 이라는 곳에서 이런 기술을 개발했다고 하는데 이건 한국 인터넷을 진흥 시키기는 커녕 오히려 한국 인터넷을 망치는 기술 입니다. 이런 기술을 사용하게 되면 장애인차별금지 및 권리구제 등에 관한 법률에 의하여 소송 대상이 되고 법적 분쟁에 휘말렸을 경우 승소할 확률은 0% 입니다.

사용하지 말아야 할 기술 입니다.

스마트폰에서도 쓸 수 있는 방안을 마련한다구요? 일단 스마트폰에는 마우스가 없구요. 마우스 전용 이벤트 헨들러 같은 것도 없습니다. 스마트폰에서 마우스를 이용할 수 있는 전용 어플리케이션이라도 지원 하시게요? 어떻게 하시려는지 참 궁금합니다. 그것도 세계 최초로 개발해서 같이 특허 내십시오.

다 같이 잘 살기가 이렇게 힘들어서야 원.

• [단독]비밀번호 입력, 마우스로 ‘드래그’
• 마우스를 쓰지 못하는 사람은 어떻게? – 비밀번호 입력, 마우스로 드래그
• 마우스만을 이용하는 패스워드 입력장치 키보드를 사용할 수 없는 한 통용될 수 없다
• 키보드 안쓰는 패스워드 방식…"웹 접근성 외면" 장애인 단체 반발

• 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 페이지에 링크되어 있습니다.