근래에 구축되고 있는 웹 사이트는 모두 웹 표준을 준수하면서 웹 접근성 방식을 따르고 있습니다.
저희 회사에서도 요 몇년 사이 이런 트랜드를 접목시켜 웹사이트를 구축하고 있는데 이에 대한 이야기를 한번 해보겠습니다.
웹 표준이란 W3C (World Wide Consortium)에서 권고한 표준안에 따라 어떠한 운영체제나 브라우저를 사용하든지 동일한 결과를 볼 수 있도록 웹문서의 구조와 표현 그리고 동작을 구분해서 사용하는 것입니다.
이렇게 함으로서 마크업 용량 감소, 컨텐츠와 css의 분리, 미래에 나올 브라우저에 대한 상위버전 호환성, 검색엔진에 대한 최적화, 웹 접근성이 용이하다는 여러가지 장점을 획득할 수 있습니다.
웹 접근성이란 어떤 브라우저를 사용하든지 비장애인이든지 장애인이든지 모든 사람이 해당 사이트를 제대로 이용 가능하느냐의 의미입니다.
한마디로 웹사이트에 제공하는 정보에 대하여 동등한 접근 과 기능을 이용하자는 취지입니다.
대체로 웹 표준을 이용해 작성한 문서는 거의 모든 브라우저, 휴대폰, PDA, 장애인 지원용 소프트웨어에서도 쉽게 읽을 수 있겠지요.
처음에는 관공서와 공기업 위주에서 적용하다 이제 점차 금융권 및 기업으로 확대 되고 있습니다.
한가지 예를 들면 웹 사이트 메뉴를 이동 또는 다른 페이지에 들어갈때 마우스로만 할 수 있는 것을 키보드의 tab 이나 enter 키로도 같은 기능을 할 수 있어야 합니다.
또한 이미지가 누락되어도 alt 태그를 이용하여 이미지가 의미하는 내용을 대체 텍스트로 알 수 있도록 하는 것입니다.
또한 시각장애인이 웹을 한다는 말은 알고 있는 사람이 얼마나 있는지 모르겠지만 Text To Speech 서비스(TTS), 즉 텍스트를 그대로 음성으로 들려주는 서비스를 통해 장애를 가진 사람도 웹 정보를 비장애인들과 동등하게 이용 할 수 있다는 것일겁니다.
이러한 내용을 바탕으로 웹 접근성을 지키기 위해 기본 지침으로서는 아래와 같은 것들이 있습니다.
Semantic Markup
실제적인 페이지 작업에 앞서 문서의 구조와 의미를 파악하고 적절한 배치, 그리고 각 컨텐츠의 의미에 맞는 Makup을 설정.
CSS Design
psd 혹은 ppt 안의 컨텐츠를 문서의 의미에 맞게 HTML로 뽑은 후 CSS를 사용해 페이지 디자인.
기존에 주로 폰트 크기나 색 설정 등에만 사용되었지만 사이트 전체의 레이아웃, 배경이미지, 배경색 여백, 사이즈 등 모든 것을 CSS를 이용해 디자인 표현을 위한 Makup은 빠지고 문서의 구조를 위한 간결한 코드만 남아 로딩 속도 절감, 회선 비용의 절감, 유지보수(수정작업)의 편의 등을 장점을 도출.
격자에 갇혀있지 않는 디자인
흔히 볼 수 있는 웹 표준에 대한 오해 중 하나는 크레이티브 디자인을 할 수 없다 라는 것이다. 오히려 격자 형태를 띠며 그 안에 컨텐츠를 가두는 TABLE 코딩 방식보다 구조와 표현을 분리하여 개발하는 웹 표준 방식이 훨씬 유연하다.
접근성을 해치지 않는 javascript
서버사이드 언어와 HTML만으로도 모든 프로그램과 페이지의 핵심적인 로직을 완전히 구현한다.
사용자 친화적인 UI구성이나 서버 부하를 줄이기 위한 클라이언트 사이드 유효성 검사 등을 추가하는 순서로 작업한다.
Javascript의 사용을 제한 하고 간소화 해가는 과정이 필요하다.
Cross Browsing
웹 표준을 준수하여 CSS를 지원하는 모든 브라우져에서 동일한 화면을 구성한다.
홈페이지 시청각 도우미 기능 구현
페이지 이동 단축키, 텍스트 확대기능, 돋보기기능, 배경색/글자색 변경기능 등 홈페이지 시청각 도우미 콘트롤 박스 구현
저사양 PC, 저속회선 사용자를 위한 대체 컨텐츠(텍스트) 제공
웹 접근성 인증(심사시간 및 수수료 발생)을 받거나 더 많은 정보를 얻으려면 아래의 사이트를 참조 할 수 있습니다.
웹접근성연구소 : http://www.wah.or.kr/
웹와치 : http://www.webwatch.or.kr/
한국웹접근성평가센터: http://www.kwacc.or.kr/
한국웹접근성인증평가원: http://www.wa.or.kr/
반응형 웹이란 웹사이트가 스크린 기기의 사이즈에 따라 어느 기기에서도 동일하게 내용을 볼수 있도록 반응하여 최적화된 UI제공하는 것입니다.
보통 자바스크립트/미디어쿼리로 사용자 화면폭을 감지하여 적절한 레이아웃이 나오도록 css 클래스명을 교체하는 기법이 많이 쓰이고 있습니다.
PC 모니터뿐만이 아니라 태블릿 PC, 스마트폰 등 다양한 IT기기의 스크린 등장과 N_Screen 욕구 발생으로 각각의 디바이스별로 여러 개의 화면을 만들어야 하는 번거로움을 해소 할 수 있습니다.
이는 크로스브라우징(Cross Browsing) 과도 관계가 있는데 크로스 브라우징이란 하나의 웹 페이지를 여러 부라우져에서 사용함에 있어 컨텐츠의 정상 출력 가능 한 홈페이지들을 의미합니다.
Html 랜더링, css랜더링, javascript 랜더링 하는 과정과 엔진이 브라우져 마다 다릅니다.
특히 마이크로소프트 인터넷 익스플로러 5~7 까지 의 버전은 웹 표준을 준수 하지 않은 브라우저이며 웹 표준을 준수 하더라도 인터넷 익스플로러 5,6,7 버전에서의 화면이 깨지거나 기능이 정상적으로 되지 않거나 하는 일이 많습니다.
일반적으로 모든 브라우져를 만족 하는 웹 프로그램을 개발 하기 위해선 상당한 노력이 요구 되고 경험상 1.5 ~ 3배의 공수가 더 필요한거지요.
크로스 브라우징이 최근 이슈가 되고 있는 이유는 국내 웹 브라우져 사용 환경이 급변(여러가지 버전및 브라우져을 사용)하고 아이폰 및 안드로이드등 모바일 기반의 인터넷 접속환경이 발달 하므로 기존 99% 이상을 차지하던 인터넷 익스플로러 버전이 낮아 지며 발생하는 자연스러운 현상입니다.
(2017 연세대 홈페이지 접속자별 사용환경)
정리를 하자면 웹사이트를 제작하는데 있어서 최종적으로 나오는 것은 우리가 흔히 말하는 HTML 인데 이 HTML (Hyper Text Markup Language) 는 각각의 Tag와 정보로 이루어져 있는 문서입니다.
그러나 일반적인 국내 사이트들은 디자인 적 측면과 개발의 편의성을 이유로 정보의 종류에 의한 Tag 사용을 하지 않아 여러 문제들이 발생하며 정보로서 그 기능을 이용하지 못하고 있는 실정입니다.
웹 표준의 준수는 Cross브라우져의 70% 정도와 웹 접근성의 40%정도를 차지 하는 기본적인 요소라 할 수 있겠습니다.
이를 준수 하여 향후 웹 접근성 및 웹 표준을 준수하여 모바일 환경, 타 브라우져 그리고 법률에 만족하는 시스템을 구축 하는 것이 최선이라 생각합니다.