1. 웹 표준 (Web Standards)
웹 표준(
Web Standards)이란?"웹에서 표준적으로 사용되는 기술이나 규칙"으로 표준화 단체인
W3C가 권고한 표준안에 따라 웹 사이트를 작성할 때 이용하는HTML,CSS,JavaScript등에 규정이 담겨있다.
즉, 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미하며, 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축하는 방식을 말한다.
CSS 와 HTML(XHTML)로 웹 문서를 작성하는 것의 명확한 용어는 권고(Recommend)라고 하며 버전과 상관없이 HTML, XHTML은 그 자체로 표준이라고 한다.
가이드 라인 참조
1-1. 웹 표준이 중요한 이유
현재 인터넷의 사용량이 급증하고 있으며, 앞으로도 꾸준히 증가할 것으로, 이에 따라 표준화는 개발자로써 반드시 해결해야 할 과제이다.
웹 표준이 없던 1990년대 말부터 2000년대 초반에는 웹 사이트 개발자는 사실상 두 개의 사이트를 만들어야 했다. (익스플로러, 넷스케이프)
하지만 지금과 같은 표준이 있었다면, 해당하는 표준에 맞게끔 한 번만 작업을 진행해도 되며, 이에 따라 노동력과 시간을 아낄 수 있게 된다.
결국, 자연스럽게 정보 제공의 질도 올라가게 되므로, 현재 웹 개발자는 웹 표준에 따라 개발하는 것을 중요하게 생각하게 된다.
위의 이유로 인해 웹 표준을 지킬 시, 생길 수 있는 장점이 많다.
1-1-1. 웹 표준의 장점
-
소스의 통일화로 수정 및 운영관리가 용이하다.
-
다양한 브라우저, 휴대폰
PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로, 접근성이 향상되고, 장애인, 고령자 등을 포함한 사용자 층도 확대가 가능하다. -
논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일의 크기가 줄고 서버 부담의 감소로 이어질 수 있다.
-
CSS와HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩 속도가 향상된다. -
오래된 브라우저에서도 컨텐츠가 적절하게 표시되고, 호환성과 운용성이 확보된다.
-
스크린 리더기 등 보조 공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 돕는다.
-
검색봇을 통한 효율적인 노출과 감튼 검색 엔진 최적화(
SEO)가 가능하다.
1-2. 웹 표준의 기술
-
XHTML (eXtensible Hypertext Markup Language) -
CSS (Cascading Style Sheets) -
XML (eXtensible Markup Language) -
DOM (Document Object Model) -
ECMAScriptECMA international의ECMA-262기술 명세에 정의된 표준화 된 스크립트 프로그래밍 언어
2. 웹 접근성 (Web Accessibility)
웹 접근성이란?
모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것이다.
즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있는 것을 접근성이라고 한다.
W3C정의에 따르면 웹 표준은 접근성, 사생활 보호, 보안, 국제화의 측면에서 고려해야 한다고 말한다.
위의 정의를 쉽게 정리하자면, 웹 접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미 한다.
예를 들어, 시각 장애인의 경우 화면을 눈으로 볼 수 없기 때문에 "스크린 리더"라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해 한다.
하지만 스크린 리더는 스스로 웹 페이지의 내용을 분석하지 못한다.
예를 들어 "로그인"이라는 텍스트 대신 메뉴라고 로그인 이미지를 사용할 경우 비시각 장애인의 눈에는 로그인 메뉴로 인식 가능하지만, 소프트웨어의 입장에서는 그저 이미지일 뿐이다.
따라서, 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우,
<img src="img/login.jpg" alt="로그인하기" />위의 코드와 같이 반드시 이미지의 내용에 대한 설명을 추가해야 한다.
가이드 라인 참조
2-1. 웹 콘텐츠 접근성 지침(WCAG)
2-1-1. 인지성 (Perceivable)
정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.
-
모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단한 언어 등과 같은 형태로 제공해야 한다.
-
시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
-
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
-
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.
2-1-2. 운용성 (Operable)
사용자 인터페이스 요소와 탐색은 운용이 가능해야 한다.
-
키보드로 모든 기능을 사용할 수 있도록 해야 한다.
-
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
-
알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
-
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.
2-1-3. 이해성 (Understandable)
정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
-
텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
-
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
-
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.
2-1-4. 내구성 (Robust)
콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
- 보조 기술을 포함한 현채 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.
2-2. 웹 접근성을 위해 사용되는 보조기기
-
자막
-
스크린 리더
-
자동완성 기능
-
마우스 스틱
-
색상 대비 디자인 등
3. 관련 용어 정리
-
DTD(Document Type Definition)- 브라우저에 어떤 문서형 정의을 적용할 것인가를 선언하는 것
-
Validator- 웹 문석가 표준안에 따라 만들어졌는지, 접근성에 대한 고려가 이루어졌는지에 대한 유효성을 검사해주는 도구
-
Meta Data- 데이터를 위한 데이터로, 구조화된 정보를 분석/분류하고 부가적인 정보를 추가하기 위해 그 데이터와 함께 따라가는 정보
-
Encoding- 문자들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화하는 방법
-
Semantic Web- 컴퓨터가 정보(웹 문서, 파일, 서비스 등) 사이에 연결되어 있는 의미를 컴퓨터가 이해하고 논리적인 추론까지 할 수 있는 지능형 웹
-
Name Space- 서로 다른
XML문서와 서로 인식할 수 있도록 태그로 나타내는 개념상의 공간
- 서로 다른
-
MIME-TYPE (Multipurpose Internet Mail Extention Type)- 전송받은 멀티미디어 문서에 대해 클라이언트가 해당
Data를 어떻게 처리하는지 사전에 약속된 명칭
- 전송받은 멀티미디어 문서에 대해 클라이언트가 해당
-
Streaming- 인터넷에서 음성이나 영상, 애니메이션 등을 실시간으로 재생하는 기법
-
Pointing Device- 컴퓨터 조작을 위해 표시 화면에 보이는 커서의 이동을 제어하는데 쓰이는 입력 장치
-
서버측 이미지 맵
img요소에ismap속성을 사용하고 링크 영역의 좌표 정보가 서버에 있으며, 마우스와 같은 포인팅 기기로만 사용할 수 있으며, 키보드로 접근은 불가능
-
클라이언트측 이미지 맵
-
img요소에usemap속성을 사용하고, 링크 영역의 좌표 정보가HTML(클라이언트)에 존재하는 일반적으로 가장 많이 사용되는 이미지 맵클라이언트 측 이미지 맵의 경우 영역별로 대체 텍스트를 적절하게 제공해야 한다.
-
참고 사이트
갓대희의 작은공간 - 웹표준의 이해(웹 표준이란?)
weebee design - 웹표준/웹접근성에 대한 요약
