웹브라우저 동작 방식

웹브라우저 소개 및 주요 기능 

웹 브라우저(Web Browser)는 사용자가 선택한 웹 리소스를 서버에서 요청하고 화면에 표시하는 역할을 합니다. 이 리소스는 HTML 문서, PDF, 이미지 등 다양한 유형일 수 있으며, 사용자는 URI(Uniform Resource Identifier)를 통해 리소스의 위치를 지정합니다. 브라우저는 HTML 파일을 표시하기 위해 HTML 및 CSS 사양을 따르며, 이러한 표준은 웹의 표준 조직인 W3C(World Wide Web Consortium)에서 관리합니다.

 

오늘날 주요 웹 브라우저는 다음과 같습니다.

Google Chrome: 구글에서 개발한 웹 브라우저로, 매우 인기 있는 브라우저 중 하나입니다.
빠른 속도와 간결한 디자인을 제공하며, 크롬 웹 스토어를 통해 확장 기능을 추가할 수 있습니다.
다양한 동기화 기능을 통해 사용자의 즐겨찾기, 비밀번호 등을 여러 디바이스 간에 동기화할 수 있습니다.
Mozilla Firefox:개방형 웹 브라우저로, 사용자의 개인 정보 보호와 오픈 웹 표준을 강조합니다.
확장 기능과 테마를 통해 브라우징 환경을 사용자의 취향에 맞게 맞춤화할 수 있습니다.
강력한 보안 및 개인 정보 보호 기능을 포함하고 있습니다.
Microsoft Edge:마이크로소프트에서 개발한 브라우저로, 윈도우 운영체제에 기본으로 탑재되어 있습니다.
Chromium 엔진을 기반으로 하여 크롬과 유사한 빠른 속도와 호환성을 제공하며, 마이크로소프트의 서비스와 통합되는 기능을 제공합니다.
Apple Safari: 애플의 운영체제와 기기에서 사용되는 브라우저로, 아이폰, 아이패드, 맥 등에서 사용할 수 있습니다.
뛰어난 성능과 에너지 효율성을 지원하며, 애플 생태계와의 통합을 강조합니다.
Opera: 특유의 기능과 디자인을 가진 웹 브라우저로, 탭 미리 보기, 빠른 다운로드 등의 기능을 포함하고 있습니다.
데이터 압축 및 VPN 기능을 제공하여 보안과 개인 정보 보호를 강화할 수 있습니다.

 

브라우저 주요 구성 요소 및 동작 방식

1. 사용자 인터페이스(user interface): 주소 표시 줄, 뒤로/앞으로 버튼, 즐겨찾기 메뉴 등을 포함합니다. 요청한 페이지가 보이는 창을 제외한 브라우저 디스플레이의 모든 부분을 의미합니다. 주로 사용자에게 보이는 버튼과 같은 기능등을 의미합니다.
2. 브라우저 엔진(browser engine): 사용자 인터페이스(UI)와 렌더링 엔진 간의 작업을 조율하는 역할을 합니다.
3. 렌더링 엔진(rendering engine): 렌더링 엔진은 요청된 콘텐츠를 파싱하고 화면에 표시하는 역할을 수행합니다. 예를 들어, 요청된 콘텐츠가 HTML인 경우, 렌더링 엔진은 HTML과 CSS를 구문 분석하고 구문 분석된 콘텐츠를 화면에 표시합니다.
4. 네트워킹(Networking): 다양한 플랫폼에서 플랫폼에 독립적인 인터페이스를 통해 서로 다른 구현을 사용하여 네트워크 호출을 처리합니다.
5. UI 백엔드(UI backend): 기본 위젯을 그리는 데 사용되며, 플랫폼에 독립적인 일반적인 인터페이스를 제공하며, 내부적으로 운영 체제 사용자 인터페이스 메서드를 사용합니다.
6. JavaScript 인터프리터(JavaScript interpreter): JavaScript 코드를 분석하고 실행하는 데 쓰입니다.
7. 데이터 저장소(Data storage): 브라우저는 쿠키와 같은 다양한 데이터를 로컬로 저장해야 할 수 있습니다. 브라우저는 또한 localStorage, IndexedDB, WebSQL 및 FileSystem과 같은 저장 메커니즘을 지원합니다.

브라우저는 사용자가 입력한 웹 주소(URL)를 통해 웹 페이지를 가져와 화면에 표시하며, 여러 가지 기능을 수행합니다. 아래는 브라우저의 작동 방식을 간단히 설명한 것입니다.

사용자 입력 및 URL 처리: 사용자가 주소 창에 웹 주소를 입력하거나 검색을 요청하면, 브라우저는 입력된 URL을 해석하고 해당 웹 서버로 요청을 전송합니다.

HTTP 요청: 브라우저는 URL을 통해 서버로 HTTP 요청을 보냅니다. 이 요청에는 웹 페이지를 가져오기 위한 정보가 포함되어 있습니다. 웹 페이지 요청은 주로 GET 메서드를 사용하지만, 데이터를 서버로 보내야 할 때는 POST 메서드도 사용될 수 있습니다.

DNS 조회: 브라우저는 입력된 URL에서 호스트 이름(도메인)을 추출한 후, 해당 도메인의 IP 주소를 알아내기 위해 DNS(Domain Name System) 조회를 수행합니다.

서버 응답 및 데이터 수신: 서버가 요청을 받으면, 웹 페이지의 내용과 함께 웹 페이지를 구성하는 다양한 리소스(이미지, 스타일 시트, 스크립트 등)가 서버에서 브라우저로 전송됩니다.

렌더링: 브라우저는 받은 웹 페이지 데이터를 기반으로 웹 페이지를 렌더링하여 화면에 표시합니다. 이때 HTML, CSS, JavaScript 등의 요소들을 해석하여 웹 페이지의 구조와 스타일을 구성하고, DOM(Document Object Model)을 생성합니다.

JavaScript 실행: 웹 페이지에 포함된 JavaScript 코드가 실행됩니다. JavaScript는 웹 페이지의 동적인 기능을 담당하며, DOM을 변경하거나 사용자와의 상호작용을 처리할 수 있습니다.

레이아웃과 스타일링: 브라우저는 웹 페이지의 요소들을 화면에 배치하고, CSS 스타일을 적용하여 디자인과 레이아웃을 구성합니다.

사용자 상호작용: 사용자의 입력(클릭, 키보드 입력 등)에 따라 브라우저는 해당하는 동작을 처리하고 필요한 변경을 웹 페이지에 적용합니다.

페이지 로딩 완료: 웹 페이지와 관련된 모든 리소스가 로드되고 렌더링되면, 브라우저는 페이지 로딩이 완료되었다고 판단합니다.

 

참고자료

• How browsers work (web.dev)