The fundamental failure of most graphic, product, architectural, and even urban design is its insistence on serving the God of Looking-Good rather than the God of Being-Good. – Richard Saul Wurman
여러 명의 웹디자이너, 퍼블리셔 분들과 작업해보면서 느낀 점은, tool에 너무 의존하다 보면 웹페이지의 의미구조에 대해 고민하는 분이 적을 수밖에 없겠구나 하는 것입니다. WYSIWYG로 보이는 대로만 작업하다 보면 그렇게 되는 거지요.
그 다음부터는 작업하면서 꼭 문서구조가 어떻게 되는지 중간중간 확인을 해봅니다. 간단하게는 html5.org에서 운영하는 아래 사이트에서 url만 입력해 보아도 알 수 있지요.
https://gsnedders.html5.org/outliner/
심심하면 평소에 잘 설계되었다고 생각하던 사이트들을 넣어보시면서 결과를 비교해보는 것만으로도 많은 걸 느낄 수 있을 것입니다. 브라우저로 보는 게 아니라 검색엔진들이 페이지를 어떻게 보는지 감이 오니까요. 저는 웹툰 보러 들어가던 사이트를 한번 찾아보았다가 예상외로(!) 의미 구조가 FM대로 정확하게 나와있는 걸 보고 깜놀한 기억이 남네요 ㅋㅋ. 내가 이것보다 못하다니 OTL
HTML5에 도입된 semantic structure와 관련된 요소들로는 section, article, aside 같은 것들이 있습니다. 이 요소들로 문서를 구조화 시키거나, div를 이용한 블록들에 h1, h2, h3 만 잘 붙여줘도 결과가 확실히 달라지는 걸 보실 수 있을 겁니다.
SEO는 단지 meta tag 잘 만들고 title 붙이는 수준이 아니라, 기본적인 구조 설계부터 진행이 되어야 하는 것이구나.. 하는 생각을 설계부터 구현까지 계속 지니고 있어야 하는 것 같습니다. 물론 저도 일정에 쫓기고 클라이언트한테 치이다 보면 신경을 못쓰는 때가 많습니다만;;