프론트엔드 개발자가 하는 일에 대해 알아보던 중,
'크로스 브라우징' 이라는 단어를 접하고 궁금하여 알아보았다 ❕
크로스 브라우징이란?
크롬, 인터넷 익스플로러, 파이어폭스, 오페라, 사파리 등등...
우리가 사용하는 웹 브라우저의 종류는 다양하다.
개발자가 어떻게 코드를 짜던 모든 웹 브라우저에서 똑같이 작동하면 좋겠지만, 브라우저마다 렌더링 엔진이 달라서 그렇지 않기 때문에 크로스 브라우징이 필요하다.
즉, 어떤 브라우저를 사용해도 깨지지 않고 정상적으로 작동할 수 있도록 웹 페이지를 제작하는 기법이다.
크로스 브라우징이 필요한 이유
위 사진은 같은 코드를 크롬과 인터넷 익스플로러 두 개의 브라우저에서 실행한 것이다. 기본적으로 글씨체가 다르고, textarea 태그를 사용 했을 때 그 모습도 다른 것을 볼 수 있다. 간단한 코드도 차이가 나는데, 더 많은 기능이 추가 되면 크롬에서는 작동되는 js 코드가 익스플로러에서는 작동이 되지 않는 등 추가적인 문제들이 발생할 것이다.
실제로 인터넷 웹사이트를 이용할 때, '해당 프로그램 사용을 위해 Internet Explorer 환경에서 접속해 주십시오'와 같은 문구를 본 적이 한 번쯤은 있을 것이다. 이런 상황에서 우리는 꽤 귀찮음을 느낀다 😷
이런 불편함을 유저들이 겪지 않도록 하기 위해 개발자는 크로스 브라우징 기법을 사용해야 한다.
✅ 동등성
크로스 브라우징은 동일성이 아닌, 동등성을 의미하는 것이다.
웹 페이지를 똑같이 보이게 구현하는 것이 아니라, (동일성)
어느 한 쪽에 치우치지 않도록 최대한 표준인 요소를 사용하여 웹페이지를 제작해야 한다는 뜻이다.
브라우저에서 지원되지 않는 부분이 있다면 이를 보완할 수 있는 장치를 마련해서 해당 웹 브라우저 유저가 제공받는 정보에 소외감을 느끼지 않도록 하는 것이다. (동등성)
크로스 브라우징을 위해 체크해야 할 것
-
현재 웹 브라우저 점유율 확인
https://gs.statcounter. -
개발하면서 해당 브라우저에서 사용 가능한 요소인지 체크 https://caniuse.com/
