웹 표준 / 웹 접근성 / 웹 호환성

yoon Y·2022년 6월 2일

웹 접근성 웹 표준 웹 호환성

CS / 프론트엔드 학습 내용 정리

목록 보기

5/13

웹 표준

웹 표준이란?

어떠한 운영체제(환경)나 브라우저를 사용하여도 동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙.
동일한 컨텐츠란 완벽히 똑같은 화면을 의미하는 것이 아닌 모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미하는 것.
W3C에서 웹 표준을 정함. 4단계의 확정 권고안 만이 표준이 됨

기술

XHTML
XML
CSS
ECMAScript
DOM

규칙

내용은 HTML, 표현은 CSS, 동작은 Script+Dom으로 구현한다.
현재 최신 웹표준 버전인 HTML5, CSS3을 사용한다.
의미있는 태그를 사용해 시맨틱하게 작성한다.

시맨틱하게 작성한다는 것은?

데이터의 의미에 맞는 태그를 사용해 의미를 잘 전달하도록 문서를 작성하는 것.
스타일이 내포된 태그 사용과 셀렉터로 태그를 사용하는 것을 지양한다.
검색엔진에 더 구체적인 정보를 제공할 수 있어서 seo최적화에 좋다
가독성 높아지고 유지보수가 쉬워진다.

검색엔진 최적화를 하기 위한 방법

컨텐츠의 의미에 맞는 시맨틱 html태그 사용
페이지 내용에 맞는 적절한 title작성
meta 요소를 활용해 문서에 대한 설명을 작성

웹 표준을 지켜야하는 이유

브라우저 마다 사용되는 기술이나 규칙이 다르다면 개발하는 노동력과 시간이 들고, 특정 브라우저만 지원되도록 개발할 시 정보 제공의 차별성을 불러일으킨다.

시맨틱하게 작성하여 사용자가 검색했을 때 의미있는 정보들이 보여지게 해야하기 때문

초기

넷스케이프 vs 익스플로러의 브라우저 전쟁
표준에 맞지 않은 기능을 만들어내 각 브라우저에 맞게 개발해야했음
→ 개발자 등이 터짐

중기

윈도우에 끼워팔면서 IE가 독점 (넷스케이프가 짐)
호환성을 고려하지 않고 자사 진영에만 맞는 기술을 대거 도입 ex) ActiveX

말기

새로운 플랫폼인 스마트폰의 시대가 찾아옴
특정 os나 브라우저에서만 동작하는 웹 페이지는 설 자리를 잃어감 (더 편한 선택권이 늘어나니까)
웹 표준의 중요성이 점점 드러남

웹표준을 지킬 때의 장점

브라우저와 os에 관계없이 하나의 코드로 모든 플랫폼에 대응할 수 있음(호환성)
- 개발자 - 개발 효율성
- 기업 - 서버 비용 절감과 운영의 효율성
검색엔진 최적화에 용이
- 웹표준을 지켜 시맨틱하게 작성하면 검색 결과 순위에 더 높은 우위를 가져갈 수 있음
개발자가 더 이해하기 쉬운 코드
- 사람도 의미를 가진 태그를 통해 만들어진 구조를 더 이해하기 쉽고, 그로 인해 개발의 효율을 높힘
구조와 표현의 분리가 가능
- 기존에는 html구조와 표현이 뒤섞여 있었다. (스타일 용도의 태그들)
- 현재는 html은 웹의 구조와 의미, css는 웹의 표현을 담당
- 가독성과 유지 보수 측면에서 이점을 가져다 줌
웹 표준을 지키면 웹 접근성을 높인다.

웹 접근성

웹 접근성이란

장애인이나 고령자들이 비장애인들과 마찬가지로 웹 사이트의 정보를 동등하게 접근할 수 있도록 보장하는 법칙.

웹 표준과 웹 접근성의 관계

웹 접근성을 높이는 가장 쉽고 기본적인 방법은 웹 표준을 지키는 것.
웹 표준을 준수하는 것은 접근성 확보의 기본이 된다.
웹 표준은 접근성 보조 도구가 웹을 좀 더 쉽게 이해할 수 있도록 해주므로 접근성은 웹 표준을 지키는 것에서부터 시작된다고 할 수 있다.
하지만 웹 표준을 지키는 것 외에도 해야할 일이 많다.
ex) 스크린 리더도 웹표준을 준수한 시맨틱 html구조를 통해 더 원활한 흐름으로 음성 안내가 가능함
접근성이 나무라면 웹 표준은 나무 뿌리에 비유 가능

웹 접근성 가이드

인식의 용이성
운용의 용이성
이해의 용이성

웹 접근성 가이드 및 체크리스트

웹 호환성

모든 브라우저에서도 똑같은 화면이 나타나는 것. 이를 크로스 브라우징이라 한다.

브라우저마다 디폴트 css를 가지고 있어서 CSS초기화를 통해서 표준화를 시켜주는 과정이 필요하다.
ex) normalize.css / reset.css

HTML 첫 문장에 <!DOCTYPE HTML>을 쓴다.
Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것.
해주지 않으면 각 브라우저마다 문서를 다르게 나타내기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다.

utf-8 인코딩 방식을 지정한다.
여러 브라우저에서 통일된 인코딩 방식으로 노출되게 하기 위함.

참고 링크
https://www.youtube.com/watch?v=xToJhmAJYCE