세티의 Lonely Star :: 웹 브라우저는 어떻게 작업을 하는가(1)

2011/11/13 21:30

웹 브라우저는 어떻게 작업을 하는가(1) 웹표준2011/11/13 21:30

원본: http://taligarsiel.com/Projects/howbrowserswork1.htm#1
번역: 박종현

사파리 | 파이어폭스 | 오페라

소개
웹 브라우저는 아마도 가장 광범위하게 사용되는 소프트웨어 일 것입니다. 이 책에서 나는 그들이 작업하는 방법에 대해 설명하고자 합니다. 우리는 여러분이 주소창에 google.com을 타이핑할 때 부터 브라우저에서 google.com을 볼때까지 무슨일이 발생하는지 보게될 것입니다.

우리는 브라우저들에 관해 이야기 할 것입니다.
오늘날 메이저 브라우저 5가지가 있습니다. - 인터넷 익스플로러, 파이어폭스, 사파리, 크롬과 오페라
나는 오픈소스 브라우저를 예로 들 것입니다. - 파이어폭스, 크롬, 사파리는 오픈 소스 브라우저의 일부 입니다.
W3C 브라우저 통계에 따르면 현재(2009년 10월) 파이어폭스, 사파리, 크롬의 사용 점유율은 60% 가까이 됩니다.
그래서 오늘날 오픈소스 브라우저들은 브라우저 사업의 상당한 부분을 차지하고 있습니다.

브라우저의 주요 기능
브라우저의 주요 기능은 여러분이 선택한 웹 리소스, 웹 브라우저에 나타내거나 웹 서버를 통해 요청한 것을 표현하는 것 입니다. 리소스 포맷은 보통은 HTML을 사용하지만 PDF나 이미지 그리고 그 이상의 것들도 가능합니다.

브라우저가 HTML 파일을 해석하고 표시하는 방법은 HTML과 CSS 사양에 정의되어 있습니다. 이 사양은 W3C라는 웹 표준 단체 의해 유지됩니다.
HTML의 현재 버전은 4 입니다. 버전5는 진행중 입니다. 현재 CSS버전은 2이고 CSS버전 3은 진행중 입니다.
몇년간 브라우저는 사양의 한 부분만 허용했고, 그들 자신의 확장을 기능을 개발했습니다. 그것은 웹 개발자들에게 심각한 호환성 문제를 일으켰습니다. 오늘날 대부분의 브라우저는 더 많거나 더 적은 사양을 따르고 있습니다.

브라우저의 사용자 인터페이스는 서로 많은 공통점이 있습니다.
- URI 주소 입력을 위한 주소바
- 뒤로 및 앞으로 가기 버튼
- 즐겨찾기 옵션
- 현재 문서를 새로고침하고 로딩을 멈추는 중지 버튼
- 여러분의 홈 페이지로 이동하기 위한 홈 버튼

이상하게도 대부부의 브라우저의 인터페이스가 어떤 공식 스펙에 의해 정의되지 않았음에도 서로의 브라우저에 대한 모방과 경험에 의해 공유된 좋은 사례 입니다.
HTML5 사양은 브라우저 대부분이 가지는 UI 엘리먼트 정의를 가지고 있지만 공통 엘리먼트를 나열하지는 않습니다. 그것들은 주소창, 상태바와 도구바 입니다. 물론 파이어폭스와 같은 특정 브라우저는 다운로드 매니저와 같은 것은 특정 브라우저의 특정 기능 입니다.
사용자 인터페이스 챕터를 통해 더 알수 있습니다.

브라우저의 높은 수준의 구조
다음은 브라우저의 중요한 컴포넌트 입니다.
1. 사용자 인터페이스 - 주소바, 뒤로/앞으로 버튼, 즐겨찾기 메뉴 등을 포함합니다.
                                여러분이 요청한 페이지를 보는 메인 윈도우를 제외한 브라우저 디스플레이의 모든 부분.
2. 브라우저 엔진 - 질의하고 렌더링 엔진을 조작하기 위한 인터페이스
3. 렌더링 엔진 - 요청한 컨텐츠에 응답.
                       만약에 요청된 컨텐츠가 HTML이라면 HTML과 CSS를 파싱하고 구문 분석된 컨텐츠를 화면상에 표현.
4. 네트워킹 - HTTP 요청과 같은 네트워크 호출을 위해 사용됩니다. 이것은 각각의 플랫폼 구현 아래서 플랫폼 독립적인
                   인터페이스를 가집니다.
5. UI 백엔드 - 콤보상자와 윈도우와 같은 기본적인 위젯을 그리기 위해 사용됩니다.
                    그것은 특정한 플랫폼이 아닌 일반적인 인터페이스를 제공합니다.
                    그리고 이것은 OS의 사용자 인터페이스 메서드를 상속하여 사용됩니다.
6. 자바스크립트 인터프리터 - 자바스크립트 코드를 구문 분석하거나 실행하는데 사용됩니다.
7. 데이터 저장소 - 이것은 지속성 레이어 이다.
                          브라우저는 쿠키와 같은 모든 종류의 데이터를 하드 디스크에 저장하는데 필요합니다.
                          새로운 HTML 사양(HTML5)은 브라우저내에 완전한 데이터베이스인 '웹 데이터베이스'를 정의합니다.

(이미지 출처: http://taligarsiel.com/Projects/howbrowserswork1.htm#1)

위의 그림은 브라우저 메인 컴포넌트들을 보여 줍니다.
각 탭은 별도의 프로세스 입니다. 하지만 대부분의 브라우저와 달리 크롬 브라우저는 렌더링 엔진에 여러 인스턴스를 포함하고 있습니다. 이들 각각의 컴포넌트는 다른 챕터를 통해 보여줄 것입니다.

구성요소간의 통신
파이어폭스와 크롬은 특별한 통신 인프라스트럭처를 개발했습니다.
그것들에 대해서는 특별한 챕터에서 논의할 것입니다.