📚 시멘틱 태그를 왜 그리도 강조하는 것일까?
시멘틱 태그는 '반드시' 사용해야 하는 것은 아니다. 왜냐하면 시멘틱 태그는 <div>와 기능적 차이가 없기 때문이다. 그럼에도 불구하고 시멘틱 태그를 '반드시', 그리고 '잘' 사용해야 한다.
시멘틱 태그에 대해 학습해보며 왜 시멘틱 태그를 사람들이 그리도 강조하는 것인지, 그리고 지금까지의 나는 의미 있는 HTML 문서를 만들어왔는지에 대해 다시 한 번 되돌아보자.
시멘틱 태그(Semantic Tag)
📌 시멘틱 태그(Semantic Tag)란
시멘틱 태그는 '의미를 가진 태그'이다. 시멘틱 태그는 이러한 '의미'를 바탕으로 영억을 의미있게 나눌 때 사용한다.
📌 시멘틱 태그 종류
| 태그 이름 | 용도 |
|---|---|
<header> | 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 |
<main> | 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 |
<footer> | 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 |
<article> | 하나의 완성된, 독립적인 내용을 나타내는 영역 |
<section> | 어떤 것의 일부분을 나타내는 영역 |
<figure> | 이미지와, 이미지 설명을 담고 있는 영역 |
시멘틱 태그를 사용하는 이유
시멘틱 태그는 태그의 이름과 의미만 다를 뿐, div태그와 기능은 완전히 똑같다. 그래서 아주 엄격한 사용법이 있는 태그는 아니다. 그럼에도 불구하고 시멘틱 태그를 사용하는 이유는 무엇일까? 시멘틱 태그가 권장되는 이유는 매우 많지만, 그 중에서 가장 중요한 이유 3가지에 대해 알아보자.
📌 1. 검색 최적화 (Search Engine Optimization, SEO)
다양한 사이트에서 검색을 해보면, 어떤 사이트는 검색 맨 위에 뜨고, 어떤 사이트는 아래에 뜬다. 이 때 등장하는 개념이 바로 SEO이다.
SEO란, 검색 엔진에서 웹사이트의 정보를 수집하고, 분류하여 검색 결과에 노출시키는 작업이다. 즉, 검색했을 때 우리 사이트를 우리가 원하는 사람들에게 딱 맞게 보여줄 수 있도록 사이트를 최적화하는 것을 SEO라고 한다.
SEO를 하는 방법은 매우 다양한데, 그 중 가장 대표적이고 중요한 요소가 바로 이 '시멘틱 태그'를 적절히 사용하는 것이다.
검색 서비스들은 각자 검색 엔진 로봇 프로그램을 사용해서 여러 사이트의 정보를 수집하는데, 이 때 시멘틱 태그를 적재적소에 활용하면 검색 엔진이 우리 사이트를 더 정확하게 파악할 수 있게 된다.
SEO를 위한 개발구성은 개발자에게 '매우매우매우' 중요하다. 그래서, 오늘은 SEO가 매우 중요하며, 이에 시멘틱 태그를 '반드시, 적절한 곳에' 사용해야 한다고 숙지하고, SEO에 대해서는 다음 포스팅을 통해 다시 한 번 더 강조하여 다뤄보고자 한다.
📌 2. 웹 접근성 (Web Accessibility)
2020년 기준으로 세계 인구의 15%가 장애를 가지고 있다고 한다. 장애를 가진 사람들은 웹 사이트를 사용할 때, 일반인들보다 더 많은 어려움을 겪는다. 특히, 시각장애인은 스크린을 직접적으로 볼 수 없기에, 스크린 리더(Screen Reader)라는 프로그램을 사용하여 웹 사이트를 사용한다.
스크린 리더는 화면을 소리내서 읽어주고, 이를 통해 웹 서핑을 사용할 수 있게 도와준다. 이 때, 스크린 리더는 시멘틱 태그를 통해 웹 사이트의 정보를 파악한다. 그래서, 시멘틱 태그를 적절히 사용하면 스크린 리더가 웹 사이트를 개발자의 의도에 따라 사용자에게 정확한 정보를 전달할 수 있게 된다.
따라서, 장벽 없는 Barrier-Free한 인터넷을 만드는데에도 시멘틱 태그는 매우 중요한 역할을 한다.
📌 3. 개발자 관점
개발자 관점에서도 시맨틱 태그는 매우 중요하다. 검색 엔진 로봇과 시각장애인, 그리고 개발자들의 공통점은 무엇일까? 바로, 눈에 보이는 화면이 아니라 코드를 통해 사이트를 이해한다는 것이다.
만약에 div태그가 잔뜩 적혀 있는 파일과 시멘틱 태그를 적절히 활용한 파일이 있을 때, 나를 포함한 다른 개발자가 이 두 파일을 보고, 어떤 파일이 더 이해하기 쉬울까? 당연히 시멘틱 태그를 적절히 활용한 파일이 더 이해하기 쉬울 것이다.
이처럼 시멘틱 태그는 개발자들이 코드를 이해하는데에도 매우 중요한 역할을 한다.
Outro
앞서 시멘틱 태그는 '의미를 가진 태그'라고 언급하였다. 시멘틱 태그는 이러한 '의미'를 바탕으로 영역을 의미있게 나누고, 코드를 보다 이해하기 쉽게 도와준다.
코드를 '이해'하는 것은 생각보다 중요하고, 또 강력한 무기이다. 코드를 잘 이해할 수 있어야만이 코드를 더욱 의미있고 효율적으로 작성할 수 있고, 이를 통해 유지보수가 용이한 코드를 작성할 수 있기 때문이다. 또한 '이해 가능한 코드'를 개발하는 것은 협업을 하는데에도 매우 중요하다.
코드를 작성하는 것보다 코드를 이해하는 것이 더 어려울 때가 많다. 이는 내 코드를 내가 읽을 때도, 내가 다른사람의 코드를 읽을 때도 마찬가지이다. 시멘틱 태그에 대해 다시 한 번 학습하며 과연 나는 'Understandable Code'를 작성할 수 있는 개발자인가? 라는 질문을 스스로에게 정말 많이 던져보았던 것 같다. 이와 같은 끊임없는 물음을 통해 코드의 의미를 부여하고, 이를 통해 'Understandable Code'를 작성하는 것의 중요성을 뼈저리게 깨달았으니, 이제는 깨달음을 넘어 실제로 'Understandable Code'를 작성하는 개발자로 한 단계 더 도약하여 나아가자.
