logo

웹 브라우저

웹 프로그램이 실행되는 환경

43 조회

0 추천

1,396 단어

7분 예상

2025. 02. 01. 게시

2025. 02. 10. 수정

luasenvy 작성

CC BY-NC-SA 4.0

월드 와이드 웹

웹 브라우저라는 것은 결국 http 통신으로 서버로부터의 응답을 파싱하는 프로그램이다. 이 문서를 보기에 앞서서 우리가 작업하려는 이 월드 와이드 웹, www 라고 하는 것에 대해서 알아두어야 할 필요가 있다. 거기에 대한 포스트를 이전에 www란에 작성하여 두었으니 반드시 한 번 읽은 후에 이 문서를 마저 읽기 바란다.

웹 브라우저

웹 프로그래밍은 서버와 클라이언트 양측의 모든 부분을 아울러 이야기할 수 있다. 이것은 비단 코드를 작성하는 작업뿐만 아니라 도메인 설정, 로드 밸런싱, 네트워크 설정, 데이터베이스 설정, 세션 설정 등 인프라는 물론 보조 서버들간의 인터페이스, 서버 구성환경까지 모두 포함할 수도 있다.

그럼에도 우리가 웹 프로그래밍이라고 할 때 브라우저에서의 페이지 개발을 떠올리는 이유는 사용자가 웹 어플리케이션의 출력값을 확인하기 위해서 브라우저를 필요로 하기 때문이다. 따라서, 웹 프로그래밍을 한다면 웹 브라우저를 빼놓고 이야기할 수 없는 것이다.

웹 브라우저는 서버가 응답한 콘텐츠출력결과를 해석하여 화면에 표시하는데 HTML, CSS, JavaScript 세가지가 주요 구성요소이다. 요즘에는 브라우저의 기능이 막강해졌기 때문에 혼란스러운 용어와 동작을 이해하기 어려운 것들이 많다.

이러한 현상은 브라우저라고 하는 것이 대부분 문자로 이루어진 사용자 메뉴얼 같은 문서를 쉽게 공유하기 위해 시작됐기 때문이다. 요즘처럼 화려하고 유려하게 만들 필요도 없었고 사용자와의 상호작용이 다이나믹하고 실시간으로 이루어져야하는 기능들을 필요로 않았기 때문이다. 하물며 Ajax 통신과 같은 기술도 나중에 추가된 것이다.

HTML, CSS, JavaScript

<!doctype html>
<html>
  <head>
    <style>
      div {
        color: #0000ff;
      }
    </style>
  </head>

  <body>
    <div id="first-div">blue text</div>

    <script>
      document.querySelector("#first-div").addEventListener("click", function() {
        alert("CLICKED");
      });
    </script>
  </body>
</htML>

하나의 태그에 위 세가지 요소를 작성한 예제이다. HTML 태그로 문서 구조를 구성하여 CSS로 외형을 결정하고 javascript로 사용자와의 상호작용을 정의하였다. 각각 파일을 나누어 .html, .css, .js 로 나누는 것이 더 바람직한 형태이니 예시처럼 html 하나에 모두 섞어 작성하는 방식은 지양하는 것이 좋다.

각각의 파트별로 문서를 여러개 작성해야 할 만큼 전문성이 필요한 기술들이다. 자세한 내용은 다른 문서에서 작성하는 것으로 하고 이 문서에서는 다음 세가지만 기억하자.

  1. HTML: 문서 구조를 결정한다.
  2. CSS: 문서 스타일을 결정한다.
  3. JavaScript: 문서의 동작을 결정한다.

Object Model

WHATWG DOM 사진: 위키피디아

해석한 HTML이나 CSS를 화면에 그린 이후에도 객체 모델을 유지하는 이유는 자바스크립트로 접근하여 화면을 동적으로 변경하기 위해서이다. DOM은 Document Object Model의 약어로 XML, HTML 문서의 각 노드들을 가지고 있는 객체 모델이다. CSS의 경우 CSSOM이라고 하는 CSS Object Model 트리로 관리한다. 노드를 접근하고 변경/수정/삭제/추가 등의 작업을 할 수 있도록 기능을 제공하기 때문에 인터페이스라고 설명하기도 한다.

HTML부터 화면에 표시되기까지의 렌더링 순서

    ┌──── HTML ──   DOM ─────┐
Server ──  CSS ── CSSOM ── Render Tree ─── Layout ─── Paint
    └────────────    JS ─────┘

렌더링이라 함은 3D 분야에서 자주 접할 수 있는 용어라 혼동이 있을 수 있지만 사전적으로는 데이터를 시각적인 결과물로 변환하는 과정을 일컫는다. 그래서 HTML, CSS 등을 화면에 픽셀시각적로 표시하는 일련의 과정을 렌더링이라고 칭하는 것이다.

  1. 로더가 서버로부터 응답받은 리소스 스트림을 읽는다.
  2. 각 해석기가 컨텐츠를 해석한다.
    • HTML파서: HTML을 해석하여 DOM 트리를 생성한다.
    • CSS파서: CSS를 해석하여 CSSOM 트리를 생성한다.
  3. DOM 트리와 CSS 트리를 결합한 렌더 트리를 생성한다.
  4. 렌더 트리를 기준으로 요소들의 기하학적위치, 크기 등 형태를 계산하는 레이아웃 과정을 거친다.
  5. 렌더 트리의 각 노드를 실제 픽셀로 변환화면에 표시한다.

DOM 트리나 CSSOM 트리가 변경된 경우에는 렌더 트리를 다시 생성하고 레이아웃을 다시 계산하고 화면에 다시 렌더링한다. 이렇게 다시 레이아웃 계산을 진행하는 것을 리플로우, 재계산된 결과를 화면에 다시 그리는 것을 리페인트 라고 한다.