실질적인 웹 표준

‘웹 표준’을 다루는 글이 많아지면서 이에 대한 블로거들의 관심도 높아지고 있습니다. 그런데 대부분의 글들이 웹 표준을 지켜야 하는 이유와 그럼으로써 얻어지는 이점에만 초점을 맞추더군요.

사실 ‘접근성’이나 ‘크로스 브라우징’, ‘문서의 구조화’ 같은 표현은 대부분의 사용자들에게 쉽게 와 닿지 않을 겁니다. 그보다는 현실적인 예와 방법들을 제시하는게 웹 표준에 대한 이해를 이끌어내는데 도움이 되지 않을까 생각합니다. 어떻게 해야 웹 표준을 지키고 ‘의미 있는’ 마크업을 할 수 있는지에 관해 한글로 작성된 정보가 극히 적은 상황이니까요.

그래서 이번 글에서는 많은 html 문서에서 본래의 의미와는 상관없이 사용되는 태그 베스트 3를 뽑아볼까 합니다^^; 보다 나은 방법에 대한 얘기들도 다루고요.

<br /> 태그

대망의(?) 1위는 그 흔한 <br /> 태그입니다. 만들어진 용도는 문서에 빈 줄을 넣기 위해서이죠. 하지만 이 빈 줄은 문서의 한 단락 내에서 사용되어야 합니다. 다시 말하자면 문서의 흐름이나 내용의 전환 등을 구분하기 위해 사용되는 태그가 아니라는 얘기입니다.

우리가 흔히 보는 책들을 보면 한 페이지 내에서 단락 구분이 명확하게 나뉘어져 있습니다. 위에서 말한 내용의 전환 등을 표현하기 위해서이죠. 웹 문서도 마찬가지입니다. 단락을 구분하려면 <br /> 태그가 아니라 <p> 태그를 사용하는 것이 의미에 맞습니다.

그러면 <p> 태그로 단락을 구분하면 어떤 이점이 있을까요? 첫 번째는 문서의 흐름이 명확해진다는 것입니다. 물론 사용자의 눈에는 안보이지만 스크린 리더는 각 단락 사이를 끊어서 내용을 읽어줄 수 있을겁니다. 두 번째는 CSS를 이용해서 여러 가지 스타일을 줄 수 있다는 점입니다. 예를 들기 위해서 이후의 모든 단락을 들여쓰기 해보겠습니다. 간단히 아래와 같은 규칙을 지정해주면 되거든요.

p { text-indent: 0.6em; }

제 글은 모든 문단을 빈 줄로 구분하기 때문에 특별히 들여쓰기를 지정하지 않았지만 오프라인 인쇄물의 경우 대부분이 들여쓰기를 하고 있습니다. 눈에 잘 들어오고 정보 전달에도 유리하기 때문이지요.

사실 이 태그의 문제는 블로깅 툴의 지원과 밀접한 관계가 있습니다. 태터툴즈로 글을 작성하면 엔터 키를 사용할 때마다 <br /> 태그를 집어넣으니까요. 개인적으로는 태터툴즈의 이런 방식이 ‘의미 있는’ 마크업에 걸림돌이 된다고 생각합니다. 많이 사용되는 워드프레스나 (적게 사용되는^^;) 텍스트패턴 같은 블로깅 툴에서는 <br /> 태그 대신 <p> 태그를 넣어서 단락을 구분하는데, 그러면 CSS로 단락 사이의 간격을 조절할 수 있답니다. 이 글의 단락에 적용되는 CSS 규칙은 아래와 같습니다.

p { margin-bottom: 1em; }

<font> 태그

안타깝게도 많이 사용되는 태그입니다^^; 블로그를 돌아다니다 보면 다양한 글자색을 사용해서 내용이 눈에 확 들어오는 글들을 볼 수 있습니다. 보기에 좋아서 어떻게 작성했는지 소스를 봤더니 아래 예처럼 작성되었더군요.

<font color="#eee">연한 회색 텍스트</font>

소스를 보고 처음 들었던 생각은 이렇습니다.

“헉! 글이 수백 개 쌓이면 어떻게 스킨을 바꾸지? 배경색을 바꾸면 잘 안보이는 글자도 있을텐데…”

일단 말씀드릴 것은 <font> 태그가 HTML 4.01 권고안에서 금지된(deprecated) 태그란 사실입니다. 금지되었다는 표현을 다음과 같은 의미로 해석할 수 있습니다.

“호환성을 위해서 브라우저가 지원하지만 더 나은 방법이 있으므로 사용하지 않는 것이 좋다.”

사용을 금지시킨 근본적인 이유는 문서의 ‘구조’‘표현’을 구분하기 위해서지만 현실적으로는 문서의 관리가 어려워지고 위에 언급한 것과 같은 문제가 생길 수 있기 때문이지요.

안타깝게도 이 태그의 오용 역시 태터툴즈가 안고 있는 문제인데 태터툴즈 기능 제안 포럼에 관련 글이 있으니 참고하시기 바랍니다. 다양한 해결 방법들이 제시되었는데 생각난 김에 저도 한 가지 아이디어를 제안하자면 이렇습니다.

“사용자가 몇 가지 색을 지정해서 사용하도록 하고 이 색에 대한 CSS 정보를 DB에 보관해서 페이지를 출력할 때마다 문서 head에 보관된 규칙을 불러오도록 한다.”

예를 들어서 두 가지의 색을 지정하도록 한다면 각각의 색을 사용할 때마다 아래와 같이 마크업을 작성하도록 하는 것입니다. DB에 usercolor1, usercolor2 class에 관한 CSS 규칙을 저장하면 언제든 전체 글에 적용된 글자 색을 바꿀 수 있으니까요.

<span class="usercolor1">검정 텍스트</span>
<span class="usercolor2">빨강 텍스트</span>

본의 아니게 연이어 태터툴즈의 문제점을 지적했네요. 개인적으로 태터툴즈의 편리함이 설치형 블로그가 대중화되는데 큰 역할을 했고, 무엇보다 한글을 우선적으로 고려한 블로깅 툴이라는 점에서 높이 평가합니다. 편의성을 너무 추구한 나머지 문서의 효율적인 마크업에는 미흡한 점이 있지만 앞으로 계속 개선되리라 믿습니다.

<fieldset> 태그

위에서 다뤘던 두 태그만큼 많이 사용되지 않음에도 불구하고 당당히 3위를 차지한 것은^^; 제가 전혀 생각하지 못했던 용도로 사용되기 때문이랍니다. 어느 블로그에선가 글 내용과 관련 있는 다른 글들의 목록을 윈도우즈 프로그램에 사용되는 그룹 박스(정확한 명칭인지는 모르겠지만) 모양의 박스로 표현하는 것을 봤습니다. <div> 태그를 어떻게 사용했을까 하는 생각에 소스를 봤는데 전혀 예상하지 못했던 <fieldset> 태그가 있어서 깜짝 놀랐네요.

<fieldset> 태그는 W3C에 아래와 같이 정의되어 있습니다.

“이 태그는 여러 콘트롤(입력 폼 등)과 라벨을 한데 묶어주는 역할을 한다. 그럼으로써 사용자가 콘트롤들의 용도를 쉽게 인식하고, 브라우저나 스크린 리더 등의 프로그램으로 콘트롤 사이를 쉽게 이동할 수 있도록 해준다.”

간단히 말해서 <filedset> 태그는 문서에 들어가는 콘트롤을 위한 태그입니다. 그러면 이 태그를 폼(콘트롤)이 아닌 다른 용도로 사용하면 어떤 문제가 생길까요?

어떤 분들은 이 태그를 문서의 일부분을 강조하는데 사용합니다. 그런데 검색 엔진이 그 문서를 해석한다고 가정해 보면 어떨까요? 검색 엔진이 문서를 해석하는 구체적인 방법은 모르지만, 적어도 이 태그 안의 정보에는 크게 관심을 기울이지 않을 겁니다. 당연히 폼에 관한 정보라고 생각 할 테니까요. 원래 의도는 강조였고, 사용자의 눈에도 그렇게 보이지만 검색 엔진의 입장에서는 반대로 해석할 수도 있다는 얘기지요.

제가 제시하는 대안은 간단합니다. <div> 태그로 비슷한 시각 효과를 낼 수도 있겠지만 그보다는 디자인을 아주 조금만 양보해서 보다 ‘의미 있는’ 마크업을 작성하는 것이지요. 어떤 용도의 박스인지 표시해주는 텍스트가 꼭 테두리 선 위에 있어야 하는건 아니니까요.

마치는 말

<p> 태그 대신 <br /> 태그를 쓴다거나, <fieldset> 태그로 글을 강조하는 분들을 비난하는 글이 아님을 이해해 주시고 바랍니다. 또한 웹 표준이 더 많이 지켜지려면 그 방법을 먼저 익힌 분들이 보다 많은 정보를 오픈해야 한다고 생각합니다. 블로그에서 웹 표준에 관한 논쟁보다 어떻게 하면 웹 표준을 지킬 수 있는지 알려주는 글을 더 많이 볼 수 있기를 바라며 글 마칩니다.

댓글 6개가 달렸습니다. 태그: , , ,

  1. 부침개 | 2007-11-20 02:27

    제 주위사람들은 오히려 fieldset 태그를 전혀 모르고 있던 사람들이 더 많았습니다.
    fieldset 과 legend 로 이뤄진 멋드러진 모양을 좋아해서 남용하는 일이 없는걸 다행으로 알아야할까요? ^^;
    이건 조금 다른 말이긴 한데 아직 읽진못했지만 위스턴님의 글중
    clear float 에 대한 글을 보면 br 태그에 clear 을 적용하는 게 보이던데
    이 방식은 그리 좋지 않은 방식이라고 알고 있습니다.
    검색을 하다가 우연히 사이트에서 보게된 내용인데 지금 링크가 생각나질 않네요..;;;
    아무튼 거기에 보면 br 에 clear 를 사용하게되면 브라우저 엔진에 따라 다른 랜더링 결과를 가져온다 하더라구요.
    이게 근거가 있는 이야긴지는 모르겠지만, 실제로 br 로 float 를 해제하려고 했을때 특정 div 의 width 크기가
    원래 크기보다 2배크게 랜더링 되는 결과를 얻었던 적이 있었거든요.

  2. wystan | 2007-11-20 20:46

    의견 남겨주셔서 고맙습니다. ^^

    br 태그에 CSS clear 속성을 적용시켜서 float을 해제하는 방법에는 제약이 많습니다. ul 같은 리스트에서 float된 li를 처리할 경우처럼이요.

    글에서 br을 사용한 것은 단순히 clear 속성이 적용되는 것을 보여주기 위해서였습니다. W3C HTML 4.01 규격에 있는 예제를 참고했고요.

    현실적으로는 clear 속성을 쓰지 않고 overflow 속성이나 generated content를 이용하는 방법이 훨씬 유용하다고 생각해요. 의미상 불필요한 마크업을 넣지 않아도 된다는 장점도 있고요.

  3. 부침개 | 2007-11-21 00:27

    IE는 워낙에 height:1%; 라는 사탕을 좋아라해서
    왠만한 float 버그는 저거 하나만 입에 물려주면 원하는 결과를 얻더라구요 ^^

  4. wystan | 2007-11-21 21:27

    저도 그 사탕 무지 좋아합니다. ^^

    float 버그 뿐 아니라 IE에서 무언가 이상하다 싶으면 일단 써보는게 상책이더라고요.

    최근에 리스트 아이템(li) 안에 dl을 넣으면서 li 간격이 이상하게 적용된 경우가 있었는데 이 사탕 하나로 간단히 해결했습니다.

  5. seevaa | 2008-02-22 23:39

    wystan님 오랜만이죠? ^-^;;

    wystan님 글들을 차근차근 첨부터 보고있습니다.
    거의 반은 이해도 못하는 것들이지만, 뒤늦게 읽으며 '아~ 그렇구나!?' 감탄하고 있습니다.
    실은 WC3 마크업 검정은 진작에 통과해서(그게 얼렁뚱당 틀린것만 고쳐주니까 되더라구요), 유치하게도 valid 아이콘을 떡하니 붙여놓고 조아라했습니다.
    헌데, 여기저기 특히 wystan님 글들을 읽으니 무지한 제가 부끄럽기 짝이 없습니다. ^-^;;
    하여 그에 관한 글도 유심히 읽고, 그에 맞게 적용하려고 노력중입니다.
    어렵기도 하고, 조금 귀찮기도 합니다만 조금씩 배워가는 느낌에 기분이 좋네요~

    늦었지만 좋은 정보 감사하구요, 새해 복 많이 받으세요~

  6. wystan | 2008-02-24 00:13

    정말 오랜만이네요~ ^^

    가끔 쎄바님 블로그 들르는데 점점 더 멋져진다는 느낌을 받는답니다. 디자인과 마크업 모두요.
    그런데 제 블로그는 너무 오랬동안 발전이 없었네요. ^^; 예전보다 더 좋은 글을 쓸 수 있을 것 같은데 한동안 멈춰 있었더니 다시 시작하기가 쉽지가 않네요.

    부족한 글이 도움이 된다 말씀해주셔서 고맙습니다. 그런데 사실 저도 잘 모르는 것이 많아요. 알면서 실천하지 못하는 것도 많고요. 이런 것들을 하나씩 알아가고 실천하는 것이 웹 제작자로서의 즐거움인 것 같습니다. 쎄바님도 그런 기분을 느끼신다니 분명히 좋은 웹 제작자(직업이 아니더라도요)가 되실거예요~ ^^

    쎄바님도 복 많이 받으세요~ 항상 행복하시고요~

댓글이 닫혔습니다.