while (1): study();
가상 머신으로서의 브라우저 이해하기 본문
인터넷 익스플로러라던가, 크롬과 같은 브라우저들은 인터넷과 떨어질래야 떨어질 수 없는 현대인들에게는 너무나 친숙합니다. 이렇게 친숙한 브라우저들을 우리는 조금 더 어렵게, 일종의 가상 머신이라고도 부를 수 있습니다. 가상 머신(Virtual Machine)은 하드웨어 상에 설계된 컴퓨터와는 다르게, 소프트웨어 상에서 설계된 컴퓨터를 말합니다. 그렇다면 브라우저가 하나의 컴퓨터라는건데... 어떻게 이 개념을 이해할 수 있을까요?
브라우저의 언어
컴퓨터와 대화하기 위해서, 정확히는 하드웨어 상에 설계된 컴퓨터와 대화하기 위해서는 기계어를 사용해야 합니다. 가상 머신이 하드웨어상의 컴퓨터와 다른 점은 가상 머신만의 기계어를 사용한다는 점입니다. 브라우저가 하나의 가상머신이라고 했으니 그럼 하드웨어상 컴퓨터와 대화할 때처럼 C++, 파이썬 등을 사용하기는 힘들 것 같습니다. 어떻게 해야 할까요?
우선 브라우저가 반환하는 데이터의 특징을 보겠습니다. 사용자는 URL을 통해 정보를 요청하고, 브라우저는 문서(텍스트)를 반환합니다. URL(Uniform Resource Locator; 단일 자원 지정자)은 프로토콜을 지정하는 스킴, 서버를 지정하는 IP 및 DNS를 표현하는 호스트, 마지막으로 디테일한 위치를 지정하는 경로로 구성되어 마치 정보를 요청하는 명세서같은 역할을 합니다. 우리가 정보를 요청하면 브라우저는 (우리가 보기엔) 웹페이지를 보여줍니다. 이 웹페이지는 사실 텍스트이며, 브라우저가 웹페이지 형태로 바꿔서 보여주는 것입니다. 따라서 웹 개발자들은 브라우저가 보여줄 '텍스트'를 작성해야 합니다.
이때 브라우저와 대화하기 위해서는 마크업 언어를 사용해야 합니다. 한창 인쇄가 발전하던 시절, 고객들은 인쇄공에게 '이 글씨는 굵게 해주세요. 아, 여기는 밑줄을 그어주시고요.' 등의 요구를 하기 시작합니다. 이런 요구사항을 표시하는 행위를 mark up한다고 부른다는 걸 안다면 이야기가 쉬워질 것 같습니다. 마크업 언어는 텍스트 파일에 자기가 원하는 스타일을 조금 더 지정할 수 있게 해줍니다.
초기에 마크업 언어는 IBM에서 개발한 GML(Generalized Markup Language)을 들 수 있겠습니다. 이후 조금 더 표준화된 SGML(Standard Generalized Markup Language)가 발표되고, 이는 ISO에 의해 표준으로 지정되었습니다. 하지만 사실 현대에 들어서는 SGML을 사용하지 않죠. 대신 웹이 더 많은 기능을 요구함에 따라 더 실용적이고 확장가능했던 XML(eXtensible Markup Language)이 살아남게 되었습니다. XML은 SGML의 표준을 따르고 있습니다.
최근에 쓰이는 마크업 언어에는 HTML, XML, XHTML 등이 있습니다. HTML은 Hyper Text Markup Language의 약자로, 링크를 포함한 텍스트(하이퍼텍스트)를 잡다한 요구사항을 붙여 표현하는 것을 의미합니다. HTML은 5.0부터 SGML을 따르지 않겠다고 했으나, XHTML은 XML의 표준을 따르고 있으므로 결과적으로 SGML의 표준을 따릅니다.
DOM이란?
일단 텍스트를 만들어서 보냈다고 하면, 브라우저가 그것을 웹페이지 형식으로 만들어 보여주기 위해 이해하는 과정이 필요합니다. 브라우저 내부에는 언어 파서가 있어서, 정규식의 형태로 단어와 문장을 파싱합니다. 그 결과로 반환되는 것이 파싱 트리이며, 웹 문서의 경우 특별히 DOM이라고 불리웁니다.
마크업 언어는 각 엘레멘트들의 계층적인 구조로 이루어져 있습니다. 예를 들어 HTML의 경우 <body> 엘레멘트 내부에 <b>, <section> 등의 후손 엘레멘트들이 들어가 있습니다. 브라우저가 반환하는 문서의 이런 계층적인 모델이 DOM(Document Object Model; 문서 객체 모델)입니다. 트리로 표현될 수 있는 DOM은 결국 언어 파서에 의해서 생성된 파싱 트리와 동치라고 보면 됩니다.
더 많은 기능
위에서 언급한 기능으로도 충분히 브라우저의 역할을 할 수 있겠지만, 사람들은 언제나 더 좋은 것을 원합니다. CSS(Cascading Style Sheet)는 마케터들의 이목을 끌기에 충분했습니다. CSS는 HTML의 엘레멘트를 셀렉터(selector)를 이용하여 지정한 뒤 스타일을 디테일하게 조정할 수 있었습니다. 거기에 더 이상 HTML로는 불가능했던 표현까지 가능해지며 CSS는 다소 웹 표준을 지저분하게 만들면서, 또한 시각적인 요구를 충족시켜주었습니다.
지금까지의 방식은 정적이며 매번 요청이 바뀔 때마다 새로운 페이지를 반환해줘야 합니다. 예를 들어 시간 단위로 바뀌는 날씨 정보를 브라우저에 띄우고자 할 때, 매번 새로운 페이지를 요청해서 서버에서 가져와야 합니다. 이런 불편함을 해소하기 위해 자바스크립트가 도입됩니다.
자바스크립트는 Ecma international에 의해서 표준으로 제정되었고, 이 이름을 본따 에크마스트립트라고도 불리웠습니다. 아직도 자바스크립트의 표준이 EC5 등으로 불리우는 이유가 이런 맥락에서이죠. 자바스크립트의 작동방식을 흔히 AJAX(Asynchronous Javascript And Xml)라고 부릅니다. 이는 자바스크립트의 제어 하에 Xml 포맷을 이용하여 비동기적으로 작동한다는 의미입니다. 초기 자바스크립트가 xml을 데이터 포맷으로 했던 데에서 나온 이름입니다. 현재는 json포맷을 사용하지만 아직도 일반적으로 AJAX라고 불리웁니다. 비동기적으로 작동한다는 것은 이벤트 기반으로 작동한다는 의미이며, DOM을 실시간으로 수정할 수도 있었습니다. 이를 더 간편하게 해주는 jQuery 등 라이브러리의 등장과 함께 자바스크립트의 위상은 높아졌고, 웹 페이지 또한 점점 더 고급화되었습니다.
브라우저는 인터프리터다
지금까지의 이야기를 요약해보면 브라우저는 사용자에 의해 요청받은 정보를 문서 형태로 보냅니다. 이를 위해서 마크업 언어 형태의 페이지를 파싱하고, DOM에 기반하여 내부에서 해석(Interpret)하여 웹 페이지를 보여줍니다. 추가적으로 CSS를 통한 스타일 지정 및 JS를 통한 비동기 이벤트 제어 또한 가능합니다.
인터프리터의 작동방식을 알고 있는 사람이라면 이것이 하나의 가상머신이라는 점에 크게 공감하게 됩니다. 컴파일러는 언어파서를 통해 텍스트를 파싱하고, 파싱트리를 반환합니다. 이 파싱트리를 가상머신 위에서 해석하여 프로그램을 실행시킵니다.
결국은 브라우저가 인터프리터처럼 작동한다는 것을 알게 되었습니다. 인터프리터와 가상머신이 엄밀히 같은 의미는 아니지만, 브라우저의 내부 기능적인 측면을 강조하기 위해 둘을 거의 동일한 의미로 사용하였다는 점을 밝힙니다.