[WEB] 웹 크로스 브라우징 테스트 및 구현 방법

 

 

---

 

크로스 브라우징이란?

• 크로스 브라우징(Cross-Browsing)은 웹 개발에서 웹 페이지나 웹 애플리케이션이 다양한 웹 브라우저에서 일관되고 올바르게 작동하도록 만드는 작업

 

*크로스 브라우징의 중요성

1. 사용자 접근성 향상: 다양한 브라우저를 사용하는 사용자들에게 동일한 접근성과 기능을 제공하여 사용자 경험을 향상시킵니다.
2. 브랜드 이미지 강화: 모든 환경에서 일관된 사용자 경험을 제공함으로써 브랜드의 신뢰성을 높입니다.
3. SEO 효과: 모든 브라우저에서 동일하게 잘 작동하는 웹 페이지는 검색 엔진 크롤러에 더 잘 인식되며, 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

 

*크로스 브라우징 구현 방법

1. 표준 준수: HTML, CSS, JavaScript와 같은 웹 표준을 준수
2. 폴리필(Polyfill) 사용: 최신 기능을 지원하지 않는 브라우저에서 해당 기능을 사용할 수 있도록 폴리필을 사용
3. 브라우저 테스트: 주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 웹 페이지를 테스트
4. 반응형 디자인: 다양한 디바이스와 해상도에서도 웹 페이지가 잘 보이도록 반응형 디자인을 구현
5. 프레임워크 및 라이브러리 사용: 크로스 브라우징을 지원하는 다양한 프레임워크(예: Bootstrap)와 라이브러리(예: jQuery)를 사용

 

크로스브라우징 확인 사항

• HTML, XHTML, SVG, XForms와 같은 마크업 언어의 W3C 권고
• 스타일시트, 특히 CSS의 W3C 권고
• 흔히 자바스크립트나 ECMA스크립트로 불리는 Ecma 인터내셔널 표준
• 문서 객체 모델의 W3C 권고

대표적인 오류 케이스

• 레이아웃 파괴: 페이지 레이아웃이 흐트러지거나 특정 부분이 표시되지 않음.
• 클릭 무반응: 웹사이트 안의 단추를 눌러도 반응하지 않음.
• 로그인 불가: 로그인을 해도 로그인을 하지 않은 상태로 되돌아감.

 

크로스브라우징 예방 방법

1. 각 브라우저 호환성 검토하기

https://caniuse.com/

모질라 혹은 CanIUse 사이트에서 사용하는 코드가 어느 브라우저에서 호환이 되고 안되는지를 확인할 수 있다. 캔 아이 유스 사이트에서 많이 사용하는 코드 margin과 오늘 처음 알게 된 margin-trim의 호환성을 확인해 보았다. 사이트를 어떻게 사용하는지 모르는 사람도 이 사이트가 어떤 용도인지 알고 있다면 대략적으로 알 수 있을 정도로 한눈에 보기에 간편하게 되어있다. 자주 사용하지 않았거나 호환성이 걱정되는 속성은 이런 사이트에서 호환성을 검사하고 사용하면 된다.

 

 

2. CSS 초기화하기

처음에 크로스 브라우징을 해야 하는 이유 중에 브라우저마다 자체적인 CSS 스타일이 있다고 했었는데, 브라우저마다 동일한 스타일을 주기 위해 그 자체적인 CSS 스타일을 아예 초기화시켜 버리는 거다. 

 

3. 브라우저별 접두사 사용하기

CSS 속성 앞에 브라우저 별 접두사를 붙여 사용

-ms- : Edge / Internet Explorer에서 지원
-moz- : Firefox 지원
-webkit- : Google 크롬, Safari에서 지원
-o- : Opera에서 지원
// 예시
.selector {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

 

4. 메타태그(Meta Tag) 이용하기

메타태그를 이용해서 IE(익스플로러) 브라우저에서 어떻게 렌더링 할지를 지정할 수 있다. 사용을 할 때는 HTML파일 head 요소 안에 넣어 사용할 수 있고, <mata http-equiv="X-UA-Compatible" content=" 속성값 " /> 메타태그 안의 속성 값에 따라 익스플로러가 어떻게 렌더링 할지 결정되고 그중에서 "IE=edge" 속성값이 가장 많이 사용된다. "IE=edge" 속성값은 해당 브라우저가 할 수 있는 가장 최신의 버전으로 렌더링 된다.