[F-Lab 모각코 챌린지 43일차] 웹 표준 Web Standards

Nami·2023년 7월 13일
0

66일 포스팅 챌린지

목록 보기
43/66
post-custom-banner

웹 표준 Web Standards

웹 기술과 관련하여 권고되는 규약과 표준.
‘웹에서 표준적으로 사용되는 기술이나 규칙’으로 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성하는 것. 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미한다.

  • 웹 표준은 웹페이지의 구조, 콘텐츠, 디자인 등을 통일된 방식으로 개발하고 표현하는 데에 사용.
  • 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법
  • 웹 표준을 준수함으로써 웹 페이지는 여러 브라우저 및 기기에서 일관된 동작을 보이고, 접근성과 호환성을 향상시킬 수 있다.
  • 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정을 담고 있으며 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것
  • W3C(World Wide Web Consortium)는 모든 사람이 접근성, 국제화, 개인 정보 보호 및 보안 원칙에 따라 웹을 구축할 수 있도록 표준 및 지침을 개발한다.

웹 표준을 준수해야하는 이유

1. 호환성

  • 애플리케이션이 다양한 플랫폼과 브라우저에서 일관된 방식으로 동작할 수 있다.
  • 따르지 않으면 특정 브라우저에서만 동작하거나 예기치 않은 오류가 발생함.

2. 접근성

  • 장애를 가진 사람들이 웹 콘텐츠에 더 쉽게 접근하고 사용할 수 있도록 도움을 준다.
  • 표준 준수는 웹 페이지의 구조화와 마크업을 통해 스크린 리더, 키보드 네비게이션 등의 보조 기술을 활용하는 사용자들에게 접근성을 제공한다.

3. 검색 엔진 최적화(SEO)

  • 검색 엔진에서 웹 페이지를 더 잘 인식하고 색인할 수 있다.
  • 검색 엔진 최적화에 도움을 주며, 검색 결과에서 더 높은 순위를 얻을 수 있다.

4. 유지 보수 용이성

  • 코드의 가독성과 유지 보수성이 향상된다.
  • 일관된 마크업과 스타일 시트는 다른 개발자들이 프로젝트를 이해하고 수정하는 데 도움을 줌. 또한, 웹 표준을 준수하면 새로운 기능을 쉽게 추가하거나 변경할 수 있는 유연성을 갖게 됨.

5. 보안성

  • 보안 취약점을 최소화할 수 있다.
  • 표준 준수는 안전한 코딩 관행을 따르고 보안 문제를 예방하는 데 도움을 준다.

웹 접근성 Web Accessibility

장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것.

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의했다. 또한 웹 콘텐츠를 제작할 때에 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 말했다.

  • 접근성이란, 장애인에 국한되지 않고 모든 사람이 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말한다.

웹 표준, 접근성 진단 도구

Semantic Markup 시맨틱 마크업

Semantic은 '의미론적인'이라는 뜻.

  • "이게 어떻게 시각적으로 보여질까?" 대신 "이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"
  • 프로그래밍에서,시맨틱은 코드 조각의 의미를 나타낸다.
  • 의미있는 태그를 제공함으로서 해당 웹페이지가 전체적으로 어떤 구조를 가지고, 최상위 제목이 무엇이며, 그 안에 컨텐츠가 어떻게 구성되어 있는지를 개발자와 브라우저에게 알려준다.

Semantic Web

  • 웹에 존재하는 수많은 웹페이지에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상

  • 웹의 창시자인 팀 버너스 리가 1998년 제안, 다양한 정보자원의 처리 자동화, 데이터의 통합 및 재사용을 컴퓨터가 스스로 수행하여 인간과 컴퓨터 간의 효과적인 협력체계를 구축하기 위함이었다.

웹 표준, 시맨틱 마크업 준수의 이점

  • 검색 엔진 SEO(Search Engine Optimization)은 시맨틱 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
  • 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
  • 스크린리더기, 휴대폰 PDA, 장애인 지원용 프로그램 등 보조공학 기기로 사이트를 읽어 왔을 때 접근성이 좋아진다.
  • 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
  • 코드 가독성이 좋아지고 소스의 통일화로 코드와 데이터의 재사용성이 높아진다. 또한 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다.
  • 웹표준을 지키면 CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.
  • 오래된 브라우저에서도 컨텐츠가 적절하게 표시되면서 크로싱브라우징 시 호환성과 운용성이 확보된다.

팀 버너스 리를 개인적으로 굉장히 존경한다. 웹 접근성, 웹 표준을 알게 되었을 때 모두를 위한 웹이라는 공간 자체에 행복을 느꼈던 기억이 있다. 프로젝트 하면서 신경쓰고 싶은 부분이라 관련 사이트를 많이 찾아봤다.


참조 ✅

post-custom-banner

0개의 댓글