웹 표준 알아보기

Bam·2023년 8월 22일

W3C Web standards 웹 표준

CS

목록 보기

23/26

인터넷은 공간을 초월하여 전세계에서 접근할 수 있는 아주 방대한 공간입니다. 수 십억의 사람들이 동시에 접근하는 공간이니만큼 정말 다양한 사람들이 다양한 목적으로 이용하게 됩니다.

그래서 어떤 곳의 누가, 어떻게 이용해도 웹 페이지를 이용하는데 있어서 불편함이 없도록 웹 표준을 제정하고 권고하고 있습니다.

웹 표준 Web Standards

웹 표준은 브라우저의 종류에 상관없이 일관된 경험을 제공하기 위한 웹 페이지 작성의 기술과 규칙입니다. 초기에는 HTML에 대해서만 표준을 지정했지만 CSS, Javascript 등 웹 페이지 작성에 사용할 수 있는 기술들이 늘어나면서 동시에 그에 대한 웹 표준들도 속속들이 제정되어 권고되고 있습니다.

웹 표준은 여러 기관에서 발표하고 있으나 대표적으로는 W3C에서 권고하고 있습니다. 들어가보면 엄청나게 많은 웹 표준 권고안들이 존재한다는 것을 볼 수 있습니다.

웹 표준의 장점

그렇다면 어떤식으로 불편함을 최소화하기에 웹 표준을 강력하게 권고하는 걸까요?

유지보수 & 확장성

프로젝트 개발에서 코딩 컨벤션을 설립하고 지키면 프로젝트 생산 비용과 시간이 절감되듯이 웹 페이지도 웹 표준을 지키게 되면 생산 비용과 시간을 줄일 수 있게 됩니다.

웹 페이지 호환성

웹 표준이 가장 중요하게 생각하는 것 중 하나로, 어떤 브라우저에서 페이지를 접속하든 사용자에게 일관된 경험을 제공할 수 있게 됩니다.

검색 엔진 최적화

웹 표준을 지킨 페이지는 검색 엔진이 인식하기 쉽게 만들어지므로, 검색 노출 증가나 효과적인 검색을 할 수 있게 됩니다.

웹 접근성 향상

사용자의 환경적/신체적 조건의 제약 없이 모든 사용자가 웹 페이지에 접근하여 이용할 수 있도록 보장하는 것을 웹 접근성이라고 합니다. 웹 표준을 지키면 웹 접근성이 향상되어 누구나 자유롭게 사용할 수 있는 페이지를 제작할 수 있게 됩니다.

웹 접근성에 대한 내용은 포스트가 길어지기에 다른 포스트로 따로 분리할 예정입니다.

웹 표준을 지키는 방법

몇가지 간단하게 웹 표준을 지키는 방법이 있습니다.

DOCTYPE 명시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

문서의 최상단에 <!DOCTYPE html>과 같이 DOCTYPE을 명시함으로써 현재 웹 페이지가 어떤 버전의 HTML을 사용하고 있는지를 알립니다.

스타일 시트의 분리

<style>태그를 HTML 문서에 삽입하거나 인라인 스타일을 사용하는 대신 스타일 시트 문서를 분리함으로써 페이지의 유지보수와 확장성을 향상시킬 수 있습니다.

시맨틱 태그

HTML5에 추가된 시맨틱 태그를 사용하면 웹 페이지의 구조를 확실하게 표현할 수 있습니다.

기존의 <div>태그를 통한 작성과 시맨틱 태그를 사용한 방식을 비교해봅시다. 척 봐도 시맨틱 태그를 사용한 코드가 이해하기 쉽죠?

<!-- div 태그만 사용한 구조 -->
<div id='header'>
  <h2>제목</h2>
</div>

<div id='menu'>
  <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
  </ul>
</div>

<div id='contents'>
  <p>내용</p>
</div>

<div id='footer'>
  <p>footer 정보들</p>
</div>

<!-- 시맨틱 태그를 사용한 구조 -->
<header>
  <h2>제목</h2>
</header>

<nav>
  <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
  </ul>
</nav>

<article>
  <p>본문</p>
</article>

<footer>
  <p>footer 정보들</p>
</footer>

웹 접근성

모든 사용자의 접근을 용이하게 하기 위해 웹 접근성을 적극적으로 채용해야합니다. 웹 콘텐츠 접근성 지침(WCAG)를 준수하고 고려한 페이지는 웹 접근성을 용이하게 만들어 줍니다.

ex) <b> vs <strong>

<b>태그와 <strong>태그는 둘 다 글자를 강조하는 볼드체 효과를 주는 것으로 역할이 동일합니다. 하지만 <b>태그는 단순히 텍스트만 굵게 칠하고 화면 낭독기에서 강조해주지 않지만, <strong>태그는 브라우저에 강조 사실을 알려 화면 낭독기에서 이 텍스트가 강조되었다고 알려주는 역할을 합니다.

이처럼 웹 접근성을 위한 상위 호환 태그들이 존재합니다.