웹 표준과 크로스 브라우징(Cross Browser Testing)
웹 표준 (Web Standards)?
Chrome, Firefox, IE, Opera, Safari는 브라우저입니다. 브라우저는 HTML, CSS, JavaScript 파일로 구성된 웹사이트를 읽어서 우리의 화면에 보여주죠. 하지만, 브라우저들 사이에 기능 경쟁이 이루어지면서, 브라우저 마다 이러한 파일들을 읽는 방법들이 상이했습니다.
파일을 읽는 방법이 다른 이유는 브라우저마다 랜더링 엔진이 다르기 때문입니다. 대표적으로 Safari는 애플사의 웹킷(Webkit), Firefox는 모질라의 게코(Gecko)를 사용합니다.
그래서 웹 개발자들은 각 브라우저마다 어떻게 보일지 하나 하나 신경쓰면서 작업해야 했습니다. 물론 지금도 이 작업은 유효하지만 훨씬 간편해졌습니다. 바로 웹 표준이 생겼기 때문이죠.
HTML과 CSS의 표준을 정하는 W3C, JavaScript를 관장하는 ECMA, 국제 인터넷 표준화 기구에서 만드는 기준들이 웹 표준입니다. 웹 표준이 생긴 이후, 대부분의 브라우저들은 웹 표준에 맞춰서 발전하고 있습니다.
이 방향에 역행하는 단 하나의 브라우저빼고요. 바로, IE 입니다.
인터넷 익스플로러 Whyrano …
2000년 중반까지는 IE의 독주라고 할 만큼 사용률이 높았습니다. 하지만 지금은 Desktop Browser Market Share Republic Of Korea 통계 (2019년 기준)에서도 알 수 있듯이 Chrome이 70% 이상의 점유율을 차지하고 있고, IE는 9% 정도 차지하고 있죠. 뒤늦게 마이크로소프트사에서 Edge를 출시했지만 Edge 역시 9%의 낮은 점유율을 보이고 있습니다.
그럼에도 불구하고 웹 개발자들은 IE의 입맛에도 맞춰줘야합니다. 9%라는 사용자가 있기 때문이죠. 웹 접근성을 위해 어떤 브라우저로 접속해도 잘 돌아가는 웹사이트를 만들어야 하니까요.
크로스 브라우징 (Cross Browser Testing) ?
가능한 모든 브라우저에서 작동하도록 작업하는 것, 웹 호환성을 높이는 것을 크로스 브라우징 (Cross Browser Testing)이라고 합니다.
흔히 크로스 브라우징 테스트를 한다고 하는데요, 웹 개발자가 작성한 CSS 속성, JavaScript 명령어가 각각의 브라우저에서 잘 작동하는지 확인하는 것입니다. IE의 경우 버전마다 지원이 상이하기 때문에 각각의 버전을 모두 테스트해보아야 합니다. 그렇다면 어떻게 크로스 브라우징 작업을 할 수 있을까요?
- Can I use
처음 작업을 시작할 때 caniuse 웹사이트에서 CSS 속성과 JavaScript 명령어의 각 브라우저 별 지원 여부를 확인하며 작업합니다.
W3C와 MDN에서도 브라우저 지원 여부를 알 수 있습니다.
위 사진의 왼쪽 하단을 보면, 진한 녹색으로 표시되어 있는 부분은 각 브라우저 별로 CSS 속성에 접두사를 붙여서 각 브라우저의 버전에서 작동하도록 사용할 수 있습니다.
CSS 속성의 접두사는 각 브라우저의 렌더링 엔진 이름과 관련이 있습니다. 예를 들어 Firefox는 모질라에서 만든 랜더링 엔진을 사용하기 때문에 “-moz-” 라는 접두사를 사용합니다.
2. Babel / Polyfill
Babel은 구 브라우저에서도 최신 JavaScript 코드가 잘 작동하도록 변환해주는 트랜스파일러(Transpiler)입니다. 대표적으로 Chrome 이나 Firefox는 ES6 문법을 지원하지만, 타 브라우저에서 ES6문법이 돌아가게 하려면 Babel설치가 필요합니다. polyfill는 최신 JavaScript 버전(ES6)에 새롭게 추가된 Map, Set, Promise와 같은 객체를 구 브라우저에서 사용가능한 객체로 변환해주도와주는 도구입니다.
Babel과 Polyfill에 대해서 더 자세히 알고 싶으신 분은 세 번째 글을 확인해주세요.
지금까지 웹표준과 크로스 브라우징에 대해서 알아보았습니다. 웹 접근성을 높이는 방법인 만큼 웹사이트 배포를 앞두고 있다면, 크로스 브라우징은 필수라고 할 수 있겠습니다. 우리 모두 크로스 브라우징해요!
