Web Front-End Developer Novice study 2회차 - 브라우저 동작 원리

안녕하세요, Lovefield입니다

디자이너 커뮤니티에서 진행하는 개발 스터디 2회차 글입니다. 이번에는 브라우저가 동작하는 방식에 대해 스터디를 진행했는데요. 아무래도 입문자 대상으로 쉽게 설명하다보니 자세한 내용은 다른 글을 참고할 수있게 링크로 대체하고 간단한 동작 방식만 설명했습니다.

1. 브라우저란?

웹 브라우저, 흔히 브라우저라고 많이 일컫습니다. 브라우저는 웹 서버를 이동하며 HTML문서나 이미지 파일 등을 받아 유저가 콘텐츠를 볼 수 있도록 해주는 응용 프로그램입니다. 좀 더 쉽게 표현하자면 인터넷 상에 존재하는 수많은 정보들을 탐색하고 유저가 선택한 정보를 화면에 표시해주는 프로그램입니다.

여러분들이 흔히 알고 있는 브라우저들이 있습니다. 크롬, 사파리, 오페라, 파이어폭스, 엣지 등이 있는데요. 브라우저 종류는 약 20여가지가 존재합니다. 여러분이 알고 계시는 것보다 훨씬 많은 종류의 브라우저들이 존재합니다. 이 수많은 브라우저들은 동작하는 방식이 전부 비슷합니다.

2. 브라우저 동작 순서

브라우저를 이용하기 위해서는 가장 먼저 URL을 입력하실 겁니다. 흔히 웹 사이트의 주소로 알고 있는 URL을 입력해야 원하는 화면을 볼 수 있기 때문이죠. 그러면 브라우저에 URL을 입력 했을때 어떤 일들이 일어날까요?

우선 URL에 도메인이라는 정보가 있습니다. 여러분들이 만약 `https://dico.me/front-end/articles/331/ko`를 입력하셨다면 `dico.me`라는 부분이 도메인입니다. 이 도메인은 인간이 외우기 쉽도록 고안된 것이며 실질적인 서버의 주소 정보와 연결되어 있습니다.

서버 주소는 IP라고 하며 주로 127.0.0.1과 같은 숫자로 이루어져있습니다. 인간이 이 숫자 조합을 기억하기 힘드므로 사람이 사용하는 언어로 연결시켜놓은게 도메인입니다. 브라우저에 URL을 입력하면 가장 먼저 DNS(Domain Name System)을 통해 실제 서버 주소 정보를 조회합니다.

실제 서버 주소를 알아냈으니 이제 서버에서 화면을 표시하기 위해 필요한 정보들을 전송받습니다. 이 정보들은 사용자가 알아볼 수 없는 형태이기 때문에 많은 과정을 거쳐야합니다.

웹킷 동작 과정 (https://d2.naver.com/helloworld/59361)

브라우저의 렌더링 순서를 간략하게 표현한 이미지입니다. 가장 먼저 전달받은 데이터를 해석해 트리구조를 만듭니다. HTML을 예로 들자면 요소들의 구성이 어떻게 되어있는 지를 해석하고 해당 구조를 데이터화 시켜두었다고 이해하면 될 것 같습니다. 이러한 데이터 즉, HTML과 CSS 데이터를 합쳐서 렌더링에 필요한 구조를 구성합니다. 여기서 저희가 작성한 HTML과 CSS가 합쳐져 어떻게 표기할지에 대한 정보를 가지게 됩니다. 화면에 표시하기 전에 연산 작업이 필요합니다. 입력한 CSS와 HTML 요소의 크기 및 스타일들을 연산해 화면에 표시할 준비를 하죠. 이 작업이 끝나면 드디어 실질적으로 화면에 표시가 됩니다.

입문 과정의 스터디다보니. 최대한 비개발자가 이해할 수 있는 정도로 수업 내용을 다듬어 보았는데요. 조금 더 깊이 있게 들어가도 괜찮지 않았나란 생각이 드네요. 깊이 있는 내용은 다음 글들로 대체했습니다.

웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?(https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/)

[CS]웹 브라우저는 어떻게 작동하는가?(https://bbangson.tistory.com/87)