웹 표준

(웹표준에서 넘어옴)

1 개요

월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어.

보통 인터넷을 이용할 때 같은 웹페이지라면 어느 브라우저를 사용하는지 여부에 상관없이 그 웹페이지가 똑같이 보이고 정상적으로 작동해야 함을 의미한다.
W3C 웹 표준 설명 페이지

한국에서는 정부부터가 웹 표준을 무시한다.

2 상세

웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다. 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 웹 표준을 완벽하게 지키려면 특정 브라우저에 의존하는 플러그인이나 코드를 완벽하게 제거해야 하는 것이 보통인데, 일반적인 브라우저에 공통적으로 제공되는 플러그인은 이 기준에서 예외가 되는 경우가 많다.

이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있다. 더 넓은 뜻의 웹 표준은 아래를 이른다.

3 웹 표준이 중요한 이유

  • 웹 표준이 중요한 이유
    • 이상: 인터넷에 정보는 차별없이 제공되어야 한다. "본 사이트는 인터넷 익스플로러 6, 1024x768 해상도에 최적화 되어 있습니다." 같은 문구는 "인터넷을 하려면 한두푼 하지는 않지만 꼭 윈도우를 구매하여야 한다."란 말과 같다. 돈 없으면 쓰지 말라는 차별이다. 공공기관에서 IE만 지원하는 것은 법적으로 전 국민이 윈도우를 하나씩 사야 한다는 말이기도 한다. MS가 대한민국 공기업이었던가(...), 복돌이는 고려하지 않는다. 리눅스, 안드로이드 등 지갑에 부담이 되지 않는 대안이 많은 지금, 시대를 역행하는 처사라 할 수 있다.
    • 현실: 구형 신형 브라우저 챙기려니 죽겠어요 (feat. 개발자)
    • 만화: 웹 표준이 중요한이유
  • 신제품 쓰기 vs 느리고 해커가 털기 쉬운 구형 제품 쓰기
    • 한 때, 인터넷 익스플로러가 독점을 했을 때, 브라우저 발전이 더뎠고, 성능이 나은 신형 브라우저들이 탄생하며 점유율을 늘려나갔다. 빠르고 쾌적한 신형 브라우저를 쓸 것인가, 제대로 표현되는 브라우저를 쓸 것인가는 개인의 선택일 것이다. 다만, 구형 제품은 해커의 먹잇감이라 앞으로도 계속 보완 제품, 신형 제품들이 나올 것이고, 더 나은 제품 생산을 위해 꾸준한 경쟁이 이루어져야 하는데, 그때마다 보이는게 제각각이면 참 난감할 것이다. 그래서 웹 표준이 중요하다.
    • ActiveX 같은건 특정 브라우저 특정 OS에서만 작동하므로 표준의 지위를 유지할 수 없다. 게다가 보안 관점에서 문제가 많으므로 퇴출 운동이 벌어지고 있는 것. 다른 브라우저가 인터넷 익스플로러 사용하는 것에 비해 불편함이 없어야 하는데, 이를 위해 웹 표준에 힘이 실리게 되었다.
    • 물론 ActiveX 의존도가 높은 우리나라는 Windows 10이 나올 마당에, XP 더 쓰게 해주세요 하고 있다. 이제 겨우 Windows 7 대응했을까? 어떤 곳은 7도 지원안하고, 어떤 사이트는 IE11은 커녕 IE9에서도 먹통이더라는데 Windows 10이 나오자 아놔 잠깐만 업그레이드 하지 말라고 "본 사이트는 인터넷 익스플로러 6, 1024x768 해상도에 최적화 되어 있습니다." 하고 있다. 잃어버린 십년을 찾았다. 웹 표준 지키면 이런 제품 업그레이드에 농락당할 일이 없다.

4 웹 접근성

W3C의 정의에 의하면 웹 표준성은 접근성, 사생활 보호, 보안, 국제화의 측면을 고려해야 한다. 이 중에 접근성을 흔히 '웹접근성'이라고 하고 웹 표준성과 함께 많이 언급되는 개념이다.

웹접근성은 장애 여부에 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미한다. 예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 그렇지 않은 사람과 같은 방식으로는 웹페이지를 이용할 수 없다. 그래서 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치해서 인터넷을 이용한다. 스크린 리더는 모니터에 비춰지는 내용을 인식해서 음성, 점자로 출력해주는 역할을 한다. 예를 들어 화면에 '메뉴'라는 텍스트가 있으면 이를 인식해서 '메뉴'라는 음성이 나오는 방식이다. 시각장애인은 이를 이용해 눈으로 보는 대신 소리로 들으면서 웹페이지에 담긴 정보를 이해할 수 있다. 하지만 스크린 리더는 소프트웨어에 불과하므로 스스로 웹페이지의 내용을 분석해서 이건 무슨 내용이고 저건 무슨 내용이다라는 걸 이해할 수 없다. 특히 이미지의 경우가 그렇다. '메뉴'라고 텍스트로 집어 넣지 않고 메뉴라고 그려진 이미지를 사용하면 비 시각 장애인의 눈에는 똑같이 메뉴라고 보이지만 소프트웨어 입장에서는 그저 이미지일 뿐이다. 그 이미지 안에 그려진 내용을 인식하는 것은 불가능하다. 그래서 되도록이면 이미지를 사용하지 말고 소스 코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이 이미지가 어떤 내용인지 설명을 추가해야 한다.

  • <button>메뉴</button>
  • <img src="images/button.jpg" alt="메뉴 버튼" />

위와 같이 메뉴 버튼을 두 가지 방식으로 구현할 수 있다. 윗줄은 <button> 태그를 이용해서 구현하는 방식이고 아래 줄은 버튼 모양의 이미지를 쓰는 방식이다. 둘 중 어느 방식을 쓰던 버튼의 기능은 그대로 구현할 수 있다. 하지만 되도록이면 윗줄의 방식을 쓰는것이 권장된다. 이미 <button> 태그를 쓰고 있기 때문에 스크린 리더가 메뉴라는 텍스트가 담긴 '버튼'이라는 것을 사용자에게 올바르게 전달할 수 있기 때문이다. 하지만 부득이하게 이미지를 쓴다면 특히 버튼 특유의 회색 그라데이션을 견딜 수 없다면 alt라는 속성을 추가한 뒤 이 이미지가 무슨 이미지인지 설명하는 텍스트를 추가해주어야 한다. 이렇게 할 경우 비 시각 장애인의 눈에는 alt 속성에 쓰여진 '메뉴 버튼'이라는 텍스트는 볼 수 없다.[1][2] 하지만 스크린 리더는 이를 '메뉴 버튼'이라는 이미지로 인식해 사용자에게 정보를 전달하게 된다.

이처럼 장애가 있는 경우에도 웹페이지를 원활하게 이용할 수 있도록 지켜야 하는 사항을 웹접근성이라고 한다.

웹 표준과 마찬가지로 W3C에서 제정한 웹접근성 지침이 있는데 다음과 같다.

  • 원칙 1: 인지 가능성
정보와 사용자 인터페이스 구성물은 사용자가 인지할 수 있는 방식으로 제공돼야 한다.
  • 1.1. 텍스트가 아닌 콘텐츠가 있을 경우 이를 텍스트로 이루어진 대체 콘텐츠와 함께 제공해야 한다. 이는 대체 콘텐츠를 확대된 이미지, 점자, 음성 메시지, 기호, 더 간단한 언어로 바꾸어 필요한 사람에게 전달하기 위해서이다.
    • 1.1.1. 텍스트가 아닌 콘텐츠: 텍스트가 아닌 콘텐츠는 동일한 목적을 수행하는 대체 텍스트와 함께 제공돼야 한다.
      • 상황 1: 입력 및 제어
텍스트가 아닌 콘텐츠가 사용자가 무언가를 입력하거나 작동시키는 기능을 한다면 그 콘텐츠의 기능을 설명한 이름을 반드시 붙여주어야 한다.
  • 상황 2: 시간에 기반한 미디어
텍스트가 아닌 콘텐츠가 시간에 기반한 미디어(사전 녹음된 음성, 사전 녹화된 비디오, 생방송 등)일 경우, 콘텐츠에서 보여지는 상황을 설명하는 대체 텍스트가 반드시 포함되어야 한다. (예: 자막)
  • 상황 3: 테스트
텍스트가 아닌 콘텐츠가 시험이나 연습의 형태인데 텍스트로 보여지면 제 기능을 수행할 수 없을 때는 그 콘텐츠를 무엇인지 설명하는 대체 텍스트가 반드시 포함되어야 한다.
  • 상황 4: 인식 센서
텍스트가 아닌 콘텐츠가 사용자의 어떤 행동을 인식하는 센서 기능을 한다면 그 콘텐츠를 설명하는 대체 텍스트가 반드시 포함되어야 한다.
텍스트가 아닌 콘텐츠가 반드시 컴퓨터가 아니라 사람에 의해 인지되고 판단되어야 한다면 그 콘텐츠의 기능과 목적을 설명하는 대체 텍스트가 반드시 포함되어야 한다. 그리고 장애인도 인식할 수 있도록 별도의 방식으로 전달하는 대체 CAPTCHA를 같이 제공해야 한다.
  • 상황 6: 디자인상 꾸미기, 보이지 않아야 하는 콘텐츠
텍스트가 아닌 콘텐츠가 온전히 디자인을 더 좋게 하기 위한 목적에서 쓰인다면, 혹은 사용자에게 보이지 않아야 하는 콘텐츠라면 장애인이 이용하는 보조 도구가 이를 인식하지 않고 무시할 수 있도록 만들어야 한다.
  • 1.2. 시간에 기반한 미디어(사전 녹음된 음성, 사전 제작된 영상, 생방송 영상)가 있을 경우 이와 함께 대체 콘텐츠를 제공해야 한다.
  • 1.3. 제공해야 하는 정보를 온전히 전달하고 필요한 구조를 온전히 유지하는 선에서 더 간단한 레이아웃으로 사용자에게 전달할 수 있도록 콘텐츠를 만들어라.
  • 1.4. 배경에서 내용물을 분리해내는 것을 포함해 사용자가 콘텐츠를 보거나 읽는 것을 더 쉽게 해낼 수 있도록 만들어야 한다.
  • 2. 작동 가능성
  • 오직 키보드만으로 모든 기능을 사용할 수 있도록 해야 한다.
  • 사용자가 콘텐츠를 읽을 충분한 시간을 제공해야 한다.
  • 사용자가 신체적 발작을 일으킬 가능성이 있는 방법으로 콘텐츠를 제작하지 말아야 한다.
  • 사용자가 웹페이지를 살펴보고, 필요한 내용을 찾고, 지금 어느 부분을 보고 있는 것인지 알 수 있도록 해야 한다.
  • 3. 가독성
  • 텍스트로 이루어진 콘텐츠를 읽을 수 있도록, 이해할 수 있도록 만들어야 한다.
  • 웹페이지가 사용자가 예측할 수 있는 방향으로 보이고 작동하도록 만들어야 한다.
  • 사용자가 실수를 피할 수 있도록, 그리고 고칠 수 있도록 해야 한다.
  • 4. 호환성
  • 장애가 있는 사용자를 위한 보조 기술을 포함해, 최신 기술 그리고 앞으로 사용될 기술과 호환 가능하도록 만들어야 한다.

원본은 이곳 W3C 웹접근성 지침 영어 원본
공식 한글 번역본은 이곳 W3C 웹접근성 지침 한글 번역본
번역이 심히 골룸해서 직접 했다

네이버에서 '널리'라는 프로젝트의 일환으로 네이버 사옥 그린팩토리 2층에 '웹접근성 체험 부스'를 오픈했다. 이 곳에 방문하면 누구나 무료로 실제 장애가 있는 경우 어떤 식으로 인터넷을 이용하는지 직접 체험해 볼 수 있다고 한다. 정작 본인들은 일부 서비스가 비표준인 건 함정.
널리 공식 홈페이지

5 웹 표준을 안 지키는 국내 사이트 목록

보다 자세한 내용은 Windows 10/호환성 의 '인터넷 뱅킹' 항목 문서를 참고할것.

  • 안전Dream 아동,여성,장애인 경찰지원센터 - 가장 핵심기능인 학교폭력 신고 메뉴로 갈 경우, ActiveX 플러그인 설치를 하지 않는한 해당 컨텐츠로 진입 할 수 없다.
  • 네이버, 다음 등의 국내 포탈사이트 - 여러 서비스들이 각종 Active X를 요구한다. 그나마 2010년대 들어 스마트폰이 보급되자 지속적으로 걷어내서 2016년 현재에는 별로 찾아볼 수 없다. 인기 없어서 방치된 서비스에나 남아 있는 정도.
  • 국민은행, KEB하나은행 제외 인터넷 뱅킹 사이트 전부 - 우리가 윈도우즈를 쓸 수 밖에 없는 이유1. 엑티브X가 작동되지 않거나 설치가 안 되면 서비스진입이 아예 불가능하다!. 오픈뱅킹이 있어서 다행이지만 그거는 일부 은행만 이용이 가능하다는 것이 문제이고, 요즘은 스마트폰이 엄청나게 보급되서 스마트 뱅킹이 있어서 이걸 이용하면 우회가 가능하지만 이거는 iOS, 안드로이드용으로만 나와서 다른 스마트폰 운영체제는 이용이 불가능하다. 그리고 스마트 뱅킹을 이용하려면 공인인증서를 폰에 저장시켜야 한다! 결국 오픈뱅킹 외에는 무조건 윈도우를 써야 한다. KEB하나은행은 논엑티브X 프로그램을 설치해야 한다.엑티브X대신 프로그램
  • 전자민원 사이트 전부 - 우리가 윈도우즈를 쓸 수 밖에 없는 이유2. 이유는 위의 인터넷뱅킹 사이트하고 똑같다. 뱅킹은 오픈뱅킹, 스마트뱅킹이라도 이용하면 그나마 우회하면 되지만, 이거는 이용하려면 공인인증서, PC 사용을 강요받고 있는 거다! 답이 없다.
  • 전자상거래 전부 - 우리가 윈도우즈를 쓸 수 밖에 없는 이유3. 결제방법 때문에 문제이다. 무통장 입금방법을 제외한 결제방법 거의 전부가 엑티브X를 써야 하기 때문. 그나마 스마트폰에서 결제가 가능하지만 결제앱를 깔아 하는데 이것도 스마트 뱅킹처럼 안드로이드, iOS외에는 결제앱이 없다.
  1. ↑ 다만 이미지 경로가 잘못돼서 이미지가 보이지 않을 경우 이미지 자리에 빈 상자가 보이고 alt 속성에 쓰여진 텍스트가 기본 폰트로 출력된다.
  2. ↑ 구 버전의 인터넷 익스플로러에서는 title 속성으로 인식되는 버그가 있어서 마우스 커서를 올리면 텍스트를 볼 수 있다(...).