어느덧 웹서핑이라는 말이 밥 먹는다는 말처럼 너무나 익숙해졌습니다.

웹서핑하는 방법은 수저를 들고 밥을 먹듯 너무 쉽습니다.

1. 컴퓨터를 켠다.
   
2. IE (또는 FF등) 브라우저 아이콘을 클릭한다.
   
3. 브라우저의 주소줄에 접속하고자 하는 url을 입력하거나 즐겨찾기에서 찾아 원하는 site에 접속한다.
   
4. 해당 site에 접속이 되고 보고 싶은 글을 보거나 찾는다.
   

이 글에서는 3번에 대해서 조금 더 자세히 말씀드리고자 합니다.

이번 제로보드XE beta 0.1.7의 로딩 속도가 빨라진 원인에 대해 조금 더 부연설명을 하고자 하는 것입니다.


여러분들이 보시는 웹페이지는 글, 이미지, 플래시, 동영상등 다양한 요소들로 꾸며져 있습니다.

이 요소들은 모두 어디에 있는 걸까요?

아시다시피 모두 서버(server)에 저장되어 있습니다.

브라우저라는 클라이언트(client) 프로그램은 여러분들이 url을 입력하는 순간 서버에 접속해서 글/ 이미지/ 플래시/ 동영상등 웹페이지에 있는 모든 요소들을 안 보이게 다운로드를 하고 html에 정의된 데로 이쁘게 꾸며서 보여주게 됩니다.

이 순서를 간단히 정리를 해보겠습니다.

1. 브라우저는 입력된 url의 html 파일을 먼저 다운로드합니다.
   
2. html파일의 html 태그들을 분석하여 어떤 파일들을 추가적으로 다운로드 받아야 하는지 다음과 같이 정리를 합니다.
• <img src="../images/a.gif"... /> : a.gif 를 다운로드 해야 하는구나.
• <link rel="stylesheet" href="../a.css" /> : a.css 를 다운로드 해야 하는구나.
• <script type="text/javascript" src="../a.js"></script> : a.js를 다운로드 해야 하는구나.
• <embed src="a.flv"... /> : a.flv를 다운로드 해야 하는구나.
  
3. 2번에서와 같이 하나의 웹페이지에는 다운로드 받아야 하는 파일들이 존재하고 이를 다운로드 받습니다.
   
4. 브라우저는 다운받아진 파일과 html파일의 내용 + CSS 의 정의등을 이용해서 웹페이지를 그립니다. (렌더링)
   
5. 사용자는 최종적으로 그려진 웹페이지를 보게 됩니다.

기술적인 부분을 모두 빼고 이야기를 드렸는데 아무튼 브라우저는 내부적으로 열심히 파일을 다운받고 html 태그와 css에 정의된 내용을 바탕으로 규칙적으로 페이지를 그려내게 됩니다.

이 과정을 보면 당연히 최대한 다운로드를 덜 받고 웹페이지가 단순해야 더 빠르게 표시될 것이라 예상할 수 있습니다.

그리고 요즘 사용되는 모든 브라우저는 압축전송이라는 것을 지원합니다.

text로 되어 있는 html 파일이나 css/ js파일등을 압축해서 전송할 수 있습니다.

제로보드XE 역시 이 방식을 지원하기 시작했는데 컴퓨터에서 파일을 압축하듯 서버에서는 html/ css/ js파일등을 압축해서 보내게 되어 전송시간과 전송량이 대폭 줄어들게 됩니다.

브라우저에서는 이 압축된 파일들을 실시간으로 압축을 해제해서 보여주게 되구요.

제로보드XE는 작은 것들로 하나의 완성된 페이지를 꾸미는 것을 지향하기에 모듈화가 되어 있고 각 모듈들 마다 css/ js 파일들이 나누어져 있습니다.

XE beta 0.1.6 까지는 이 작지만 많은 파일들을 그대로 브라우저에서 다운로드 받게 하여 로딩 속도가 느렸습니다.

네트웍의 특성상 하나의 큰 파일보다 작은 여러개의 파일들을 다운로드 하는게 더 오래 걸리고 서버에도 부담이 됩니다.

XE beta 0.1.7 에서는 이 작은 파일들을 하나의 파일로 묶어서 거기다 압축 전송을 하도록 하여 전송시간과 전송량이 대폭 줄어들게 하였습니다.

인터넷 속도가 빠른 곳에서는 큰 체감 속도의 변화를 느끼지 못하지만 그렇지 못한 곳에서는 큰 변화를 느낄 수 있게 되는 것입니다.

물론 사용하는 이미지의 수를 줄이고 html 페이지를 최대한 간결하게 만드는 것이 좋습니다만 아무래도 이쁘고 다양한 기능을 가진 웹페이지를 선호하다 보니 적절한 수를 사용하도록 하는 것이 중요합니다.


덧붙여 어떤 웹페이지의 경우 컴퓨터 마다 잘 되는 곳도 있고 안되는 곳도 있습니다.

즉 서버에서 보내주는 것은 동일한데 클라이언트마다 동작하는게 다른 것은 클라이언트쪽을 의심을 해야 합니다.

위에서 설명드렸다시피 하나의 웹페이지를 꾸미는 요소들을 다운로드를 하게 되는데 클라이언트들은 다음 접속시 더 빨리 접속하기 위해서 캐시파일을 만들고 임시 저장을 하게 됩니다.

거의 대부분은 컴퓨터에 저장한 캐시파일과 서버의 파일들이 똑같지만 간혹 서버의 파일은 변경되었는데 컴퓨터의 캐시 파일은 변경이 되지 않는 경우가 있습니다.

이럴 경우 브라우저의 임시 인터넷 파일을 지워보시는 것이 좋습니다.