시맨틱 마크업이란 무엇이며, 왜 중요한가요?

시맨틱 마크업이란 무엇이며, 왜 중요한가요?

프론트엔드와 관련된 질문이에요.

시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식을 말합니다. 예를 들어, <div>와 <span> 같은 비시맨틱 태그가 아닌, <header>, <footer>, <article>, <section> 같은 시맨틱 태그를 사용하여 문서 구조와 콘텐츠의 역할을 명확하게 하는 것입니다.

 

시맨틱 마크업이 중요한 이유는 크게 두 가지입니다.

첫째, 접근성을 개선하기 위함입니다. 시맨틱 요소들은 스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석할 수 있게 해 주어 시각장애인이나 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색할 수 있게 합니다. 이러한 요소를 올바르게 사용하면, 더 많은 사람들에게 접근 가능한 웹 환경을 제공할 수 있습니다.

 

둘째, SEO(검색 엔진 최적화)에 유리합니다. 검색 엔진은 HTML의 시맨틱 구조를 통해 페이지의 구성을 파악합니다. 그렇기에 시맨틱 마크업을 적절히 적용하면, 검색 엔진이 페이지를 올바르게 파악할 수 있고, 그에 따라 검색 결과에서 페이지가 더 잘 노출될 가능성이 높아집니다.

 

따라서 시맨틱 마크업은 단순한 코드 작성 컨벤션을 넘어, 웹 접근성과 SEO를 위한 중요한 요소로, 현대 웹 개발에서 필수적인 기술이라고 할 수 있습니다.

 

CSR(Client Side Rendering)에서도 시맨틱 마크업이 SEO에 영향을 미친다고 보시나요? 만약 그렇다면, 왜 그렇다고 생각하시나요? 🤔

CSR 환경에서는 시맨틱 마크업이 SEO에 주는 영향이 다소 제한적일 수 있지만, 여전히 중요한 역할을 한다고 생각합니다.

CSR에서는 대부분의 콘텐츠가 클라이언트 측에서 렌더링되기 때문에, 검색 엔진이 페이지를 크롤링할 때 페이지의 초기 콘텐츠만 인식할 가능성이 큽니다. 그렇더라도 최근 검색 엔진들은 JavaScript 렌더링을 지원하는 방향으로 진화하고 있으며, 페이지의 시맨틱 구조를 어느 정도 파악할 수 있습니다. 따라서 시맨틱 마크업을 제대로 적용하면 CSR에서도 검색 엔진이 콘텐츠의 중요한 부분을 더 쉽게 인식하게 되어 검색 결과에 긍정적인 영향을 미칠 수 있습니다.