웹 표준의 정의
웹 표준이란 이름 그대로 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하고 정상적으로 작동해야함을 의미한다.
특정 브라우저에서만 사용되는 비 표준화된 기술을 배제하고 W3C에서 나온 권고안을 사용하여 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다. 내용은 HTML, 표현은 CSS, 동작은 Script로 구현하는 것으로 생각할 수 있다.
즉, 웹 표준을 준수한다는 것은 웹 사이트가 W3C 표준안에 따르는 HTML과 CSS, Script를 사용함을 의미한다.
웹 표준의 중요성
웹 표준이 중요한 이유(만화) : http://www.thisisgame.com/webzine/nboard/213/?n=56672
산업표준이나 표준 단위(미터법 등)가 존재하는 이유를 생각해보면 왜 웹 표준이 중요한지 생각해볼 수 있을 것 같다. 산업 현장에서 부품들이 표준화가 되어있지 않다면 서로 호환이 되지 않고, 부품의 품질보장도 되지 않을 것이다. 이는 웹에서도 마찬가지로 적용하여 생각해볼 수 있다. 특히 전 세계의 대부분의 사람들이 인터넷을 사용하고 인터넷 트래픽의 대부분이 웹 트래픽이다. 그래서 웹에서의 표준이 중요하다고 생각할 수 있다.
웹 표준이 없던 1990년대 말부터 2000년대 초반까지는 웹 개발자들이 IE용 사이트와 넷스케이프용 사이트 두개를 따로 만들어야했다고 한다. 그리고 이는 많은 시간과 노동이 들었다고 한다. 표준이 없기 때문에 더 많은 노동력과 시간이 들고 이는 사회의 전체적인 비용을 증가시키는 것이다. 이런 상황에서 시간과 예산이 한정되어있다고 하면 웹 개발자는 결국 한 쪽을 선택하게 되고 이는 정보 제공의 차별성을 불러일으킨다.
인터넷에서 정보는 차별없이 제공되어야하고, 일반적인 사람들 뿐만아니라 시각 장애인이나 노약자 등 모든 사람들이 사용할 수 있어야한다. 이러한 관점에서 웹 표준이 정립되었고 브라우저의 종류나 버전에 상관없이 장애인, 노약자를 포함한 모든 사용자들이 동일한 웹 사이트를 볼 수 있도록 하는 것이 웹 표준의 목적이다.
웹 표준의 장점
- 수정 및 운영관리 용이
콘텐츠의 올바른 구조화와 CSS로 시각표현을 통일하여 HTML, CSS를 따로 분리하여 제작하면 CSS 수정 만으로도 손쉽게 디자인의 수정이 가능하고 페이지 제작 시 부담 및 시간, 비용의 감소 효과가 있으며 관리가 용이하다.
구조와 표현을 분리하기 때문에 개발 시 코딩, 디자인, 프로그래밍이 동시에 진행 될 수 있어서 개발 기간이 많이 단축되고 디버깅에 유리하고 손쉽게 디자인만 변경이 가능하다 - 접근성 향상 -> 웹 접근성
웹 표준을 이용하여 만든 문서는 다양한 브라우징 환경에서 접근이 가능하고 일반인뿐만 아니라 장애인, 노인 등의 다양한 사용자가 어려움 없이 접근 가능한 페이지를 만들 수 있다. - 검색엔진 최적화 (SEO)
구조화된 웹 페이지는 검색엔진에 효율적으로 노출될 수 있도록 검색엔진의 검색결과를 최적화할 수 있다.
meta 요소를 이용하여 정확한 문서 정보 제공할 수 있고 의미에 맞는 마크업은 검색 시 효율성을 높일 수 있다. - 파일 사이즈 축소, 서버 저장 공간 절약
효율적인 소스 작성을 통해 파일 사이즈와 서버공간을 절약할 수 있고 화면 표시에 소요되는 시간을 단축 시킨다.
구조 (HTML)과 표현 (CSS)를 분리해서 개발하면 해당 페이지를 불러오게 될 경우, 브라우저의 캐시에 CSS가 저장되고 메모리에 상주하게 되어 동일한 CSS는 다시 불러오지 않기 때문에 HTML 코드가 가벼워지게 된다. - 효율적인 마크업
CSS와 HTML 문서를 분리하여 제작할 경우, 불필요한 마크업이 최소화 되어 페이지 로딩 속도를 향상 시킨다. - 호환성 가능 -> 웹 호환성
웹 표준을 준수함으로써 다양한 브라우저에서도 작동이 가능하다.
웹 접근성
W3C의 정의에 의하면 웹 표준성은 접근성, 사생활 보호, 보안, 국제화의 측면을 고려해야한다. 이 중에 접근성을 '웹 접근성'이라고 한다.
웹 접근성은 장애 여부와 상관 없이 누구나 웹 원활하게 웹 페이지를 이용할 수 있어야 한다는 것을 의미한다. 명칭은 웹 접근성이지만 웹이 아닌 정보 통신 기술, 멀티미디어, 모바일, 어플리케이션 등에도 적용되는 지침이다.
예를들면 img 태그로 이미지를 쓴다면 alt 속성을 통해 해당 이미지가 무엇인지를 설명하는 텍스트를 추가해주어야 한다. 시각 장애인의 경우, 이미지를 볼 수 없으므로 alt 속성에 쓰여진 텍스트를 스크린 리더기가 인식해 사용자에게 정보를 전달한다. 이처럼 장애가 있는 사람도 원할하게 이용할 수 있도록 지켜야 하는 사항을 웹 접근성이라고 한다.
WCAG (웹 콘텐츠 접근성 지침)에 따른 주요 4가지원칙은 다음과 같다.
(내용이 많으므로 링크 참조 : https://webdir.tistory.com/34)
- 인지성
- 운용성
- 이해성
- 내구성
이외에도 문서구조, 표준 엘리먼트 사용, DTD 및 인코딩 등의 가이드라인 등 많은 지침이 있다.
웹 호환성 (Cross Browsing)
표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한 쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법으로 웹 사이트 사용 시 운영체제 및 브라우저 간 동일한 결과가 나오도록하는 웹 표준의 준수를 포함하는 개념이다.
웹 표준을 준수하기 않고 특정 운영체제나 브라우저에 종속되어 있다면 다양한 환경 및 브라우저에서 사용이 불가능한 문제가 발생한다. 따라서 제공하는 서비스를 모든 웹 브라우저 환경에서 동일하게 이용하기 위해서는 웹 호환성을 준수한 웹 사이트 구축이 필요하다.
대표적인 문제로는 국내의 IE에 최적화된 ActiveX가 있다.
웹 표준 개발 프로세스
웹 표준 개발 프로세스는 다음과 같다.
1단계: 구조화
문서 내용에 의미를 부여하는 것으로 상황과 의미에 맞게 태그를 사용해야 한다는 시멘틱 마크업을 목표로 구조화를 진행
2단계: 설계
구조화가 완료되면 설계를 진행. 다양한 상황에 놓여있는 사용자를 고려하여 모든 정보에 접근할 수 있도록 콘텐츠를 논리적 순서에 맞게 설계
3단계: 디버깅 (W3C Validator)
W3C에서 제공하는 툴을 사용하여 디버깅을 진행. 이 디버깅 툴을 사용하면 (X)HTML, CSS 문서에서 표현식과 문법이 제대로 되어 있는지 확인할 수 있고 비표준 태그 등도 확인할 수 있어 웹 표준을 준수하는 개발을 할 수 있다.
프론트엔드 개발자로 준비하면서 웹 표준이라는 키워드, 그리고 시맨틱 마크업, 검색엔진최적화라는 키워드를 접하였는데 이것들이 무엇인지 알아보기 위해 글을 작성하였다.
웹 표준이 무엇인지 조금은 알게 되었고 앞으로 웹 개발을 할 때 이러한 웹 표준을 지키는 개발을 할 수 있는 개발자가 되어야겠다.
참고한 레퍼런스 입니다.
https://namu.wiki/w/%EC%9B%B9%20%ED%91%9C%EC%A4%80
https://helloworld-88.tistory.com/96
http://www.smartebiz.kr/new/subpage02_02.html
http://www.incodom.kr/%EC%9B%B9_%ED%91%9C%EC%A4%80#h_1479c5d6bbbdb058794f77ea56f9d2f2
'HTML' 카테고리의 다른 글
| Semantic HTML (0) | 2020.04.26 |
|---|
댓글