크로스 브라우징이란?
Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. - [한국 소프트웨어 진흥원] -
즉, 크로스브라우징은 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.
예를 들어, 크롬 브라우저에서는 height를 100vh로 주게 되면, 사용자의 브라우저 창의 크기의 100%만큼 이지만, 사파리에서는 하단 바가 있기 때문에, 하단 바의 길이까지 계산하여 다르게 나타난다. 또한, 폰트같은 경우도 브라우저마다 서로 다르게 나타날 수 있다.
크로스 브라우징의 작업
▶ 캔 아이 유즈를 통해 각 브라우저에 호환성을 검토할 수 있다. (https://caniuse.com)
▶ HTML5, CSS3, JavaScript 작성 시 W3C의 웹 규격에 맞는 코딩이 필요하다.
▶ 핵(HACK) 을 사용하여 작업한다. (무분별한 핵 사용은 코드의 유지보수를 어렵게하기 때문에 최대한 지양한다.
▶ 메타 태그 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>X-UA-Compatible라는 Internet Explorer에서 사용되는 문서 모드 메타 태그를 이용하여 크로스 브라우징 해 줄 수 있다.
▶ CSS벤더 프리픽스 사용하기
벤더 프리픽스(vendor prefix)는 브라우저별로 따로 놀던 CSS3의 속성을 잡아주기 위해서 사용되기 시작된 프리픽스이다. 각 브라우저에서 판독이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것이다. 예를 들어, -moz-, -webkit-, -o-, -ms- 등이 있다
모바일 환경에서 발생할 수 있는 호환성 이슈
모바일 기기의 화면 크기와 해상도가 다양하다는 점 때문에, 모든 기기에서 동일한 UI/UX를 제공하기 어렵다. 또한, 모바일 기기의 성능이 PC에 비해 낮은 경우가 많아서, 불필요한 리소스 사용을 줄이는 것이 중요하다. 이 외에도, 모바일 기기에서는 터치 입력을 사용하기 때문에, 마우스와 달리 터치 입력의 정확도와 반응 속도 등이 중요한 이슈이다.
이러한 이슈들에 대한 해결
모바일 기기의 화면 크기와 해상도에 맞게 UI/UX를 제공하는 반응형 웹을 제공하는 것이 중요하다.
▶ 미디어 쿼리
미디어 쿼리는 CSS에서 사용되는 기능으로, 미디어 타입과 뷰포트 크기 등의 조건에 따라 스타일을 적용할 수 있다. 예를 들어, 뷰포트 너비가 600px 이하인 경우에만 적용되는 스타일을 정의할 수 있다.
@media only screen and (max-width: 600px) { /* 스타일 정의 */ }
▶ style - @import 방법
스타일 안에 화면 크기에 따른 css를 임포트해서 사용할 수 있다. 예를 들어, 뷰포트 너비가 152~1024px일 때 mobile_style.css를 임포트해서 사용한다.
<style> @import url("mobile_styles.css") screen and (min-width: 152px) and (max-width: 1024px); </style>
▶ 유동형 그리드
유동형 그리드는 웹 페이지의 레이아웃을 구성하는 방법 중 하나이다. 유동형 그리드를 사용하면 화면 크기에 따라 레이아웃이 자동으로 조정되어 사용자가 보기 좋은 화면을 볼 수 있다.
마무리
프론트엔드 개발자로써 크로스브라우징과 모바일 환경 구현은 항상 따라다니며 괴롭히는 숙제일 것 같다는 느낌이 든다. 하나의 브라우저에서 웹 개발을 마쳤다고 끝낸 것이 아니라, 항상 다른 브라우저들과 모바일을 신경쓰며 작업해야 할 것이다. 나도 프론트엔드 개발을 공부하며 중간중간 반응형 웹을 만들고 크로스브라우징작업이 필요한지 항상 신경쓸 것이다.
