브라우저 동작 원리(쉽게 알아보기) -URI, 브라우저의 구조 (1)

이 글은 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한

"How Browsers Work: Behind the scenes of modern web browsers"를 인용하고 있습니다.

아무것도 모르는 초보자의 시선에서

하나하나 모르는 용어는 용어대로 찾아가면서

정리해보는 글입니다.

 

저와같이 아무것도 모르는 초보자를 기준으로 글을 작성했습니다.

 

부디 이 글에 마지막에는

글을 쓰고 있는 저도, 독자도 어렴풋이라도

브라우저가 어떻게 동작하는지 이해할 수 있었으면 좋겠습니다. 🙏

 

 

 

The browser's main functionality(브라우저의 주요 기능)

---

전문

The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. The resource is usually an HTML document, but may also be a PDF, image, or some other type of content. The location of the resource is specified by the user using a URI (Uniform Resource Identifier).

The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web. For years browsers conformed to only a part of the specifications and developed their own extensions. That caused serious compatibility issues for web authors. Today most of the browsers more or less conform to the specifications.

Browser user interfaces have a lot in common with each other. Among the common user interface elements are:

• Address bar for inserting a URI
• Back and forward buttons
• Bookmarking options
• Refresh and stop buttons for refreshing or stopping the loading of current documents
• Home button that takes you to your home page

Strangely enough, the browser's user interface is not specified in any formal specification, it just comes from good practices shaped over years of experience and by browsers imitating each other. The HTML5 specification doesn't define UI elements a browser must have, but lists some common elements. Among those are the address bar, status bar and tool bar. There are, of course, features unique to a specific browser like Firefox's downloads manager.

브라우저의 메인 기능은 사용자가 선택한 자원을 서버에 요청하고, 이를 브라우저에 띄우는 것입니다.

자원은 대게 HTML 문서지만 PDF나 그림 또는 다른 타입의 자료일 수 있습니다.

이러한 자원의 주소는 URI에 의해 정해집니다.

 

URI에 대해 알아보기 

통합 자원 식별자(Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소입니다. 따라서 URI를 알게 된다면 데이터가 어디에 있는지 알 수 있습니다.

 

웹에는 쉽게 자료를 요청하는 클라이언트와, 이러한 요청에 응답하는 서버가 있는데,

클라이언트가 자료, 즉 자원(Resource)을 요청하면, 서버는 이에 맞춰 URI의 정보를 클라이언트에게 보내줍니다.

 

URI는 상위 개념으로 하위 개념에 URN과 URL이 있습니다.

URL(Uniform Resource Location, URL)은 쉽게 말해 자원의 위치입니다.

URL은 정확하게 자원이 서버의 어디에 있는지 어떻게 접근할 수 있는지를 알려줍니다.

 

URN(Uniform Resource Name, URN)은 쉽게 말해 자원의 이름입니다.

자원의 위치에 영향을 받지 않고 고유한 이름을 식별하여 접근할 수 있습니다.

 

이러한 URL과 URN을 통합하는 개념이 URI입니다.

URI는 고유한 식별자(Identifier)를 사용하여 자원의 주소를 설명하는 방법입니다.

 

브라우저는 HTML과 CSS 명세를 통해 HTML 파일을 해석하여 표시합니다.

이 명세는 W3C(World Wide Web Consortium)에서 정하고,

호환성 문제가 발생하지 않게 대부분의 브라우저가 이 명세를 따릅니다.

 

브라우저의 UI(User Interface)는 서로 비슷한데, 다음과 같은 요소를 포함합니다.

• URI를 입력하는 주소 표시줄
• 이전, 다음 버튼
• 북마크
• 새로 고침 버튼과 현재 문서의 로딩을 중지하는 정지 버튼
• 홈 버튼

 

이러한 브라우저의 UI는 표준 명세가 없음에도 현재와 같은 모습으로 발전했습니다.

HTML5 명세에는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적 요소를 제외하고

브라우저의 필수적인 UI를 지정하지 않았습니다.

 

 

The browser's high level structure(브라우저의 구조)

---

전문

The browser's main components are (1.1):

1. The user interface: this includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
2. The browser engine: marshals actions between the UI and the rendering engine.
3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
4. Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
5. UI backend: used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data storage. This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

Figure : Browser components

It is important to note that browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process.

브라우저의 구조

 

브라우저의 주요 구성요소를 알아보겠습니다.

1. UI : 주소 표시줄, 이전/다음 버튼, 북마크 등을 포함합니다. 사용자가 요청한 페이지를 제외한 나머지 모든 부분이 UI입니다.
2. 브라우저 엔진 : UI와 렌더링 엔진 사이에서 동작을 제어합니다.
3. 렌더링 엔진 : 요청한 콘텐츠에 대해 응답합니다. 예를 들어, HTML 콘텐츠를 요청했다면, 렌더링 엔진은 HTML과 CSS를 파싱하여 화면에 표시합니다.
4. 네트워킹 : HTTP 요청과 같은 네트워크 호출에 사용됩니다. 네트워킹은 플랫폼에 독립적인 인터페이스 뒤에서 서로 다른 플랫폼에 다른 실행 언어를 사용합니다.
5. 자바스크립트 번역기 : 자바스크립트를 번역하고 실행합니다.
6. UI Backend : 콤보 박스와 창 같은 기본 위젯을 그릴 때 사용합니다. 플랫폼에서 명시되지 않은 일반적인 인터페이스를 노출하는데 이는 OS UI 방식을 따릅니다.
7. 자료 저장소 : 자료 저장소는 지속적인 레이어입니다. 브라우저는 쿠키와 같이 모든 종류의 데이터를 저장할 필요가 있습니다. 

크롬은 다른 브라우저와 달리 각 탭마다 별도로 렌더링 엔진 인스턴스를 유지한다는 점은 중요합니다. 이 때문에 각 탭은 독립적인 프로세스로 처리됩니다.

 

---

위에 설명에서 렌더링 엔진은 HTML과 CSS를 '파싱'한다고 언급했습니다 ?

그렇다면 파싱은 무엇일까요 ??

 

다음 글에 파싱 더 나아가 파싱과 관련된 '크롤링'에 대해 알아본 후

본문 내용 이어서 해석해보도록 하겠습니다.