- 들어가며
- 크로스 브라우징이란?
- 같은 코드, 다른 화면?
- 마치며
들어가며
최근 회사에서 통계 관련 페이지를 릴리즈했었는데요, 각종 그래프와 차트, 애니메이션 등등.. 꽤나 복잡한 UI 요소들이 버무려진 페이지였습니다.
페이지UI 요소가 복잡하다보니 브라우저, OS에 따라서 레이아웃이 어긋나거나 어색한 부분이 왕왕 생기게 되었습니다. 예쁘게 만들어 놓은 UI가 Edge 브라우저에서는 이곳 저곳 틀어져 있는 것을 목도했을 때의 그 기분이란.. 😭
답답함은 뒤로하고..! 고생한 김에 이번 기회에 크로스 브라우징의 개념과 등장 배경에 대해 한번 정리해보기로 했습니다.
크로스 브라우징이란? 🤞
크로스 브라우징의 사전적 정의는,
브라우저별로 다르게 구현되는 기술을 고려해 여러 환경에서도 이상없이 작동되도록 웹페이지를 제작하는 방법론.
입니다.
크로스 브라우징이 필요하게 된 배경은 한꺼번에 여러 브라우저들이 출현하게 되면서부터 인데요, 웹이 부흥하기 시작한 90년대부터 Microsoft, Mozilla, Google 등 여러 회사들이 웹 브라우저 점유율을 두고 치열한 경쟁(a.k.a 브라우저 전쟁 ⚡️)을 벌이게 되었습니다.
그 결과, 이제는 정말 개수를 파악하기도 힘들 만큼의 다양한 브라우저들이 공존하게 되었습니다. K-Meleon, SeaMonkey라는 브라우저 들어보신 분…?
브라우저 로고 모음 <출처 : github.com/alrra/browser-logos>이렇게 다양한 브라우저가 등장함에 따라 사용자들이 입맛에 따라 선호하는 브라우저를 선택할 수 있게 되었다는 장점도 생겼지만!
동시에 서비스 제공자 입장에서는 다양한 브라우저에서 사용자가 불편함 없이 사이트를 이용할 수 있도록 개발해야 한다는 필요성도 함께 생기게 되었습니다.
쉽게 말해서 여러 브라우저에서 잘 동작할 수 있도록 코드를 짜면서 체크해야 하는 수고가 늘었다는 것이죠.
같은 코드, 다른 화면?
물론, "같은 코드인데 화면이 다르게 나오는게 말이 되나?" 라는 의문이 들 수도 있습니다. 하지만 실제로는 정확히 같은 코드를 사용한다 해도 브라우저별로 화면과 기능에 차이가 종종 발생하기도 합니다.
이는 브라우저마다 렌더링 엔진(페이지를 렌더링하는 작업을 수행하는 엔진)이 다르기 때문이지요.
브라우저별로 사용되는 렌더링 엔진 각각 브라우저 엔진별로 작동하지 않는 HTML, CSS, Javascript 코드가 있으며, 또 브라우저별로 버그도 다양하게 존재합니다. 때문에 같은 코드를 작성한다 해도 브라우저별로 전혀 다른 화면이 출력될 수도 있는 것이죠.
예를 들어, Chrome의 최신 브라우저에서는 복잡한 애니메이션과 3D 등을 구현할 수 있는 반면, 구형 브라우저 또는 IE에서는 3D 애니메이션 구현이 어렵거나 아예 불가능할 수도 있습니다. (Chrome에서는 잘 보이는데 IE에서는 새하얀 빈 화면으로 나오는 불상사가 생길수도 있다는 사실..!)
이 외에도 빈번하게 발생하는 이슈로는 브라우저별로 레이아웃이 다르게 보인다거나, 폰트가 다르게 적용되는 등의 문제도 있습니다. 어디선가 디자이너분들 뒷골 당기는 소리가 들리는 기분이네요.
마치며
브라우저 호환성 이슈가 생겨난 지 10년이 넘어가고 있음에도 크로스 브라우징은 여전히 많은 시간과 수고가 소요되는 작업입니다.
아직 갈길이 멀지만! 어떻게 하면 크로스브라우징 수고가 적도록 코드를 작성할 수 있을지 종종 고민해보고 있습니다. 크로스브라우징이 왜 존재하는지 궁금해서 한번 리서치를 해봤는데 요 글이 여러분들에게도 조금이나마 도움이 되었길 바랍니다.
참고한 글
https://mulder21c.github.io/2019/01/30/what-is-cross-browsing/
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
