웹 표준과 시멘틱함에 대하여

🚩웹 표준이 뭔가요?

웹 표준이라는 단어에 대해 들어보셨나요? 

오늘은 가볍게 이에 대한 이야기를 조금 하려 합니다. 그 전에, '웹'이 무엇인지부터 알아야겠죠.

 

흔히 웹을 인터넷이라고 생각하기 쉽지만, 사실 인터넷은 웹까지 포괄하는 더 큰 개념입니다. 인터넷은 전 세계적으로 연결된 컴퓨터 네트워크 통신망을 의미하는데 온라인 게임이나 이메일, 모바일 앱까지 네트워크를 사용하는 서비스라면 모두 포함되기 때문이지요. 따라서 웹은 '문서, 이미지, 영상 등 정보를 여러 사람과 공유할 수 있는 공간'이라고 생각하면 됩니다. 우리는 웹이라는 공간 안에서 많은 정보를 교환하고 있는 것입니다. 댓글을 달고, 소통을 하는 식으로요.

 

하지만 2000년 초반까지만 해도 이러한 소통이 원활하지만은 않았다고 합니다. 특히 여러 브라우저 간에 호환이 잘 되지 않아서 원하는대로 화면이 나오지 않는 불편함도 비일비재 했다는데요.

이를 개선하기 위해 W3C(world wide web consortium)에서 웹 표준을 권고하기 시작했습니다. 

 

즉, 웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떤 브라우저를 사용하더라도, 웹 페이지가 동일하고 원활하게 보이도록 일종의 표준을 정해준 것입니다. 그러니 웹 표준에 맞추어 페이지를 만들면 어떤 브라우저를 사용자가 쓰고 있든 동일한 결과물을 얻을 수 있겠죠. 가능한 개발자가 웹 표준을 준수해야 하는 이유기도 하구요. 그 외에도 웹 표준을 지키면 1)유지보수에서 용이 2)특정한 운영 체제에 종속적이지 않아, 호환성이 높음 3)검색의 효율성이 높아짐 4)웹 접근성이 향상됨 과 같은 장점을 얻을 수 있습니다. 

 

 

🚩Sementic HTML

그러니 웹 표준에 맞게 HTML을 시멘틱sementic하게 작성하는 것이 중요해졌습니다. 시멘틱이란 '의미가 있는' 이라는 뜻인데요. HTML문서를 작성할 때 웬만한 화면 구조는 <div>와 <span>의 나열만으로도 만들 수 있지만, 이는 시멘틱하다고 불리지 않습니다. 코드만 보고도 바로 무슨 의도로 이 구역이 쓰였는지 알 수 있어야 확실히 시멘틱한 코드입니다. 즉, 눈에 보이는 그럴싸한 화면을 만드는 것에서 한 발 더 나아가 의미 있는 코드를 짜는 것이 시멘틱한 HTML의 목적입니다. 

 

이렇게 짜여진 시멘틱 코드는 개발자 간의 소통이 빠르게 합니다. 광고비 지출 없이 검색이 용이하도록 도우며, 시각 장애인 등의 다양한 환경을 가진 사용자에게 원활한 접근을 허용해주기도 합니다. 특히 정부 관련 홈페이지는 사기업보다 더 엄격한 시멘틱 기준에 맞추어서 만들어야 한다고 알고 있어요. 어떤 국민도 불평등한 이유로 국가의 복지에서 배제되지 않도록 노력해야 하기 때문이죠.

 

시멘틱한 코드를 위한 태그로는 다음과 같은 것들이 있습니다.

 

<header> 페이지나 요소의 최상단에 위치하는 머리말.
<nav> 메뉴, 목차 등에 사용. 다른 곳으로 이동할 수 있게 돕는다.
<aside> 문서와 연관은 있지만, 직접적인 연관은 없는 내용.
<main> 문서의 메인이 되는 주요 콘텐츠.
<article> 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용한다.
<section> 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용. 제목(<hgroup>)을 포함하는 경우가 많다.
<hgroup> 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>.
<footer> 페이지나 요소의 최하단에 위치하는 꼬리말.

 

이 외에도 단순한 꾸밈을 위해 <hgroup>요소를 사용하지 않을 것(제목만 사용), <b>와 <i>보다는 강조한다는 의미를 담은 <strong>와 <em>을 사용, <br/>을 줄 띄움을 위해 남발하지 말 것, 인라인으로 스타일을 사용하지 말 것 등이 있습니다.

 

 

눈에 보기 좋은 화면과 그 자체로 의미를 가진 sementic한 화면은 다릅니다. 

웹 표준을 지키기 위해, 꾸밈 요소는 최대한 CSS를 사용하는 식으로 HTML를 '의미 있게' 유지해야 하겠습니다.