나무모에 미러 (일반/어두운 화면)
최근 수정 시각 : 2019-04-15 20:03:44

웹 표준

웹표준에서 넘어옴
1. 개요2. 상세3. 웹 표준이 중요한 이유4. 웹 접근성5. 웹 표준을 안 지키는 국내 사이트 목록6. 관련 문서

1. 개요

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

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

한국에서는 정부부터가 웹 표준을 무시한다. 웹 서비스를 주력으로 삼는 기업들은 거의 대부분 웹 표준을 따라가거나 따라가려고 노력하고 있다. 17년 문재인 정부가 들어서며 정부 산하의 사이트에서 액티브 X, 공인인증서, 플러그인 사용을 없앤다고 발표했는데 실현될 가능성이 없진 않다. 이미 광화문 1번가라는 실기가 만들어지긴 했는데, 아직까진 갈 길이 멀다.

2. 상세

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

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

3. 웹 표준이 중요한 이유

산업표준이 왜 존재하는지, 도량형이 왜 존재하는지 생각해 보면 이유가 명확해진다. 산업현장에서 부품들의 표준화가 돼 있지 않으면 업체마다 서로 호환이 되지 않고, 같은 업체에서 생산하는 부품도 품질보장이 되질 않을 것이다. 웹 환경은 본질적으로 '통신'이기 때문에 더욱 더 표준화가 중요해진다. 비표준 '부품'이야 자기네 제품에만 독점적으로 사용할 거라면 크게 상관없지만 웹은 누가 어떤 장치를 어떤 방식으로 사용할지를 제공자가 통제할 수 없기 때문이다. 인터넷 그 자체가 크로스 플랫폼인 이유.

2016년 현재 인터넷 사용 인구는 30억명을 훌쩍 넘긴다. 사실상 전인류의 절반이 인터넷을 사용하고 있고 인터넷 트래픽의 거의 전부를 차지하는 게 웹 트래픽이다. 사용하는 사람이 많아지면 표준화는 반드시 해결해야 할 과제가 된다. 그것이 일개 개인의 프로젝트에서 시작되었든(월드 와이드 웹), 국제 연합 수준의 극대규모 프로젝트(미터법)였던 말이다.

웹 표준이 없던 1990년대 말 ~ 2000년대 초반에는 웹 사이트 개발자는 사실상 두 개의 사이트를 만들어야 했다. 인터넷 익스플로러용과 넷스케이프용의 두 개. 실질적으로는 각종 핵과 브라우저 판별 코드를 삽입해야 해서 3배의 노동이 들었다. 표준이 없으면 이렇게 더 많은 노동력과 시간이 든다. 사회 전체적인 비용이 증가하는 것이다. 시간과 예산이 빠듯한 상황에서 웹 개발자는 결국 하나만을 선택하고 나머지를 버릴 수밖에 없다. 이는 정보 제공에 차별을 발생시킨다.

인터넷에 정보는 차별없이 제공되어야 한다. 물론 이상과 현실은 다르다. 드넓은 PC모니터 화면과 좁디좁은 스마트워치 화면에서 동일한 정보를 제공하는 건 말도 안 되는 소리이고 동영상 스트리밍 사이트가 맹인을 고려해야 한다는 말도 어불성설이다. 하지만 이상을 추구해야 하는 것은 맞다. 즉 "이 사이트는 인터넷 익스플로러 6, 1024x768해상도에서만 이용하실 수 있습니다." 따위의 말은 그저 횡포일 뿐이다. 본인이 이 아닌데도 불구하고 이런 횡포를 부린다면, 그건 장사하기 싫단 소리밖엔 안 된다. 민원24같은 전자정부 사이트는 의 요건을 일부 충족하기 때문에 아직도 배째라 영업(?)이 가능한 면이 있지만 시대를 역행하는 것임에는 변함이 없다.

4. 웹 접근성

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

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

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

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

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

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

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

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

6. 관련 문서


[1] 물론 CSS로 이쁘장하게 꾸며줄 순 있다.[2] 다만 이미지 경로가 잘못돼서 이미지가 보이지 않을 경우 이미지 자리에 빈 상자가 보이고 alt 속성에 쓰여진 텍스트가 기본 폰트로 출력된다.[3] 구 버전의 인터넷 익스플로러에서는 title 속성으로 인식되는 버그가 있어서 마우스 커서를 올리면 텍스트를 볼 수 있다(...).