개요 프론트엔드 개발을 하다 보면 HTML, CSS 그리고 JavaScript 세 가지를 가장 많이 사용하게 됩니다. 세 가지 모두 중요하지만, 실질적인 비즈니스 로직이 JavaScript로 작성되고, 시각적인 부분은 CSS로 처리되기에 HTML은 뒷전인 경우가 많은데 종종 우선순위가 낮다 못해 아예 무시하고 개발을 하는 사람들도 보입니다. 실제로 저는 아래와 같은 생각을 가진 사람들을 꽤 많이 보았습니다. JavaScript가 제일 중요하지 않나요? HTML 코드 대충 작성해도 지금 화면에 원하는 대로 잘만 나오는데 왜 신경 쓰나요? 저는 프론트엔드 개발자가 되고 싶은데 HTML은 퍼블리셔가 하는 일 아닌가요?

쓰면 다 해결되지 않나요? 어떤 이유로든 위와 같은 생각을 가지고 있을수 있지만, HTML은 당신의 생각보다 더 중요합니다. 왜냐하면 더 많은 사람이 제대로 렌더링 보이는 웹 사이트를 볼 수 있게 하고 검색 엔진을 통해 유입될 수 있게 하며, 더 많은 사람이 웹 사이트를 사용할 수 있게 하기 때문입니다. HTML로 어떻게 그것들이 가능한지 몇 개의 예제를 통해 더 자세히 알아봅시다. 목적에 맞는 태그 사용하기 JavaScript처럼 HTML도 목적에 맞는 코드를 작성하는 것이 중요합니다. HTML5에 시맨틱 태그들이 도입되며 많은 분이 시맨틱 태그들을 사용하는데 과연 저희는 정말 태그들을 목적에 맞게 사용하고 있을까요? 간단한 예제들을 보면서 다시 한번 생각해봅시다. FAQ 목록 먼저, 어떤 웹 사이트의 자주 묻는 질문(FAQ) 목록을 만드는 경우를 가정해봅시다. 이와 같은 컴포넌트를 코드로 표현하면 보통 아래와 같이 작성할 것입니다.

Section 1

Lorem ipsum ...
Section 2
...

하지만 이와 같이 작성하는 것이 정말 최선일까요? 조금 더 직관적인 구조로 작성할 수는 없을까요? 당연히 있습니다. 바로 dl, dt, dd 태그를 사용하면 됩니다. 처음 보시는 분들도 있겠지만 dt, dd는 Data Title과 Data Description의 약어로 제목과 값 쌍으로 이루어진 데이터를 표현할 때 사용하고 dl은 Data List로 dt, dd로 이루어진 데이터들의 목록을 표현할 때 사용합니다. 지금처럼 FAQ를 만들 때 아주 적합하죠. 앞에서 HTML5 시맨틱 태그를 이야기해놓고 뜬금없이 이 태그들을 언급하는 이유는, (목적에 더 맞기도 하지만) 사실 이 태그들은 최초의 웹 페이지에 사용된 태그들입니다. 굳이 HTML5가 아니더라도 기존의 태그들을 목적에 맞게 활용하면 직관적인 구조를 작성할 수 있다는 것이죠. 실제로 HTML 사양 문서에 dl 태그의 사용 예제로 FAQ 리스트를 예를 들고 있습니다. dl, dt, dd 태그를 사용하여 위의 코드를 리팩토링하면 아래와 같습니다. 이제 어떤 태그가 어떤 값을 표현하는지 더 직관적이게 변했습니다. 이 예제를 통해 저희는 HTML5에 도입된 시맨틱 태그가 아니더라도 기존 태그를 목적에 맞게 잘 사용하면 직관적이게 표현할 수 있다는 것을 알았습니다.

Section 1: Lorem ipsum ...
Section 2: ...

링크와 버튼 종종 어떤 텍스트를 클릭하면 원하는 자바스크립트 함수를 실행시키는 등 임의의 동작이 수행되기를 원하는 경우가 있습니다. 이럴 때 아래와 같이 처리하는 것을 굉장히 많이 보았습니다. 누르면 무언가를 하는 텍스트 누르면 무언가를 하는 텍스트 하지만 이처럼 처리하는 것은 a 태그의 잘못된 사용입니다. a 태그는 다른 문서를 가리키는 링크를 걸거나 링크가 들어갈 자리를 표시하는 placeholder 용도로 사용해야 합니다. 그렇다면 이런 경우는 어떻게 해야 할까요? 바로 button입니다. 클릭했을 때 임의의 동작을 수행하도록 설계된 요소죠. 그래서 아래와 같이 처리하는 것이 훨씬 더 목적에 맞는 태그 사용입니다. 아, 글자처럼 보이는 건 어떻게 하냐고요? CSS로 처리하면 됩니다!

다크 테마로 변경하기

이런 경우에는 웹 접근성 표준 WAI-ARIA를 따라 요소의 역할을 별도로 명시해주어야합니다. 이 경우에는 버튼처럼 사용하니 role 속성을 사용하여 버튼처럼 동작한다고 알려주고, tabindex 속성을 사용하여 Tab키를 사용하여 요소를 선택할 수 있도록 하면 됩니다.

다크 테마로 변경하기

웹 접근성에는 위의 간단한 예제 외에도 저시력 시각 장애, 전맹 장애, 동작 장애 외에도 청각, 손 운동, 색맹 등 고려해야 할 사항이 정말 많습니다. 일이 더 많아진다고 느낄 수 있겠지만 웹 서비스를 만들때 접근성을 조금이라도 더 생각한다면 지금보다 더 사용하기 편한 웹 서비스들이 많아질 것 같습니다. 다수가 사용하는 웹 서비스도 좋지만 모두가 사용하는 웹 서비스는 더 좋으니까요. 웹 접근성에 더 자세히 알고 싶으시다면 아래의 링크를 참고해주세요. W3C 웹 표준성 가이드라인 MDN 웹 접근성 문서 네이버 널리 네이버 웹 접근성 체험관 유성두님 블로그 마치며 목적에 맞는 태그 사용하기, 문법에 맞게 문서 구조화하기 그리고 웹 접근성 예제를 통해 HTML을 잘 사용하는 것이 생각보다 중요하다는 것을 알아보았습니다. 많은 사람들이 별로 신경쓰지 않는 HTML이지만 좋은 프론트엔드 개발자가 되기 위해서는 모두가 웹 서비스를 잘 사용할수 있도록하는 고민을 해야한다고 생각하고, 거기에 HTML이 많은 영향을 끼친다고 생각합니다. 아무쪼록 이 글이 사람들이 HTML을 통해 더 나은 웹 서비스를 만드는데 도움이 되었으면 좋겠습니다.

~/xo.devhttps://xo.dev

~/xo.dev
https://xo.dev