웹 표준은 왜 지켜야 하는 걸까?

이 질문에 답 할 수 있어야 할 것 같다..

웹 표준

웹 표준이 등장한 배경

1990년대 후반에 넷스케이프와 인터넷 익스플로러가 인터넷을 장악하기 위해 치열한 전쟁을 벌였다. 회사들의 싸움에 개발자만 죽어나는...

개발자는 넷스케이프와 인터넷 익스플로러에서 모두 동작하는 웹을 개발해야 했다. 넷스케이프 버전 웹, 익스플로러 버전 웹을 따로따로 만들어야 했었다고 한다.

웹 브라우저 종류가 다양한 현재에 저런 상황이었다면 난 개발자를 하려고 하지 않았겠지...

시간이지나 윈도우 98이 인터넷 익스플로러를 기본으로 탑재하기 시작하면서 익스플로러가 브라우저의 왕에 등극하게 된다.

한국에선 97%가 익스플로러를 사용한 시기가 있었다! 지금은 뭐....

인터넷 익스플로러의 독점이 이어지자 다른 브라우저의 호환성은 뒤로 미뤄두고 자사 진영에만 맞는 기술을 대거 도입한다.

🤬ActiveX 같은 플러그인말이다.

스마트폰이 등장하면서 특정 OS나 특정 브라우저에서만 동작하는 웹 페이지는 관짝에 들어가고 웹 표준을 지키는 것이 중요하게 되었다.

웹 표준

그래서 웹 표준이 뭔데?

웹 표준은 어떠한 운영체제나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙을 의미한다.

여기서 동일한 콘텐츠는 같은 내용이 아니라 모든 플랫폼(OS, 브라우저)에서 동등한 수준의 정보를 의미한다.

아직도 대학의 온라인 시험이나 오래된 웹 페이지는 특정 브라우저에서만 동작하는 경우가 많다.

❓그렇다면 우리가 지켜야 하는 웹 표준은 어떻게 만들어 졌을까?

웹 표준은 팀 버너스 리(웹의 아버지)를 중심으로한 조직의 토론으로 결정되었다. 특정 브라우저에서만 동작하는 태그나 기능 같은 것은 웹 표준에서 벗어난다.

그렇다면 웹 표준을 지켰을 때의 좋은 점은 무엇일까?

역시 하나의 코드로 크로스플랫폼이 가능하다는 것이다.

둘째로 SEO(Search Engine Optimization), 검색엔진 최적화에 용이하다.
검색엔진 최적화란 웹 페이지가 검색 결과에서 좀 더 높은 순위에 노출 될 수 있도록 하는 작업을 의미한다.

웹 크롤러 봇은 웹 페이지를 탐색하여 분류하는데, 시맨틱(의미있는) 태그를 사용하는 등 웹 표준을 지켜 웹페이지를 만든다면 크롤러 봇이 페이지를 이해하기 쉬워진다. 따라서 웹 표준을 지키면 웹 페이지 검색 결과 순위에서 더 높은 우위를 가져갈 수 있다.

셋째, 개발자가 코드를 이해하기 더 쉬워진다. 시맨틱 태그로 잘 작성된 웹 페이지는 검색엔진 뿐 아니라 사람도 페이지의 구조를 이해하기 쉽기 때문에 개발자의 효율을 높여줄 수 있다.

효율에 먹고 사는 개발자에게 필수적인 요소다.

넷째, 구조와 표현의 분리가 가능하다. HTML과 CSS를 분리해 내면서 웹의 골격, 디자인을 유지보수하고 수정하기에 아주 용이하다.

마지막으로 웹 표준을 지키면 웹 접근성을 높일 수 있게 된다.

웹 접근성

• 개인의 능력에 상관없이 웹 페이지의 정보에 접근할 수 있도록 보장하는 것을 의미한다.

예를 들어 시각 장애인이 웹 서비스를 이용하려고 한다고 생각해보자.
시각 장애인은 스크린 리더라는 프로그램을 통해 웹 페이지를 읽을 수 있다.

• 스크린 리더는 웹 페이지의 내용, 사용자가 입력하는 내용을 음성으로 알려주는 프로그램이다.
• tab를 이용하여 html 대화형 요소에 접근하고 스크린 리더는 이를 읽어준다. 예를 들어 img태그에 alt속성을 등록해두면 스크린리더는 alt속성에 등록된 값을 읽어준다.
• 대화형 요소란 button, input tag와 같이 사용자와 상호작용 할 수 있도록 설계된 tag들을 의미한다.

❓ 그래서 웹 접근성을 높이려면 어떻게 해야하는데

언급했다. 웹 표준을 지켜라

그렇다면 웹 표준만 지키면 웹 접근성 문제가 해결되나?

아니다. 세상에 존재하는 사람들은 모~~~~두 다르다. 하나의 표준만으로 모든 사람의 접근성을 보장할 수는 없다.

그럼에도 웹 표준은 접근성 보조 도구가 웹을 좀 더 쉽게 이해할 수 있도록 해주므로 웹 표준없이 웹 접근성을 생각한다는 것은 전제가 틀렸다.

📕 정리해보자

웹 표준이란?
하나의 소스로 모든 브라우저나 플랫폼에서 같은 컨텐츠를 볼 수 있도록 하는 웹 개발자들간의 약속이다.

개발자에게는 효율성을, 기업에게는 파일의 간소화를 통한 서버 비용절감을 가져다 주는 장점도 있다.

웹 접근성이란?
개인의 능력에 상관없이 모든 사람이 웹을 사용할 수 있도록 하는 방법이며 웹 표준을 준수하는 것은 웹 접근성 확보의 뿌리가 된다.

웹 검사기
https://validator.w3.org/unicorn/

https://wave.webaim.org/ > 이사이트는 GUI를 제공해서 한 눈에 쉽게 볼 수 있다.

시멘틱 태그

웹 표준과 접근성을 알아보면서 잠깐 언급된 시멘틱 태그에 대해서 알아보자.

Semantic Tags

직역하면 의미가 있는 태그들이다.

시멘틱 태그는 웹 문서 내의 콘텐츠의 의미를 명확하게 설명하기 위한 HTML 태그이다. 즉, 해당 콘텐츠가 어떤 의미를 가지고 있는지 브라우저나 검색 엔진 등이 파악하기 쉽게 하는 역할을 한다.

우리가 문을 바라보면 문 손잡이를 잡고 문을 열고 나가거나 들어 올 수 있는 것이라고 인식하고, 주전자를 바라봤을 때 주전자의 손잡이를 잡고 사용해야 한다는 것을 이해하고 있다.

우리 주변의 사물과 구성요소에 사물만의 의미가 있듯이 HTML Tag에도 Tag만의 의미가 있다.

웹 페이지를 만들 때 제목 태그(<h1~6>)를 사용하지않고 span이나 div를 사용하여 텍스트 크기를 늘려 제목"처럼" 보이게는 할 수 있을 것이다. 하지만 이런 행동은 찌개를 숟가락으로 먹지 않고 젓가락으로 먹는 것과 같은 행동이다.

제목에 <h1>태그를 사용하면 자동으로 제목이라는 의미를 갖게 된다. 굳이 div, span을 사용해야 할 이유가 없다.

div만으로 웹 페이지를 만들수야 있지만 .........

또 시멘틱 태그를 잘 사용하면 앞서 언급한 검색 엔진 최적화에 용이하며, 웹 접근성이 높아지며 개발자가 웹 페이지 구조를 쉽게 이해 할 수 있다.

대표적인 시멘틱 태그들을 알아보자.

header: 웹 사이트의 로고나 사용자들을 위한 중요한 메뉴 아이템들을 담는 태그
nav: header안에 존재하는 여러가지 메뉴를 담는 태그
footer: 웹 페이지 하단에 링크나 페이지 정보를 담는 태그
main: 웹 페이지에서 중요한 콘텐츠를 담는 태그
aside: main태그 안에서 페이지 컨텐츠와 직접적으로 연관된 정보가 아닌 정보를 담는 태그(광고, 페이지와 연관된 링크를 담아 낼 수 있음)
article: 블로그 포스트에서 포스트하나, 신문 기사에서 기사 하나를 묶어 내는 것과 같은 경우에 사용한다. 독립적으로 다른 페이지에서 보여져도 문제가 없는 정보에 사용한다. main안에서 다른 정보들과 상관없이 고유한 정보를 나타내고 싶을 때 사용한다.
section: 연관있는 정보를 하나로 묶어 줄 때 사용한다.

⭐결론

웹 표준, 웹 접근성, 시멘틱 태그는 서로 독립된 개념이 아니고 연결되어 있다.
시멘틱 태그를 잘 사용하면 웹 표준을 지킬 수 있고, 웹 표준을 지키면 웹 접근성을 높일 수 있고 검색엔진 최적화에 용이하다.