웹 표준과 웹 호환성

nGyu·2023년 7월 27일

CS 브라우저 웹표준 웹호환성

기초를 탄탄히

목록 보기

3/4

웹 표준과 웹 호환성

개발을 하다보면 언젠가 이런 말을 들어본 적 있을것이다.

“웹 표준에 맞춰 개발을 해야한다.”
”브라우저 별 작동하는 스크립트가 다르다”
”일부 브라우저는 지원하지 않는다”

이 말들이 왜 나오게 되는것일까? 라는 고민에서 해당 글을 작성하게 되었다.

웹 표준

웹 표준은 World Wide Web Consortium (W3C)의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.”

웹 표준이란 W3C의 문법을 준수하는 것을 의미한다.

그런데 여기서 보면 W3C의 측면을 서술하고 정의하는 용어라는데, W3C가 뭐하는 곳인지 간략하게만 알아보자.

W3C

W3C 는 웹 표준과 가이드라인 개발을 설립목적으로 가지고있는 조직이다.
W3C에서 제정한 표준 목록은 CSS, DOM, HTML, SVG, SOAP, WSDL, XML 등 다양한것을이 많은데, 이 외에도 다양한 것이 있으니 해당 문서를 확인해보면 더 다양한것들이 많다.

다시 돌아와서..

Web standards are blueprints –or building blocks– of a consistent and harmonious digitally connected world. They are implemented in browsers, blogs, search engines, and other software that power our experience on the web.

W3C 사이트 메인에 올라온 글 이다. 이 말을 파파고를 통해 해석해보면 아래와 같다.

웹 표준은 일관되고 조화로운 디지털 연결 세계의 청사진(또는 빌딩 블록)입니다. 웹에서 우리의 경험을 강화하는 브라우저, 블로그, 검색 엔진 및 기타 소프트웨어에 구현됩니다.

여기서일관되고 조화로운이라는 키워드가 보이는데, 이 키워드가 중요한 키워드라 생각된다.

이는 약간 간단하게라도 웹의 역사를 알아보면 이해할 수 있으리라 생각된다.

웹의 역사

1994년 Netscape가 출시되고, 1995년 Internet Explorer가 출시 되었다.
1990년대 중반에는 Netscape가 확실히 표준 이어서 Netscape를 기준으로 제작하였지만, 날이 갈수록 IE의 발전으로 인해 두 브라우저 모두 호환되게 만들어야 했다. 이 때 IE와 Netscape가 경쟁을 시작하였고, 이로 인하여 개발자만 고생하는 상황이 발생했다.

W3C 에서도 표준을 내세워 개발자를 지키려 했지만, 너무 과도한 경쟁으로 W3C조차 나서기 힘들정도가 되었을 당시, 1998년 외국 개발자를 중심으로 웹 표준을 브라우저에 탑재하는 움직임인 WaSP(웹 표준 프로젝트)가 일어나게 되었다.

이러한 움직임 이후 1999년 IE의 점유율이 높아지며 웹 개발자들은 IE에 맞춰 개발을 했다.
하지만 Opera, FireFox, Chrome등의 브라우저가 시중에 나오게 되며 IE 에서 동작하던 코드가 다른 브라우저에서는 동작을 하지 않거나, 반대의 상황도 자주 나오게 되었다. 이 이후 웹 표준이 확산되게 되었다.

는 짧게 축약한 내용이다.

W3C의 웹 표준

우리가 흔히 알고있는 HTML을 기준으로 살펴보자.

만약, HTML의 태그를 우리가 함부로 정할 수 있다면 어떻게 될까?

<div />를 A라는 사람은 <ivd /> 태그로 사용하고, B라는 사람은 <d /> 로 사용한다 해보자.
다른 사람들이 보았을때 무슨 태그인지 알 수 있을까? 정답은 No다. 이러한 문제점이 서로 얽히고 섥혀 표준이 중요한 시대가 되었고, 최근 웹앱의 발전으로 인하여 Semantic Tag 를 이용한 HTML5를 이용한 표준이 대세가 되었다.

~~여기서 React의 컴포넌트를 이야기하는 사람이 있을 수 있는데, 이 컴포넌트 조차 표준이되는 태그를 사용해서 만든 컴포넌트이다.~~

이 처럼 브라우저의 스타일을 적용할 때 CSS3 를 사용하는 것도 웹 표준이라 볼 수 있다.

그런데 왜 표준이 생기게 되었는지 대강 알겠지만, 조금 더 자세히 알고싶어졌다. 이는 웹 호환성과 연결되는것 같다.

웹 호환성

웹 호환성이란, 다른 브라우저에서도 똑같은 이벤트와 똑같은 화면이 나와야 하는것이다.

웹 표준을 맞추면 웹 호환성도 100% 만족되는것 아닌가? 하는 생각이 들었는데, 이는 브라우저별 어떤 엔진을 사용하는지에 달라지는것으로 보인다.

브라우저 엔진

브라우저는 HTML / CSS / Javascript 를 렌더링 할 때 그냥 하는것이 아닌 엔진을 통한 렌더링을 한다.
그런데, 이 엔진은 대부분 브라우저가 다르기 때문에 표준이 필요한것이다.

그렇다면 처음 말한대로 표준을 지키면 호환성도 100% 맞춰지는것 아닌가? 하는 생각이 들텐데 정답은 No다.

브라우저에서 한 페이지를 렌더링 하기 위해서는 두 종류의 엔진인 렌더링엔진, 자바스크립트엔진이 필요하다.

렌더링 엔진

렌더링(레이아웃) 엔진은 대표적으로 Blink, Gecko, WebKit, Tirdent, 기타, 멀티엔진 이렇게 총 5개로 나뉘어지게 된다.
여기서 우리가 흔히 사용하는 Chrome과 Edge, Opera 는 Blink / FireFox는 Gecko / IE는 Tirent / Safari는 WebKit을 사용한다.
여기서 좀 크게는 Blink 와 WebKit으로 나뉘게 되는데,
Webkit은 Apple의 독자적인 엔진이며 Blink는 이를 대체하기위해 개발된 엔진이다.
그럼 Chorme은 IOS에서도 Blink를 사용하나? No , WebKit 사용중이다.

렌더링 엔진은 무엇을 하는것일까?

말 그대로 렌더링을 하는 엔진이다. HTML 과 CSS 를 렌더링해서 브라우저에 우리가 볼 수 있도록 출력해주는 엔진이다.
그럼 WebKit은?

자바스크립트 엔진

대표적으로 V8과 Webkit, 그리고 우리를 힘들게 했던 Chakra가 있다.

우리가 알고있는 5대 브라우저 중 Safari와 IE를 제외한 브라우저는 V8을 사용한다.
Safari의 경우 WebKit 하나만 이용해서 렌더링과 자바스크립트 모두 담당하고 있으며,
FireFox는 Spidermonkey를 이용하고 있다.
우리를 힘들게 했던 IE는 V8이 아닌 Chakra를 이용하고 있기에 IE를 판별해서 IE만이 사용할 수 있는 스크립트를 추가해주어야 했다.

정리

인터넷이 발달함으로 인해 브라우저가 생기게 되었고, 표준이 없어도 각 브라우저에 맞게 개발을 할 수 있지만 그만큼 공수가 많이 들어갔다. 이 때문에 W3C는 표준을 만들게 되었고, 아무리 표준을 맞춘다 하더라도 각 브라우저별 엔진이 다르기에 호환성정도는 맞춰주어야 한다.

이 외에도 접근성이 있지만 이는 콘텐츠에 관련된 내용이라 판단되어 이 글에서는 다루지 않았다.