브라우저

🌐

브라우저

웹(Web)

브라우저의 특징과 웹의 동작 원리

브라우저의 구조

사용자 인터페이스(User Interface)

브라우저 엔진(Browser Engine)

렌더링 엔진(Rendering Engine)

통신(Networking)

자바스크립트 해석기(JavaScript Interpreter)

자바스크립트 엔진 구조 (V8 엔진을 토대로)

UI 백엔드

자료 저장소

웹 스토리지(Web Storage) 특징

브라우저

웹 브라우저, 웹 탐색기로도 불리는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTMl 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 휘해 응용 계층의 대표적 프로토콜인 HTTP를 통해 송수신한다.

웹(Web)

브라우저 상에서 제공되는 웹은 월드 와이드 웹(World Wide Web)이 풀 네임이며, 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. HTML 언어를 사용해 작성된 문서 형태로 제공되며, 이런 문서를 웹 페이지(Web Page)라고 부른다. 그리고 이런 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합을 웹 사이트(Web Site)라고 부른다.

브라우저의 특징과 웹의 동작 원리

브라우저는 현존하는 브라우저끼리 조금씩 다른 특징이 있지만 동작 방식은 동일하다. 브라우저는 사용자가 선택한 자원(Resource)을 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작한다. 여기서 자원은 대개 HTML 문서이나 가끔 PDF, 멀티미디어 등 다른 형태일 수 있고, 자원의 주소는 URI로 되어 있다.

웹 브라우저가 웹 사이트에 접속하여 웹 페이지를 가져오는 과정은 다음과 같다.

1. 사용자는 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력한다.

2. DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색해 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달한다.

3. 웹페이지 URL 정보와 함께 전달받은 IP 주소를 토대로 HTTP 프로토콜을 사용해 요청 메세지를 생성하고 TCP 프로토콜을 사용해 해당 IP 컴퓨터(서버)로 요청을 보낸다.

4. 요청 메세지는 HTTP 프로토콜을 통해 URL로 변환되어 웹 서버에 전달되고, 요청에 해당하는 데이터를 검색해 찾아낸 뒤 HTTP 프로토콜을 사용해 응답 메세지를 생성하여 다시 TCP 프로토콜을 이용해 사용자의 컴퓨터로 전송한다.

5. 응답 메세지는 HTTP 프로토콜을 통해 웹 페이지 데이터로 변환되어 웹 브라우저 상에 출력된다.

브라우저의 구조

브라우저는 각기 그 모양이 조금씩 다르지만 모두 기본적인 구조를 가지고 있다.

사용자 인터페이스(User Interface)

UI라고도 부르며 유저와 가장 밀접하게 맞닿아있는 부분이다. 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 GUI 부분을 통칭한다.

---

브라우저 엔진(Browser Engine)

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 주된 역할은 HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현한다. 레이아웃 엔진(Layout Engine)이라고도 부르며, 렌더링 엔진(Rendering Engine)과 밀접한 연관이 있어 보통 브라우저 엔진과 렌더링 엔진을 묶어서 브라우저 엔진으로 부른다. 이런 브라우저 엔진은 웹 브라우저 마다 전용 엔진을 사용한다.

이름	설명
게코(Gecko)	모질라 재단에서 만든 브라우저 엔진. 탑재한 웹 브라우저로는 파이어폭스가 대표적이다.
웹킷(Webkit)	KHTML에서 파생된 브라우저 엔진. 탑재한 웹 브라우저로는 사파리가 대표적이다.
블링크(Blink)	웹킷(Webkit)에서 파생된 브라우저 엔진. 탑재한 웹 브라우저로는 크롬, 오페라가 대표적이다.
트라이던트(Trident)	마이크로소프트의 브라우저 엔진.  탑재한 웹 브라우저로는 IE, Outlook이 대표적이다.
엣지HTML(EdgeHTML)	트라이던트(Trident)에서 파생된 브라우저 엔진. 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되었으나 현재는 블링크로 교체되었다.

---

렌더링 엔진(Rendering Engine)

요청한 컨텐츠를 화면에 출력하는 역할을 한다. HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, HTML 및 XML 문서와 이미지를 표시할 수 있다. 또한 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다.

위의 브라우저 엔진과 밀접하게 결합되어 있어 보통 하나의 엔진으로 보는 시각이 많다. 렌더링 엔진 역시 웹 브라우저 마다 전용 엔진을 사용하나 엔진의 동작 원리는 공통된 부분이 많다.

---

통신(Networking)

HTTP 요청과 같은 네트워크 호출에 사용된다. 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행된다.

---

자바스크립트 해석기(JavaScript Interpreter)

JavaScript 코드를 해석하고 실행하는 역할을 한다. JavaScript는 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱(parsing)하는 언어(Interpreted Language)이고, 현대의 웹 페이지는 웹 인터랙션(Interaction)에 JavaScript가 사용되기 때문에 필수적이게 되었다.

자바스크립트 엔진(JavaScript Engine)이라고도 부르는 자바스크립트 해석기는 여러 목적으로 사용이 되지만 대체적으로 웹 브라우저에서 이용되며, 이 역시 브라우저마다 전용 엔진이 탑재되어 있다.

이름	설명
Rhino	모질라 재단이 운영하는 오픈소스 엔진으로, 자바(Java)로 개발되었다는 특징이 있다.
SpiderMonkey	최초의 Javascript 엔진으로 넷스케이프 내비게이터를 지원하였으며, 현재는 파이어폭스를 지원하고 있다.
V8	구글이 개발한 오픈 소스 엔진으로 구글 크롬의 Javascript 엔진이다.
JavascriptCore	애플에서 개발하였으며 처음에 WebKit 프레임워크를 위해 개발되었지만 현재는 사파리와 React Native App를 지원하고 있다.
Chakra	마이크로소프트가 개발한 엔진이며, Edge 브라우저를 지원하고 있다.

자바스크립트 엔진 구조 (V8 엔진을 토대로)

V8 엔진의 메모리 구조는 크게 Heap Memory와 Call Stack으로 구성되어 있다.

• 힙 메모리(Heap Memory)

  힙(heap)은 동적 메모리 할당에 사용되는 자료구조이며, V8은 이 힙을 이용해 객체 또는 동적 데이터를 저장한다. 여기에 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳이다.

• 콜 스택(Call Stack)

  JavaScript는 기본적으로 싱글 스레드 기반의 언어이며, 이는 콜 스택이 하나라는 의미이자 한 번에 한 작업만 사용할 수 있다. 콜 스택은 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조이다. 스택의 구조 특성 상 후입선출(LIFO) 형태로 동작하게 된다.

  

  스택이 쌓이는(push) 과정

  가장 먼저 호출되는 printSquare(4)가 콜 스택에 쌓이고, printSquare내부에서 square(n)이 다음으로 콜 스택에, square내부에서 multiply(n, n)이 마지막으로 콜 스택에 쌓이게 된다.

  

  스택이 제거되는(pop) 과정. 후입선출 구조에 따라 가장 나중에 쌓인 multiply(n, n)부터 빠진다.

  콜 스택의 후입선출(LIFO) 구조에 따라 가장 나중에 호출되어 콜 스택에 쌓인 multiply(n, n)부터 차례대로 콜 스택에서 빠지면서 함수 내의 결과를 리턴한다. 실행이 모두 완료되면 스택에서 모두 제거되어 완전히 비게 된다.

  콜 스택에 쌓이는 데이터 하나 하나를 스택 프레임(Stack Frame)이라고 부른다. 위의 예시에서 스택에 쌓이는 하나가 프레임 하나이며, 이런 스택 프레임들은 동작 방식에서도 알 수 있듯 쌓이는 순서가 있기 때문에 콜 스택의 동작 방식을 안다면 스택의 추적(Stack trace) 또한 가능해진다.

  • 스택 추적(Stack trace)

    이러한 스택 추적은 웹 브라우저의 콘솔에 출력되는 에러 로그를 살펴보는데 큰 도움이 된다. 아래의 그림에서 함수 baz()는 함수 bar()를 호출하고 bar()는 foo() 함수를 호출하고 foo()는 마지막으로 에러 메세지를 출력한다. 콜 스택의 구조를 알면 에러가 발생한 함수와 그 함수를 호출했던 함수를 모두 파악할 수 있어 에러의 발생과 그 이유를 추적할 수 있다.

    

  • 스택 오버플로(Stack Overflow)

    콜 스택은 힙과 달리 자료구조 자체가 크기에 제한이 있다. 따라서 한정된 메모리 공간을 넘어버리게 되면 에러가 발생되는데 이를 스택 오버플로(Stack Overflow)라고 부른다. 아래의 예시처럼 종료 조건이 걸리지 않은 재귀함수가 대표적 예시이며, 이 경우 어느 순간 스택의 크기(용량)을 넘게 되어 웹 브라우저는 멈춰버리게 된다.

  

UI 백엔드

렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다. Select, Input 창과 같은 기본적인 위젯을 그려주며, 플랫폼에서 명시하지 않은 일반적인 인터페이스로 OS 사용자 인터페이스 체계를 사용한다.

🤔

OS 사용자 인터페이스란 OS(운영체제)에서 사용되는 사용자 인터페이스로, OS에서 제공하는 특정한 명령 체계를 사용하게 된다. 이러한 명령 체계 중 대표적인 것들은 아래와 같다.

• 명령어 라인 인터페이스(Command Line Interface, CLI)

  

  Mac의 터미널, Window의 cmd, Powershell 등 명령어를 입력해 처리해야 하는 인터페이스

• 일괄 처리 인터페이스(Batch Interface)

  사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스. 대규모의 시스템에서 대량의 데이터를 처리하는데 자주 사용된다.

• 그래픽 사용자 인터페이스 (Graphic User Interface, GUI)

  

  마우스, 키보드, 모니터 등을 이용해 아이콘을 클릭하거나 직관적인 입력이 가능한 인터페이스. 일반적인 사용자에게 가장 친숙한 인터페이스이다.

자료 저장소

말 그대로 자료를 저장하는 계층으로, 쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재한다. HTML5 명세에는 브라우저가 지원하는 웹 스토리지(Web Storage) 스펙이 정의되어 있으며, 영구적 저장소인 로컬스토리지(localStorage)와 임시 저장소인 세션스토리지(sessionStorage)를 따로 두어 지속성을 구분해 응용 환경에 맞는 선택을 할 수 있다.

웹 스토리지(Web Storage) 특징

HTML5 이전에는 응용 프로그램이 데이터를 서버를 요청할 때마다 매번 쿠키(Cookie)라는 곳에 그 정보를 저장했지만, 쿠키 자체의 보안 취약과 저장소의 절대적인 용량이 적은 문제로 인해 웹 스토리지(Web Storage)가 대안으로 나오게 되었다.

웹 스토리지는 웹 브라우저가 직접 데이터를 저장할 수 있게 해주며, 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있게 해준다. 또한 웹 스토리지에 저장된 데이터는 절대 서버로 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재해 네트워크 트래픽 비용 또한 줄여준다는 특징을 가진다.

이러한 웹 스토리지는 오리진(Origin, 도메인과 프로토콜이 한 쌍으로 이루어진 식별자)마다 단 하나씩 존재하므로, 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있게 된다.

• 로컬스토리지(localStorage)
  • window.localStorage : 만료 날짜가 없는 데이터를 저장할 때 쓰인다.

  로컬스토리지 객체는 보관 기한이 없는 데이터를 저장하는 객체이다. 따라서 브라우저 탭이 닫히거나 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않는다. Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능하며, 도메인마다 별도로 생성되기 때문에 도메인만 같다면 전역으로 데이터의 공유가 가능해진다.

• 세션스토리지(sessionStorage)
  • window.sessionStorage : 세션이 있는 데이터를 저장할 때 쓰이며, 브라우저 탭을 닫으면 손실되는 것을 의도한 데이터를 저장할 때 쓰인다.

  세션스토리지 객체는 하나의 세션만을 위한 데이터를 저장한다. 데이터를 지속적으로 보관하지 않고 브라우징(프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위) 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다.

  Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어지며, 도메인마다 별도 생성됨은 물론 브라우저 컨텍스트가 다르면 서로 다른 영역이 되는 특징을 가진다. 즉, 브라우저 두 개를 실행해 같은 페이지를 연다면 브라우저의 컨텍스트가 서로 달라 이 두 페이지의 세션스토리지는 각 별개의 영역으로 인지되고 서로 데이터의 공유가 불가능해진다.

  🤔

  브라우저 컨텍스트란 브라우저가 문서를 표시하는 환경을 의미하며, 각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있다.

단, 웹 스토리지는 사용하기 전 사용자의 웹 브라우저 버전이 이를 지원하는지 먼저 확인해야 한다.

각 브라우저 별 웹 스토리지를 지원하는 버전

웹 스토리지를 활용한 대표적인 기능은 아래와 같다.

• 블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능

• 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능

• 현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)

Uploaded by N2T