웹표준

웹표준(Web standards)이란 월드 와이드 웹(WWW)의 측면을 서술하고 정의하는 공식 표준 또는 규격이다. ISO(국제 표준화 기구)로 W3C(월드 와이드 웹 컨소시엄)가 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다.

개요

다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산하면서, 웹접근성(WA; Web Accessibility), 사생활 보호, 보안, 국제화 등을 고려한 웹기술의 표준화가 필요하게 되었다. 웹표준은 월드 와이드 웹을 구현하기 위해 따라야 할 표준 또는 규격이다.

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

등장 배경

1993년, 첫 그래픽 브라우저인 모자이크(Mosaic)가 나온 이후 넷스케이프(Netscape), 오페라(Opera), 인터넷 익스플로러(Internet Explorer), 사파리(Safari), 파이어폭스(FireFox), 크롬(Chrome) 등 많은 상용 브라우저들이 나오기 시작했으며 그에 맞춰 다양한 웹기술이 빠르게 등장했다. 1995년 넷스케이프가 세계적인 인기를 끌며 웹의 시대가 도래하자 여기에 위기감을 느낀 마이크로소프트(Microsoft)는 1995년 8월, 이를 대적할 만한 브라우저로 인터넷 익스플로러를 출시하였다.

과거 웹 브라우저의 양대 산맥으로 꼽히던 넷스케이프와 인터넷 익스플로러의 경우, 초기에는 웹표준 지원 여부를 중요하게 생각하지 않았다. 그저 자사의 웹브라우저 점유율을 높이기 위해 웹표준 요소가 아닌 독자 확장(비표준) 요소들을 마구 지원하기 시작함으로써 웹페이지 제작에 혼란을 야기시켰다. 또 이 시기에는 플랫폼 독점을 위해 특정 환경에서만 작동하는 비표준 기술들이 생겨나기도 헀다. 이러한 문제점을 바로잡기 위해 Web Standards Projects(WaSP)가 출범했으며, WaSP에서는 웹 브라우저가 웹 표준을 적절히 지원하도록 설득하는 활동을 전개하였고, 그 결과 대부분의 최신 웹브라우저들이 웹표준을 지원하게 되었다. 인터넷 익스플로러, 파이어폭스, 오페라, 사파리, 크롬 등이 바로 웹표준을 지원하는 최신 웹브라우저아다. 그러나 최신 웹 브라우저라고 해서 모두 웹표준을 완벽하게 지원하는 것은 아니다. 인터넷 익스폴로러의 경우 버전별로 웹표준 지원 수준이 다르다. 인터넷 익스플로러는 Mac용 5.5 버전부터 웹표준 지원을 시작했으며, 8 버전에서 좀 더 지원이 강화되었다.

특징

장점

• 웹접근성 수준의 향상

웹표준을 준수하는 것만으로도 자연스럽게 웹접근성이 향상된다. 스크린 리더, 최신 웹 브라우저, 모바일 등 웹에 접근할 수 있는 환경은 매우 다양하다. 이러한 다양성이 때로는 개발을 어렵게 만드는 원인이 되기도 한다. 이러한 문제는 웹표준을 준수하는 것만으로도 쉽게 해결된다. 웹표준을 준수한 웹 사이트는 다양한 웹 브라우저나 새로운 기기에서도 올바르게 표시되기 때문이다.

• 검색 친화적인 웹 사이트 구현

메타(meta) 요소를 이용한 정확한 문서 정보의 제공과 적절한 제목(heading 요소)의 사용, 의미에 맞는 마크업은 검색 시 결과에 영향을 미칠 수 있는 중요한 정보이다. 따로 홍보를 위한 비용을 지출하지 않더라도 충실하게 작성된 문서 정보만으로도 검색의 효율성을 높일 수 있다.

• 구조와 표현의 분리

테이블(table)을 레이아웃의 용도로 활용하여 사용하던 과거의 방식은 구조와 표현이 뒤섞여 접근 및 사용을 어렵게 하는 원인으로 작용해왔다. 그러나 웹표준 방법론에서 구조는 HTML이나 XHTML 등의 마크업 언어를 구축하고, 디자인과 같은 표현 정보는 CSS를 이용함으로써 구조와 표현이 분리된 독립적인 구현이 가능하도록 도와준다.

• 손쉬운 유지 보수 및 비용 절감 효과

구조와 표현을 분리하여 제작하면 유지 보수 시 많은 이점을 얻을 수 있다. 가령 리뉴얼을 위해 디자인만 변경하고자 할 경우 기존의 마크업 코드는 그대로 재사용하고 디자인을 위한 CSS 코드만을 재작성하면 되기 때문이다. 또 구조와 표현을 분리했을 경우, 소스의 경량화로 인해 서버의 트래픽 비용이 감소하는 부수적인 효과도 얻을 수 있다.

• 호환성 확보

올바른 마크업과 CSS를 이용하여 웹 사이트를 제작하면 오래된 버전의 웹 브라우저에서도 콘텐츠가 적절하게 표시되고 웹 표준을 지원하는 최신의 기기나 환경에서도 항상 동일한 결과를 기대할 수 있기 때문에 하위 호환성이나 상위 호환성을 확보할 수 있다.

웹접근성

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

웹 콘텐츠 접근성 지침(WCAG)

• 인식의 용이성(Perceivable)

인식의 용이성은 사용자가 장애 유무 등과 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다.

이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 또한 대체 텍스트는 간단명료하게 제공해야 한다. 멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 대본 또는 수화를 제공해야 한다. 대본 및 수화는 멀티미디어 콘텐츠에 포함된 음성의 문맥과 동등해야 한다. 콘텐츠에서 제공하는 모든 정보는 색에 관계없이 인식될 수 있어야 한다. 특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로, 지시 사항은 모양, 크기, 위치, 방향, 색 소리 등에 관계없이 인식될 수 있어야 한다. 텍스트 콘텐츠와 배경 간의 명도 대비는 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 4.5 대 1 이상이어야 한다. 자동으로 소리가 재생되지 않아야 한다. 웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.

• 운용의 용이성(Operable)

운용의 용이성은 사용자가 장애 유무 등으에 관계없이 웹사이트에서 제공하는 모든 기능들을 운용할 수 있도록 제공하는 것을 의미한다.

웹페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 한다. 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다. 웹페이지에서 제공하는 모든 이웃한 컨트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기로 제공해야 한다. 웹콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. 링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크 텍스트를 제공해야 한다.

• 이해의 용이성(Understandable)

이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다.

주로 사용하는 언어를 명시해야 한다. 컨트롤이나 사용자 입력은 초점을 받았을 때에 의도하지 않는 기능이 자동으로 실행되지 않도록 콘텐츠를 개발해야 한다. 콘텐츠는 보조 기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다. 표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다. 사용자 입력에는 대응하는 레이블을 제공해야 한다. 입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다.

• 견고성(Robust)

견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미한다.

마크업 언어로 작성된 콘텐츠는 해당 마크업 언어의 문법을 최대한 준수하여 제공하는 것이 바람직하다. 특히 요소의 열고 닫음, 중첩 관계의 오류가 없도록 제공해야 한다. 웹 콘텐츠를 사용하는 데 필요한 플러그인 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 사용자가 웹 페이지에 접근하여 사용하는 것을 방해하지 않아야 한다.

기대효과

웹접근성을 준수 시 기대효과는 장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근하고 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 활용할 수 있다. 또 2008년 4월 11일부터 시행된 '장애인 차별 금지 및 권리 구제 등에 관한 법률' 및 동법 시행령 등의 관련 규정을 준수할 수 있으며 사회 공헌 및 복지 기업으로 기업 이미지가 향상될 수 있다. 다양한 환경, 새로운 기기에서의 이용의 범위도 확대될 것이며 개발 및 운용의 효율성을 높일 수 있다.

보조기기

• 자막
• 스크린리더
• 자동완성기능
• 마우스스틱
• 색상 대비 디자인 등

W3C

W3C(World Wide Web Consortium)는 W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄이다. W3C의 설립 취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 내는 것이다. 1994년 영국의 팀 버너스-리(Tim Berners-Lee)가 주도하고 다르파(미국 국방성 산하의 방위고등연구계획국, DARPA) 등의 지원을 받아 설립되었다. 1999년 장애인, 노약자 등을 위한 웹 콘텐츠 접근성 지침인 WCAG를 만들었다. 웹표준, 시맨틱웹, SVG 벡터 이미지 포맷, RDF 메타데이터 교환 프레임워크, XSLT라는 XML 변환 언어 등을 개발했다. 2014년 HTML5 표준안을 확정했다. 상근 직원은 약 400명이다. 미국 매사추세츠(Massachusetts)주에 있다. 점점 다양해지는 하드웨어, 소프트웨어 그리고 사람들의 요구사항을 충족시키면서, 웹이 미래에도 지속적으로 성공하기 위해 W3C의 회원, 직원, 초청 전문가들은 함께 힘을 모아 기술을 설계해 나가고 있다. W3C의 국제적인 활동은 또한 세계적으로 40여 개가 넘는 국가, 지역, 국제기관과의 관계(liaison)를 활성화하는 것을 포함하며, 이는 W3C의 월드 와이드 웹 개발의 국제적인 참여를 유지하는 데 도움을 준다.

참고자료

• 웹 표준 지식백과 - https://terms.naver.com/entry.nhn?docId=3435628&cid=42346&categoryId=42346
• 갓대희, 〈웹표준의 이해(웹 표준이란?)〉, 《티스토리》, 2020-04-23
• 황진영, 〈(외전) 웹 표준이 중요한 이유〉, 《디스이즈게임》, 2014-10-22
• 〈웹표준(Web Standards)〉, 《깃허브》
• 미래창조과학부 국립전파연구원, 〈한국형 웹 콘텐츠 접근성 지침 2.1〉, 《과학기술정보통신부》, 2015-03-31
• 〈웹접근성(Web Accessibility)〉, 《깃허브》

같이 보기

• 웹
• W3C

이 웹표준 문서는 인터넷에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷 □■⊕, 모바일, 사물인터넷, 게임, 메타버스, 디자인 인터넷 PC통신 • 그누텔라 • 네트워크 • 다크넷 • 다크웹 • 딥웹 • 무선인터넷 • 슈퍼피어 • 스타링크 • 아르파넷 • 아이투피(I2P) • 엑스트라넷 • 오버레이 네트워크 • 오투오(O2O) • 오프라인 • 온라인 • 온오프라인 • 유선인터넷 • 인터넷 • 인트라넷 • 초고속 인터넷 • 토어(토르) • 표면웹 • 프리넷 • 피투피(P2P) • 하이브리드 피투피(P2P) • 홈네트워크 인터넷 기술 ARP • DNS • FTP • G-클라우드 • HTTP • HTTPS • IPFS • IPv4 • IPv6 • IRC • IRI • ISBN • LDAP • MOIP • OpenSSL • OSI 7 계층 • RFC • RFID • SFTP • SOAP • SSH • SSL • SSO • TCP • TCP/IP • TLS • UCI • UDP • URI • URL • URN • VoIP • 강화 내부 게이트웨이 라우팅 프로토콜 • 검색 • 검색엔진 • 게이트웨이 • 경계 경로 프로토콜 • 내부 게이트웨이 라우팅 프로토콜 • 다운로드 • 데몬 • 라우팅 정보 프로토콜 • 백엔드 • 사물인터넷 • 서버 • 서버-클라이언트 • 서브넷마스크 • 세션 • 스트리밍 • 식별자 • 아이피(IP) • 업로드 • 에듀테크 • 온프레미스 • 원격 프로시저 호출(RPC) • 유비쿼터스 • 인터넷 기술 • 자율시스템 • 정보기술 • 정보통신 • 채팅 • 챗봇 • 최단경로 우선 프로토콜(OSPF) • 쿠키 • 크롤링 • 클라이언트 • 키워드 • 텔넷 • 토폴로지 • 트래픽 • 패킷 • 포털 • 포트 • 프런트엔드 • 프로토콜 • 프록시 • 해시태그 이메일 IMAP • POP3 • SMTP • 계정메일 • 네이버 메일 • 다음 메일 • 센드메일 • 스팸 • 스팸메일 • 스팸필터링 • 아웃룩 익스프레스 • 야후 메일 • 웹메일 • 이메일 • 지메일 • 카카오 메일 • 한메일 • 핫메일 웹 KWCAG • WCAG • 서핑 • 시맨틱 웹 • 오프라인 웹 • 웹 • 웹 1.0 • 웹 2.0 • 웹 3.0 • 웹개방성 • 웹서비스 • 웹접근성 • 웹접근성 인증마크 • 웹주소 • 웹표준 • 웹호환성 • 피드 웹사이트 BBS • GNB • LNB • UI/UX • 게시판 • 관리자 사이트 • 그래픽 사용자 인터페이스(GUI) • 누리집 • 대시보드 • 드롭다운 메뉴 • 랜딩 템플릿 • 랜딩 페이지 • 리더보드 • 마이홈피 • 메뉴 • 모달창 • 미니홈피 • 방명록 • 배너 • 사용자 경험(UX) • 사용자 인터페이스(UI) • 섹션 • 왼쪽메뉴 • 웹기획 • 웹사이트 • 웹페이지 • 인터페이스 • 쪽지 • 커뮤니티 • 탑메뉴 • 탭메뉴 • 템플릿 • 팝업 • 페이지 • 페이지뷰 • 햄버거 메뉴 • 호버 • 홈페이지 • 화면 웹브라우저 넷스케이프 • 모자이크 • 브라우저 • 브레이브 브라우저 • 블록체인 브라우저 • 사파리 • 삼성인터넷 • 스윙 • 엣지 • 오시리스 • 오페라 • 웨일 • 웹브라우저 • 인터넷 익스플로러(IE) • 크롬 • 파이어폭스 • 판도브라우저 인터넷 서비스 구글 • 구글 미트 • 구글챗 • 구글 행아웃 • 깃허브 • 네아로 • 네이버 • 네이버 웹툰 • 네이버 카페 • 넷플릭스 • 다음 • 라이코스 • 레진코믹스 • 메일루 • 멜론 • 바이두 • 바이트댄스 • 비트토렌트 • 빌리빌리 • 빙 • 소리바다 • 스포티파이 • 아마존 웹서비스(AWS) • 애플 • 야후 • 야후재팬 • 얀덱스 • 에버노트 • 에어비앤비 • 왓챠 • 웹소설 • 웹툰 • 유튜브 • 인스타툰 • 인터넷 서비스 • 인터넷카페 • 잼라이브 • 줌 • 카카오 • 카카오 웹툰 • 카카오페이지 • 탑툰 • 텐센트 • 팟캐스트 • 패스 • 페이오니아 • 페이팔 • 해시넷 • 화상통화 • 화상회의 인터넷쇼핑 11번가 • 그립 • 네이버 쇼핑 • 네이버 쇼핑 라이브 • 라이브방송 • 라이브커머스 • 모바일쇼핑 • 스쉐라이브 • 스타일쉐어 • 아마존 • 알리바바 • 오픈마켓 • 옥션 • 온라인쇼핑 • 위메프 • 이베이 • 인터넷쇼핑 • 인터파크 • 전자상거래 • 지마켓 • 징동닷컴 • 카카오 쇼핑 • 카카오 쇼핑 라이브 • 커머스 • 쿠팡 • 쿠팡 라이브 • 타오바오 • 티몬 소셜 네트워크 SNS(소셜 네트워크 서비스) • 구글 블로거 • 네이버 밴드 • 네이버 블로그 • 디시인사이드 • 링크드인 • 마이크로블로그 • 맞팔 • 브런치스토리 • 블로그 • 소셜 네트워크 • 엑스 (트위터) • 웨이보 • 인스타그램 • 트루스소셜 • 티스토리 • 팔로우 • 페이스북 • 플리커 • 핀터레스트 메신저 골프메신저 • 님버즈 • 대화방 • 두레이 • 디스코드 • 딩톡 • 라인 • 라인웍스 • 마이크로소프트 팀즈 • 메신저 • 버디버디 • 스냅챗 • 스노우 • 스카이프 • 슬랙 • 아이씨큐(ICQ) • 왓츠앱 • 웹메신저 • 위챗 • 잔디 • 직톡 • 카카오워크 • 카카오톡 • 카톡방 • 큐큐(QQ) • 탱고 • 텔레그램 • 틱톡 • 페이스북 메신저 • 플로우 도메인 네임서버 • 다국어도메인 • 도메인 • 레지스트라 • 레지스트리 • 아이피 • 인터넷주소 • 인터넷키워드 • 한글인터넷주소 • 후이즈 호스팅 메일호스팅 • 서버호스팅 • 웹호스팅 • 코로케이션 • 클라우드 • 클라우드 네이티브 • 파킹 • 포워딩 • 호스팅 위키 구스위키 • 나무위키 • 노스모크 • 더위키 • 디시위키 • 리그베다위키(엔하위키) • 리브레위키 • 미디어위키 • 바다위키 • 백괴사전 • 아이티위키 • 알파위키 • 엔하계 위키 • 요다위키 • 우만위키 • 위키 • 위키낱말사전 • 위키독스 • 위키문법 • 위키문서 • 위키문헌 • 위키미디어재단 • 위키백과 • 위키스 • 위키엔진 • 위키원 • 위키원드 • 위키트리 • 위키휴가 • 제이위키 • 제타위키 • 중국위키 • 팬덤(위키아) • 한국어 위키백과 • 한국위키미디어협회 • 항공위키 인터넷 사용자 가입 • 가입자 • 강퇴 • 계정 • 관리자 • 네트워크 관리자 • 네티즌 • 누리꾼 • 대기자 • 데이터베이스 관리자 • 등록자 • 디지털 원패스 • 로그아웃 • 로그인 • 방문자 • 블로거 • 블록체인 관리자 • 비회원 • 사용자 • 사이트 관리자 • 서버관리자 • 시삽 • 시스템 관리자 • 아이디(ID) • 웹관리자 • 웹마스터 • 유튜버 • 접속자 • 차단 • 최고관리자 • 탈퇴 • 탈퇴자 • 회원 • 휴면 • 휴면계정 인터넷 단체 IANA • ICANN • W3C • 다르파 • 유럽입자물리연구소(CERN) 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반