브라우저에 대해
브라우저란 무엇인가?
브라우저는 사용자가 입력한 URL을 통해 웹 서버에 요청을 보내고, 서버로부터 받은 데이터를 해석하여 화면에 출력하는 소프트웨어다. 웹 페이지 탐색, 애플리케이션 실행, 미디어 콘텐츠 재생 등 다양한 작업을 수행할 수 있도록 돕는다.
브라우저의 서버 요청 플로우
브라우저에서 URL을 입력했을 때, 다음과 같은 흐름으로 동작한다.
URL 파싱:
사용자가 입력한 URL을 분석하여 스키마(프로토콜), 도메인, 경로 등을 구분한다.
이 과정에서 HTTP 또는 HTTPS 등 프로토콜의 종류를 확인한다.
"https://example.com/path/to/resource?query=123#section";
// result
{
"protocol": "https",
"domain": "example.com",
"path": "/path/to/resource",
"query": "?query=123",
"hash": "#section"
}
HTTP 확인:
브라우저는 웹 페이지를 다운로드하기 위해 응용 계층의 HTTP 프로토콜을 이용해 데이터를 송신/수신한다. 이때 URL의 스키마(예: http:// 또는 https://)를 확인하여, 요청에 사용할 프로토콜을 결정한다.
HSTS 정책 조회
만약 URL의 스키마가 HTTP라면, 브라우저는 해당 도메인에 HSTS(HTTP Strict Transport Security) 정책이 적용되어 있는지 확인한다. HSTS 정책이 적용된 도메인이라면, 브라우저는 HTTP 요청을 HTTPS로 강제 변환한다. 이 과정은 브라우저 내부에 저장된 HSTS 캐시 또는 내장된 HSTS Preload 목록을 통해 이루어진다.
HSTS(HTTP Strict Transport Security)는 웹사이트가 HTTPS 연결만 허용하도록 강제하는 보안 정책이다.
이후 흐름
HSTS 정책 확인이 끝나면, 브라우저는 결정된 프로토콜에 따라 네트워크 요청을 시작한다. 먼저 URL의 도메인 이름을 IP 주소로 변환하기 위해 DNS 조회가 이루어진다. HTTPS 프로토콜인 경우, DNS 조회 이후 TLS 핸드셰이크를 통해 보안 연결을 설정한 뒤, 데이터를 송수신한다.
URL을 IP로 변환 (DNS):
DNS 조회는 브라우저가 URL의 도메인 이름을 숫자로 된 IP 주소로 변환하는 과정이다. IP 주소는 네트워크에서 통신할 때 사용하는 실제 주소로, 데이터가 목적지에 도달할 수 있도록 “위치”를 나타낸다.
예: “192.168.0.1” 같은 IP 주소는 계층적이고 논리적인 네트워크 주소다.
라우터를 통해 서버 게이트웨이로 이동:
IP 주소를 기반으로 인터넷을 통해 요청이 올바른 서버로 전달된다. 네트워크 라우터가 데이터를 중계하며, 요청은 서버의 게이트웨이에 도착한다.
IP 주소를 MAC 주소로 변환:
네트워크에서 데이터 전송이 이루어지려면 논리적 주소(IP 주소)와 물리적 주소(MAC 주소)가 모두 필요하다. IP 주소는 앞서 설명했듯, 네트워크 상에서 장치 간 통신을 위한 주소로, 데이터의 전송 경로를 설정하는 데 사용된다. 하지만 실제로 데이터는 MAC 주소를 통해 전송된다.
MAC 주소(Media Access Control Address)는 데이터 링크 계층에서 네트워크 인터페이스에 할당된 고유한 식별자다. 이는 네트워크 내에서 장치들이 서로를 식별하고 통신을 할 수 있도록 돕는다.
IP 주소만으로는 데이터 전송이 불가능하기 때문에, IP 주소를 MAC 주소로 변환하는 과정이 필요하다. 이때 ARP(Address Resolution Protocol)를 사용한다. ARP는 네트워크 내에서 IP 주소를 입력으로 받아 해당 IP에 연결된 MAC 주소를 찾아준다.
예를 들어, IP 패킷이 목적지에 도달하려면 로컬 네트워크(LAN)나 이더넷 환경에서 MAC 주소를 기반으로 데이터를 전송해야 한다. ARP는 이를 가능하게 하여 네트워크 내에서 원활한 통신이 이루어지도록 돕는다.
요약하면, IP 주소는 장치 간 논리적 연결을, MAC 주소는 실제 데이터 전송을 담당하며, ARP는 이 둘을 연결하는 중요한 역할을 한다.
IP는 도로명 주소, MAC은 위도/경도, 좌표라고 생각하면 좀 더 이해가 쉬울 것이다.
대상 서버와 TCP 소켓 연결:
서버와의 데이터를 주고받기 위해 TCP 소켓 연결을 설정한다. HTTPS라면 암호화된 연결을 설정하기 위해 TLS 핸드셰이킹이 추가로 이루어진다.
HTTP 프로토콜로 요청 및 응답 처리:
브라우저가 HTTP 요청을 보내고, 서버는 이에 대한 응답으로 HTML, CSS, JavaScript 등의 데이터를 반환한다.
브라우저에서 응답 해석 (렌더링 엔진):
렌더링 엔진에서 사용자가 요청한 HTML 문서와 CSS, JS를 파싱하여 화면에 그린다.
이 과정에서:
- HTML: DOM(Document Object Model)으로 변환.
- CSS: CSSOM(CSS Object Model)으로 변환.
- JavaScript: 브라우저의 JavaScript 엔진에서 실행.
브라우저의 기본 구조
브라우저는 다음과 같은 주요 구성 요소로 이루어져 있다.
1. 사용자 인터페이스 (User Interface): 사용자가 브라우저와 상호작용하는 화면 요소를 제공한다. 주소창, 북마크, 뒤로/앞으로 가기 버튼 등이 이에 해당한다. (요청한 페이지를 보여주는 창을 제외한 나머지 부분이다.)
2. 브라우저 엔진 (Browser Engine): 사용자 인터페이스와 렌더링 엔진 사이에서 동작을 제어하며 (중개), 렌더링과 관련된 명령을 관리한다.
3. 렌더링 엔진 (Rendering Engine): 요청한 콘텐츠를 표시한다. HTML, CSS를 해석해 화면에 표시하고, DOM(Document Object Model)과 CSSOM(CSS Object Model)을 생성한다.
4. 통신 (Networking): HTTP/HTTPS 요청을 처리하고 서버와의 데이터를 송수신한다.
5. UI Backend: 콤보 박스와 윈도우 창 같은 기본적인 UI를 그림. 플랫폼에서 명시하지 않은 기본적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6. JavaScript 엔진 (JS 해석기): JavaScript 코드를 실행하는 소프트웨어 컴포넌트다. 대표적인 예로 구글 크롬의 V8 엔진, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore (Nitro) 등이 있다. JS 엔진은 웹 브라우저나 Node.js와 같은 런타임 환경에서 사용된다.
JS엔진 동작 원리
JS는 콜스택과 메모리힙이라는 구조를 통해 데이터를 관리하고, 코드 실행을 제어한다.
👉 JS 엔진의 주요 구성요소
1) Memory Heap : 메모리가 할당되는 공간이다. 2) Call Stack : 코드 실행 흐름에 따라 함수 호출이 쌓이는 곳이다.
❗ JS 엔진만으로는 웹이 완전히 동작하지 않는다. 이 외에도 런타임에서 처리되는 요소들이 있다.
브라우저에서는 Web API(DOM, Ajax, setTimeout 등)를 통해 런타임이 구성된다. 버튼 클릭과 같은 사용자 이벤트, DOM 조작, HTTP 요청, 그리고 비동기 함수 호출(setTimeout 등)은 Web API와 상호작용하며, Web API는 실행될 콜백 함수를 Callback Queue에 추가한다.
이러한 구조가 이벤트 루프를 통해 JS의 비동기 동작을 가능하게 한다.
7. 데이터 저장소: 쿠키, 로컬 스토리지, 세션 스토리지 등 브라우저에 데이터를 저장하는 계층이다.