스테이지1. Background: Web Browser

도구로서의 소프트웨어는 반복적인 작업을 자동화하여 일의 능률을 높이고, 복잡한 기능을 쉽게 사용할 수 있도록 단순하고 직관적인 인터페이스를 제공합니다.

현대의 워드 프로세서에서는 굵기, 이탤릭체, 밑줄 긋기 등의 기능을 단축키로 쉽게 사용할 수 있고 이외에도 다양한 기능들을 지원합니다. 원고지에 글을 작성하거나, 타자기로 글을 찍어낼 때보다 훨씬 쉽고, 편리하게 글을 쓸 수 있게 됐습니다. 인터페이스도 단순하여 사용법을 따로 공부하지 않아도 금세 익숙해질 수 있습니다.

소프트웨어는 발전할수록 이용자 친화적인 인터페이스를 제공하면서 사용법은 쉬워지고, 다양한 기능을 제공합니다. 그만큼 소프트웨어는 내부에서 처리하는 연산이 점점 많아지고 복잡해질 수밖에 없습니다. 이는 물에 떠 있는 오리가 물밑에서는 발을 열심히 구르고 있는 것과 같습니다. 대표적인 소프트웨어로 웹 브라우저(Web Browser)가 있습니다.

이번 강의에서는 브라우저의 기능과 역할에 대해 배워볼 것입니다. 이용자가 주소를 입력하고 웹 페이지가 보일 때까지 브라우저가 하는 역할을 살펴볼 것입니다. 이번 강의에서 다루는 내용은 이후 강의에서 브라우저에 적용된 보호 기법과 클라이언트 사이드의 취약점을 배울 때 도움이 될 것입니다.

웹 브라우저

웹은 인터넷이라는 글로벌 네트워크 위에 구현되어 있으며, 정해진 프로토콜을 기반으로 통신합니다. 개발자가 아닌 일반 이용자가 이러한 규칙을 이해하고 인터넷을 사용하기는 매우 어렵습니다. 만약 그랬다면 지금처럼 SNS와 커뮤니티가 활성화되지는 못했을 것입니다. 20세기에 등장한 웹 브라우저는 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 위와 같은 문제를 해결하였습니다.

웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나입니다. 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지는 전혀 알지 못합니다.

해당 그림은 이용자가 주소창에 leeyoonho.com 을 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작을 나열한 것입니다.

웹 브라우저의 주소창에 입력된 주소를 해석 (URL 분석)
leeyoonho.com 에 해당하는 주소 탐색 (DNS 요청) (DNS에 대한 설명은 강의 후반부에 다뤄집니다.)
HTTP를 통해 leeyoonho.com 에 요청
leeyoonho.com 의 HTTP 응답 수신
리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)

최근에는 브라우저가 보안과 개발에 필요한 다양한 도구들도 제공하고 있습니다. HTTPS의 적용 여부 및 서버 인증서의 안전성 여부를 식별해주는 것이 있습니다. 다음 장부터는 각 동작에 대해 자세히 알아보도록 하겠습니다.

URL

URL은 Uniform Resource Locator의 약자로, 웹에 있는 리소스의 위치를 표현하는 문자열입니다. 브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에게 요청합니다. 다음은 URL의 예시입니다.

URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성됩니다. 이 중 자주 사용되는 요소는 다음과 같습니다.

요소	설명
Scheme	웹 서버와 어떤 프로토콜로 통신할지 나타냅니다.
Host	Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보를 가지고 있습니다.
Port	Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보를 가지고 있습니다.
Path	접근할 웹 서버의 리소스 경로로 '/'로 구분됩니다.
Query	웹 서버에 전달하는 파라미터이며 URL에서 '?' 뒤에 위치합니다.
Fragment	메인 리소스에 존재하는 서브 리소스를 접근할 때 이를 식별하기 위한 정보를 담고 있습니다. '#' 문자 뒤에 위치합니다.

오른쪽 탭에서 원하는 URL을 입력하면 해당 URL의 구조를 볼 수 있습니다. URL에 대한 더 자세한 정보는 RFC 3986에서 확인할 수 있습니다.

Domain Name

URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타냅니다. Host는 Domain Name, IP Address의 값을 가질 수 있습니다. IP Address는 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소입니다. 불규칙한 숫자로 이루어진 IP Address는 사람이 외우기 어려우므로, 일반적으로는 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용합니다.

Domain Name을 Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용합니다. 예를 들어, 웹 브라우저에서 http://example.com에 접속할 경우, DNS에 질의해 얻은 example.com의 IP와 통신합니다.

Domain Name에 대한 정보는 MacOS/Linux/Windows에서 nslookup 명령어를 사용해 확인할 수 있습니다.

$ nslookup example.com
Server:		8.8.8.8
Address:	8.8.8.8#53

Non-authoritative answer:
Name:	example.com
Address: 93.184.216.34

웹 렌더링

웹 렌더링(Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위를 말합니다. 서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달합니다. 예를 들어, 서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줍니다.

웹 렌더링은 웹 렌더링 엔진에 의해서 이뤄지는데, 브라우저별로 서로 다른 엔진을 사용합니다. 사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 엔진을 사용합니다. 각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 같습니다.

마치며

이번 강의에서는 웹 브라우저의 기본 개념과 동작 원리, URL, 그리고 웹 렌더링 과정에 대해서 알아보았습니다. 앞서 언급했듯이 웹 페이지의 문제점을 찾기 위해서는 브라우저의 역할에 대해서 자세히 알고 있어야 합니다. 해당 강의에서 다룬 내용은 이후 강의에서 자주 등장하는 개념이므로, 꼭 이해하고 넘어가시기 바랍니다.

다음 강의에서는 웹 서비스 진단 및 디버깅에 사용되는 웹 브라우저의 개발자 도구에 대해서 알아보겠습니다.

키워드

웹 브라우저(Web Browser): 웹 브라우저는 HTTP/S로 이용자와 웹 서버의 통신을 중개하며, 서버로부터 전달받은 다양한 웹 리소스들을 가공해 이용자에게 효과적으로 전달합니다. 이용자가 다양한 프로토콜들을 알지 못해도 쉽게 웹을 사용할 수 있도록 도와줍니다.
URL(Uniform Resource Locator): URL은 리소스의 위치를 나타내는 문자열로, 브라우저는 이를 사용하여 서버에 특정 리소스를 요청할 수 있습니다.
DNS(Domain Name Server): Host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환합니다.
웹 렌더링(Web Rendering): 서버로부터 받은 리소스를 이용자에게 시각화하는 것을 말합니다.

Web Browser