브라우저는 프론트엔드 개발자들이 만든 어플리케이션이 실행되는 환경이기 때문에, 프론트엔드 개발자라면 누구나 알고 있어야할 지식입니다.
가령, "브라우저가 화면을 그리는 원리"나 "브라우저의 렌더링을 최적화 하는 법" 같은 질문은 면접장에서도 많이 받는다고 하니 꼭 알고있어야겠죠?
그렇다면 우선 브라우저가 과연 무엇인지부터 알고 넘어가도록 합시다.
웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어입니다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 합니다.
이처럼 브라우저는 웹 페이지를 가져오기 위해서, HTTP(HyperText Transder Protocol)라고 하는 통신규약을 이용해 웹 서버와 통신을 하는 하나의 어플리케이션입니다.
주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러(현재는 MS에서 지원을 중단한 상태)/마이크로소프트 엣지(MS가 새롭게 권고하는 웹 브라우저), 오페라, 삼성 인터넷, 사파리가 있습니다. (위 이미지를 누르면 Mozilla 재단에서 최신 브라우저들의 비교를 볼 수 있습니다)
그럼 지금부터 이 브라우저들이 하는 역할과 작동 원리에 대해서 살펴봅시다.
브라우저의 기능
브라우저의 대표적인 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 이 때, 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수도 있습니다. 이 외에도 북마크 관리자, 다운로드 관리자, 웹 구성물 캐시, 플러그인을 통한 다양한 매체 지원 등이 브라우저의 주요 기능이라고 할 수 있습니다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현했고, 일명 브라우저 전쟁이라 불리던 시절에는 각 브라우저들이 독자적인 방법으로 확장함으로써 무질서가 강해졌습니다. 이에 따라 웹 제작자가 심각한 호환성 문제를 겪었지만, 수 년간 서로의 장점을 모방하며 진화한 끝에 최근에는 대부분의 브라우저가 표준 명세를 따르게 되었습니다.
아래는 표준 명세에서 제시하는 기능들입니다.
- HTTP, HTTPS
- HTML, XML, XHTML
- GIF, PNG, JPEG, SVG 등을 포함한 그래픽 파일 포맷
- CSS, Javascript
- 쿠키와 디지털 인증서
- 즐겨찾기 아이콘(파비콘) 및 플러그인 지원
위 예시 말고도 사용성과 접근성을 위해 URL과 폼 데이터의 자동 완성 및 탭 브라우징과 같은 기능을 제공합니다.
물론 여전히 브라우저간 차이와 특화된 기능도 존재합니다. 유즈넷 뉴스나 IRC(Internet relay chat), 이메일 등을 지원하는 브라우저가 있는가 하면, 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있습니다. 이 처럼 브라우저 간의 차이는 그들이 지원하는 기능에 따라 구별되며, 때로 크로스 브라우징(Cross Browsing) 이슈와 같은 심각한 호환 문제를 일으키기도 합니다. 크로스 브라우징 이슈에 대해서는 다음 포스트에서 자세히 다루도록 하겠습니다.
브라우저의 구조
브라우저의 주요 구성 요소는 아래 그림과 같습니다.
사용자 인터페이스
요청한 페이지를 보여주는 창을 제외한 모든 부분으로 주소 표시줄, 이전/다음 버튼, 북마크 메뉴등이 이에 해당합니다.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
렌더링 엔진
요청한 컨텐츠를 표시합니다. 만약 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
통신
HTTP 요청과 같은 네트워크 호출에 사용됩니다. 이것은 플랫폼의 독립적인 기능이고 각 플랫폼의 하부에서 실행됩니다.
UI 벡엔드
콤보 박스나 글 입력 폼 등의 기본적인 장치를 그립니다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용합니다.
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행합니다.
자료 저장소
자료를 저장하는 계층으로 쿠키나 로컬 스토리지등의 자료가 저장되는 저장소입니다. HTML명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있습니다.
정리
웹 브라우저가 어떤 일을하며 무엇으로 구성되어 있는지를 알아봤습니다. 하지만 글 초반에 나왔던 "브라우저가 화면을 그리는 원리"나 "브라우저의 렌더링을 최적화 하는 법"같은 질문에는 아직 답을 할 수 없습니다. 이를 알기 위해서는 앞서 설명했던 렌더링 엔진에 대해 더욱 자세히 알 필요가 있습니다.
다음 글에서는 렌더링 엔진에 대해 다루도록 하겠습니다.
참고 자료
