웹브라우저란?

 웹브라우저란 웹페이지를 보여주는 창문이다.

 

이 한 문장으로 비개발자에게는 웹브라우저를 간단 명료하게 설명해 줄 수 있을 것 같다. 모든 웹페이지는 브라우저라는 창을 통해서만 볼 수 있고, 크롬·파이어폭스·오페라 등등 은 각기 다른 기능을 가진 창틀에 해당한다. 웹브라우저는 웹페이지를 다운 받아 렌더링해 사용자에게 보여주는 역할을 한다. 프론트엔드 개발자라면, 다양한 회사들이 만들어낸 웹브라우저가 각기 다른 기능을 가진 창틀이라는 점에 주목해야 한다. 현재는 브라우저들이 웹표준을 지키고자 하여 호환성이 많이 좋아졌지만, 왜 저마다 브라우저가 다르게 보이는 지 알고, 클라이언트를 개발해야만 서로 다른 창틀을 이용하는 사람들에게 내 제품을 완성도 있게 보여줄 수 있다. 브라우저가 작동하는 깊은 원리를 배우기에 앞서, 먼저 웹페이지가 어떻게 우리 눈 앞에 보여지는 지 더 큰 그림을 봐보자. 

 

 

 

 

 웹페이지가 우리 눈 앞에 오기까지의 과정

 

여러 회사에서 만들더라도, 브라우저는 공통적으로 주소창을 가지고 있다. 이 곳에 URL(Uniform Resource Locator)을 입력하고 엔터를 누르면서 클라이언트의 웹페이지 요청이 시작된다. URL에 포함된 도메인은 웹페이지를 가지고 있는 서버의 주소(IP adress)를 가리킨다. 서버는 요청에 해당하는 HTML,CSS,Javascript 등의 리소스를 만들어 클라이언트에게 보낸다. 클라이언트는 이 리소스를 다운 받아 렌더링해 사용자에게 보여준다. 이를 렌더링하는 과정은 브라우저 마다 다른 렌더링 엔진을 가지고 있기 때문에 서로 다르다.

 

 

 

 

 왜 브라우저는 각기 다른 엔진을 가지고 있을까?(feat. 웹브라우저 전쟁)

 

 웹의 시초인 팀 버너스리 이야기는 건너뛰고 모자이크와 넷스케이프의 등장부터 설명하자면, 1993년 미국 Illinois의 슈퍼컴퓨터 연구자 Marc Andreessen은 팀 버너스리가 일하는 연구소에서 만든 브라우저보다 더 발전된 모자이크를 내놓는다. 기존에 텍스트로만 이루어진 웹이 아닌 이미지를 볼 수 있는 최초의 브라우저였고, 한 투자자가 Marc Andreessen에게 사업을 제안한다. 이에 넷스케이프라는 회사를 설립하고, 모자이크를 본격적으로 사업화하려고 했으나,  Marc Andreessen이 일했던 연구소에서 모자이크에 대한 권리를 주장하였다. 이에 모자이크 기존 코드를 버리고 새로운 코드로 만든 넷스케이프 네비게이터를 출시하게 된다. 1995년 넷스케이프 네비게이터는 웹 시장율 지배하게 된다. 이때 마이크로소프트에서도 웹브라우저 시장에 뛰어들기 위해 모자이크를 20억에 매수하고 발전시켜 IE를 개발해 시장에 내놓는다. IE가 시장에서 점유율이 낮자 빌게이츠는 넷스케이프를 이기기 위해 Windows(MS 자사 운영 체제)와 IE를 묶어 팔고, 무료로 배포하는 등의 방식을 도입하고 1998년 결국 넷스케이프의 점유율을 역전한다. 이 둘이 경쟁하는 과정에서 브라우저의 기능은 비약적으로 발전한다. 

 

[출처] : Gupta, Vineet. How Browsers Work–Part 1–Architecture

 넷스케이프는 2004년 점유율 3%로 하락하면서, 개발 중단을 선언하고 코드를 오픈 소스로 내놓는다. 비영리 단체인 모질라 파운데이션이 이를 이어받아 파이어폭스로 출시하게 된다. 2007년 넷스케이프는 공식적으로 서비스를 종료하고, 이 시기 웹브라우저 시장에서 파이어폭스의 점유율은 25%까지 올라간다. 업계가 경쟁하면서 추가된 플러그인(activeX, adobe flash도 이중 일부)이나 기능 때문에 브라우저는 많이 무겁고, 표준에서 벗어났다. 이는 '가벼운 브라우저', '호환이 잘 되는 브라우저'라는 니즈를 만들어 냈다. 구글이 이때 사파리의 웹키트 엔진(레이아웃 렌더링 엔진)과 자체 개발한 v8(자바스크립트 엔진)을 이용해 만든 크로미움 오픈 소스 브라우저를 만든다. 그리고 크로미움 기반으로 구글 크롬을 만들어 시장에 내놓는다. 2010년 IE는 무거워진 플러그인들과 보안 이슈로 인해 이용자 수가 줄어들고, 본격적으로 웹 브라우저 트렌드가 가볍고 표준화된 것으로 돌아가려 한다. 크롬은 이 분위기를 타 2011년에 WebGL 정식 지원, 웹앱·GPU가속 업데이트, 아이콘·음성인식, 탭 페이지·보안강화·멀티프로필, 웹페이지 전처리 등등 기능을 대거 업데이트를 한다. 시장점유율은 크롬 우세, IE 열세를 그리며, 2015년 window10을 공개하면서 IE 개발 중단을 공식적으로 선언하고 크로미움 기반의 엣지를 개발한다. 참고로 파이어폭스는 모질라 자체적으로 Gecko엔진을 개발해 사용했지만, 모바일 파이어폭스는 webkit기반이다. 

 

 

 

 

 2021년 웹브라우저 점유율

 

브라우저 시장 점유율을 한눈에 볼 수 있는 사이트(gs.statcounter.com/)를 참고하면, 2020년 12월 글로벌 시장 점유율은 chrome이 63.38%, safari가 19.25%, firefox가 3.77%,  삼성 인터넷이 3.47%, Edge가 3.08%, opera가 2.26%이다.  국내(www.koreahtml5.kr/front/stats/browser/browserUseStats.do)의 경우 chrome 66.72%, IE 12.37%,  edge 10.81%, whale browser 4.72%, safari 2.35%, fire fox 1.67%를 차지하였다. 프로젝트에 따라 글로벌 또는 국내 기준 사용자들의 웹브라우저 점유율을 조사하고, 우선적으로 호환성을 고려해야 한다.

 

 

 

 

 정리

 

웹브라우저는 프론트엔드 개발자가 잘 알고 이용해야하는 도구이다. 발전 역사나 점유율을 넘어서 브라우저의 동작 원리를 깊게 이해하는 것이 필요하다. 웹브라우저와 자바스크립트의 관계가 궁금하다면 다음 포스팅을 참고 바란다.

 

 

 

 

 자료 출처

 

[웹브라우저 전쟁] -  youtu.be/aY1TCdRWGfU