웹 표준(Web Standards)이란?
웹 표준은 웹 페이지를 개발할 때 사용하는 기술들을 표준화하는 것을 의미한다. 즉, 웹 페이지를 개발할 때 HTML, CSS, JavaScript와 같은 언어를 사용하는데 이러한 언어들을 표준화된 가이드에 따라 작성하는 것을 의미한다. 그렇다면 왜 웹 표준이 중요할까? 사람들이 사용하는 브라우저나 기기들은 다양하다. 누구는 아이폰이나 갤럭시를 사용하기도 하고 인터넷 브라우저로는 크롬, 사파리, 파이어폭스, 인터넷 익스플로러 등 다양한 브라우저가 있다. 이와 같은 상황에서 개발언어를 제각각으로 사용하게 되면 사용자의 환경에 따라 다르게 보일 것이다. 그럼? 개발자의 의도와 다르게 보여질 수 있고 정확한 정보나 의미전달이 어렵고 사람마다 사용이 달라질 것이다. 따라서 이를 방지하기 위해 사용하는 언어들을 표준화된 방식으로 사용함으로써(웹 표준) 사용자가 어떤 브라우저나 기기를 사용하던지 동일하게 화면을 볼 수 있도록 하는 것이 바로 웹 표준의 목적이다.
웹 표준의 장점
앞서 웹표준이 중요한 이유에 대해 알아보았는데 장점을 조금 더 알아보자
1. 브라우저나 기기에 상관없이 동일한 화면을 구현할 수 있다.
가장 큰 장점은 앞서 말한 것처럼 사용자의 브라우저나 기기에 상관없이 같은 화면을 구현할 수 있기 때문에 웹페이지의 호환성이 좋다.
2. 검색엔진 최적화 (Search Engine Optimization, SEO)
인터넷에서 글을 많이 써보았다면 SEO에 대해 많이 들어보셨을 것이다. SEO는 검색엔진 최적화를 의미하는데, 최적화가 되어있다면 해당 글이나 웹페이지가 검색엔진에서 더 잘 검색될 수 있다. 나만 알고 싶은 페이지가 아니라 많이 검색이 되고 좋은 글이나 페이지가 되려면 최적화가 되는 것이 좋은데 웹표준을 준수하면 SEO에 유리하다.
3. 유지보수가 좋다
웹 표준을 준수하게 되면 각 영역이 분리되기 때문에 제작과 유지보수가 편리하다. 그리고 코드의 양이 줄어들기 때문에 파일크기나 서버의 부담이 줄어든다는 장점이 있다.
4. 웹 접근성의 향상
웹 표준과 함께 자주 등장하는 것이 바로 웹 접근성이다. 웹 접근성이란 간략하게 '모든 사용자가 쉽게 웹페이지에 접근할 수 있도록 하는 것'을 의미한다. 웹 표준을 잘 준수하게 되면 웹 접근성에도 도움이 된다.
웹 표준을 준수하는 방법
웹 표준이 무엇인지, 장점은 무엇인지 알아보았다면 웹 표준은 어떻게 준수할까? 웹 표준 준수방법에 대해 알아보자.
1. DOCTYPE 선언
코드화면을 열어 HTML 페이지를 만들 때 가장 먼저 하는 것이 바로 느낌표(!)치기다. vscode에서 !를 치게 되면 등장하는 <!DOCTYPE html> 이 바로 DOCTYPE 선언이다. 이 선언은 HTML 문서가 HTML5를 준수한다는 것을 의미한다. 이 선언으로 브라우저에게 해당 문서가 HTML5로 해석하고 렌더링하라는 신호를 줄 수 있다.
2. 시멘틱 태그 사용
시멘틱 태그(Semantic Tag)란 콘텐츠의 의미와 구조를 명확하게 나타내는 태그이다 . 시멘틱(semantic)이라는 단어 자체가 '의미있는'이라는 뜻을 가지고 있기 때문에 시멘틱 태그는 '의미있는 태그'라고 할 수도 있겠다. HTML5에서 다양한 시멘틱 태그가 추가되었으며, 시멘틱 태그 종류로는 <header>, <nav>, <main>, <section>, <footer> 등이 있다. 이처럼 시멘틱 태그를 사용함으로써 '이건 헤더야!', '이건 풋터야!' 하고 확실하게 알려주기 때문에 웹페이지의 구조를 명확하게 할 수 있게 된다. 따라서 이로 인해 SEO최적화와 웹접근성에도 도움을 준다.
3. 표준화된 CSS 작성
DOCTYPE 선언이나 시멘틱 태그를 사용하는 것이 HTML의 웹표준 준수방법이라면, CSS도 웹표준을 준수해야 한다. CSS는 가능하면 최신 스타일을 사용해야 하고 !important와 같은 강제적인 사용은 자제하는 것이 좋다. 또한, 미디어쿼리를 사용하여 반응형 작업을 하는 것이 좋다.
웹 표준 유효성 검사
내가 만든 웹 페이지가 웹 표준을 준수하는 지 확인하는 방법이 무엇일까?
바로 웹 표준 유효성 검사를 실시하는 것이다. 유효성 검사는 HTML과 CSS 코드가 W3C 가이드라인에 따라 작성되었는지 확인하는 검사로, 아래의 각 사이트에서 진행할 수 있다.
- HTML 유효성 검사 사이트 : https://validator.w3.org/#validate_by_uri+with_options
- CSS 유효성 검사 사이트 : https://jigsaw.w3.org/css-validator/#validate_by_uri
각 사이트에 접속하면 위와 같이 나타난다. 해당 사이트에 파일을 업로드해도 되고 배포된 페이지라면 url 주소를 입력해도 된다. 그럼 해당 코드가 W3C 가이드라인을 준수하고 있는 지 나타난다.
위와 같이 나온다면 가이드라인을 준수하고 있다는 뜻이고 만약 문제가 있다면 에러 내용이 뜨게 된다.
'개발이야기' 카테고리의 다른 글
| vscode에 깃허브 Github 로그인하는 방법 (0) | 2024.11.12 |
|---|---|
| Python 파이썬에서 가상환경 venv 만들고 실행하기 (feat. 파이썬 버전에 따른 venv 생성오류) (3) | 2024.10.14 |
| 웹 접근성(Web Accessibility)이란? - 설명, 준수 방법, 검사 사이트 (0) | 2024.09.30 |
| 타입스크립트(Typescript)란? - 특징, 장점, 자바스크립트와 차이점, 코드예시 (0) | 2024.09.27 |
| 개발블로그 (0) | 2024.06.10 |