들어가며

평소에 브라우저란 말을 많이 들어보셨을겁니다. 브라우저, 웹브라우저, 검색엔진, IE6 ~ IE11, 크롬, 파이어폭스 등등 브라우저란 HTML 문서와 그림, 멀티미디어 파일등을 WWW을 기반으로 한 인터넷 컨텐츠를 검색 및 열람하는 응용 프로그램으로써 그 종류는 수십가지가 됩니다. 해당 브라우저를 통해 사용자들은 메일을 주고 받거나 다양한 자료를 업로드, 다운로드를 하는 활동을 합니다. 브라우저는 '렌더링 엔진'이라는 것이 존재합니다. 오늘은 렌더링의 종류와 파생된 브라우저를 알아 보겠습니다.

웹브라우저의 역사

세계 최초의 웹브라우저는 1991년 등장한 ‘월드와이드웹(WorldWideWeb)’입니다. 유럽입자물리학연구소(CERN)의 연구원 팀 버너스 리(Tim Berners Lee)가 정보 공유를 쉽게 하기 위해 하이퍼 텍스트의 개념을 처음 제안했고, 이것을 바탕으로 만들어진 것이 바로 월드와이드웹 입니다. 버너스 리는 이 발명으로 큰 부자가 될 수 있었지만, 모든 로열티를 포기하고 일반에 공개하는 길을 택했습니다. 이후 월드와이드웹은 인터넷을 의미하는 ‘WWW(World Wide Web)’와의 명확한 구분을 위해 ‘넥서스(Nexus)’로 명칭이 변경돼었습니다. 팀 버너스리의 업적과 그의 철학이 아니였으면 아마 지금 현재 수준의 인터넷 발달 속도는 현저히 못미쳤을 겁니다.

엔진

엔진이라는 단독으로 불리는 경우는 없고, '렌더링 엔진' 또는 '레이아웃 엔진'으로 불립니다. 내용 정보인 HTML, XML 서식정보인 CSS 등을 읽어드려 사람이 눈으로 읽고 볼수 있는 문서로 표시하는 웹 브라우저의 핵심기능을 담당 합니다. 코드를 호출시에 읽고 해석한다는 점에서 인터프리터라고 볼 수있습니다.

게코(Gecko)

모질라 재단에서 후원하며 오픈소스로 개발되는 엔진입니다. 넷스케이프 에서 갈라져 나왔기 때문에 구형 문서에 대한 호환성이 있으며, 웹표준을 준수하는 편이지만 일부 IE전용 속성을 지원합니다.

파이어폭스, 썬더버드, 씨몽키 등이 사용하고 있으며 오픈소스이기 때문에 많은 곳에서 사용중이지만 현재 Webkit으로 이전하는 추세입니다.

서보(Servo)

모질라 재단의 차체대 엔진입니다. 2013년 기준으로 개발 중이며, 안전한 브라우징과 병렬처리 특화를 목표로 하고있으며 프로그래밍 언어인 Rust를 먼저 만든 후 Rust 기반으로 엔진을 제작 중입니다. 우리나라 삼성전자가 협력하고 있습니다.

웹키트(WebKit)

KHTML 엔진에서 파생되어 애플에서 개발한 오픈소스 엔진 입니다. 2013년 기준으로 렌더링 엔진 분야에서 독보적인 존재로 전세계 대표 브라우저인 Safari와 구글 크롬이 Webkit을 사용중입니다. (애플과 구글은 엔진을 서로 포크 하면서 파편화가 진행되었습니다. 애플은 웹킷2, 구글은 블링크)

블링크(Blink)

웹키트의 웹코어 컴포넌트의 포크 엔진으로 2013년 4월에 처음 발표되었으며 구글 크롬 버전28+, 오페라 브라우저 15+, 비발디 브라우저, 웨일 브라우저, 안드로이드 4.4+의 웹뷰 및 Qt 웹엔진에서 사용 중입니다.

프레스토(Presto)

오페라 소프트웨어가 개발한 엔진으로 오페라 브라우저에 사용됩니다. 엔진 특유의 가벼움과 낮은 CPU 점유율 덕에 스마트폰과 같은 휴대용 기기와 게임용 콘솔 환경에서 많이 사용 되는 엔진입니다.

EdgeHTML

윈도우 10의 기본 브라우저인 마이크로소프트의 엣지 브라우저의 엔진입니다. 트라이던트의 포크로 시작된 엔진으로 IE 하위호환을 완전히 포기하고 Webkit를 집중적으로 흡수하면서 개발 중입니다. 현대의 웹 환경에 어울리는 브라우저를 뒷받침 하기 위해 웹 표준 기능을 빠르게 확충 중입니다.

트라이던드(Trident)

인터넷 익스플로러의 엔진으로 mshtml.dll을 연결하면 프로그램 내부에서 이 엔진을 사용할 수 있기 때문에 브라우저가 아닌 경우에도 이 엔진을 쓰는 경우가 많았다. 1997년 인터넷 익스플로러 버전 4.0의 출시에 처음 도입되서 엣지가 나오기 전까지 꾸준히 업그레이드되어 왔습니다.

태즈먼(Tasman)

Mac OS용 인터넷 익스플로러에서 사용된 엔진으로 마이크로소프트사가 개발한 엔진입니다. 매킨토시 IE5에 사용 되었습니다. 이후로는 다른 브라우저 엔진에는 사용된적이 없으며 맥용 인터넷 익스플로러는 더 이상 지원되지 않지만 새로운 버전의 태즈먼은 현재의 다른 마이크로소프트 제품군에 추가되어 있습니다.

자바스크립트를 이용한 브라우저 버전 확인

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var agent = navigator.userAgent, match;
var app, version;
 
if((match = agent.match(/MSIE ([0-9]+)/)) || (match = agent.match(/Trident.*rv:([0-9]+)/))) app = 'Internet Explorer';
else if(match = agent.match(/Chrome\/([0-9]+)/)) app = 'Chrome';
else if(match = agent.match(/Firefox\/([0-9]+)/)) app = 'Firefox';
else if(match = agent.match(/Safari\/([0-9]+)/)) app = 'Safari';
else if((match = agent.match(/OPR\/([0-9]+)/)) || (match = agent.match(/Opera\/([0-9]+)/))) app = 'Opera';
else app = 'Unknown';
 
if(app !== 'Unknown') version = match[1];
 
console.log('Browser: ' + app);
console.log('Version: ' + version);
Colored by Color Scripter
cs

자바스크립트 naviagtor 객체

브라우저의 정보를 제공하는 객체로 주로 웹개발시 호환성 문제를 해결하기 위해서 사용합니다.

navigtor의 주요 프로퍼티를 알아보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
//웹브라우저의 이름. IE는 Microsoft Internet Explorer, 파이어폭스, 크롬등은 Nescape로 표시합니다.
navigator.appN
 
//브라우저의 버전을 의미합니다.
navigator.appVersion
 
//브라우저가 서버측으로 전송하는 USER-AGENT HTTP 헤더의 내용입니다.
navigator.userAgent
 
//브라우저가 동작하고 있는 운영체제에 대한 정보입니다.
navigator.platform
Colored by Color Scripter
cs

※USER-AGENT란 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트로 대게 웹 브라우저를 뜻합니다.

What is my User Agent?

브라우저별 CSS 태그 추가 방법

css3는 현재 표준안이 결정되지 않은 상태이기 때문에 웹 브라우저별 지원 여부가 매우 중요합니다.

모든 브라우저에서 동일한 형태의 레이아웃을 구성하기 위해서는 브라우저 호환성을 고려해서 css 작업을 해야합니다.

-webkit-	사파리나 크롬에서 사용하는 Webkit 엔진 기반의 웹 브라우저에서 사용
-moz-	파이어폭스 웹 브라우저에서 사용
-o-	오페라 웹 브라우저에서 사용
-ms-	인터넷 익스플로러에서 사용

8,9,10번째 줄에 브라우저마다 적용 되는 border-radius 값을 따로 작성한 예제 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
.accordion_menu .menu_item{
    position:relative;
    height:28px;
    overflow:hidden;
    background-color:#e3e3e3;
    border:1px solid #aaa;
    margin:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;   
    -o-border-radius:5px;
    border-radius:5px;
}
cs

마치며

현재 다양한 브라우저 종류가 있습니다. 일반인에게 많이 알려진 브라우저, 개발자들이 좋아하는 브라우저, 각자 취향에 따라 브라우저를 선택해서 사용하고 있습니다. 많은 브라우저가 뜨고 지며 많은 변화가 브라우저 업계에 불어닥치고 있습니다. 개발자들은 이런 브라우저의 변화에 반응 할 수 있도록 관심이 많이 필요할것 같습니다.

참고사이트

https://ko.wikipedia.org/wiki/%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83_%EC%97%94%EC%A7%84

https://codeclu.com/questions/74/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B2%84%EC%A0%84-%ED%99%95%EC%9D%B8

https://www.w3schools.com/jsref/obj_navigator.asp

http://ikinye.net/wp/?p=309