'웹디자이너를 위한 HTML5' 를 읽고

웹디자이너를 위한 HTML5 : 네이버 도서

---

마크업 언어의 간략한 역사

 최초의 공식적인 HTML 표준은 IETF (Internet Engineering Task Force) 에 의해 만들어진 HTML 2.0 이었다. 그 후 W3C (World Wide Web Consortium) 가 설립되면서 IETF 의 역할을 대신하였고, 이후 HTML 권고안은 W3C 에서 발표하고 있다. 하지만 W3C 가 발표하는 이후의 HTML 시리즈는 인터넷 익스플로러에서 볼 수 없는 문제, 기존의 웹 콘텐츠나 이전 버전의 HTML 과도 호환되지 않는 문제 등 실제 현업에서 사용하는 웹 디자이너들에게 불편함을 안겨주었고, 이는 WHATWG (Web Hypertext Application Technology Working Group) 라는 단체의 출현 계기가 되었다.

 이후 W3C 에서 XHTML2 와 HTML 5 (숫자 앞에 공백이 있는 버전) 라는 서로 호환되지 않는 마크업 언어를 정의하는 작업을 시작하는 동안 WHATWG 는 HTML5 (숫자 앞에 공백이 없는 버전) 를 만들고 있었다. 이렇게 두 그룹에 의해 개발되고 있던 HTML5 는 2014년 '공백없는 버전'으로의 합의를 통해 W3C의 권고안이 된다. 

HTML5 의 설계

 웹 호환이 되지 않던 과거의 실수를 방지하기 위해 WHATWG 는 설계 원칙을 제시했다. 핵심 원칙 중 하나는 "기존의 콘텐츠를 지원하라" 이다. 기존 기술과 표준에 바탕을 두고 있기 때문에 온전히 HTML5 만을 위한 최초 시작일은 존재하지 않는다. 또 다른 설계 원칙으로는 "바퀴를 새로 만들지 말라", "비포장길을 포장하라" 가 있다. 이미 널리 사용되는 방법이 있다면, 비록 최선이 아닐지라도 이를 HTML5 에서 모아 정리하여 수용하여야 한다는 의미이다. "부서지지 않았다면, 고치지 마라" 라는 의미와도 같다. 이처럼 HTML5 커뮤니티는 이론적인 문제에 크게 신경쓰지 않으면서 실용적인 접근법을 중시한다.

퇴화되거나 의미가 변경된 요소나 속성

  HTML5 에는 퇴화된 요소나 속성이 많다. font, big, center, bgcolor 등의 요소는 이미 퇴화되었고, 그중 대개는 이 속성을 이용하는 것보다 CSS 를 사용하는 것이 더 낫다. 그리고 b 요소는 '볼드체' 의미였지만 이제는 '추가적인 중요성을 부여하지 않으면서 다른 문장과 구별되는 문체를 갖는' 텍스트에 대해 사용된다. 만일 어떤 특별한 중요성을 갖는다면 b 보다는 strong 요소가 더 적합하다. 

 마찬가지로 i 요소도 이제 더 이상 이탤릭체를 의미하지 않고, 다른 텍스트들과 비교해서 '다른 목소리나 분위기' 를 가진다는 의미이다. 강조를 위해서라면 i 보다는 em 요소를 사용한다.

시맨틱 요소

1) <section> : 특징적인 제목을 갖는, 테마별로 연관된 콘텐츠를 묶는 데 사용한다. 보통 콘텐츠 영역을 나누는 데 사용하는 <div> 요소와 닮았지만, <div> 요소는 어떤 콘텐츠가 들어 있는지에 대해 아무런 정보도 가지고 있지 않다. 반면 <section> 요소는 연관된 콘텐츠를 묶어 주기 위해 명시적으로 사용한다. 콘텐츠 영역의 주제를 명확하게 드러낼 수 있는 제목이 자연스럽게 떠오르지 않는다면, <section> 보다는 <div> 가 더 나은 선택일 수 있다.

2) <header> : HTML5 명세는 이 요소를 "사이트 설명이나 탐색에 도움이 되는 요소" 를 묶는 컨테이너 라고 설명하고 있다. <header> 요소는 한 문서에 여러 번 등장할 수 있으며, <section> 안에서도 <header> 요소를 사용할 수 있다. 이 요소는 보통 문서나 <section> 요소의 최상단에 나타나지만 꼭 그래야 할 필요는 없다. <header> 요소는 위치가 아닌 사이트 설명이나 탐색에 도움이 되는 내용에 따라 정해진다.

3) <footer> : 페이지를 만든 사람, 저작권 정보, 연관된 콘텐츠에 대한 링크 등과 같은 정보를 포함해야 한다. <footer> 요소는 웹디자이너가 일반 문서의 바닥글에 대해 가지고 있던 이미지와 아주 잘 맞아떨어진다. 차이점이라면 보통은 하나의 바닥글만 가지지만 HTML5 문서는 영역마다 <footer> 요소를 사용할 수 있다. 또한 <header> 와 마찬가지로 <section> 요소 안에 사용할 수 있다.

4) <aside> : '사이드바' 라는 개념과 대응하지만, 이 요소 역시 <header> 나 <footer> 처럼 위치를 의미하지는 않는다. 단순히 화면의 왼쪽이나 오른쪽에 배치하는 목적으로 사용하면 안되고, 이 요소 역시 내용이 중요하다. <aside> 요소는 본문과 별 관련 없는 콘텐츠에 사용한다. 본문 콘텐츠의 주된 흐름에 영향을 주지 않는 콘텐츠가 있다면 <aside> 요소 안에 넣는 것이 알맞은 선택이다. 판별하는 방법은 <aside> 요소 안의 콘텐츠를 없애더라도 문서나 <section> 요소의 주된 콘텐츠의 의미를 제대로 전달할 수 있을지를 살펴보면 된다. 

+ <article> 안에 <aside> 요소가 중첩되어 있는 경우는 의미가 달라진다. 이 경우에는 기사의 발췌문과 같이 직접 본문과 연관된 콘텐츠를 포함해야 한다. 

5) <nav> : 주로 링크로 이루어지는 사이트 탐색 정보가 포함된다. 리스트 안에 몇 개의 링크가 나란히 모여 있다는 이유만으로 이 요소를 사용하지는 않고, 페이지 전반에 걸쳐 중요한 탐색 정보는 확실하게 <nav> 요소 안에 넣어야 한다. <nav> 요소는 주로 <header> 요소 안에서 볼 수 있다. 왜냐하면 <header> 요소 또한 위에 언급한대로 "사이트 탐색에 도움이 되는 요소" 를 위해 사용하기 때문이다.

6) <article> : 이제까지의 <header>, <footer>, <nav>, <aside> 요소는 <section> 요소가 특화된 형태라고 생각하는 것이 편하다. <section> 요소는 관련된 콘텐츠를 포괄하는 데 사용하는 반면, 다른 요소들은 이와 관련 있는 특정 종류의 콘텐츠를 다룬다고 할 수 있다. <article> 요소는 <section> 요소의 또 다른 특화된 형태이다. 

+ <section> 과 <article> 의 차이점은 무엇일까? WHATWG 는 이렇게 설명한다.

 <section> 은 다른 어떤 것의 일부를 구성하고, <article> 은 스스로 온전히 자신을 구성한다. 하지만 어떤 부분이 어떤 요소인지 어떻게 알 수 있을까? 대부분의 경우 정답은 "그건 저자가 의도하기 나름" 이라는 것이다.

---

<article> 보충 설명

 <article> 은 문서, 페이지, 애플리케이션에 포함되며, 그 자체로도 독자적으로 완성된 내용을 담고 있다. 원칙적으로 <article> 요소에 담긴 내용은 기사 통합 서비스 등을 통해서 따로 배포되거나 재사용할 수 있다. <article> 요소의 내용은 게시판 글이 될 수도 있고, 잡지나 뉴스의 기사, 블로그에 올린 글, 사용자가 올린 댓글, 상호작용할 수 있는 기능 모듈을 비롯해서 다른 어떤 종류의 독립적인 콘텐츠도 될 수 있다.

 홈페이지에 블로그 글을 나열했다면 그것은 <main> 태그 안에 각 블로그 글을 하나씩 <article> 태그에 넣어 나열한 형식일 것이다. 블로그가 아니라 유튜브 홈페이지 같은 경우라면 동영상을 <article> 태그에 나열할 수 있을 것이고, 아마존 같은 사이트라면 상품 정보를 하나씩 <article>에 넣어 나열하는 식이 될 것이다. 이 모든 <article>은 말하자면 다른 형식으로 추출해서 제공할 수 있는 콘텐츠다. 스스로 독자적인 페이지가 되기도 하지만 다른 페이지에 광고로 등장할 수도 있고, 뉴스레터 기사 중 하나로 나타날 수도 있다.