애드센스세로

Google 광고

구글애널리틱스


애드센스가로


구조적 HTML과 CSS Layout을 써야하는 또 다른 이유~

최근 테이블을 이용하지않고 CSS를 이용해서 Layout을 해야한다는 것에 상당한 공감대가 형성된 것 같다. 아마 주요 포털들이 첫화면을 CSS 레이아웃으로 바꾸는 결정적인 이유로는 CSS에 비해 테이블을 이용했을 경우 용량이 더 커진다는데 있는 것 같지만 CSS 레이아웃은 단순한 용량 문제는 아니다.

검색엔진 등의 예는 아래에서도 이미 들었으니 조금 다른 예를 들어보자. 바로 Voice Browser이다. HTML 스펙를 보면 아래와 같은 문장이 있다.

HTML has been developed with the vision that all manner of devices should be able to use information on the Web: PCs with graphics displays of varying resolution and color depths, cellular telephones, hand held devices, devices for speech for output and input, computers with high or low bandwidth, and so on.

음성을 출력으로 쓰는 장치 역시 HTML 설계시 고려되었다는 의미이다. 우리가 일반적으로 쓰는 IE나 불여우 같은 보여주는 브라우저가 아니라 TTS등을 통해 문서를 읽어 주는 브라우저가 만들어질 수 있다는 얘기다. 가장 문제시가 많이 되는 테이블의 예를 보자.

<table border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">
<caption>Cups of coffee consumed by each senator</caption>
<tr>
  <th id="t1">Name</th>
  <th id="t2">Cups</th>
  <th id="t3" abbr="Type">Type of Coffee</th>
  <th id="t4">Sugar?</th>
</tr>
<tr>
  <td headers="t1">T. Sexton</td>
  <td headers="t2">10</td>
  <td headers="t3">Espresso</td>
  <td headers="t4">No</td>
</tr>
<tr>
  <td headers="t1">J. Dinnen</td>
  <td headers="t2">5</td>
  <td headers="t3">Decaf</td>
  <td headers="t4">Yes</td>
</tr>
</table>

이러한 표는 IE나 불여우에서는 아래와 같이 보일 것이다.
Cups of coffee consumed by each senator
--------------------------------------
| Name |Cups|Type of Coffee|Sugar?|
--------------------------------------
|T. Sexton|10 |Espresso |No |
--------------------------------------
|J. Dinnen|5 |Decaf |Yes |
--------------------------------------

만약 음성 브라우저라면 어떨까?

Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes

라고 읽을 수 있을 것이다. 화면이 없다 하더라도 표가 어떻게 구성될지 상상이 가지 않는가? 하지만 만약 현재 웹 사이트들의 웹페이지를 이 에이전트가 읽는다고 생각해보자. 생각만 해도 끔찍하다.

음성 브라우저는 HTML뿐만 아니라 CSS에도 고려가 되어 있다. HTML이 구조라면 CSS는? 맞다 스타일이다. CSS는 음성 브라우저가 텍스트를 읽는 목소리의 크기, 속도, 멈춤 등을 제어할 수 있다. 예를들어 CSS의 property인 volume을 이용하면 목소리의 크기를 조절할 수 있다. 위의 표가 어떻게 읽히는지 상세히 정의 할 수 있는 것이다.

HTML과 CSS가 음성 브라우저도 지원할 수 있다는 사실은 국내에는 거의 안 알려진듯 하다. 국내의 HTML 또는 CSS 관련 책자를 여러권 봤지만 이 부분에 대한 논의는 찾아보기 힘들다. 물론 그 이유는 음성 브라우저가 널리 배포된 예가 없다는데 있을 것이다. 머 닭이 먼저냐 달걀이 먼저냐 하는 문제지만 음성 브라우저로 읽힐 만한 콘텐트도 없고 읽을 수 있는 브라우저도 없다.

머 존재하지도 않는 음성 브라우저에 맞추어 콘텐트를 작성하라는 것이 아니다. 다만 구조적 HTML과 CSS Layout을 사용하면 얼마나 다양한 에이전트가 그 콘텐트를 장치의 특성에 맞추어 보여줄 수 있는가 하는 가능성을 보여주고 싶었던 것이다. 비쥬얼 브라우저도 이해할 수 있고, 검색 엔진도 이해할 수 있고, 음성 브라우저도 이해할 수 있다면 또 어떤 에이전트가 HTML을 유용하게 사용할 수 있을런지는 아직 아무도 모른다.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4
http://www.w3.org/TR/CSS21/aural.html

덧글

  • 달삼 2005/11/07 21:52 # 답글

    이글루스로 HTML 코드를 입력하는 것은 정말 힘들다 T.T 몇번째 수정 중... 테이블은 왜 입력이 안되지? --;
  • 9gle 2005/11/07 22:28 # 삭제 답글

    대단하심미다..이런걸 찾아내시다니...
  • reric 2005/11/08 17:40 # 삭제 답글

  • 달삼 2005/11/08 17:53 # 답글

    오호 파이어폭스가 HTML을 읽어주는 것을 지원하는건가요? 아님 일반 TTS로 웹 페이지를 글자 그대로 읽어주는 건가요? 차라리 예젠 텔넷을 쓰던 때가 나았다는 말이 와닸는군요. 위에처럼 분명 HTML과 CSS를 쓰면 시각장애인에게도 텔넷보다 훨씬 더 좋은 환경을 줄수가 있는데 말이죠.
  • pee 2013/02/28 01:22 # 삭제 답글

    이는 좋은 에서 아이디어}에 관한 | 관련 |에 대한 |의 주제에} 블로그.
    당신은 만진 일부 괴팍 요인 여기.주세요
    모든 방법은 wrinting을 계속 확인할 수 있습니다.
댓글 입력 영역