웹[기술|표준|접근]/작은 팁2010/01/09 20:00

헤딩 제대로 사용하기. - 후편(완)-

전편을 보고 분명 많은 분들이
뭐야? 장난해? 내가 아는거랑 똑같은데? 뭐가 틀리다는거야?
이런 반응을 보이셨을 것이다.
이건 마치 "헤딩태그는 책과 같다고 생각하시면 되요"라고 말한 것과 똑같은듯하다

여러분의 느끼실 그 허탈함에 전편을 포스팅하고 바로 후편을 쓴다.
후편에서는 무엇이 잘못되었는지 집어볼 것이다.


헤딩태그의 잘못된 사례(헤딩태그의 오해)
1. 레이아웃팅 제목으로 사용
어떤 관공서의 사이트에서 CSS를 제거한 모습과 HTML 코드이다. 지금 헤딩태그를 레이아웃팅한 영역의 제목으로 사용하고 있다.

"상단 메뉴", "하단 정보", "하단 링크"가 유의미한 데이터일까? 절대 아니다.
헤딩태그를 의미없는 레이아웃 영역의 제목으로 사용하고 있다. 실제로 많은 관공서의 사이트의 헤딩이 이런식으로 구성되어 있다. 이러한 방식은 올바르지 않은 사용법이다.

2. 제목이라고 하긴 애매모호한 헤딩
레아아웃 영역의 의미도 담고 있는 제목

이건 제목이라고 하긴 애매모호한 헤딩들이다. 그 이유는 레이아웃 영역으로써의 의미도 포함이 되어 있기 때문이다. 그러므로 이러한 사용법 또한 올바르지 않은 사용법이다.

3. 메인메뉴 혹은 서브메뉴를 헤딩으로
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)
메인메뉴 링크들을 헤딩으로 사용

위 1번과 2번은 쉽게 이해를 했는데, 3번에 와서는 고개를 갸웃하는 분이 계실 듯하다.
유의미한 데이터를 헤딩태그로 사용했는데 왜 문제가 될까?
그 이유는 메인메뉴(혹은 서브메뉴. 이하 메인메뉴로 통일)의 링크들은 헤딩이 아니기 때문이다.
다시말해 메인메뉴는 현재 보고 있는 콘텐츠의 제목이 아닌 링크들의 집합이다.
역시 어렵다. 쉽게말해 메인메뉴는 헤딩이 아니라 목차인것이다.
그러므로 헤딩태그를 사용하지 말고 그냥 a태그로 마크업을 해야 한다.

4. 레벨링
1) 누락
##시 사이트에서, 자유게시판까지의 메뉴 구조가
##시 -> 시만참여 -> 자유게시판

라고 하자. 그런데 디자인된 페이지에는 "시민참여"가 없다.
그래서 아래와 같이 헤딩을 부여했다.
<h1>##시</h1>
<h3>자유게시판</h3>
위 헤딩의 문제점은 h2가 없다는 것이다. 헤딩은 순차적으로 내려가야한다.
<h1>##시</h1>
<h2 class="hidden">시민참여</h2>
<h3>자유게시판</h3>
이렇게 헤딩을 부여하고 h2를 화면에 출력안되게 하는 방법으로 해결을 하면 된다.

2) 부여
또 다른 방법으로는
<h1>##시</h1>
<h2>자유게시판</h2>
이런 식으로 자유게시판을 h2로 마크업하는 것이다.

이쯤에서 다들
"자유게시판은 3depth에 있는 제목인데, h2로 해도 괜찮은거냐?"
라는 의문을 가지실 텐데, 상관없다.
작업하는 페이지 내에서의 헤딩만 부여하면 되는 것이다.
그렇다면
<h1>자유게시판</h1>
이렇게 자유게시판을 h1으로 마크업하는 것은 어떨까?
아마 여러분들은 혼란에 빠지실 것이고, 아래 세가지 의견들일 것이다.

  1. h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
  2. h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
  3. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?

먼저, 1번 h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
이것은 논란의 여지가 많은것으로, 전편에 해석에 따라 견해의 차이가 있다고 한 그 부분에 해당되는 내용이다.
실제로 몇해전 웹 접근성/표준쪽의 유명하신 두분이 이것으로 술자리에서 다투셨던 적이 있다.
그 분들의 의견은

    • 사이트명은 책제목과 같고, GNB의 시작점이기 때문에 h1으로 해야하고, 한번만 와야 한다.
    • 아니다

개인적인 의견은 제작자 맘이라고 생각한다. 즉 "아니다"쪽에 가깝다.
그 이유는 헤딩의 목적은 콘텐츠의 제목을 제공하는 것에 있지, GNB를 나타내기 위해 있는것이 아니기 때문이다.
그렇다면 GNB로써 헤딩을 사용하는 것이 잘못된것이냐? 그렇지도 않다. 페이지의 GNB를 콘텐츠의 제목이라고 생각할 수도 있기 때문이다.
전편에서 예를 들었던 "2분기 실적"은 "2009년 A 사업의 2분기 실적"이기 때문에,
"2009 실적 보고서", "A 사업 실적"도 헤딩이 될 수 있다.
그러므로 제작자 맘이라는 것이다

2번, h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
이것 역시 헤딩을 GNB로써만 이해했기 때문에 생기는 오해이다.
title을 제대로 제공을 했고 정보구조가 제대로 구성되어 있다면 딱히 문제가 되지 않는다는것이 개인적인 견해이다.

3번. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?
문제될 것 없다.

3) 단계
헤딩의 숫자가 의미하는 바는 단계(level)이라고 생각하면 된다.
대메뉴는 제일 큰 헤딩이므로 h1
중메뉴는 두번째로 큰 헤딩이므로 h2
소메뉴는 두번째로 큰 헤딩이므로 h3
이런식으로 레벨링을 하면 된다.
그러므로 대메뉴를 h2, 소메뉴를 h1 이런식으로 정보구조에 위배되게 마크업을 하면 안된다.

5. 중복된 내용
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)

같은 내용이 반복되는 헤딩
간혹 보면 사이트의 제목이 헤딩에 항상 따라다니는 경우가 있다.
사이트 제작자가 얼마나 사이트를 사랑하고, 자랑하고 싶어하는지 그 마음이 전해진다.
하지만 이것은 좋은 방법이 아니다.
헤딩의 레벨이 낮아지면, 상단의 레벨에 나오는 내용은 생략해도 된다.
<h1>##시</h1>
<h2>홍보관</h2>
이렇게 마크업이 되었으면
##시의 홍보관
이라고 받아들이면 된다.
즉 레벨이 낮아지면 상위 헤딩의 내용이 접두어로 붙은 것으로 여기면 된다.


헤딩이란
하.. 그럼 도대체 어떻게 헤딩을 하란 말이냐?!
전편에서 했던것 그대로 하면 된다.
너무나도 쉬웠던 그것이 바로 정답이다.

헤딩태그가 너무 간략하다보니 오해가 많이 생기는 것 같다.
그 오해의 근본은 무엇이 헤딩인가? 즉 헤딩의 정의에 있는것 같다.
헤딩태그는 헤딩은 페이지의 제목이다.




절대 아니다. 헤딩태그는 페이지의 제목이 아니다.
헤딩은 페이지의 제목이 아니라 콘텐츠의 제목이다.
더 정확하게 이야기를 하면 섹셔닝된 콘텐츠의 제목이다.

전편에 나왔던 "2009 실적 보고서"를 가지고 예를 들어보자.
현재 내가 보고 있는 페이지는 A사업 실적의 2분기 실적을 보고있다면
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 2분기 실적
이게 바로 전편에서 말한 헤딩이다. 이것을 코드화하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>2분기 실적</h3>
이렇게 된다.
이게 아닌 다른것은 헤딩이 되면 안된다.

자, 그럼 상황을 바꿔보자
현재 내가 보고 있는 페이지에는 A사업의 모든 정보가 다 나온다고 하자.
그렇다면 어떻게 헤딩을 구조해야 할까?
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 1분기 실적
소제목: 2분기 실적
소제목: 3분기 실적
소제목: 4분기 실적
소제목: 전년과 비교
소제목: 총평
이렇게 될 것이고, 코드화를 하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>1분기 실적</h3>
~~
<h3>2분기 실적</h3>
~~
<h3>3분기 실적</h3>
~~
<h3>4분기 실적</h3>
~~
<h3>전년과 비교</h3>
~~
<h3>총평</h3>
~~
이렇게 코드화가 된다.
"총평"이 "2009 실적 보고서의 총평"인지, "A 사업 실적의 총평"인지 걱정하지 않아도 된다.
h3의 상위레벨의 헤딩태그 h2에 이미 "A 사업 실적"이라는 내용이 있으므로, "A 사업 실적의 총평"이 되는 것이다.

정리를 하면
  1. 내가 보고 있는 페이지의
  2. 콘텐츠를 섹셔닝(구분)하고
  3. 각 섹션마다 콘텐츠에 알맞는 헤딩을

부여하면 되는 것이다.

결론
여기에 나온 잘못된 사례말고도 찾아보면 더 많은 방법으로 잘못 사용되고 있을 것이다.
중요한것은, 디자인된 시안을 받고 코딩을 할때 레이아웃팅만 해야 하는 것이 아니다.
콘텐츠도 레이아웃팅을 해야한다. 그리고 그에 적절한 헤딩태그도 제공을 해야한다.


덧.
콘텐츠를 레이아웃팅 하는 것을 HTML코더만의 몫이라고 하기는 힘들다.
콘텐츠를 만든 사람(대부분의 경우 기획자)이 가장 큰 책임을 지고 있는 것이다.
설계가 이상하게 되어있는데 어떻게 올바르게 시공이 되겠는가.

하나의 페이지에 여러개의 목적을 가진 콘텐츠들이 뒤죽박죽 썩여있다면, 그것은 기획을 잘못한 것이고 UX 또한 고려하지 않은 것이다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG , , , , , , , ,
Trackback 1 Comment 3

TRACKBACK http://hiphapis.net/trackback/171 관련글 쓰기

  1. hiphapis의 생각  삭제

    2010/01/10 21:07TRACKBACK FROM hiphapis' me2DAY

    사실은 전편 쓰자마자 바로 후편을 썻지만.. 지금에서야 퍼블리싱한 헤딩 제대로 사용하기(후편)

댓글을 달아 주세요

  1. ㅇㅅㅇ

    잘 읽고 갑니다

    2010/01/24 01:05 [ ADDR : EDIT/ DEL : REPLY ]
  2. 김재성

    4 2)에 부여는 조금 의견차가있는데요
    만약 저 예제가 특정 페이지의 경우라면
    해딩 태그를 제목표시하는것 이외에 실제 사용자는 사이트 레이아웃을 이해하는 용도로 사용되고 있기에
    한사이트에 해딩 레벨은 일관성이 있어야된다고 생각합니다.

    2010/06/07 15:29 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://www.webshock.net BlogIcon 곡괭이

    도움이 많이 되었습니다.. 감사합니다^^

    2010/09/10 15:04 [ ADDR : EDIT/ DEL : REPLY ]