웹 표준, 웹 접근성, 크로스 브라우징 개념

웹 표준, 웹 접근성, 크로스 브라우징 개념

이번에는 웹 표준이 무엇인지, 생소한 단어 웹 접근성, 그리고 자주 듣는 크로스 브라우징이 무엇인지 알아보자.

웹 표준

웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙을 의미하는데 W3C의 토론을 통해 나온 권고안을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 한다.

독자확장 요소란 웹 표준 요소가 아닌 IE에서 지원했던 marquee 요소와 bgsound 요소, netscape navigator에서 지원했던 layer 요소 등을 말한다.

웹 표준을 사용해야지만 다양한 브라우저(Chrome, Firefox, Edge, Opera..)에서 내가 의도한대로 정상적으로 출력된다. (하지만 IE에서는 웹 표준을 지키지 않기 때문에 많은 개발자분들이 고생을 했죠.. -> IE 서비스 종료 😁 ) 또한 다양한 브라우저는 이미 웹 표준을 잘 지키고 있습니다.

웹 접근성

웹 접근성이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 즉, 사이트가 올바르게 설계되어 개발되었다면 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있게 된다.

예를 들어, img 태그에 alt 속성을 반드시 사용해야 한다. 시각 장애인은 이미지를 볼 수 없으므로 이미지가 어떤 이미지인지 텍스트로 표현하면 더 좋다. 또한 청각 장애인을 위해 영상에 자막을 넣는다던지, 키보드 사용만으로도 웹사이트 조작이 가능하도록 제공해주어야 한다.

크로스 브라우징

개발자 채용공고 사이트에서 웹 프런트엔드 개발자의 채용조건에 "크로스 브라우징 경험을 해보았나" 라는 것이 있다. 크로스 브라우징이란 웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한대로 호환성있게 나오게 하는 작업을 말한다.

브라우저마다 렌더링 엔진이 다르기 때문에 크롬에서는 잘 보이던 CSS가 Firefox에서 깨진다거나 JavaScript 코드가 제대로 동작하지 않을 수가 있다. 따라서 크로스 브라우징 작업이 필요하다. (크로스 브라우징 이슈가 가장 많았던 IE가 드디어 종료! 👏👏)

렌더링 엔진이란 요청 받은 내용을 화면에 표시하는 일을 말한다.

다양한 렌더링 엔진들

브라우저 - 렌더링 엔진

• 파이어폭스(모질라) - 게코(Geocko)
• 애플(사파리) - 웹킷(Webkit)
• 구글(크롬) - 블링크(Blink)

이미지

추가적으로 이미지에 대해서 간략히 알아보자. 먼저 이미지는 비트맵 이미지와 벡터 이미지로 구분된다.

• 비트맵: 픽셀 단위로 색정보를 가진 이미지 데이터(.jpg, .gif, .png)
  • 정교하고 다양한 색상으로 이미지 표현이 가능하지만 확대, 축소시에 이미지가 깨진다.
• 벡터: 수학 정보로 모양 정보를 가진 이미지 데이터(.svg)
  • 확대, 축소를 해도 이미지가 깨지지 않는다.

확장자별로 알아보기

• JPG: 높은 압축률
  • 24비트, 약 1600만 색상으로 고해상도 이미지 가능
  • 이미지 품질과 용량 조정 가능
  • 대신에 압축을 하면 원본 이미지와 일부 다를 수 있는데 이를 손실 압축이라 한다.
• GIF: 동영상이나 짤 과 같은 이미지 가능
  • 8비트 색상만 지원
  • 원본 이미지와 동일한 비손실 압축이다.
  • 대신에 이미지 배경에 투명도를 지원하지 않는다.
• PNG: 투명도가 지원되는 GIF 대체 포맷
  • W3C 권장 이미지 포맷
  • GIF와 같이 짤 등은 지원되지 않는다.
  • JPG와 같이 24비트, 약 1600만 색상으로 고해상도 이미지 가능
  • 비손실 압축
  • 대신에 파일 사이즈가 다른 포맷(확장자)에 비해 상대적으로 크다.
• WEBP: JPG, PNG, GIF 모두를 대체하는 포맷
  • 구글에서 개발
  • 손실/비손실 압축 지원
  • 대신에 일부 브라우저에서는 지원이 되지 않기 때문에 호환성 문제가 발생한다. (크로스 브라우징 이슈 발생!)

References

• 인프런 - 풀스택을 위한 탄탄한 프런트엔드 부트캠프
• seulbinim.github.io - 웹표준이란
• https://moo-you.tistory.com/9#recentEntries
• ko.wikipedia.org - 웹접근성