본문 바로가기

개발이야기

9월 5일 웹접근성 교육 2일차

들어가면서

먼저 본인은 웹개발자도 웹디자이너도 아닙니다. 그저 대회나 행사 때 많이 다루었을 뿐이었습니다. 하지만 여러 가지 배움을 좋아하고 또 이전부터 마크업에 대한 시선이 점점 높아만 간다는 것에 발맞추어 심도 있게 배움을 찾아가고 있는 중 입니다.

HTML Head Body Tattoo 

하루 종일 html에 대해서

이날 강의는 강사님 하에 html을 자세하게 뜯어본 하루이었습니다. html요소에 머리부터 발끝까지 말입니다. 비록 짧은 시간에 핵심적인 것만 다루었지만 빈틈 많은 본인은 많은 것을 깨달은 하루이었습니다.

솔직히 본인은 html 요소를 대충은 알았습니다. 본인 뿐만 아니라 누구다 나 대충은 알고 있을 것입니다. 대충 알아도 그저 잘 만들어 대고 있으니깐요.

이날 저를 다시 뒤돌아보게 한 것이 있는데 본인이 기술에 있어 강하게 주장하는 것으로 어떤 기술을 배움에 있어서 기초를 중요시 하라는 것 입니다. 그런 기초를 중요시 하는 본인은 html만큼은 기초를 배울 가치를 못 느꼈을지도 모를 것입니다. 그렇게 어설픈 html의 요소들을 이리저리 걸쳐 되며 모양새를 뽑아내는 과거의 모습이 처량해 보였습니다.

 

하루 종일 배운 거 증명하기

잘 배웠습니다. 이제는 집에 가면 됩니다 이기전에 한번 주어진 문서에 맞게 마크업을 해보는 시간을 마지막에 가졌습니다.

3~4명 팀으로 만들어가는 과제인데 여기서 중요한 것은 바로 소통이었습니다. 서로 옳고 그름을 표현하고 마크업으로 다듬어 가 최종의 html문서를 제출하는데 삼삼오오 모인 팀 전체가 열띤 토론으로 강의실은 시끌시끌 했습니다.

우리 팀은 남자가 본인 뿐이었는데 그래서 그런지 모든 구진일은 웹디자이너가 아닌 본인이 코딩과 발표를 하게 되었지만 입은 귀에 건듯한 자신 이었던 것 같았습니다.

여러 가지 논쟁 중 많은 팀들이 언급한 논쟁을 몇 가지 나열해 보겠습니다.

  • 이미지가 있지만 내용에 있어 무의미 하므로 마크업에서 빼느냐 마느냐
  • 본문에서 다시 h1이냐
  • 테이블은 어떻게 나열하냐? colgroup

저희 팀이 머리를 맞대어 나온 소스는 다음과 같습니다. 촉박한 시간에 작성한 내용이라 엉터리임을 먼저 말씀 드리며 엉터리로 작성하여 팀에게 죄송함을 이 자리를 빌어 말씀 드립니다.

<!-- 헤더 -->

<h1>웹 접근성 품질마크</h1>

<!-- 대메뉴 -->

<h2>대메뉴</h2>

<ul>

<li>

  웹 접근성의 이해

  <ul>

   <li>웹의 역사</li>

   <li>웹의 접근성의 개념</li>

  </ul>

</li>

<li>...</li>

</ul>

<!-- 왼쪽 소메뉴 -->

<h3>웹 접근성의 이해<h3>

<ul>

<li>웹 접근성의 정의</li>

<li>우리나라의 현황</li>

</ul>

<!-- 본문 -->

<h4>웹 접근성의 정의</h4>

<p>웹의 힘은....</p>

<h5>웹 접근성이란?<h5>

<p><img src="장애인마크.png">...</p>

<h5>인증사이트 통계<h5>

<table summary="2007년부터 2010년까지 인증 사이트 통계에 대한 합격률 표입니다.">

  <caption>인증사이트 통계</caption>

  <colgroup>

   <col />

  </colgroup>

  <thead>

   <tr>

    <th scope="col">연도</th>

    <th scope="col">신청 사이트 수</th>

    <th scope="col">인증 사이트 수</th>

    <th scope="col">합격률</th>

   </tr>

  </thead>

  <tfoot>

   <tr><th>합계</th><td>793</td></tr>

  </tfoot>

  <tbody>

   <tr><th scope="row">2007년<td></tr>

   <tr><td>2007년<td></tr>

   <tr><td>2007년<td></tr>

   <tr><td>2007년<td></tr>

  </tbody>

</table>

<h5>웹 접근성 품질마크 신청 진행절차<h5>

<ol>

  <li>접수신청</li>

  <li>접수완료 및 심사중</li>

  <li>심사완료</li>

</ol>

<!-- footer -->

<ul>

<li>웹 접근성 품질마크 소개</li>

<li>...</li>

</ul>

구현에 있어 리스트나 메뉴가 제일 쉬었지만 헤딩의 배치와 이미지, 문단, 테이블이 좀처럼 쉽게 나오질 않았습니다. 강의 전에 했으면 다들 금방 했을 터인데 배운 대로 하는 것은 정말이지 어려워 보였습니다.

총 3팀이 발표를 했는지 저희 팀이 저로 인해 꼴지인듯 싶었습니다. 다른 2팀은 배운 내용이 잘 묻어 나와서 강사님을 기쁘게 하였습니다.

 

마무리

먼저 과거에 저질은 html 날림과 html 펌하에 있어 w3c에 죄송한 마음을 전하고 싶습니다. 그리고 html의 중요성과 깊은 철학에 많은 날림과 저급 기술로 펌하하는 사람들에게 올바른 마크업 문화를 위해 본인부터 솔선수범을 보여야 하겠다는 다짐을 가지게 되었습니다.