웹표준의 이해(웹 표준이란?)

웹표준의 이해(웹 표준이란?)

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 웹표준, 웹 접근성 ) ] 입니다. : ) 

Web 표준의 이해

▶ 웹 표준(Web Standards)

1. 웹 표준이란?
 - '웹에서 표준적으로 사용되는 기술이나 규칙'
 - 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다.
 - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미.
 - 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식.
 - CSS 와 HTML(XHTML)로 웹 문서를 작성하는 것의 명확한 용어는 권고(recommend)라고 하며 버전과 상관없이 HTML, XHTML은 그 자체로 표준이라고 한다.

2. 웹 표준이 중요한 이유?
 - 현재 전 인류의 절반이상이 인터넷을 사용하고 있으며 앞으로도 증가하고 있다. 이에 따라 표준화는 반드시 해결해야 할 과제가 된다.

 - 웹 표준이 없던 1990년대 말 ~ 2000년대 초반에는 웹 사이트 개발자는 사실상 두 개의 사이트를 만들어야 했다. (익스플로러, 넷스케이프)
 지금과 같이 표준이 있었더라면 한번만 작업해도 되고 많은 노동력과 시간을 아낄수 있다. 자연스레 정보 제공의 질도 올라갈 것이다.

다음 웹 표준을 지킬시 생길 수 있는 장점도 참고하자.

 

※ 웹 표준의 장점 

 - 개발 및 운영의 효율성 제고. 즉 소스의 통일화로 수정 및 운영관리가 용이하다.
 - 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상 되고, 장애인, 고령자 등을 포함한 사용자층도 확대 가능하다. 
 - 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다.
 - CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.
 - 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다. 
 - 스크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 돕는다. 
 - 검색봇을 통한 효율적 노출과 같은 검색엔진 최적화가 가능하다. 

 

3. 웹 표준의 기술
1) XHTML ( eXtensible Hypertext Markup Language ) 
2) CSS (Cascading Style Sheets) 
3) XML (eXtensible Markup Language) 
4) DOM(Document Object Model) 
5) ECMAScript : ECMA international 의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어 

 

4. 가이드 라인 참조
 - https://www.w3.org/standards/ 

 

▶ 웹 표준(Web Standards)

1. 웹 접근성
 - 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것
   즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있는 것을 접근성이라고 한다.
 - W3C 정의에 따르면 웹 표준은 접근성, 사생활 보호, 보안, 국제화의 측면에서 고려해야 한다고 한다.
 - 웹 접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미 한다.
   시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해 한다.
   하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다.
   예를들어 '로그인'이라는 텍스트 대신 메뉴라고 로그인 이미지를 사용할 경우 비 시각 장애인의 눈에는 로그인 메뉴로 인식 가능하지만, 소프트웨어의 입장에서는 그저 이미지일 뿐이다.
   따라서, 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 아래와 같이 설명을 추가 해야 한다.

ex)

<img arc = "img/login.png" alt="로그인 />

 - 팀 버너스 리(Tim Berners-Lee)는 웹을 이렇게 정의했다 : 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간

2. 웹 콘텐츠 접근성 지침(WCAG)
1) 인지성(Perceivable)
 - 정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.

모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

2) 운용성(Operable)
 - 사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.

키보드로 모든 기능을 사용할 수 있도록 해야 한다.
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

3) 이해성(Understandable)
 - 정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

4) 내구성(Robust)
 - 콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.

보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.

3. 웹 접근성을 위해 사용되는 보조기기
 - 자막
 - 스크린리더
 - 자동완성 기능
 - 마우스스틱
 - 색상 대비 디자인 등.

4. 가이드 라인 참조 : https://www.w3.org/WAI/guid-tech

▶ 관련 용어들

 - DTD(Document Type Definition) : 브라우저에 어떤 문서형 정의을 적용할 것인가를 선언한다.

 - Validator : 웹 문서가 표준안에 따라 만들어졌는지, 접근성에 대한 고려가 이루어졌는지에 대한 유효성을 검사해 주는 도구

 - 메타데이터 : 데이터를 위한 데이터. 즉 구조화된 정보를 분석, 분류하고 부가적 정보를 추가하기 위해 그 데이터와 함께 따라가는 정보.

 - 인코딩(Encoding) : 문자들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화하는 방법

 - 시멘틱 웹(Semantic Web) : 컴퓨터가 정보(웹 문서, 파일, 서비스) 사이에 연결되어 있는 의미를 컴퓨터가 이해하고 논리적 추론까지 할 수 있는 지능형 웹

 - 네임스페이스 : 서로 다른 XML 문서와 서로 인식할 수 있도록 태그로 나타나는 개념상의 공간.

 - 마임타입(MIME-TYPE) : Multipurpose Internet Mail Extention Type 의 약자로 전송받은 멀티미디어 문서에 대해 클라이언트가 해당 Data 를 어떻게 처리하는지 사전에 약속된 명칭을 뜻함.

 - 스트리밍(Striming) : 인터넷에서 음성이나 영상, 애니메이션 등을 실시간으로 재생하는 기법을 말한다.

 - 포인팅 디바이스(Pointing Device) : 컴퓨터 조작을 위해 표시 화면에 보이는 커서의 이동을 제어하는데 쓰는 입력장치를 말한다.

 - 서버측 이미지 맵 : img 요소에 ismap 속성을 사용하고 링크 영역의 좌표정보가 서버에 있으며, 마우스와 같은 포인팅 기기로만 사용할 수 있고 키보드로 접근이 불가능하다.

 - 클라이언트측 이미지 맵 : 일반적으로 가장 많이 사용되는 이미지 맵으로 img 요소에 usemap 속성을 사용하고 링크 영역의 좌표정보가 HTML(클라이언트)에 존재한다.    클라이언트측 이미지 맵의 경우 영력별로 대체 텍스트를 적절하게 제공해야 한다.

 

※ 참고

https://webdir.tistory.com/34
https://helloworld-88.tistory.com/96
https://namu.wiki/w/%EC%9B%B9%20%ED%91%9C%EC%A4%80
https://kutar37.tistory.com/entry/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-vs-%EC%9B%B9-%ED%91%9C%EC%A4%80