『웹디자이너를 위한 HTML5』를 읽고. 사용자를 고려하라!

1주 1개발 서적 읽기이지만, 이번 주는 총 2권! 새로운 CSS 레이아웃과 함께 『웹디자이너를 위한 HTML5』 -제레미 키스, 레이철 앤드루를 읽어보았다. 이 책은 HTML의 역사를 얘기해주면서 HTML5를 어떻게 써야 할지 알려주는 책이기에 만약 HTML을 처음 배우기 시작했다면 읽어보기를 추천한다. 읽으면서 기록해놓으려고 표시해뒀던 키워드만 몇 가지 정리해보려고 한다.

---

HTML 설계 원칙

- HTML의 핵심 설계 원칙들 중 하나는 "기존의 콘텐츠를 지원하라(Support Existing Contnet)"이다. 이는 온전히 HTML5만을 위한 최초 시작일이 존재하지 않는다는 것을 의미한다. XHTML 2가 기존에 존재하던 모든 것을 완전히 무시하려 했던데 반해, HTML5는 기존 기술과 표준에 바탕을 두고 있다.

- 또 다른 설계 원칙으로는 "바퀴를 새로 만들지 말라(Do not reinvent the wheel)"와 "비포장 길을 포장하라(Pave the cowpaths)"가 있다. 이 말은, 업무를 진행할 때 이미 널리 사용되는 방법이 있다면, 비록 최선이 아닐지라도 이를 HTML5에서 모아 정리하여 수용해야 한다는 의미이다. 달리 말하면, '부서지지 않았다면, 고치지 마라(If it ain't broke, don't fix it)'라고도 말할 수 있다.

- HTML5 커뮤니티는 이론적인 문제에 크게 신경 쓰지 않으면서 규칙을 만들기 위해 실용적인 접근법을 사용한다. 이러한 접근법은 "충돌이 발생하는 경우, 이론적인 순수성보다는 기술 명세를, 기술 명세보다는 구현하는 사람(= 브라우저 제작사 등의 HTML5 기술 구현자를 의미함)을, 그리고 구현하는 사람보다는 개발자를, 또한 개발자보다는 사용자를 고려하라"는 의미의 "사용 기반 우선권"이라는 설계 원칙을 통해 잘 드러난다.

새로운 마크업 요소

- HTML5에서는 몇 가지 새롭고 유용한 인라인 요소이자 '의미론적 텍스트 요소(text-level semantics)를 HTML5에 도입했다.

1) <mark>

- 브라우저에서 검색 결과 목록을 살펴보면 각 결과 내에 검색어가 강조되어 표시되어 있는 것을 종종 볼 수 있다. 이런 경우 <span> 태그를 활용하여 텍스트를 강조하였는데, 이는 의미론적으로 아무 뜻이 없다. 또한 <em>이나 <strong>을 이용할 수도 있겠지만 이 또한 의미적으로 정확하지는 않다. 만약 검색어에 어떤 중요성을 부여하고자 한다면 <mark> 태그를 사용하면 된다.

- 이 요소는 현재 콘텐츠에서 이 요소에 들어 있는 내용이 의미 있다는 것 외에는 어떤 중요성도 부여하지 않는다. 즉, '다른 문맥과의 연관성 때문에 표시되거나 강조된 한 문서 내의 텍스트'를 의미한다.

2) <time>

- hCalendar의 문제점은 컴퓨터가 이해할 수 있는 방식으로 날짜와 시간을 작성해야 한다는 것이었다. 사람들이 '5월 25일'을 쓴다 하더라도 구문 분석기는 'YYYY-MM-DDThh:mm:ss'처럼 ISO 날짜 표준 형식만을 받아들인다. 그리하여 HTML5에서는 <time> 태그를 도입하여 이 문제를 해결했다.

- 이 요소는 날짜, 시간 혹은 두 가지를 조합해 사용할 수 있다. 사용 예시는 아래와 같다.

<time datetime="09:43">오전 9시 43분</time>
<time datetime="2022-09-30">9월 30일</time>
<time datetime="2022-09-30T09:43">9월 30일 오전 9시 43분</time>

- 추가적으로, datetime 속성에 꼭 날짜나 시간 값을 입력할 필요는 없다. 다만 위 예시처럼 입력하지 않을 것이라면 아래와 같이 사용자를 위한 정보는 반드시 표기해야 한다.

<time>2022-09-30</time>

시맨틱 마크업 구조

1) <aside>

- <header> 요소가 '제목'이라는 개념에 대응하는 것처럼 <aside> 요소는 '사이드 바' 개념에 대응한다. 이때, '사이드 바(side bar)'라는 개념 역시 위치를 의미하는 것은 아니다. 단순히 화면의 왼쪽 또는 오른쪽에 콘텐츠를 배치하려는 목적으로 aside 요소를 사용하면 안 된다.

- <aside> 요소는 본문과 별 관련이 없는 콘텐츠에 사용해야 한다. 본문 콘텐츠에 주된 흐름에 영향을 주지 않는 콘텐츠가 있다면, 이 요소 안에 넣는 것이 올바른 마크업이다. 즉, 이 요소 안의 콘텐츠를 없애더라도 문서나 <section> 요소의 주된 콘텐츠의 의미를 제대로 전달할 수 있는지 여부를 체크하면 된다. 하지만 <article> 안에 <aside>가 중첩된 경우, 이 요소엔 기사의 발췌문과 같이 직접 본문과 연관된 콘텐츠를 포함해야 한다.

- 기억해야 할 것은, 어떤 콘텐츠가 시각적으로 웹 페이지에 사이드 바 형태로 나타내고자 할 때 <aside> 요소를 쓰자!와 같은 공식으로 생각하면 안 되는 것이다. 예를 들어, 저자의 약력을 사이드 바 형태로 넣고자 하는데, 이를 의미론적으로 생각하면 <footer> 요소에 들어가는 것이 적합하다. 사이드 바니까 <aside> 요소를 사용하자와 같이 생각했다면 <footer>에 적당한 콘텐츠를 <aside>에 넣는 사태가 발생하는 것이다. 이는 시맨틱 마크업이 아니다.

2) <article>

- <article> 요소는 또 다른 특화된 형태의 <section> 요소이다. 독립적으로 쓸 수 있는 연관 콘텐츠를 위해 사용하자. 이때 가장 어려운 부분은 어떤 콘텐츠를 '독립적으로 쓸 수 있는'지 판단하는 것이다. 하지만 이 요소가 독립적인지 아닌지를 결정하는 것은 해석에 달려있다. WHATWG는 <section>과 <article>의 차이점을 다음과 같이 말한다.

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

- <section> 안에 여러 개의 <article>을 사용할 수도 있고, <article> 안에 여러 개의 <section>도 사용할 수 있다. 그리고 <section> 안에 <section>, <article> 안에 <article>을 중첩해서 쓸 수도 있다. 주어진 상황에 맞춰 의미적으로 가장 적절하게 요소의 쓰임을 결정하는 것은 전부 개발자의 몫이다.