주소입력창
모든 것은 주소 입력창에서부터 시작된다. 여러분이 주소 표시창에 URL을 입력하고 엔터를 땅 치는 순간 데이터는 1초에 지구를 5바퀴 도는 맹렬한 속도로 여행을 시작한다. 이 단순한 행위의 이면에는 놀랍도록 기민하고, 복잡하면서, 광활한 맥락이 숨어있다. 주소표시창을 시작점으로 도대체 무슨일이 일어나고 있는지 알아보자.
URL
예를들어, '오픈튜토리얼스'에 접속을 한다고 했을 때 주소입력창에 입력하는 http://opentutorials.org를 URL이라고 부른다. URL을 입력하면 여러분의 브라우저는 오픈튜토리얼스의 컴퓨터까지 단숨에 달려가서 홈페이지를 요구한다. 그렇게 받아온 오픈튜토리얼스의 홈페이지를 브라우저에 표시한다. 여러분이 단순한 사용자라면 인터넷에 대해서 알아야 할 것은 이것 뿐이다. 하지만, 그 이면의 메커니즘이 궁금하거나, 네트워크를 다루는 엔지니어라면 도대체 막후에서 무신일이 일어나고 있는지 궁금할 것이다.
아래의 URL을 브라우저의 주소입력창에 입력해보자.
http://opentutorials.org/user/course/1/logo.html
브라우저는 제일 먼저의 위의 URL을 분석한다. 각각의 요소들의 의미는 아래와 같다.
| 샘플 | 이름 | 설명 |
|---|---|---|
| http | 프로토콜 | 어떤 방식으로 통신할 것인지를 결정한다. 웹은 http를 사용하고, 파일전송은 ftp을 사용한다. |
| // | 구분자 | //뒤에 나타나는 문자가 서버의 위치를 나타낸다는 사실을 구분해준다. 웹의 창시자인 팀버너스리는 //가 불필요한 것이었다며 사과한다. 멋지지 않은가? |
| opentutorials.org | 서버명 | 정보를 제공하는 opentutorials.org의 컴퓨터로 찾아가는 방법인 인터넷 주소, |
| /user/course/1/ | 디렉토리명 | logo.html이라는 파일이 오픈튜토리얼스의 컴퓨터 상에 위치하는 디렉토리(폴더) |
| logo.html | 파일명 | http://opentutorials.org/user/course/1/logo.html 로 접근했을 때 출력되는 정보들이 담겨 있는 파일의 이름 |
위의 내용을 다시 말로 정리해보면 이렇다.
헤이, 브라우저 지금 나는 생활코딩의 로고와 링크가 표시되는 어떤 웹페이지에 접속하고 싶은데, 그 웹페이지는 logo.html이라는 파일에 담겨져 있거든. 이 파일은 opentutorials.org라는 주소가 가리키는 컴퓨터에 /user/course/1이라는 디렉토리에 저장되어 있어. 이것 좀 가져와서 나한테 보여줘.
그럼 브라우저는 logo.html 파일을 저장하고 있는 컴퓨터인 opentutorials.org을 찾아간다. 오픈튜토리얼스를 만난 브라우저는 오픈튜토리얼스의 컴퓨터에게 /user/course/1 디렉토리에 저장된 logo.html을 달라고 '요청'한다. 오픈튜토리얼스의 서버는 logo.html 파일을 전달하는데 이 파일 안에는 아래와 같은 내용이 들어있다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <img src="http://opentutorials.org/user/course/1/94.png" /><br /> <a href="http://opentutorials.org/course/1">생활코딩</a> </body> </html>
HTML
이것이 HTML이다. 브라우저는 오픈튜토리얼스 컴퓨터가 전달한 logo.html 파일에 적혀있는데로 웹페이지를 표시한다. 예를들면 위의 코드 중에 아래의 내용은 PNG 이미지 파일인 http://opentutorials.org/user/course/1/94.png 를 웹페이지에 표시하라는 의미다.
<img src="http://opentutorials.org/user/course/1/94.png" />
구글 크롬 개발자 도구를 이용한 네트워크 분석
출처 : Valdstudio
