⌨️ Cross Browsing에 대하여
Cross Browsing?
Cross Browsing 이란 웹 호환성과 관련된 개념으로, 모든 웹 브라우저에서 웹 페이지가 깨지지 않고 개발자가 의도한 기능이 충분히 보여줄 수 있도록 하는 작업 및 그 과정을 말한다.
웹 브라우저의 경우에는 브라우저를 제작한 기업들이 모두 다르기 때문에 해당 브라우저를 만들 때 사용한 코드들도 다를 것이며 특히나 스타일, 각각의 버그, 렌더링 엔진(마크업 언어를 사람이 읽을 수 있는 문서로 표시하는 웹 브라우저의 핵심 기능을 담당하는 소프트웨어)이 모두 다를 수 있다.
따라서 개발자가 작업한 웹 페이지가 브라우저들마다 기능적으로 다르게 적용되는 문제점이 발생할 수 있는 것이다.
이를 방지하기 위해 Cross Browsing 작업이 반드시 필요하다.
Cross Browsing 작업
1. 작업하는 웹 페이지 타겟팅의 브라우저 점유율 확인
: 전 세계적으로 가장 많이 사용되는 웹 브라우저는 Chrome(약 66.12%)이지만 크롬 외의 웹 브라우저 사용 점유율을 확인해서 어떤 브라우저를 많이 사용하는지 파악하고 점유율에 맞춰 작업을 하는 것이 좋다.
✅ 웹 브라우저 점유율 확인 사이트 참고
https://gs.statcounter.com/
2. CSS 작업 시 스타일 초기화 작업(css reset) 진행
: 앞서 말했던 것과 같이 브라우저마다 기본 스타일링이 모두 다르기 때문에 동일한 스타일링을 적용해도 브라우저마다 다르게 보이는 경우가 분명 있다.
따라서, CSS reset 작업을 통해서 margin, padding과 같은 박스 모델을 동일하게 잡아주는 것이 중요하다.
특히, 폰트의 경우에도 브라우저마다 큰 차이가 있을 수 있기 때문에 최대한 동일한 폰트가 적용될 수 있도록 범용적으로 사용되는 폰트로 기본 설정을 해주고, font-size, font-weight 등 폰트에 대한 기본적인 스타일링도 reset을 해주는 것이 좋다.
✅ css reset 참고 사이트
https://meyerweb.com/eric/tools/css/reset/
3. 웹 표준에 의거하여 웹 페이지 작업 ⭐️
: 웹 표준은 Cross Browsing의 기본을 넘어 웹 페이지 작업의 기본 및 기초라고 말할 수 있을 정도로 굉장히 중요한 부분이다.
웹 표준은 애초에 웹 호환성, 웹 접근성과 같은 브라우저의 기능적 차이점으로 나타나는 문제를 해결하기 위해 웹 페이지 작업 규칙을 문서화시킨 것으로, 웹 표준을 지키는 것만으로도 어느정도의 웹 호환성에 대한 이슈를 해결할 수 있다.
4. 적용시키고자 하는 기능 및 속성의 호환성 판단
: 개발자가 적용시키고자 하는 속성이나 기능이 브라우저들마다 사용이 가능한지, 그 호환성을 판단해 주는 여러 사이트들이 있다.
이러한 서비스의 도움을 받아, 개발을 하면서 하나씩 판단하는 것이 굉장히 좋은 방법이다.
✅ 참고 사이트
https://caniuse.com/
+ HTML meta tag로 최신 렌더링 엔진 설정
Internet Explorer(IE)의 경우에는 사용자가 가장 최신 버전의 브라우저를 사용하고 있어도 웹 페이지가 적절하게 렌더링 되지 않는 문제가 발생할 수 있다. 이를 방지하기 위해서 미리 HTML의 meta tag로 최신 렌더링 엔진 설정을 해줄 수 있다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">더불어, Internet Explorer(IE)에서 크롬 엔진을 사용할 수 있도록 하는 Chrome Frame이라는 플러그인이 존재하는데, 해당 플러그인이 설치가 되어 있을 때 사용하게 하기 위해서 아래와 같은 meta 태그로 설정을 해주면 된다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">✅ 참고 사이트
https://ofcourse.kr/html-course/meta-%ED%83%9C%EA%B7%B8
🖱️ 모바일에서 브라우저를 사용할 때 겪을 수 있는 Cross Browsing issue에 대하여
똑같은 브라우저라고 해도 데스크탑과 모바일 등의 환경에 따라 기능적인 차이가 발생할 수 있다.
대표적인 예가 바로 모바일에서 Safari, Chrome를 사용하는 경우다.
아이폰의 경우에는 Safari, Chrome 브라우저에 하단 메뉴바가 존재하게 되는데 이를 인식하지 못하고 웹 페이지 작업을 하게 되면 사용자 입장에서 하단 메뉴바를 기능적으로 충분히 사용하지 못하는 문제가 발생할 수 있다.
보통 웹 페이지 작업 시 브라우저 화면 가득 콘텐츠를 표현하기 위해서
height: 100vh 를 많이 사용하는데, 데스크탑에서는 큰 문제가 없지만 하단 메뉴바가 존재하는 모바일의 브라우저에서는 하단 메뉴바까지 함께 길이가 계산되는 이슈가 발생하게 된다.
(모바일의 경우 하단 메뉴바를 제외한 화면 가득히 콘텐츠가 나와야 하는데, 100vh로 크기를 설정하는 순간 하단 메뉴바를 포함한 화면으로 계산하게 되는 것)
이를 해결하기 위해서는 100vh가 아닌 100%로 설정하여 사용자가 브라우저의 하단 메뉴바를 기능적으로 충분히 활용할 수 있도록 해야 한다.
웹 호환성은 단순히 웹 페이지가 모든 웹 브라우저에 동일하게 보여진다는 개념이 아니다. 동일이 아닌 동등의 의미에 가까운 개념으로, 사용자가 어떤 브라우저에서든지 개발자가 의도한 기능을 충분히 사용할 수 있도록 해야 한다는 개념이다.
즉, 웹 호환성은 디자인적인 측면이 아니라 기능적 측면으로 다가가야 하는 개념이기 때문에 웹 개발을 할 때 강조가 될 수밖에 없는 이유이기도 하다.
