웹 브라우저의 렌더링이란?

우리는 하루에도 여러 웹페이지에 접속하곤 합니다. 그 과정에서 웹 브라우저를 사용하고, 링크를 클릭해 원하는 곳으로 이동하죠. 우리가 인식하지 못할 뿐, 웹페이지는 미리 만들어진 것을 가져오는 게 아니라 실시간으로 그려지는 것에 가깝습니다. 실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링 과정이라고 말합니다.

대부분의 인터넷 웹 브라우저들을 분해해보면, 그 안에는 두 개의 엔진이 들어가 있습니다. 하나는 렌더링 엔진으로 사용자가 볼 화면을 그려내는 역할입니다. 그리고 다른 하나는 자바스크립트 엔진으로 자바스크립트 코드를 읽어내, 기능을 작동시키는 역할을 합니다.

웹 브라우저가 웹페이지를 여는 과정은 마치 압축파일을 열어 실행하는 과정과 비슷합니다. 압축된 파일을 해제하면, 그림과 영상, 게임이나 영화 파일을 실행할 수 있듯이 웹페이지도 텍스트, 이미지 리소스 파일로 이뤄진 자료들을 완성된 웹페이지 화면에 그려줍니다. 그리고 이 과정을 돕는 것이 바로 웹 브라우저의 렌더링 엔진입니다. 

우리가 일반적으로 사용하고 있는 크롬(Chrome)이나, 엣지(Edge) 브라우저는 크롬의 블링크(Blink) 렌더링 엔진을 사용합니다. 렌더링 엔진은 웹사이트의 소스코드를 읽어, 실제 어떤 요소들이 어떤 크기, 너비로 배치되는지, 텍스트는 얼마나 커야 하는지, 색상은 어때야 하는지, 간격은 얼마나 되어야 하는지 등을 계산해 실시간으로 그려줍니다. 사이트에 대한 설명서를 보고 새로운 화면을 만들어내는 것이죠.

그렇다면 렌더링 엔진은 어떤 내용들을 다루고 있을까요? 일반적으로 세 가지 언어를 다룹니다. 바로 HTML과 CSS,자바스크립트입니다. 

• HTML이 문서에 들어갈 텍스트 내용이나 추가 이미지, 파일 등을 다룬다면
• CSS는 문서가 어떻게 생겼고, 그림이나 파일을 어떻게 배치할지를 다룹니다.
• 자바스크립트는 HTML 구조를 변형하거나, 기능적인 내용을 담고 있습니다.

렌더링 엔진은 텍스트로 된 문서를 읽어내, 사용자가 볼 수 있는 실제 웹사이트 화면을 만들어줍니다. 또한 이런 렌더링 과정은 0.5초에서 1초 안에 일어납니다. 만약 불러와야 할 파일이 너무 무겁거나, 개수가 많은 경우엔 로딩 시간이 길어져 사용자에게 답답함을 줄 수 있습니다. 그만큼 웹 개발자들은 빠른 시간 안에 정확한 내용이 나올 수 있도록 파일을 가볍게 만들고, 속도를 개선하는 과정을 중요하게 생각합니다. 이런 작은 속도 차이 하나가 수백만, 수천만 명이 사용하는 서비스에서는 아주 큰 문제가 될 수도 있기 때문입니다.

일반적으로 렌더링 과정은 너무나 빨리 처리되기 때문에, 그 과정을 눈으로 확인하기는 어렵습니다. 하지만 본인이 실제 렌더링 과정을 확인하고 싶다면, 구글의 라이트 하우스(Light House) 기능을 이용해 보면 됩니다.

구글 라이트 하우스(Light House)는 웹페이지가 열리는 시간, 모바일 최적화 수준, 코드 사용 등 여러 기준점을 정해 웹페이지에 점수를 매겨줍니다. 화면이 렌더링 되는 과정, 로딩 시간 등을 분석하기에 시간의 흐름에 따라 웹페이지가 어떻게 보이는지를 직접 체크할 수 있습니다. 그리고 이 과정에서 로딩 속도가 너무 오래 걸리는 요소가 있다면, 그 내용을 삭제하거나 고쳐서 렌더링 속도를 개선할 수 있습니다.

만약 각각의 웹사이트가 어떤 파일과 리소스들을 사용하고 있는지, 더 자세히 알고 싶다면 웹 브라우저의 개발자 도구를 활용하면 됩니다. 본인이 크롬 브라우저를 사용하고 있다면, F12를 눌러 개발자 모드를 켜고, 원하는 사이트를 새로고침 해보세요. 그 사이트를 그려내는 과정에서 사용되는 모든 자바스크립트, HTML, CSS, 이미지 파일 등의 크기, 로딩 속도까지 모든 정보가 나오게 됩니다. 

실제로 웹 개발자들은 이런 개발자 도구를 통해 서비스의 로딩 속도를 체크하고, 문제가 되는 파일을 더 가볍게 처리하거나 때로는 불필요한 파일을 삭제해 속도를 늘리기도 합니다. 포탈 서비스처럼 복잡하고 다양한 기능이 들어가 있는 서비스일수록 로딩 시간 체크와 소스코드 경량화 작업은 매우 중요해집니다.

일반적으로 웹사이트에 들어가는 HTML 문서와 CSS, 자바스크립트 문서는 용량이 그리 크지 않습니다. 하지만 웹 폰트나, 사진 이미지 등이 고용량일 경우 웹페이지 로딩 속도가 급격히 늘어날 수 있습니다. 그래서 웹 개발자들은 다음과 같은 내용을 항상 체크합니다.

• 텍스트를 표현하기 위한 웹 폰트의 용량
• 사이트에 들어가는 사진 이미지의 용량
• 서비스 아이콘이나 벡터 이미지의 용량
• 동영상이나 첨부파일의 용량

최근에는 PC보다 모바일 환경에서 웹사이트를 이용하는 경우가 점점 더 많아지고 있습니다. 하지만 여전히 모바일 환경은 PC에 비해 통신 속도가 많이 느린 편이죠. 그래서 PC 기준에서는 문제가 없는 파일 용량이라도 모바일을 위한 최적화가 필요하기도 합니다. 게다가 전 세계를 기준으로 보면, 여전히 많은 국가들이 30Mbps도 되지 않은 속도의 인터넷을 사용합니다. 그렇기에 해외 기준이라면 웹사이트를 가볍게 만드는 일이 더 중요하다는 것이죠.

구글이나 페이스북이 라이트 버전 앱을 만들거나, 웹사이트를 더 빠르게 만들기 위해 PWA(Progressive Web APP)등의 새로운 규격을 개발하는 것도 이런 이유 때문입니다. 똑같은 수의 사용자를 기준으로 볼 때, 가벼운 웹사이트는 서버의 유지비용도 줄어드니 어찌 보면 합리적인 선택이라고 볼 수도 있겠네요.

자, 지금까지 알아본 렌더링에 대한 내용을 요약해보겠습니다.

• 모든 웹 브라우저는 렌더링 엔진과 자바스크립트 엔진을 갖고 있다.
• 렌더링 엔진은 HTML, CSS 문서를 읽어내 실제 웹사이트의 모습을 그려내준다.
• 일반적인 웹사이트는 0.5초에서 1초 안에 내용을 읽어 화면을 그려낸다.
• 웹사이트의 로딩 속도를 느리게 만드는 건 대부분 이미지나 웹 폰트, 첨부파일 등이다.
• 전 세계의 인터넷 속도는 평균 30Mbps가 넘지 않는다. 그래서 경량화가 매우 중요하다.

렌더링 과정에 대해 좀 더 자세한 내용을 알고 싶다면, 다음 참고자료를 확인해보세요!

<참고자료>

https://www.youtube.com/watch?v=z0HN-fG6oT4

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.