/
/

퍼블리싱 준비 가이드: 크로스브라우징

크로스브라우징
퍼블리싱크로스브라우징
avatar
17__colin
2024.12.30
·
7 min read

크로스 브라우징이란?

웹사이트가 다양한 브라우저에서 동일하게 작동하고 일관된 사용자 경험을 제공하도록 호환성을 고려해 만드는 작업이다.

크로스 브라우징의 등장 배경은?

  1. 인터넷 익스플로러의 시장 점유율을 높이기 위해 자사 브라우저에만 동작하는 기능을 추가하기 시작

  2. 초기의 자바스크립트는 브라우저 생태계를 고려해서 작성된 것이 아니었기 때문에, 브라우저는 자바스크립트의 발전 속도 간의 차이를 따라잡지 못함

=> 크로스 브라우징 이슈 발생 : 브라우저에 따라 웹페이지가 정상적으로 동작하지 않음

=> 이러한 문제를 해결하기 위해 자바스크립트에 폴리필과 트랜스파일 같은 개념이 등장하기도 함.

폴리필 : 브라우저가 지원하지 않는 코드를 브라우저에서 사용할 수 있도록 변환한 코드 조각이나 플러그인 (ex: core.js, polyfill.io)

트랜스파일 : 최신 버전의 코드를 예전 버전으로 변환하는 과정 (ex: 바벨)

  • 라이브러리에 기대지 않고 크로스 브라우징 이슈를 해결하고, 모든 브라우저에 동일하게 동작하는 표준화된 자바스크립트의 필요성이 제기됨

=> 자바스크립트의 표준화 진행

크로스 브라우징의 중요성

  1. 웹사이트의 접근성 향상

  2. 사용자 경험 향상

  3. 웹 표준 준수를 통해

    1. 코드의 재사용성 증가

    2. 유지보수 시 발생할 수 있는 문제 최소화

크로스 브라우징 테스트 도구

  1. BrowserStack

클라우드 기반 크로스 브라우저 테스트 플랫폼으로 실제 디바이스 클라우드에 대한 접근 및 종합적인 테스트 도구 제품군을 제공하기에 다양한 환경에서 광범위한 테스트를 수행 가능

  1. Sauce Labs

Selenium을 통합한 실시간 테스팅 및 성능 모니터링을 포함한 종합적인 테스팅 도구를 제공하며 복잡한 테스트 요구사항을 가진 대규모 조직(기업)에 적합

=> 다양한 브라우저와 운영체제 조합에서 실시간으로 웹사이트를 테스트

=> 모바일 기기에서의 테스트를 지원하여, 다양한 화면 크기와 해상도에서의 호환성 문제를 발견하는 데 유용

크로스 브라우징 발생 원인 및 해결 방법

  1. CSS 스타일의 적용 차이로 인한 발생

  2. 자바스크립트의 호환성 문제

    • 특정 기능이나 메서드가 일부 브라우저에서는 작동하지 않을 수 이음 (ex: 구형 브라우저)

      => 조건문을 통해 해당 기능의 존재 여부 체크

  3. HTML 태그의 지원 차이 (ex: 구형 브라우저에서 지원하지 않을 수 있음)

    => HTML의 호환성을 고려한 대체 태그 또는 속성 사용

  4. 브라우저마다 폰트와 이미지의 렌더링 차이 (=> 디자인의 일관성 저해)

CSS와 JS의 호환성 문제를 해결하기 위해서는 브라우저별 프리픽스 또는 폴리필을 사용하는 것이 효과적

/* ex: CSS 코드에 브라우저별 프리픽스를 추가 */
.example {
-webkit-border-radius: 10px; /* Safari, Chrome */
-moz-border-radius: 10px; /* Firefox */
border-radius: 10px; /* Standard */
}

- 컬렉션 아티클