시스매

브라우저

7 min read

2025-09-04 21:51

Tags: 프로그래밍 기초 자바스크립트

브라우저

  • 웹 서버 에서 요청을 보내고 받은 리소스(HTML, CSS, 자바스크립트)를 해석해 시각적인 웹 페이지로 보여주는 소프트웨어

  • 렌더링 엔진과 자바스크립트 엔진을 핵심으로, 복잡한 파싱, 렌더링, 실행 과정을 거쳐 동적인 웹 애플리케이션을 구동

  • 1989년 WWW(World Wide Web) 이 등장하면서 3가지 핵심 기술 제안

    • HTML (HyperText Markup Language): 웹 페이지의 뼈대를 만드는 언어.
    • HTTP (HyperText Transfer Protocol): 웹 서버와 클라이언트(브라우저)가 서로 통신하는 규칙.
    • URL (Uniform Resource Locator): 웹에 있는 자원의 고유한 주소.

  • 핵심 구성 요소

    • 사용자 인터페이스 (User Interface):
      • 주소 표시줄, 뒤로/앞으로 가기 버튼, 북마크 등 우리가 직접 조작하는 부분입니다.
    • 브라우저 엔진 (Browser Engine):
      • 사용자 인터페이스와 아래의 렌더링 엔진을 연결하는 중간 관리자 역할을 합니다.
    • 렌더링 엔진 (Rendering Engine):
      • 브라우저의 심장. HTML, CSS 파일을 해석해서 화면에 그리는 역할을 담당합니다.
        • (크롬/엣지는 ‘블링크(Blink)’, 파이어폭스는 ‘게코(Gecko)’, 사파리는 ‘웹킷(WebKit)’)
    • 네트워킹 (Networking):
      • HTTP 요청과 같은 모든 네트워크 통신을 처리합니다.
      • 서버로부터 웹 페이지에 필요한 파일들을 가져옵니다.
    • 자바스크립트 엔진 (JavaScript Engine):
      • 자바스크립트 코드를 해석하고 실행하여 웹 페이지에 동적인 기능을 부여합니다.
        • (크롬/엣지는 ‘V8’, 파이어폭스는 ‘스파이더몽키(SpiderMonkey)’)
    • UI 백엔드 (UI Backend):
      • 운영체제의 기본적인 UI 요소(창, 버튼, 입력 필드 등)를 그려줍니다.
    • 자료 저장소 (Data Persistence):

  • 렌더링 과정

    • 1. 파싱 (Parsing): HTML, CSS를 구조화하기
      • 브라우저는 서버로부터 받은 HTML과 CSS 파일을 그냥 읽는 것이 아니라, 자신이 이해할 수 있는 구조로 변환합니다.
      • DOM (Document Object Model) 트리 생성: HTML 코드를 읽어 문서의 구조를 나타내는 ‘가계도’ 같은 트리 구조로 만듭니다.
        • <html> 아래에 <head>와 <body>가 있고, <body> 아래에 <h1>과 <div>가 있는 식입니다.
      • CSSOM (CSS Object Model) 트리 생성: CSS 코드를 읽어 각 요소에 어떤 스타일을 적용해야 하는지에 대한 정보를 트리 구조로 만듭니다.
    • 2. 렌더 트리 (Render Tree) 구축: 설계도 합치기
      • 이제 DOM 트리(구조)와 CSSOM 트리(스타일)를 합쳐 렌더 트리를 만듭니다.
      • 렌더 트리는 실제로 화면에 ‘보여질’ 요소들만 포함합니다.
        • 예를 들어 display: none; 속성이 적용된 요소는 렌더 트리에 포함되지 않습니다.
    • 3. 레이아웃 (Layout / Reflow): 자리 배치하기
      • 렌더 트리가 만들어지면, 각 요소가 화면의 어디에, 어떤 크기로 위치해야 할지 정확한 좌표를 계산합니다.
      • 이 과정을 ‘레이아웃’ 또는 ‘리플로우’라고 합니다. 창 크기를 조절할 때마다 이 과정이 다시 일어납니다.
    • 4. 페인트 (Paint): 색칠하기
      • 레이아웃 계산이 끝나면, 각 요소를 실제 픽셀로 변환하여 화면에 그립니다.
      • 텍스트, 색상, 이미지, 그림자 등 모든 시각적인 부분을 채워 넣는 과정입니다.
    • 5. 합성 (Compositing): 레이어 합치기
      • 최신 브라우저는 페이지를 여러 개의 레이어로 나누어 페인트 작업을 처리합니다.
      • 예를 들어, 배경, 텍스트, 팝업창 등을 각각 다른 레이어에 그린 뒤, GPU를 사용해 이 레이어들을 하나로 합성하여 최종 화면을 보여줌
      • 이렇게 하면 특정 레이어만 변경될 때 전체를 다시 그릴 필요가 없어 성능이 향상됩니다.
브라우저개발사렌더링 엔진자바스크립트 엔진특징
크롬 (Chrome)GoogleBlinkV8가장 높은 시장 점유율, 강력한 개발자 도구, 방대한 확장 프로그램 생태계
엣지 (Edge)MicrosoftBlinkV8크롬과 동일한 엔진 사용으로 호환성 우수, Windows와 통합, 저전력 모드
사파리 (Safari)AppleWebKitJavaScriptCoreApple 생태계에 최적화, 뛰어난 전력 효율, 강력한 개인정보 보호 기능
파이어폭스 (Firefox)MozillaGeckoSpiderMonkey비영리 재단에서 개발, 개인정보 보호 강조, 높은 수준의 맞춤 설정 기능
웨일 (Whale)NaverBlinkV8듀얼 탭, 사이드바, 퀵서치 등 한국 사용자 환경에 특화된 편의 기능 제공

그래프 뷰

백링크