브라우저(web browser)의 기본 정리

우리는 브라우저를 통해 정보전달이나 데이터를 저장한다. 현재 이 글을 쓰고 있는 곳도 브라우저이다. 브라우저에 대한 개념을 찾고 있는 당신 또한 사실상 웹 개발을 하고 있을 가능성이 높다. 브라우저에 대해 잘 알 수록 웹 애플리케이션을 효율적으로 구축하고 UX를 최대화할 수 있다. 인터넷을 사용하거나 개발을 할 때, 브라우저에 대해 고민을 해본 적은 사실 많이 없다고 생각한다. 브라우저에 조금 더 친숙해지는 시간을 가져보고자 한다.

 

 

브라우저를  공부하는 이유

브라우저는 HTML 문서를 해석하고, CSS를 적용하며, JavaScript를 실행한다. 각 요소의 동작 원리를 이해하면 웹 페이지의 구조와 스타일링, 상호작용을 제어하는 방법을 알 수 있고 브라우저의 동작 방식을 이해하면 웹 페이지의 오작동을 디버깅하고 문제를 해결하는 데 도움이 된다. 사용자는 보통 chrome이나 Safri를 만이 사용한다. 각각은 브라우저는 다른 동작 방식을 가진다. 하지만 우리가 브라우저에 대한 공부를 통해 각 차이점을 이해하고, 브라우저의 특성에 맞게 웹 애플리케이션 개발이 가능하다. 이러한 각각의 브라우저의 이해를 통해 렌더링 엔진의 동작 방법을 이해하고, DOM 조작이나 css, javascript 파일 로딩을 최적화할 수 있다.

 

 

---

 

브라우저의 특징

브라우저의 기능은 여러 가지가 있다. 하지만 주요 특징들은 아래와 같다고 할 수 있다. 개발자의 기준으로 아래의 브라우저의 동작 방식과 기능을 이해하면 웹 페이지의 동작 원리를 파악하고 최적화된 코드를 작성할 수 있다. 

 

 

DOM(Document Object Model)

DOM은 HTML 문서의 객체 표현 방식으로 웹 페이지의 구조와 콘텐츠에 대한 인터페이스를 제공한다. 우리 개발자는 DOM을 통해 HTML 요소를 선택하고 조작하면서 동적인 웹 페이지 구축이 가능하다고 할 수 있다. 따라서 브라우저가 HTML 문서를 해석하고 구성되는 방식을 이해하기 위해서는 DOM에 대한 이해가 중요하다

 

CSSOM(CSS Object Model)

CSSOM은 CSS 스타일 시트의 객체 표현 방식이다. DOM과 유사하게, CSSOM은 CSS 규칙과 스타일을 조작할 수 있는 인터페이스를 제공한다. 개발자는 CSSOM을 사용하여 애니메이션을 넣거나, 웹페이지의 스타일을 동적으로 조작을 할 수 있다. CSSOM을 통해 상속이나 스타일 규칙의 적용 순서에 대한 이해도를 높일 수 있다.

 

Javascript 엔진

우리가 사용하는 브라우저는 기본적으로 JavaScript 코드를 실행하는 JavaScript 엔진을 내장하고 있다. 대표적인 JavaScript 엔진으로는 Chromium의 V8, Mozilla의 SpiderMonkey, Microsoft의 Chakra 등이 있다. 개발자는 JavaScript를 사용하여 웹 페이지의 동적인 기능을 구현할 수 있으며, JavaScript 엔진의 동작 방식 이해를 통해, 코드의 실행 성능과 최적화에 대한 이해도를 높일 수 있다..

 

네트워크 통신

우리는 브라우저를 연결하기 위해 인터넷을 기본적으로 연결을 한다.  즉, 웹은 서버와의 통신이 필요하다. 그리고 통신을 브라우저가 하기 위해서는 네트워크에 요청을 보내고 응답을 받아오는 기능이 필수적으로 필요하다. 따라서 데이터를 네트워크에서 가져오거나 서버와 상호작용을 위해서는 네트워크 통신에 대해 알아야 한다.

 

우리가  주소창에 URL나 검색어를 치고, 데이터 Fetching 하는 과정을 간단히 살펴보자. URL을 파싱(domain, params 등)하고 http나 https를 반환한다. NON-ASCII 코드가 필요하다면 URL의 한국어나 특수문자를 변경하여 인코딩한다. 이때 브라우저는 HSTS(HTTP Strict Transport Security) 목록을 체크하고, 검색한 URL이 목록에 있다면 https 프로토콜을 추가하고, 그렇지 않다면 http를 붙인다. 그 후에 DNS(도메인과 연결된 IP 주소를 알려주는 것) 룩업을 시작한다. 브라우저 자체에 DNS 캐시가 있다면, 캐시에서 IP 주소를 찾는다. 없는 경우라면 운영체제 cache에서 찾고, 여기도 없다면 로컬 라우터나 ISP(Internet Service Procider)에 있는 DNS 서버에 요청하여  IP 주소를 찾는다. 53 포트를 열어 UDP(User Datagram Protocol) 프로토콜을 통해 DNS 서버와 통신을 시작하게 된다. 통신이 된다면, 서버의 IP 주소로 http(80 포트)/https(443 포트) 요청을 시작하고 TCP 소켓 연결을 요청한다. TCP 해더를 채우기 위해서는 네트워크 계층에 요청을 우선 한다. 그리고 IP 헤더를 채우기 위해 전송 계층에 요청을 하고, 데이터 링크 계층에 요청을 해서 이더넷 프레임 헤더를 채운다. 그리고 네트워크의 데이터 패킷이 디지털에서 전기 신호로 변환되고, 서버와 클라이언트 간의 3way 핸드셰이크 후에 데이터를 클라이언트로 보낸다. 전송 계층에서 마지막으로 핸드 세이크가 일어나면 브라우저는 패킷에서 데이터를 얻게 된다.

 

 

 

보안 및 개인 정보 보호

사용자와 상호작용하는 브라우저는 사용자의 개인 정보를 다룰 수밖에 없다. 따라서 개발자는 보안 취약점을 이해하고 웹 애플리케이션에서 사용자의 개인 정보를 안전하게 처리하는 방법을 알아야 한다. 또한, 브라우저가 제공하는 보안 메커니즘을 활용이해하고 활용하여, 사용자를 보호할 수 있는 웹을 만들어야 한다.

 

---

 

Browser

브라우저는 사용자에게 화면을 보여주는 것이 궁극정인 목적이라고도 할 수 있다. 이러한 과정을 렌더링 과정이라 할 수 있다. 렌더링이란 HTML, CSS, Javascript 등의 웹 콘텐츠를 해석하고 화면에 그리는 것을 말한다. 브라우저는  크게 Mozilla의 Gecko, Apple의 WebKit , Chromium Blink 세 가지로 나뉜다. 이러한 브라우저들을 구성하는 요수 중에 사실상 중요한 것은 엔진이라 할 수 있겠다. 간단한 개념과 엔진들의 종류를 알아보자. 우선은 엔진의 종류로는 브라우저 엔진과 렌더링 엔진으로 나뉜다.

 

Browser Engine

사용자의 이벤트부터(인터페이스), 화면을 그래픽으로 보여주기까지의 과정을 관여한다. 웹이 점점 발전함에 따라 엔진은 고도화가 되었고, 렌더링 엔진과 JavaScript 구문을 분석하는 런타임 JavaScript 엔진이 별도 분리 되었다고 볼 수 있다. 

 

Rendering Engine

사용자가 요청한 HTML문서와 CSS를 파싱 하여 화면에 그리는 역할을 수행한다. 사실 Rendering Engine은 넓은 의미로 브라우저 엔진으로 불리기도 한다. 왜냐하면 JavaScript 엔진 자체가 Nodejs로 독립적으로 실행할 수 있지만, Rendering Engine은 브라우저에 포함되어 있어서 독립적 실행이 불가능하기 때문이다. 

 

---

 

Apple의 Webkit

WebKit은 Apple이 개발한 오픈소스 웹 렌더링 엔진으로 HTML, CSS, JavaScript를 해석하는 역할을 한다. Apple에서 사용 중인 iOS, macOS, Safari 브라우저와 Apple 제품에서 주로 사용 중이다. 기본적으로 웹 표준을 준수하여 W3C에서 정의 한 표준안을 따른다. 또한 오픈 소스로 공개되어 있어 모든 개발자들이 코드를 확인하거나 기여를 할 수 있다. WebKit은 Nitro라는 고성능 JavaScript 엔진을 내장하고 있다.

 

---

Chromium Blink

Google이 개발한 웹 렌더링 엔진으로, Chromium 프로젝트와 Google Chrome 브라우저에서 사용되고 있다. Blink는 웹 페이지의 HTML, CSS, JavaScript 등의 콘텐츠를 해석하고 시각적으로 표현하는 역할을 한다. Blink는 기존에 사용되던 WebKit 렌더링 엔진에서 분기된 것으로, Chromium 프로젝트의 요구사항과 목표에 맞게 개발되었다고 할 수 있다. Blink는 Chromium의 핵심 구성 요소로, 사용자에게 빠른 속도와 탁월한 사용자 경험을 제공하기 위해 지속적으로 개선되고 최적화 중이다.

 

 

Blink 특징과 기능

일반적인 브라우저와 마찬가지로 Blink는 웹 표준을 준수하여 개발되었다. W3C(World Wide Web Consortium)에서 정의된 표준 권고안을 따르며, HTML/CSS/JAVASCRIPT 등의 최신 웹 기술을 지원한다. Blink은 Chromium의 다중 프로세스 아키텍처를 기반으로 동작한다. 그래서 각 페이지 탭이나 설치하여 사용되는 확장 프로세스는 별도의 프로세스에서 동작한다. 이를 통해 안정성과 보안 향상뿐만 아니라 여러 작업을 동시에 처리하고 빠른 렌더링 속도를 실형 할 수 있다고 할 수 있다. 렌더링을 조금 더 빠르게 하기 위해 Blink는 증분 렌더링(incremental rendering) 기법을 적용한다. 증분 렌더링이란, 페이지의 일부분이 변경되었을 때, 전체 페이지를 다시 렌더링 하는 것이 아니라, 변경된 부분만 업데이트하는 것을 말한다. 이를 통해 페이지의 로딩 속도와 반응성을 향상할 수 있다. 마지막으로 다양한 플랫폼과 장치에서 동작할 수 있도록 설계되어 PC, 모바일, 태블릿 등 다양한 환경경에서 일관된 사용자 경험을 제공한다. 따라서 개발자는 쉽게 Blink를 기반으로 프로덕트를 다양한 플랫폼에 쉽게 배포할 수 있다.

 

 

---

 

위의 내용에서 우리는 몇가지 키워드 중심으로 브라우저에 대해 살펴보았다. 각각의 키워드별로 살을 붙이는 것을 바로 이 글을 읽는 독자의 몫이다.