brunch

연재 중 비전공자여도 괜찮은 IT 지식 01화

1 라이킷 180 댓글 19

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 고코더 Dec 12. 2023

웹이 뭐지..? 팀버너스리와 웹 브라우저

웹

2012년 런던 올림픽 개막식의 성대한 막이 올랐습니다. 올림픽 개막식은 그 나라를 대표하는 인물들이 등장하기 마련입니다. 문화의 중심지라는 별명답게 런던 올림픽 개막식에 등장한 인물들을 살펴보면 '해리 포터의 작가 조앤롤링', '007 제임스본드', '미스터 빈', ', '마에스트로 사이먼 래틀', '엘리자베스 여왕'까지 화려한 라인업입니다. 그런데 저에게는 좀 더 특별한 등장인물이 있습니다. 공연 중 무대 위에 키보드를 두드리는 한 신사가 등장하는데 바로 '팀 버너스 리'입니다.

팀 버너스리는 전 세계인을 하나로 묶어주었습니다. 그리고 인류의 삶을 더욱 윤택하고 편리하게 만든 인물입니다. 그러한 공로를 인정받아 영국 왕실로부터 경(Sir) 작위를 받기도 하였습니다. 그는 우리가 지금 이 순간에도 사용하고 있는 웹(web)을 만든 인물입니다. 월드 와이드 웹(World Wide Web)은 인터넷에 연결된 전 세계 사용자들이 정보를 공유할 수 있는 장소를 말합니다. 줄여서 앞 글자의 약자를 따서 'WWW'이라고도 말합니다. 좀 더 줄여서 간단하게 'W3'라고도 말하지만 가장 보편적으로 쓰는 표현은 오늘 함께 배울 웹(web)입니다.

웹의 구성

일상에 자연스럽게 녹아든 '웹'은 아침부터 저녁까지 우린 웹상에서 제공된 정보를 확인합니다. 아침 일찍 일어나 일기 예보부터 금융 거래까지 모든 걸 가능케 합니다. 여러분에게 편리함과 정보를 제공하는 웹을 제공하기 위해서는 개발자들의 많은 노력이 필요로 합니다. 노력이라니 거창한 거 같지만 웹을 구성하는 요소들을 살펴보면 그 이유를 조금이나마 알 수 있습니다.

1. 웹 브라우저

1-1. 크로미움

인터넷이 정보의 바다라는 표현 자주 들어보셨죠? 그렇다면 바다를 탐험하기 위해서는 배가 필요로 합니다.

그 배가 바로 '브라우저'입니다. 여러분은 어떤 브라우저를 즐겨 사용하시나요? 구글이 만든 크롬?, 네이버가 만든 웨일?, 마이크로 소프트가 만든 엣지? 혹은 러시아에서 개발된 얀덱스? 참고로 저는 웨일을 사용합니다. 여러분들은 아마도 크롬이 아닐까요? 회사에서는 엣지 브라우저를 쓰라고 권장하더군요. 그런데 사실 지금 말한 이 브라우저들은 모두 같은 엔진을 사용한 브라우저입니다. 바로 '크로미움' 기반으로 제작되었기 때문입니다.

크로미움은 2008년 9월 구글에서 시작된 프로젝트입니다. '오픈소스 프로젝트'이기 때문에 구글 개발가 아니더라도 코딩을 잘하는 사람이라면 개발에 참여할 수 있습니다. 이 프로젝트를 통해 만들어진 소스코드로 완성한 브라우저가 바로 크로미움입니다. 그러므로 누구나 크로미움 소스코드를 무료로 다운로드하여서 입맛에 맞게 수정할 수 있습니다. 그 덕분에 크롬, 웨일, 엣지 처럼 각 회사에 맞게 발전시켜 브라우저를 출시할 수 있게 되었습니다.

1-2. 인터넷 익스플로러의 종말

윈도 운영체제를 설치하면 기본으로 설치되는 '인터넥 익스플로러'를 아시는 분 계신가요? 이 브라우저는 어느 날 갑자기 바람과 함께 사라졌습니다. 그리고 대부분의 사용자들은 크로미움 기반의 브라우저를 기본으로 사용 중입니다. 이게 무슨 일일까요? 마이크로 소프트는 인터넷 익스플로러의 서비스를 종료한다고 밝힙니다. 그 종료일은 2022년 6월 15일입니다. 과거 점유율 95% 였던 26년 만에 과거의 역사 속으로 사라집니다. 갑자기 왜 왕좌를 크로미움으로 넘겨줬을까요?

인터넷 익스플로러는 악성코드 유포가 쉬운 구조를 가지고 있다고 합니다. 보안에 취약하다는 뜻이죠. 그리고 우리를 끔찍하게 괴롭히던 액티브 X, 플러그인등도 인터넷 환경을 매우 불편하게 만들었습니다. 결정적으로 모바일 시대를 따라가지 못한 점도 있습니다. 안드로이드의 크롬과 애플의 사파리의 점유율에 그 자리를 내어주었습니다.

1-3. 브라우저의 원리

기업들이 이렇게 브라우저의 생태계를 치열하게 구성하는 이유는 무엇일까요? 바로 여러분이 웹을 조금 더 손쉽게 접속할 수 있게 도와주기 위해서입니다. 스마트폰으로 1초 만에 지금 일어나는 지구 반대편 소식을 들을 수 있는 비결도 바로 웹 브라우저 덕분입니다. 그렇다면 웹이란 공간을 누릴 수 있게 해주는 브라우저의 원리를 간단하게 살펴보겠습니다.

아주 쉽게 원리를 설명해 볼까요? 브라우저는 '요청'과 '응답'을 처리합니다. 요청자는 여러분 즉 사용자고 응답자는 서버입니다. 자 주머니 속 스마트폰을 꺼내 들고 크롬을 실행해 보겠습니다. 그리고 구글에 접속합니다. 검색어를 입력하셨나요? 이제 검색버튼을 눌러보겠습니다. 그럼 브라우저는 구글 서버로 요청 사항을 전송합니다. 평소에 웹사이트에서 각종 버튼을 클릭하는 모든 행위가 요청입니다. 브라우저는 매번 여러분의 요청을 대신해서 서버에 전달하고 있는 셈이죠. 참 기특합니다. 그렇다면 요청을 받은 쪽은 이제 무엇을 해야 할까요? 사용자의 브라우저의 응답 값을 보내야 합니다. 검색을 요청에 합당한 응답 값을 구글 서버는 브라우저에게 전달합니다. 브라우저는 그 응답값을 화면에 보여주기만 하면 끝입니다. 이때 화면에 응답값을 그려주는 역할을 하는 기능이 바로 랜더링 엔진입니다.

1-4. 브라우저가 고용한 화가 랜더링 엔진

랜더링 엔진은 화가입니다. 분야는 어떤 사물을 보고 똑같이 그리는 극사실화입니다. 크로미움 기반의 브라우저에서는 이런 화가의 이름을 '블링크(Blink)' 엔진이라고 합니다. 이러한 랜더링 엔진은 서버에서 보낸 응답값 그대로 브라우저의 그림을 그립니다. 소스코드에 담긴 요소들이 크기, 너비등을 참고하고 텍스트는 얼마나 커야 하는지, 간격은 얼마나 되어야 하는지 또 색상은 어떤지 등을 계산해 실시간으로 그려줍니다. 응답 값을 설명서처럼 참고해 화면에 즉석으로 그려냅니다. 그런데 사피라와 파이어 폭스는 각각 'webkit'와 'Gecko'등의 랜더링 엔진을 사용합니다. 화면을 그려내는 화가가 다른 셈입니다. 그래서 응답값을 해석하는 약간의 견해 차이가 있어 스타일이 조금씩 달라지기도 합니다.

그렇다면 랜더링 엔진은 어떤 재료를 가지고 그림을 그릴까요? 일반적으로 세 가지 재료를 가지고 있습니다. HTML과 CSS, 자바스크립트입니다. HTML은 텍스트, 이미지 등을 다룹니다. 웹의 뼈대라고 할 수 있습니다. CSS는 스타일을 정합니다. 어떤 색상으로 구성됐고, 그림이나 텍스트를 어떻게 배치할지를 다룹니다. 자바스크립트는 HTML을 움직이지 않는 그림들을 움직일 수 있게 만들어 줍니다. 하지만 이 복잡한 과정을 랜더링 엔진은 순식간에 처리합니다. 속도가 굉장히 빠르기 때문에 그리는 과정을 보기 어렵습니다. 하지만 구글이 만든 크롬 확장 프로그램 구글의 라이트 하우스(Light House)를 이용하면 웹의 화면이 그려지는 과정을 차례대로 확인하실 수 있습니다.

인터넷 시대를 살아가는 우리에게 없어서는 안될 브라우저는 지금도 우리를 위해 열심히 인터넷을 항해중입니다.

keyword