[ 1. 크로스 브라우징 이란? ]
크로스 브라우징 이란 웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성)
동등한 수준의 정보를 사용자들에게 제공하는 방법론이다.
(HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보이고 작동되는 기법.)
그렇다면 크로스 브라우징을 해야만 하는 이유는 무엇일까? 왜 모든 브라우저가 똑같은 화면을 보여주지 못하는 것일까?
그 이유는 바로 브라우저마다 렌더링 엔진이 다르기 때문이다.
- 브라우저에서 지원이 안 되는 HTML5, Javascript 코드
- 브라우저에서 해석 못하는 CSS 코드 존재
- 브라우저마다 자체적인 CSS 스타일
- 브라우저 자체 버그 존재
또한 IE, 사파리의 경우 최신 버전으로 자동 업데이트가 안되고 사용자가 직접 해야 하며
이마저도 브라우저 버전에 따라 지원하는 최대 업그레이드 버전이 한정되어있고 이에 따라 해석 가능한 HTML, CSS, JS 코드가 한정되기도 한다.
[ 2. 렌더링 엔진(레이아웃 엔진) ]
그렇다면 위에서 말한 렌더링 엔진이란 무엇일까?
렌더링 엔진은 브라우저에서 페이지를 렌더링 할 때 실질적으로 작업을 하게 되는 엔진으로
HTML, CSS 등을 파싱 하여 최종적으로 화면에 그리는 역할을 한다.
서로 다른 브라우저여도 같은 엔진을 사용하면 출력물은 비슷하게 출력 가능하다.
[렌더링 엔진 종류]
| 트라이던트(Trident) | IE, 아웃룩 이메일 클라이언트나 윈도우 프로그램의 미니 브라우저등에 사용된다. | 마이크로 소프트 |
| 게코(Gecko) | - 파이어 폭스, 모질라 재단의 이메일 클라이언트인 선더버드에 사용된다. | 모질라 |
| 웹킷(Webkit) | - 초기 애플사가 사파리 엔진으로 사용하기 위해 차용했으나 현재는 웹킷 프로젝트로 분리되어 개발되고 있다. - 크롬에서도 사용되었던 엔진이며 iOS나 안드로이드의 기본 브라우저들이 이 웹킷 엔진을 사용한다. - 점유율이 높은 엔진이다. |
애플사 |
| 프레스토(Presto) | - 오페라 15버전부터 더이상 사용하지 않는다. | 오페라 소프트웨어 |
| 블링크(Blink) | - 웹킷 엔진을 사용하던 구글이 크롬이 개발, 사용하고 있는 엔진이다. - 웹킷에서 줄기를 가져 왔기 때문에 웹킷엔지과 비슷한 모습이 보여진다. - 프레스토 엔진을 버린 오페라가 블링크 엔진을 사용하고 있다. |
구글 |
| 듀얼 엔진 | - 국내 이스트소프트의 스윙(Swing) 브라우저를 예로 들면 크롬과 같은면서도 액티브X를 지원하는데, 독자적인 엔진이 아닌 두가지 엔진을 번갈아 사용하는 방식이기 때문에 가능하다. - 보통 트라이던트와 웹킷or블링크 엔진을 사용한다. |
[ 3. 브라우저 대응 순서 ]
브라우저 별로 다양한 렌더링 엔진을 사용하고 이에 따라 각자 호환성 있게 크로스 브라우징 해야 한다는 사실도 알게 됐다.
그렇다면 어느 브라우저를 기준으로 크로스 브라우징을 실행하는 것이 현명할까?
반드시는 아니지만 일반적으로 점유율이 높은 브라우저부터 목표로 하는것이 정론으로 받아들여진다.
점유율이란 비단 전 세계뿐만 아니라 서비스를 론칭하려는 해당 국가, 또는 집단을 잘 분석해야 할 것이다.
Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share
Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 10 billion monthly page views.
gs.statcounter.com
우선 위 사이트를 살펴보면 2020/10 ~ 2021/10 사이 세계에서 가장 점유율이 높은 브라우저를 확인할 수 있다.
2021/10 기준으로 1위는 크롬 , 2위는 사파리, 3위는 엣지 순이다.
Desktop Browser Market Share Republic Of Korea | Statcounter Global Stats
This graph shows the market share of desktop browsers in South Korea based on over 10 billion monthly page views.
gs.statcounter.com
위 통계자료는 2020/10 ~ 2021/10 사이의 한국에서의 브라우저 점유율이다.
2021/10 기준으로 1위는 크롬, 2위는 엣지, 3위는 웨일 브라우저 순서이다.
한국과 글로벌에서 1위는 부동의 크롬이지만 2위와 3위는 차이가 있었다,
뿐만 아니라 한국에서의 2020/10 ~ 2021/10 사이의 그래프를 보면 불과 몇 개월 전까지만 하더라도 IE가 웨일, 엣지보다 많이 사용되었다는 사실을 알 수 있다.
이와 같은 자료만 보더라도 개발전략에 부합하는 점유율을 수시로 잘 분석하며 대응 순서를 고려해야 한다는 것을 알 수 있다.
[ 4. 크로스 브라우징과 동등성]
크로스 브라우징은 개발자가 만든 콘텐츠 즉 정보를 제공하기 위함인데,
그렇다면 전 세계에 나와있는 모든 브라우저에서 동일하게 보이게 하는 것일까?
100% 완벽하게 동일한 배치와 내용을 보여주는 것에 초점을 맞추는 게 크로스 브라우징 일까?
아니다. 크로스 브라우징은 "동일성" 보다 "동등성"을 우선시한 방법론이다.
동일성이란 "모든 브라우저에서 똑같이 보이게"라는 의미로 해석되는데 이는 대다수가 너무 쉽게 오해하는 부분이기도 하다.
동일하게 제공하는 것에 집착하다 보면 서비스를 제공하기 위해 라이브러리를 덕지덕지 발라 성능을 저하시키는 사태가 벌어질 수도 있다.
2005년 한국 소프트웨어 진흥원 공개 SW지원센터에서 발간한 "CSS Browsing 가이드"라는 문서에는
크로스 브라우징을 아래와 같이 소개한다.
크로스 브라우징이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는
기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여
웹 페이지를 제작하는 기법을 말하는 것이다. 또한 지원할 수 없는 다른 웹 브라우저를 위한 장치를
구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드
즉 핵심은 모든 브라우저에서 100% 완벽하게 동일한 내용을 서비스해야 한다는 것이 아닌
모든 브라우저에서 동등한 수준의 정보, 기능 접근에 있다.
결국 이상적이게 크로스 브라우징 방법론을 준수하는 방법은 모든 브라우저에 동일하게 보이기 위해 과도하게 라이브러리를 이용하며 구현해 내는 게 아니라,
별도의 라이브러리 등을 주입하지 않고도 최대한의 호환성을 이끌어내 동등한 수준의 정보를 제공하는 방법일 것이다.
출처:
크로스 브라우징이란? - The Tracks of mulder21 c
크로스 브라우징(cross browsing) (tistory.com)
브라우저와 렌더링 엔진 동작 원리 (tistory.com)
'WEB Develop' 카테고리의 다른 글
| 웹 표준(Web Standards) 이란? (0) | 2021.10.08 |
|---|---|
| 웹 접근성(Web Accessibility) 이란? (0) | 2021.10.08 |