사이트 로고, H1으로 쓰는 것이 시맨틱면에서 과연 적절할까?

사이트 로고를 <h1>으로 사용하는 것이 적절하냐라는 문제는 예전부터 논의 되어 왔던 문제이긴 하다.
일단, 결론부터 말하자면 개인적으로 로고는 heading 요소로 보기는 어렵다는게 내 견해다.

웹 '문서' 라는 개념에서 보자

왜냐? 웹 '문서' 라는 개념에서 보자는 거다.
문서는 작성자에게도 중요한 것이긴 하지만, 문서를 작성하는 가장 큰 이유는 누군가 보기위해서다. 즉, 문서의 작성이유의 가장 큰 목적은 '소비'에 있다. 그렇게 보자면 문서를 작성 시 보는 이로 하여금 이 문서가 무엇을 이야기 하는지를 일목요연하게 알 수 있게 해주는 것이 잘 만들어진 문서라고 할 수 있겠다.

보통 문서에 대제목 - 소제목들이 구조적으로 잘 정의 되어 있다면 이 문서를 보는 이는 내가 현재 어떤 문서를 보고 있는지, 이 페이지는 어떤 이야기를 하는 페이지인지를 문서를 세세히 읽어보지 않아도 단박에 유추해 낼 수 있다. 그것이 제목의 역할이 아닌가?

자, 이제 이를 웹으로 가져가 보자.
웹문서는 인쇄 출판물과는 조금 다르지만, 어찌되었든 무언가 컨텐츠를 제공한다는 데에는 동일한 역할을 한다 할 수 있겠다.
웹 문서에도 각각의 페이지가 있고, 각각의 페이지에는 그 페이지 마다의 제목에 해당하는 것이 있기 마련이다.

'소비자' 입장에서 웹 문서를 보자

마크업 요소에서 제목에 해당하는 요소는 h1 ~ h6까지의 요소를 사용한다. 이 문서를 보는 사용자 입장에서 생각해보자.

문서를 소비하는 입장에서 이 문서에 박혀있는 로고는 과연 정말 가장 중요한 정보일까? 제목으로 써야 할 만큼? 경험 상, 어느 문서를 읽어보든, 문서 내에 찍힌 문서 작성자(혹은 회사)의 로고는 중요한 정보로 판단하지 않고 읽는다.
혹시 문서를 읽어가면서 각 페이지에 박혀있는 로고를 가장 먼저 눈여겨보면서 읽고 있는가? 그렇지 않은 게 대부분일거다.
보통 로고는 문서의 가장 첫 페이지, 혹은 커버에 해당하는 부분에서 아, 이 문서는 누구의 문서이구나라고 알 수 있도록 제공할 정보이지, 여타 페이지에서는 크게 중요한 역할을 해 주는 요소가 아니다.

그런데 웹사이트를 만들 때 보면, 거의 모든 페이지에 로고가 박혀있으면서 이 모든 페이지의 로고를 전부 H1으로 묶는 경향이 많다. 예전에 논의되었던 사항에서 들었던 이야기는, 회사의 입장에선 로고는 매우 중요한 정보이므로 H1으로 쓰는 것도 맞다 라고 했다. 맞는 말이다, 제공자의 입장에서 로고는 매우 중요한 정보이다. 자기를 나타내는 심벌이니까. 그런데, 이 문서를 읽는 사람의 입장에서는 그리 중요한 정보는 아닌 것이다.

자, 만일 지금 이 글을 읽고 있는 당신에게 중요한 정보는 무엇인가?
로고를 H1 요소를 쓰는 것이 맞는가 아닌가에 대한 것일까? 아니면 웬 듣보잡 블로그 주인장이 중요한 정보인가? 너무 극단적인 허무맹랑한 비유라 생각되나? 그렇다면, 인터넷에서 신문 기사를 읽을 때, 당신은 이 페이지에서 중요한 정보가 '연합뉴스', '조선일보', '프레시안' 등등 언론사의 로고라 생각하나? 아니면 '꽈당 아이유' 같은 기사의 제목이 중요한 정보인가?

접근성의 문제와 시맨틱한 웹의 범주에서 내가 접근 한 결론은 로고는 H1요소로 쓰기에는 맞지 않는 부분이 꽤 크다라는 것이다.
로고를 H1요소로 쓰는 것은 메인이나 인트로 화면 정도에나 맞지 않을까?

W3C에서 말하는 <h1>

<h1> is the HTML element for the first-level heading of a document:

• If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
• If is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs – Your Guide to Pets.

W3C 명세에서 <H1>에 대해 문서의 최상위 제목(주제)을 위한 요소라고 설명한다. 말인 즉슨, 현재 문서(페이지)의 내용 전체에 아우르는 주제 혹은 제목이 <H1>이라는 것이다.

그렇기 때문에 포털의 메인 페이지 같은 경우나 어떤 페이지들에서는 로고를 <H1>으로 사용하는 것이 적절할 때도 있다. 또 반면에 어떤 페이지에서는 로고가 <H1>으로 사용되기에는 부적절 할 때가 있다.

맺으며

이 포스팅을 읽고 오해하는 이가 없기를 바라며, 또한 이분법적으로 옳다/그르다를 결론만 얻으려고 하는 이가 없기를 바란다. 사실 무엇을 H1에 쓰느냐에는 정답이라고 딱 잘라 말할 수 있는 것은 없다.
하지만 무엇이 좀 더 semantic한가? 를 고민해 보자면, 분명 고민을 해 봐야 할 문제이다. 단순하게 무조건 적으로 된다 안된다가 아니라는 거다. 그러나 필자가 로고는 heading 요소로 보기는 어렵다. 라고 한 부분은 가장 보편적으로 만연(?)해 있는 무조건적인 '회사로고 == <H1>'로 하는 케이스를 말하는 것이다.