1. 웹 vs 인터넷

웹 표준에 대해 공부하기 전에 웹의 개념을 정확히 짚고 넘어가자.
일상에서 웹과 인터넷을 구분 없이 사용하는 경우가 많지만, 이 둘은 엄밀하게 말하면 다른 개념이다.

웹(Web)

웹은 인터넷의 일부이며, 인터넷 위에서 동작하는 여러 서비스 중 하나이다. 인터넷을 통해 서로 연결된 컴퓨터 네트워크 상에서 정보 공유 서비스(검색 엔진, 이메일, 소셜 네트워크 등)를 제공하는 전세계적인 정보 공간을 의미한다. 웹은 주로 HTML, CSS, Javascript로 구축되며, 웹 브라우저를 통해 이용할 수 있다.

인터넷(Internet)

컴퓨터 네트워크가 연결된 세계적인 대규모 네트워크 시스템이다. 컴퓨터, 스마트폰 등 다양한 디바이스들을 사용하여 서로 연결되어 정보를 주고받을 수 있는 기술적 기반을 제공한다. 웹 뿐만 아니라 FTP 프로토콜을 사용하는 파일 전송 서비스, 웹 게임 제외하고 다운로드하여 실행하는 게임, 웹 브라우저 말고 앱을 다운로드 받아 사용할 수 있는 Gmail 등등을 떠올려볼 수 있다.

아래와 같은 포함 관계로 볼 수 있다.

2. 웹 표준, 그게 뭔데?

1990년대 초반부터 웹 페이지가 많아짐에 따라 웹 브라우저의 종류도 증가했지만, 각각의 브라우저는 독자적인 렌더링 엔진을 가지고 웹 페이지를 해석하게 되었다. 같은 웹 페이지라도 브라우저나 운영체제가 다르면 다르게 보이는 문제가 발생하였다.

이러한 문제를 해결하고자 여러가지 웹 표준이 제정되기 시작했다.

- W3C(World Wide Web Consortium)

HTML, CSS, XML 등 웹 표준 기술과 관련된 다양한 권고안을 제정

- WHATWG(Web Hypertext Application Technology Working Group)

HTML, DOM 발전을 위한 기술 작업 그룹이며, 실제 브라우저의 기능과 표준화를 위한 개선 작업을 진행한다. 현재 웹 표준 중 가장 대표적인 기술인 HTML5 관련 웹 표준을 제정하는 단체 중 하나이기도 하다.

- ECMA

Javascript 표준 제정

웹 표준이란, 사용자가 어떤 브라우저나 운영체제를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 일종의 규칙이라고 할 수 있다. 즉, 브라우저 호환성의 기반이라고 할 수 있겠다.

3. 브라우저 호환성? OK. 다른 장점도 있나?

물론 브라우저 호환성 이슈를 최소화한다는 것이 대표적인 장점이지만, 그 외에도 여러가지 장점들이 있다. 정리해보자면 아래와 같다.

1. 브라우저 호환성

2. SEO에 유리하다.

검색엔진 크롤러가 읽기 쉬운 웹페이지일수록 검색 결과에서 상위에 노출될 가능성이 커진다.

검색엔진 크롤러가 무엇? 인터넷 상의 웹 페이지들을 수집하고 방문하며 분석하는 프로그램이다. 웹 페이지에 링크가 있으면 또 따라 들어가기를 반복한다. 이렇게 돌아다니면서 수집한 정보를 검색엔진 DB에 저장하고 인덱싱 작업을 한다.

내가 만든 웹페이지가 검색 결과 상위에 노출되었으면 좋겠다? 트래픽이 매출과 직결된다? 그럼 크롤러한테 잘보여야 하는 것이다. 크롤러 씨의 구미에 맞는 HTML을 작성해야만 검색 결과에서 높은 순위를 차지할 수 있는 것이다.

크롤러가 좋아하는 코드는? 바로 웹 표준을 준수하는 코드이다. HTML 코드를 읽을 때 페이지 내용, 제목, 메타데이터 등을 파악할텐데 의미 전달이 어려우면 크롤러가 띠용?하기 십상이다. 의미 전달이 잘 되는 HTML을 짜야하는 것이다. 이를 위해 Semantic HTML이 중요해지는 것이다. Semantic HTML은 아래에서 좀 더 자세히 살펴보겠다.

3. 유지보수 및 개발 비용 감소

웹 표준은 코드 품질을 향상하는 방향으로 제정되기 마련이다. 이는 곧 웹 표준을 따르기만 해도 좋은 코드에 가까워진다는 의미이다. 또한 문서화가 용이해지고 일관성 있는 코드를 작성하게 되어 유지보수에 있어 불필요한 리소스 투입이 감소하는 효과를 볼 수 있다.

4. 웹 접근성 향상

모바일 디바이스 화면이 너무 작다거나 혹은 시각장애를 가졌다는 이유로 특정 콘텐츠에 접근이 어려워진다면 개선이 필요할 것이다. 브라우저나 운영체제가 다르더라도 콘텐츠에 접근할 기회는 동등하게 주어진다면 웹 접근성이 향상되는 것이라고 할 수 있다.

중요한 것은 웹 접근성이라는 개념이 특정 그룹에만 적용되는 것은 아니라는 것이다. 만약 내가 크롬 말고 사파리를 더 좋아하는데 사파리로는 사진이 깨져보인다거나, 지금 운전 중이어서 특정 콘텐츠를 열람하기 어렵다면 그 자체로도 나는 소외되는 것이라고 할 수 있다. 웹 표준을 준수하여 개발하면 웹 접근 기회의 동등성 개선에 있어 도움이 된다. 특히 아래에서 설명할 Semantic HTML도 이에 해당한다.

4. Semantic HTML은 웹 표준 준수에 있어 어떤 의미를 가지는가?

Semantic HTML이 무엇?

HTML 태그를 사용할 때 웹페이지의 구조와 의미를 명확하게 표현하는 것이다.
아래 div 지옥을 한번 구경해보자.

// semantic하지 않은 HTML 예시
<div id="header">
  <div id="logo">My Website</div>
  <div id="navigation">
    <span>Home</span>
    <span>About</span>
    <span>Contact</span>
  </div>
</div>

<div id="main">
  <div id="welcome">
    <div id="heading">Welcome to div world</div>
    <div id="intro">
      div 태그를 사랑하는 웹사이트에 오신 것을 환영합니다. 눈이 아파도 참아주세요.
    </div>
  </div>

  <div id="about">
    <div id="heading">About Us</div>
    <div id="intro">
이 웹페이지는 div 태그 중독자가 만든 웹 페이지로서, Semantic 태그라는 개념은 없습니다.
우리는 가독성보다는 div 그 자체를 사랑합니다. div 만세~
    </div>
  </div>

  <div id="latest-news">
    <div id="heading">Latest News</div>
    <div id="news-list">
      <span><a href="#">div 태그, Semantic은 없지만 복붙 편해</a></span>
      <span><a href="#">span 태그, div 태그 다음으로 복붙 편해</a></span>
    </div>
  </div>
</div>

<div id="footer">
  <span>&copy; 2023 My Website. All rights reserved.</span>
</div>

눈이 아프다면 다 이유가 있다. HTML 태그의 이름이 아무런 역할을 하지않는 무색 무취인 것이다. 태그의 역할이라고는 전부 다 id에 의존하고 있다.

이와 달리 태그만 봐도 HTML의 구조가 대강 파악이 될 때 Semantic한 HTML이라고 할 수 있다.

// semantic한 HTML 예시
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Welcome to semantic world</h2>
    <p>
      semantic을 사랑하는 웹사이트에 오신 것을 환영합니다.
    </p>
  </section>

  <section>
    <h2>About Us</h2>
    <p>
      이 웹페이지는 semantic 태그를 잘 활용하는 예시입니다.
      우리는 의미론적 구조를 지향합니다.
    </p>
  </section>

  <section>
    <h2>Latest News</h2>
    <ul>
      <li><a href="#">의미론적인 마크업, 크롤러가 색인 수집할 때 편해</a></li>
      <li><a href="#">의미론적인 마크업, 유지보수 편해</a></li>
    </ul>
  </section>
</main>

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

이렇게 <header>, <nav>, <main>, <article>, <section>, <footer> 등 역할과 의미를 가진 HTML태그가 적재적소에 활용될 때 semantic HTML이라고 평가할 수 있다.

이처럼 semantic HTML을 지향하는 것은 웹 표준을 준수함에 있어 핵심이 되는 요소이다. 위에서 살펴본 웹 표준 준수 시 장점과의 연관성을 생각해보자.

• 호환성
  • 웹 페이지가 모든 브라우저에서 일관되게 보이게 한다.
• SEO 개선
  • 의미가 잘 전달되는 태그를 사용하면 크롤러가 이해하기에도 쉬워지고, 얼른 DB에 소장하고 싶어질 것이다.
• 유지보수 및 개발 비용 감소
  • 코드의 가독성이 향상된다. div 지옥을 떠올려보자. 확실히 유지보수에 참여하고 싶은 코드는 아니다. 코드가 이해하기 쉬워야 불필요한 리소스 낭비가 줄어든다.
• 접근성
  • 스크린 리더 등 보조 기기 사용자가 웹페이지의 구조와 의미를 파악하기에 용이하다.