웹 개발과 관련된 글을 읽다보면 웹 표준, 웹 접근성, 웹 호환성이라는 용어가 종종 등장한다. 용어가 내뿜는 뉘앙스로 대충은 알아 듣고 있었지만 정확한 의미와 이것을 지키기 위해서는 어떻게 해야할 지를 정리한 글이다.
결론부터 말하자면 다음과 같다.
웹 표준 : 사용자가 어떤 브라우저나 기기를 사용하더라도 동일한 화면을 볼 수 있도록 하는 것
웹 접근성 : 어떤 상황이든 , 어떤 사람이든 동일한 정보를 제공받게 하는 것
웹 호환성 : 모든 브라우저에서 동일하게 작동하는 것
🌍 웹 표준 (Web Standards)
- 사용자가 어떤 브라우저나 기기를 사용하더라도 동일한 화면을 볼 수 있도록 하는 기법
초창기 웹 브라우저는 구현 방식이 각각 달라 브라우저별로 사이트를 만들어야 하는 비효율성이 발생했다.
웹 사용자들이 자유롭고 동등하게 정보를 제공받고 개발자의 개발에 편의를 제공받기 위하여 웹 표준은 따라야 한다.
현재 주로 사용되는 크롬, 엣지, 사파리 등 최신 브라우저는 모두 웹 표준을 따르고 있다.
즉 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저든 동일한 결과를 얻을 수 있게 된다.
✔ 웹 표준 기술과 규칙
웹 표준 기술 : W3C 권고 사항
구조 - HTML
표현 - CSS
동작 - Script (Javascript)
웹 표준 규칙
1. DOCTYPE 선언
웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시한다.
2. 시맨틱 태그 사용
시맨틱 태그는 HTML5에서 새로 추가된 태그로, <header>, <nav>, <section>, <footer> 등의 태그를 사용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.
3. CSS 스타일 시트 사용
CSS 스타일 시트를 사용하여 디자인과 레이아웃을 분리하고, 웹 페이지의 내용과 디자인을 분리하여 유지보수 및 확장성을 높일 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML !DOCTYPE declaration</title>
<link href="/media/examples/link-element-example.css" rel="stylesheet">
</head>
<body>
<header>
<h1>시맨틱 태그 예제</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
<p>이 문서는 HTML 문서입니다.</p>
</body>
</html>
✔ 웹 표준 장점
1. 유지 보수의 장점
과거 구조, 표현, 동작이 한데 섞여있는 코드에서 벗어나
HTML, CSS, JS가 영역이 분리되고 구조화되면서 통일하여 제어하게 되어 페이지의 유지보수가 용이해졌다.
2. 웹 호환성 확보
기존 IE브라우저에서만 작동이 가능했던 요소들이 웹 표준을 준수함으로써 다양한 브라우저 (크롬, 파이어폭스, 사파리, 오페라 등)에서도 작동이 가능해졌다.
3. 웹 접근성 확보
다양한 브라우징 환경에 대응이 가능하며 휴대폰, PDA에서도 정상적인 작동 및 장애인 지원용 프로그램에도 도움이 되므로 사용자나 접속 장치의 접근성이 용이해졌다.
4. 검색엔진 최적화 (SEO)
구조화된 웹페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 될 수 있도록 검색엔진의 검색결과를 최적화한다.
5. 효율적인 마크업
CSS와 HTML문서를 분리하여 제작하기 때문에 불필요한 마크업이 최소화되어 페이지 로딩속도 향상된다.
6. 파일 크기 축소, 서버 공간 절약
효율적인 소스 작성은 파일 사이즈와 서버공간을 절약할 수 있으며 동시에 화면표시에 소요되는 시간을 단축시킨다.
🌍 웹 접근성 (Web Accessibility)
- 어떤 상황이든 , 어떤 사람이든 동일한 정보를 제공받게 하는 것
웹 접근성의 예시로 시각장애인 분들을 생각해볼 수 있다.
시각장애인분들은 화면을 눈으로 볼 수 없기 때문에 화면을 읽어주는 '스크린 리더'라는 별도의 소프트웨어를 사용하여 웹을 사용한다. 스크린 리더는 스스로 화면을 분석할 수 없고 우리가 작성한 코드 그대로를 이해한다.
만약 우리가 버튼을 하나 만든다고 했을 때 아래의 두 가지 방법을 사용하여 만들 수 있다고 하자.
1. <button>버튼</button>
2. <img src="images/button.png" />button 태그를 사용하여 만든 첫 번째 버튼은 버튼의 기능을 그대로 구현하여 올바른 사용의도를 전달하였다.
이와 달리 버튼 이미지를 사용하여 만든 두 번째 버튼은 이미지 해석을 할 수므로 버튼이라는 올바른 사용 의도를 전달할 수 없다. 저 방법을 쓰고 싶다면 버튼인 것을 알리는 대체 텍스트를 삽입해야 한다.
여기서 button 태그를 사용한 것, 대체 텍스트를 삽입한 것이 웹 접근성을 준수한 것이라고 할 수 있다.
✔ 웹 접근성 원칙
1. 인지성 : 모든 컨텐츠는 사용자가 인식 가능해야 한다.
1) 대체 텍스트 제공
- 텍스트가 아닌 콘텐츠를 사용할 경우 용도를 알 수 있는 대체 텍스트를 삽입한다.
ex. 버튼을 이미지 태그를 사용하여 구현하였다면 alt 속성을 사용하여 대체 텍스트를 삽입한다.
<img src="images/button.png" alt="수정 버튼"/>
2) 멀티 미디어 대체수단 제공
- 콘텐츠에 상응하는 자막, 대본, 수어 등의 대체 수단을 제공한다.
ex. 오디오와 동기화 된 자막을 제공한다.
3) 콘텐츠 적응성
- 전체 콘텐츠는 논리적인 순서로 제공한다
- 콘텐츠 사용에 필요한 지시사항은 모양, 크기, 위치 등과 관계없이 다른 감각을 통해서도 인식 가능해야 한다.
4) 콘텐츠 명료성
- 콘텐츠는 색과 관계없이 인식되어야 한다.
- 이웃한 콘텐츠는 명도 대비 등의 시각적인 방법을 통해 구별되어야 한다.
2. 운용성 : 사용자가 모든 기능에 대해 조작이 가능해야 한다.
1) 입력장치 접근성
- 키보드만으로 사용할 수 있게 만들어져야 한다.
(붓질 기능처럼 마우스 궤적을 사용한 컨텐츠나 움직임 측정 센서를 사용한 컨텐츠는 제외)
- 사용자 입력과 버튼 등의 컨트롤은 개별적으로 조작하기에 충분한 크기여야 한다.
2) 충분한 시간 제공
- 시간 제한이 있는 컨텐츠는 최대한 제외하는 것이 바람직하다.
- 만약 사용하게 될 경우 반응 시간이 완료되기 전 이를 해제하거나 연장할 수 있는 수단을 제공해야 한다.
3) 광과민성 발작 예방
- 10인치 이상의 스크린을 사용하는 기긱에서는 광과민성 발작을 주의해야한다 .
- 초당 3~50회 주기로 깜빡이는 컨텐츠는 제한적으로 사용한다.
4) 쉬운 내비게이션
5) 입력 방식
3. 이해성 : 모든 사용자에게 콘텐츠는 이해되어야 한다 .
1) 가독성
2) 예측 가능성
3) 입력 도움
4. 내구성 : 기술에 영향을 받지 않고 현재의 콘텐츠를 이용할 수 있어야 한다.
1) 문법 준수
2) 웹 어플리케이션 접근성
🌍 웹 호환성 (Cross Browsing)
- 모든 브라우저에서 동일하게 작동하는
사용자마다 사용하는 브라우저가 다르기 때문에 모든 사용자가 차별 없이 동등한 정보를 제공받기 위해서는 크로스 브라우징이 필수이다. ( 크로스 브라우징 == 웹 호환성 )
웹 브라우저 별로 렌더링 엔진이 다르기 때문에 100% 동일한 화면을 보이게 하는 것은 사실상 불가능하다.
작동되지 않는 html, js 코드, 해석하지 못하는 css 코드가 존재하고 브라우저 버그들이 있기 때문이다.
크로스 브라우징은 적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말한다.
✔ 크로스 브라우징 방법
크로스 브라우징은 방법이 길어져 별도의 게시글로 작성 후 링크를 첨부할 예정이다.
💡 이들의 공통점과 차이점
웹 표준, 웹 호환성, 웹 접근성의 기대효과는 비슷하여 얼핏 동일한 내용인 것 처럼 느껴지곤 한다.
하지만 대상 및 종류의 준수 내용과 편의를 제공하는 점에서 분명한 차이가 있다.
공통점
- 웹을 사용하는 사용자가 웹 사이트를 자유롭고 편리하게 사용할 수 있어야 한다.
- 장애인, 고령자 등을 포함한 다양한 사용자층에서 사용할 수 있어야 한다.
- 다양한 환경, 새로운 기기에서의 이용, 개발 및 운용의 효율성을 끌어올려야 한다.
차이점
웹 표준을 준수 하는 것만으로는 웹 접근성이나 웹 호환성이 항상 무조건 보장되지 않는다.
또 웹 호환성을 준수하더라도 웹 접근성은 보장되지 않는다.
웹 접근성이란 보편적 접근성 확보를 우선시하고,
웹 호환성은 OS, SW에 독립적인 상호운용성 확보를 우선시하기 때문이다.
| 구분 | 목적 | 준수 내용 | 차이 |
| 웹 표준 (Web Standards) |
웹의 사용성 및 접근성 보장 | HTML, CSS 등에 대한 WC3규격(문법) 준수 등 - HTML, CSS, Javascript 등 구조와 표현, 동작 분리 권고 |
웹의 내용, 표현, 행동에 관련된 기술표준 |
| 웹 호환성 (Cross Browsing) |
웹 브라우저 버전,종류와 관계없는 웹사이트 접근 |
웹 표준 준수를 통한 브라우저 호환성 확보 - HTML, CSS 문법 준수 - 동작, 레이아웃, 플러그인 호환성 |
웹 표준을 공통으로 포함 |
| 웹 접근성 (Web Accessibility) |
인적, 환경적 요인에 제약없는 웹 정보 접근 |
W3C 웹 접근성 이니셔티브(WAI) 한국형 웹 콘텐츠 접근성 지침2.0 - 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성 |
출처
http://www.smartebiz.kr/new/subpage02_01.html
https://yozm.wishket.com/magazine/detail/1942/
