웹 통신 과정
21세기에 사는 우리는 웹 속에서 산다고 해도 과언이 아닐 정도로 웹 사이트에 머무르는 시간이 길다. 그런데 우리가 머무르는 웹 사이트는 어떻게 오는 건지 궁금하지 않나. 웹 사이트의 통신 과정에 대해 짧게 알아보자. 웹 브라우저와 웹 서버가 있다. 웹 브라우저는 웹 서버에 저장된 정보(이미지, 텍스트) 등을 요청한다. 이를 HTTP Request라고 하고, 한국어로 요청이라고 한다. 반대의 경우 우리가 로그인하는 것을 예로 들어보자. 아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 그 내용이 웹 서버로 전송이 되고, 바르게 입력했다면 로그인이 완료되고 '홍길동님 환영합니다' 같은 메시지가 노출된다. 이것을 우리는 HTTP Response라고 하며, 응답이라고 부른다. 웹 서버와 웹 브라우저를 연결하는 것은 IP주소이다. 모든 컴퓨터는 IP주소를 가지고 있다. 이 IP 주소는 255.255.255.255와 같은 형태로 이루어져 있는데, 매번 특정 사이트를 접속할 때마다 숫자를 기억하며 입력하기 번거로운 문제가 있다. 이런 문제를 해결하기 위해 나온 것이 바로 DNS, 도메인 이름이다. 짧고 간결한 이름 하나로 12자리에 해당하는 난감한 IP주소를 대신하여 사이트를 접속하게 해주는 아주 고마운 존재이다. 웹 통신에서 클라이언트와 서버라는 두 대상이 존재한다. 클라이언트는 요청하는 입장, 서버는 제공하는 입장이라고 이해하면 쉬울 것이다.
웹 브라우저 기능
웹 통신 과정에 대해 알아보니 브라우저가 하는 일이 어떤 것이 있을지 궁금하지 않은가? 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, JS 엔진, UI 백엔드, 자료 저장소로 구성된다. 우선 사용자 인터페이스는 직관적으로 우리 눈에 보이는 부분으로서 주소창, 닫기, 최대화 버튼 등 보이는 모든 것을 사용자 인터페이스라고 볼 수 있다. 다음으로 브라우저 엔진인데, 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이를 제어하는 역할을 한다. 렌더링 엔진은 앞서 배웠던 HTML, CSS를 해석해서 화면에 콘텐츠를 표시한다. 흔히 렌더링이라고 하는 단어를 들어봤을 것이다. 통신 부분은 말 그대로 통신을 담당한다. 요청과 응답 같은 기능을 수행한다. JS 엔진은 렌더링 엔진이 하지 못한 자바스크립트 언어를 해석하고 실행하는 역할을 수행한다. UI 백엔드는 캄보 박스 같은 부분을 렌더링한다. 마지막으로 자료 저장소는 자료를 저장하는 부분으로 쿠키(Cookie)를 저장하는 곳이라고 생각하면 된다. 이러한 모든 요소들은 독립된 과정으로 처리되는 부분임을 알고 있어야겠다.
렌더링 엔진은 브라우저마다 각기 다르다. 익스플로러는 트라이던트, 크롬은 웹킷, 파이어폭스는 게코 같은 엔진을 사용한다. 이 중 유명한 구글의 크롬 브라우저는 2015년부터 Blink라는 웹킷에서 파생된 새 엔진을 사용하기 시작했다.
웹킷은 애플이 오픈소스로 개발 중인 엔진으로, 애플의 대표 브라우저인 사파리 또한 이 웹킷을 렌더링 엔진으로 사용한다. 이 렌더링 엔진의 동작 방법은 어떻게 되는지 알아보자. 우선 HTML 문서를 해석하고 그 안에서 DOM 노드로 변환, 그다음 CSS 파일과 지정된 스타일을 같이 해석하고 렌더 트리를 만든다. 렌더 트리 생성 후 각 노드가 화면에 표시되도록 배치하고, 백엔드 계층을 사용하여 배치된 노드가 웹 브라우저상에 보이게 되는 방식으로 동작한다. 그러면 애플의 렌더링 엔진, 웹킷에 대해 알아보자. 웹킷은
JS엔진, 웹코어, 웹킷 총 세 개의 구성요소로 이루어진다. JS 엔진(또는 JS 코어)은 프레임워크 라이브러리를 제공하며 웹코어는 렌더링 로직, SVG 레이아웃과 네트워크 지원 등 웹킷의 핵심적 기능을 제공한다. 웹킷 레이어는 인터페이스를 제공하는 부분이고 다양한 플랫폼에서 이식할 수 있도록 웹코어가 필요한 플랫폼 기능을 제공한다. 웹킷2도 존재하는데, 웹킷2는 멀티 프로세스 모델을 지원하기 위해 설계되었으며, 애플리케이션 ui와 별도로 동작하게 된다. 웹킷 2는 웹 프로세스와 ui 프로세스를 분리하여 강력한 보안을 보장한다.
