[3] 크로스 브라우징

SeoChanhee·2020년 10월 8일
CSS
6

1일 차에 계획한 대로 Polyfill에 관해 공부하려다가 크로스 브라우징에 대해 먼저 공부하면 좋을 것 같아서 크로스브라우징부터 폴리필까지 공부를 해보게 되었다.


크로스 브라우징

크로스 브라우징이란?

Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다.
또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

크로스 브라우징은 브라우저마다 렌더링 엔진이 다르기 때문에 필요하다.


크로스 브라우징은 동등성을 의미

크로스 브라우징은 동일성을 의미하지 않는다.
크로스 브라우징은 동등성을 의미한다. (동등한 수준의 정보, 기능 접근에 있다.)

크로스 브라우징은 똑같이 보이게 구현해내는 것이 아니라는 것이다. 동등한 수준의 정보, 기능을 제공하는 것이 크로스 브라우징이다.
그렇기에 출처의 필자는 크로스 브라우징을 잘하는 사람이 어떤 사람인가에 대해 이렇게 말한다.


크로스 브라우징 방법들

1. 보수적으로 코딩하기

개인적인 생각이지만 정말로 크로스 브라우징을 잘하는 사람은 모든 브라우저에서 똑같은 수준으로 보이고 동작하게 하는 사람이 아니라, 특정 브라우저에서만 지원되는 기능을 구현하기 위한 별도의 라이브러리 등을 주입하지 않고도 최대한의 호환성을 제공함을 통해 어떤 브라우저에서 접근하든 정보와 기능을 충분히 제공할 수 있도록 점진적 향상을 끌어낼 수 있는 사람이 아닐까?

아마 최신 브라우저에만 맞추고 싶은 욕구는 모든 프론트엔드를 개발하는 사람들의 희망 사항일 것이다. 하지만 그건 어디까지나 개발자의 희망 사항일 뿐이고, 결국의 범위는 만드는 서비스의 사용자에 달려있다.

일단 최신 기능을 적용하고 어떻게 하면 다른 브라우저에서도 잘 보여지게 할까를 고민하는 것이 아니라 애초에 대부분의 브라우저에서 잘 보여지는 기능을 사용하면 되는 것이다. 최신 기술에 너무 목을 매던 지난 세월(?)을 조금은 반성해본다.

참고: Can I use - 프론트의 브라우저 지원 확인 사이트, Github - flexbugs - flexbox 버그 리스트, Markup Validation Service / CSS Validation Service - 웹 표준검사

2. 브라우저 대응 순서 정하기(적합한 타깃 설정)

StatCounter에서 2018년 1월부터 2020년 9월까지의 전 세계와 한국의 브라우저 점유율을 확인해봤다.

  • 전 세계적으로는 크롬의 점유율이 56%에서 66%까지 증가했고 계속해서 증가하는 추세이다. 다음으로는 사파리가 16% 정도지만 3위인 파이어폭스의 점유율(4%)과 큰 차이를 보인다.
  • 한국도 크롬의 점유율이 가장 높지만 57%로 세계의 점유율에는 미치지 못한다. 재미있는 건 삼성 인터넷(11.48%)이 사파리(11.17%)를 간발의 차로 앞서고 있다. 그리고 웨일 브라우저가 IE를 지난 8월부터 앞서게 되었다.

3. 라이브러리를 사용하기

  • jQuery

    jQuery에서는 자바스크립트 이벤트에 대해 크로스 브라우징 기능을 제공한다. 따라서 개발자는 어떤 브라우저에 대한 지원 코드를 작성해야 할지에 대해 걱정하지 않아도 된다는 장점이 있다.

    출처: HelloWorld - 크로스브라우징(Cross Browsing)

  • Polyfill
    드디어 공부하려고 했던 Polyfill이 등장했다. 폴리필도 크로스 브라우징 라이브러리 중 하나이다. 매우 유용하지만 MDN은 이렇게 말한다.

    polyfill이 독점적으로 사용되지 않는 이유는 더 나은 기능성과 더 나은 성능을 위해서입니다. API의 기본 구현은 polyfill보다 더 많은 작업을 수행 할 수 있고 더 빠릅니다. ... 현대 브라우저는 대부분 표준 시맨틱에 따라 광범위한 API 세트를 구현하기 때문에 폴리 필을 사용하여 브라우저별 구현을 처리하는 것은 오늘날 실제로 존재하지 않습니다.

    출처: MDN - Polyfill
    참고: WEBDIR - 폴리필(polyfill) - HTML5 Cross Browser Polyfills, HACKS - Polyfill을 사용하는 보다 쉬운 방법, Polyfill - 폴리필 사용을 개선한 서비스
출처: Chans 기술블로그 - 자바스크립트 크로스브라우징 맞추기

4. 그 외

  1. reset.css (or normalize.css) 사용
  2. 기능 탐지 (feature detection)
  3. prefix (접두사) 사용
  4. 핵 (Hack)
  5. IE 용 주석을 이용한 방법
  6. 메타 태그를 이용한 IE 모드
출처: Zzolab Project - 크로스 브라우징(cross browsing), [Devlog - 크로스 브라우징 이슈에 대응하는 프론트엔드 개발자들의 전략(https://asfirstalways.tistory.com/237)

마침

하위버전 대응할 때 대충하세요. 레이아웃만 안 깨지면 그냥 넘어가세요. IE8/9 에서 border-radius 안 먹는다고 PIE.htc 가져다 쓰지 마세요. 다른 polyfill들도 그렇고, 이런 제품들은 사이트 로딩 속도를 아주 느리게 만듭니다. 방문자에게 border-radius로 돌린 레이아웃을 보여주는 것 보다, 빠르게 사이트를 접속할 수 있게 해주는 게 더 큰 배려입니다.
출처: hackya - 크로스 브라우징 총정리

결론은 모든 브라우저에서 똑같이 구현하려는 집착은 사용성에 저하를 일으킬 수 있다.


출처: The Tracks of mulder21c - 크로스 부라우징이란? (크로스 브라우징에 대한 오해),
hackya - 크로스 브라우징 총정리,
Zzolab Project - 크로스 브라우징(cross browsing)

profile
SeoChanhee
이전 포스트

[2] JavaScript 기초

다음 포스트

[4] Git 툴

0개의 댓글