[TIL] 브라우저 렌더링과 반응형 웹

lmimoh·2022년 11월 21일
0

TIL

목록 보기
21/26
post-thumbnail

브라우저(Browser) ?

웹 브라우저 혹은 웹 탐색기라고 불리는 브라우저(Browesr)는 웹 서버를 통해 클라이언트와 양방향으로 통신하며 HTML 문서 및 그림, 영상 등의 다양한 컨텐츠를 보여주는 GUI 기반의 소프트웨어 프로그램을 의미한다.

이때, 웹(Web)은 World Wide Web의 줄임말로 브라우저 상에서 하이퍼텍스트 방식을 통해 제공되는 텍스트, 그림, 영상등이 HTML 문서 형태로 제공되는 공간을 의미하며 이러한 HTML 문서를 웹 페이지(Web Page)라고 부른다.

또한, 서로 연관된 웹 페이지들의 집합을 웹 사이트(Web Site)라고 부른다.


브라우저(Browesr)의 특징과 동작 원리

브라우저는 종류에 따라 특징이 상이하나 공통 적인 부분이 존재한다.

그것은 브라우저가 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고 서버의 응답(Response)를 받아 이용자에게 제공(Renderingg)하는 방식이 같다는 점이다.

이때, 자원(Resource)는 대게 HTML 문서 혹은 다양한 형태일 수 있으며 자원의 주소는 URI(Uniform Resource Identifier)로 구성된다.

브라우저의 동작 순서

1) 사용자는 웹 브라우저를 통해 탐색할 웹 페이지의 URL 주소를 입력한다.
2) DNS 서버는 사용자가 입력한 도메인 네임을 통해 해당 IP 주소를 탐색하여 전달한다.
3) 전달받은 IP주소로 HTTP 요청 메세지를 생성하고 TCP 프로토콜을 통해 웹페이지 URL 정보를 요청한다.
4) 웹서버는 해당 요청을 탐색하여 (3)과 같이 HTTP -> TCP 프로토콜을 거쳐 사용자에게 응답한다.
5) 사용자의 컴퓨터에 도달한 HTTP 응답 메세지는 웹 페이지 데이터로 변환되고 브라우저를 통해 렌더링되어 사용자가 시각적으로 접근할 수 있게 된다.


1) 사용자 <=> HTTP <=> DNS(요청, 응답)
: DNS를 통해 해당 도메인의 IP 주소 탐색

2) 사용자 <=> HTTP <=> TCP/IP <=> HTTP <=> 웹서버
: 웹서버에 자원 요청 및 응답

3) 사용자에게 도달된 웹 페이지 데이터가 브라우저를 통해 렌더링


브라우저(Browser)의 구조

브라우저는 종류마다 모양이 상이하지만 기본적인 구조는 거의 동일하다.

다음 구조를 토대로 브라우저에 대해서 알아보자.

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

UI로 자주 불리는 사용자 인터페이스는 사용자가 브라우저 상에서 사용하는 모든 GUI를 의미한다.

이때, 중요한 점은 브라우저의 UI를 의미하는 것이므로 사용자가 접속한 웹 페이지가 아닌 브라우저 상단의 주소 표시줄, 이전/다음 버튼, 북마크 등의 설정창 등을 의미한다.

브라우저 엔진(Browser Engine)

UI와 렌더링 엔진 사이의 동작을 제어하는 엔진을 의미한다.

특히, HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 렌더링 하기 위해 시각 표현으로 변환시키고 문서객체모델(DOM) 자료 구조를 구현한다.

다음은 대표적인 브라우저들의 엔진을 소개하고 있다.

이름 설명
게코(Gecko) 모질라 재단에서 만든 브라우저 엔진.
파이어폭스가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저이다.
웹킷(Webkit) KHTML에서 파생된 브라우저 엔진.
사파리가 해당 엔진을 탑재하고 있는 가장 유명한 웹 브라우저이다.
블링크(Blink) 웹킷(Webkit)에서 파생된 브라우저 엔진.
크롬, 오페라가 해당 엔진을 탑재하고 있는 유명한 웹 브라우저이다.
트라이던트(Trident) 마이크로소프트의 브라우저 엔진.
인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩 등이 이를 탑재하고 있다.
엣지HTML(EdgeHTML) 트라이던트(Trident)에서 파생된 브라우저 엔진.
마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재되었습니다.
(현재는 블링크로 교체.)

profile
성장하는 개발자, 이민훈입니다.

0개의 댓글