서론(Introduction)
때로는 어떤 작용의 보이지 않는 내부절차에 대해 알게 되는 경우가 있습니다. 여러분에게 오늘은 운이 좋은 날입니다. 이제부터 저는 여러분도 이미 익숙해졌을 가장 주목받는 기술, 월드 와이드 웹의 뒷이야기를 할까 합니다. 음악 큐!
이 글은 월드 와이드 웹을 움직이는 다음과 같은 기반 기술에 대해 다룹니다:
- 하이퍼텍스트 마크업 언어(HTML)
- 하이퍼텍스트 전송 통신규약(HTTP)
- 도메인 네임 시스템(DNS)
- 웹 서버와 웹 브라우저
- 정적, 동적 콘텐츠
이것들은 매우 근본적인 요소입니다 — 여기서 다루게 될 내용 대부분은 여러분이 더 좋은 웹 사이트를 만드는 데 도움이 되지는 않겠지만, 고객이나 다른 사람들과 웹에 대하여 이야기할 때 사용할 수 있는 적절한 용어를 제공해줄 것입니다. 사운드 오브 뮤직에서 가정교사가 된 슬기로운 수녀님이 하신 말씀처럼 읽을 때는 ABC부터, 노래할 때는 도레미부터
입니다. 이 글에서는 컴퓨터가 HTTP와 TCP/IP를 통해 실제로 어떻게 통신하는지 간단히 살펴보고, 이어서 인터넷을 구성하는 웹 페이지 제작에 함께 사용되는 언어들에 대해 알아볼 것입니다. 이 문서의 내용은 다음과 같습니다:
컴퓨터는 인터넷을 통해 어떻게 통신하는가?(How do computers communicate via the Internet?)
감사하게도 컴퓨터는 간단하게 이해할 수 있습니다. 월드 와이드 웹이 나타나고, 페이지 대부분은 HTTP라는 공통 규약을 사용하여 전달되는 HTML이라는 언어를 일관적으로 사용하고 있습니다. HTTP는 인터넷의 공용어(규격)로서, 이를 통하면 윈도우즈 컴퓨터가 최신, 최고(最古) 버전의 리눅스를 구동하는 컴퓨터와 화음을 맞춰 노래할 수 있게 됩니다(도 레 미!). 웹 브라우저 — HTTP를 해석하여 HTML을 인간이 읽을 수 있는 형식으로 전환하는 특수한 소프트웨어의 종류 — 를 사용하면, 컴퓨터의 종류를 불문하고 HTML로 제작된 웹 페이지는 전화, PDA, 심지어는 인기 비디오 게임 시스템에서조차 읽어볼 수 있습니다.
웹 페이지 제작에 같은 언어가 사용되기는 하지만, 웹에 접근할 수 있는 다양한 기기는 다른 기기와 대화할 수 있도록 하는 몇 가지 규칙이 필요합니다. 이는 수업에서 질문을 하려면 우선 거수(擧手)를 배워야 하는 것과 마찬가지입니다. HTTP는 인터넷에서 이와 같은 기본규칙의 기반이 됩니다. HTTP로 인해 (여러분의 컴퓨터와 같은) 클라이언트 기기는 그것이 바로 서버에 대한 웹 페이지 요청의 발생이라는 것을 인식합니다. 서버는 웹 사이트가 실제로 존재하는 컴퓨터입니다. 여러분이 브라우저에 웹 사이트의 주소를 입력하면, 서버는 그 요청을 받아 여러분이 원하는 웹 페이지를 찾아내고, 그 페이지를 되돌려주어 최종적으로 여러분의 웹 브라우저에 그 페이지가 표시됩니다.
요청/응답 주기 분석(Dissecting a request/response cycle)
지금까지 컴퓨터가 인터넷을 통해 통신하는 전체 절차를 살펴보았으며, 이제 HTTP 요청/응답 주기에 대해 더 자세히 알아보겠습니다. 아래의 절차를 따라주시면 일부 개념에 대해서는 여러분께 더 효과적으로 개념을 전달할 수 있도록 직접적인 시연이 가능합니다.
모든 요청/응답은 웹 브라우저의 주소창에 http://dev.opera.com과 같은 URL을 입력하면서 시작됩니다. 브라우저를 열고 설명대로 하십시오.
여기서 여러분이 알지 못하는 사실은 웹 브라우저는 서버에 웹 사이트를 요청하고자 URL을 사용하지는 않는다는 점입니다. 여기에는 (기본적으로 서버마다 붙여진 전화번호나 우편번호라 볼 수 있는) 인터넷 통신규약 또는 IP 주소가 사용됩니다. 예를 들어, http://dev.opera.com의 IP 주소는 213.236.208.98입니다.
브라우저의 새 탭이나 새 창을 열어, http://www.apple.com을 입력하고 엔터를 누르세요. http://17.149.160.10/도 입력하고 엔터를 누르세요 — 동일한 사이트가 나타날 것입니다. 주소창에http://213.236.208.98를 입력하고 엔터를 눌러 보세요 — 403 "Access Denied" 오류가 표시되겠지만, 1단계에서 보았던 서버 주소와 동일한 곳입니다. 오류는 이 서버의 실행 루트에 접근할 권한이 없기 때문입니다.
http://www.apple.com은 기본적으로 http://17.149.160.10/의 별명처럼 동작합니다. 그러나 왜, 어떻게 그럴 수 있는 걸까요? 이는 사람들이 긴 숫자보다 단어를 더 잘 기억하는 경향이 있기 때문입니다. 이런 체계가 동작하게 해주는 것은 DNS라 불리는 것으로, 본질적으로 인터넷에 연결된 모든 기기의 포괄적인 자동화 파일 목록입니다. 주소창에 http://dev.opera.com를 입력하고 엔터를 누르면, 주소가 네임 서버로 전해져 그것과 연결되는 IP 주소를 찾게 됩니다. 인터넷에 연결된 기기는 숫자가 상당하기 때문에, 모든 DNS 서버마다 인터넷에 연결된 모든 기기를 목록화하고 있는 것은 아닙니다. 따라서 요청을 만족하는 올바른 서버를 조회해볼 수 있는 적절한 시스템이 존재합니다.
그리하여 DNS 시스템이 www.opera.com 웹 사이트를 검색하여 그 사이트가 17.149.160.10에 위치한다는 것을 찾아내고 웹 브라우저로 IP 주소를 되돌려줍니다.
IP 주소를 되돌려받은 클라이언트는 IP 주소로 요청을 보내고 응답을 기다립니다. 모든 절차가 제대로 되면 서버는 모든 것이 OK라는 짧은 메시지에 이어 웹 페이지 자체를 클라이언트로 되돌려 줍니다(그림 1을 볼 것). 메시지의 종류는 HTTP 헤더에 포함됩니다.
그림 1: 이 경우처럼 모든 것이 정상이면 서버는 올바른 웹 페이지를 되돌려줍니다.
URL을 잘못 입력한다든가 하는 적절치 못한 상황이면, 대신에 웹 브라우저로 HTTP 오류가 돌아올 것입니다 — 악명높은 404 “page not found” 오류는 여러분이 마주치게 될 가장 일반적인 예입니다.
존재하지 않는 http://dev.opera.com/joniscool.html 주소를 열어보려 하면 404 오류가 돌아올 것입니다. 사이트에 따라 존재하지 않는 페이지를 열어보려 시도할 때 돌아오는 페이지의 모양새가 다를 수 있습니다. 이는 웹 개발자에 따라 웹 서버의 기본 오류 페이지를 그대로 사용하는가 하면 오류 페이지의 코드를 새로 제작하기도 하기 때문입니다. 이는 이 코스에서는 다루지 않는 고급 기술이지만, 곧 dev.opera.com의 다른 글에서 다뤄질 것으로 생각합니다.
마지막으로 URL에서 주목할 점은 일반적으로 사이트에 처음으로 접근하는 URL은 주소의 끝에 파일명이 명시적으로 존재하지 않으며(예 http://www.mysite.com/), 이어지는 페이지 역시 그럴 수도 있고 아닐 수도 있다는 사실입니다. 실제로는 항상 파일에 접근하는 것이지만, 때에 따라 웹 개발자가 URL에 파일명이 표시되지 않도록 서버를 설정하기도 합니다 — 이는 종종 주소를 더 말끔하게 만들어 URL이 더 쉽게 기억되도록 도움이 되며, 웹 사이트의 사용자에게 더 나은 경험을 제공합니다. 다시 말씀드리면 이는 상당히 고급 기술이기 때문에, 이 코스에서는 이를 어떻게 적용하는지에 대한 방법은 다루지는 않습니다. 추후에 다른 글에서 서버에 파일을 올리는 법과 파일/폴더 디렉터리 구조에 대해 다룹니다.
콘텐츠 형식(Types of Content)
지금까지 HTTP 요청/응답에 대해 알아보았습니다. 이제는 인터넷 상에서 여러분이 접하게 될 콘텐츠의 형식에 대해 주의를 환기시키려 합니다. 저는 콘텐츠를 일반 텍스트, 웹 표준, 동적 웹 페이지, 애플리케이션이나 플러그인을 요구하는 형식의 4가지 형식으로 구분하고 있습니다.
일반 텍스트(Plain text)
웹 표준이나 플러그인이 등장하기 전의 진짜 초기 인터넷에서는 확장자가 txt이거나 이와 유사한 일반 텍스트, 그리고 이미지만 주로 사용되었습니다. 인터넷 상에서 일반 텍스트 파일이 나타나면 브라우저는 어떠한 처리도 없이 그 파일을 있는 그대로 출력합니다. 일반 텍스트 파일은 대학 사이트에서 자주 볼 수 있습니다.
웹 표준(Web Standards)
월드 와이드 웹을 구성하는 기본은 HTML(또는 XHTML, 여기서는 의도적으로 이 둘이 상호교환 가능한 것으로 다뤄질 것입니다), CSS, 자바스크립트의 세 가지 웹 표준입니다.
하이퍼텍스트 마크업 언어(Hypertext Markup Language)라는 명칭은 목적 대로 사용된다는 전제 하에서 매우 훌륭한 작명(作名)입니다. HTML은 문서의 구획을 나누고, 콘텐츠와 구조를 지정하며, 각 부분의 의미를 정의하기 위해 사용됩니다(웹 사이트에서 볼 수 있는 모든 텍스트 등이 포함됩니다). HTML에서는 페이지를 별도의 구성요소로 구분하고자 요소(elements)를 사용합니다.
CSS는 모든 요소에 대한 완벽한 화면출력 제어법을 제공합니다. 스타일 선언을 사용하면 모든 문단의 행간을 두 배(line-height: 2em;)로 변경한다든가, 모든 h2 요소를 녹색으로 변경하는 등의 작업(color: green;)을 쉽게 적용할 수 있습니다. 구조와 형식의 분리에는 이점이 다수 존재하는데, 이에 대해서는 이어지는 글에서 더 자세히 살펴보도록 하겠습니다. HTML과 CSS를 함께 사용할 때의 효과를 시연해보자면, 그림 2의 좌측은 추가적 포맷이 적용되지 않은 일반 HTML을 보여주며, 우측은 정확히 같은 HTML에 CSS를 적용한 결과를 보여줍니다.
그림 2: 좌측이 일반 HTML, 우측이 CSS가 적용된 HTML.
마지막으로, 자바스크립트는 웹 사이트에 동적 기능을 제공합니다. 자바스크립트를 사용하면 서버에 특별한 프로그램을 설치할 필요없이 클라이언트 컴퓨터에서 동작하는 작은 프로그램을 작성할 수 있습니다. 자바스크립트는 웹 사이트에 일부 기본적인 기능과 상호작용을 추가할 수 있게 하지만, 결과적으로 서버 사이드 프로그래밍 언어나 동적 웹 페이지를 도입할 수밖에 없는 한계가 있습니다.
동적 웹 페이지(Dynamic web pages)
인터넷을 돌아다니다 보면 때에 따라서는 html 확장자를 가지지 않는 — php, asp, aspx, jsp, 그 외의 이상한 확장자 — 웹 페이지를 만나게 됩니다. 이것은 모두 동적으로 생성되는 부분, 즉 데이터베이스, 폼, 그 외의 자료 원천으로부터 제공되는 값을 기반으로 각각 다른 결과를 표시하는 코드를 포함하고 있는 웹 페이지를 만들고자 사용되는 동적 웹 기술의 실례입니다. 이런 형식의 웹 페이지에 대해서는 아래의 정적 웹 사이트 vs. 동적 웹 사이트에서 다루겠습니다.
애플리케이션이나 플러그인을 요구하는 형식(Formats requiring other applications or plugins)
웹 브라우저는 단순히 웹 표준 등의 기술을 해석하고 표시하는 도구이기 때문에, 사용자가 복잡한 파일 형식이나 플러그인을 요구하는 기술을 담은 웹 페이지를 가리키는 URL을 요청하면, 브라우저는 그 요구되는 플러그인이 설치되어 있는 경우 그것을 이용하여 파일을 열고 그렇지 않으면 파일 자체를 컴퓨터로 다운로드 받습니다. 예를 들면:
워드 문서, 엑셀 파일, PDF, 압축 파일(ZIP, SIT 등), 포토샵 PSD와 같은 복잡한 이미지 파일, 브라우저가 이해하지 못하는 기타 복잡한 파일을 만나면, 브라우저는 일반적으로 사용자에게 그 파일을 다운로드 받을 것인지, 열어볼 것인지 물어옵니다. 후자가 파일을 다운로드 받은 후 파일을 이해하는 애플리케이션이 설치되어 있으면 그 애플리케이션을 통해 파일을 열어주는 작업까지 해주는 점을 제외하면 둘 다 기본적으로 비슷한 결과를 보여줍니다.
플래시 동영상, MP3 또는 기타 음악 형식, MPEG 또는 기타 동영상 형식을 만나면, 브라우저는 플러그인이 설치되어 있는 경우 설치된 플러그인을 사용하여 파일을 재생합니다. 설치된 플러그인이 없다면 요구되는 플러그인을 설치할 수 있는 링크 정보를 표시하거나, 파일을 다운로드하여 그 파일을 재생할 수 있는 애플리케이션을 찾습니다.
물론, 몇 가지 불분명한 경우도 있습니다. — 예를 들면, SVG는 오페라와 같은 몇몇 브라우저에는 내장되어 있지만 인터넷 익스플로러와 같은 그 외의 브라우저에서는 내장되지 않은 웹 표준입니다. 인터넷 익스플로러에서는 SVG를 해석하는 플러그인이 필요합니다. 많은 브라우저가 일부 플러그인이 미리 설치된 상태에서 제공되고 있으므로, 플러그인을 통해 표시되고 있는 내용이 브라우저 자체의 내장 기능을 통한 것이 아니라는 점을 의식하지 못할 수도 있습니다.
정적 웹 사이트 vs. 동적 웹 사이트(Static web sites vs. dynamic web sites)
그렇다면 정적/동적 웹 사이트란 무엇이며, 이 둘의 차이는 무엇일까요? 초콜릿 상자와 비슷하게 이는 전적으로 내용물의 문제입니다.
정적 웹 사이트는 그 내용인 HTML과 이미지가 항상 고정된 웹 사이트입니다. 이런 사이트는 웹 사이트의 제작자가 수동으로 서버상의 내용을 변경하기로 마음먹지 않는 한 모든 방문자에게 동일한 내용을 제공합니다. 이것은 우리가 이 글을 통해 살펴본 바와 정확히 일치합니다.
즉, 동적 웹 사이트는 서버상의 내용은 같지만, 여기에는 단순히 HTML뿐만 아니라 동적 코드도 포함되어 있어 여러분이 웹 사이트에 제공하는 정보에 따라 다른 정보를 표시합니다. 예를 보도록 하겠습니다. 브라우저를 열고 www.amazon.com으로 가셔서 각각 다른 5개의 상품을 검색하세요. 아마존에서 전송해주는 페이지는 5번 모두 전혀 다른 페이지가 아니며, 같은 페이지를 5번 전송하지만 매번 개별적인 동적 정보를 포함하고 있을 것입니다. 이 개별적인 정보는 데이터베이스에 저장되어 있는데, 데이터베이스는 요청이 있을 때 관련 정보를 받아 요청된 정보를 웹 서버로 전달합니다.
주목할 것은 동적 웹 사이트를 생성해주는 특별한 소프트웨어가 서버에 설치되어 있어야 한다는 점입니다. 정상적인 정적 HTML 파일은 html 확장자로 저장되어야 하는 반면, HTML과 덧붙여 동적 코드를 포함하고 있는 이런 파일은 웹 서버에 클라이언트로 전송되기 전에 (데이터베이스로부터 정보를 받아야 하는 등의) 임의의 처리가 필요하다는 것을 알려주는 특별한 파일 확장자로 저장되어야 합니다 — 예를 들면, PHP 파일은 php라는 파일 확장자를 갖습니다.
동적 언어에는 많은 종류가 있는데, 이미 언급했던 PHP와 파이썬, 루비 온 레일즈, ASP.NET, 콜드퓨젼을 포함하여 다른 예도 있습니다. 결국, 이런 모든 언어는 데이터베이스와 통신한다거나, 폼으로 입력받은 정보의 유효성을 검사하는 등의 상당히 비슷한 기능을 내장하고 있습니다. 그러나 이런 작업에는 언어별로 약간씩 다른 점도 있어서, 각 언어에는 나름의 장점과 단점이 존재합니다. 요는 가장 적절한 것을 찾는 것입니다.
이 코스에서는 동적 언어에 대해 추가로 다룰 예정은 없습니다만, 더 읽어보고 싶어하시는 경우를 위하여 다음의 목록을 준비했습니다.
- 레일즈: 오비 페르난데스(Fernandez, Obie), 2007, 레일즈 방법론(The Rails Way). 애디슨-웨슬리 루비 전문 시리즈(Addison-Wesley Professional Ruby Series).
- 레일즈 스크린캐스트
- PHP: 데이비드 파워즈(Powers, David), 2006, PHP 해법: 더욱 쉬운 동적 웹 개발(PHP Solutions: Dynamic web development made easy), friends of ED.
- PHP 온라인 문서
- ASP.NET: 패트릭 로런츠(Lorenz, Patrick), 2003, ASP.NET 2.0 Revealed, 에이프레스(Apress).
- ASP.NET: 온라인 ASP.NET 문서와 튜토리얼
요약(Summary)
이제 인터넷이 어떻게 동작하는지에 대한 배경 여행이 끝났습니다. 이 글에서는 여러 주제에 대하여 수박 겉핥기 수준으로 다뤘습니다만, 이들이 어떻게 관련되어, 어떻게 함께 동작하는지 살피면서 전체적으로 조망하는 데는 도움이 됩니다. 아직도 HTML, CSS, 자바스크립트를 구성하는 실제 언어 문법에 대해 학습하셔야 할 것이 많으며, 이것이 다음 목적지가 될 것입니다. 다음 글은 웹 개발의 HTML, CSS, 자바스립트 웹 표준 모델에 초점을 맞춰 웹 페이지 코드를 살펴봅니다.
연습 문제(Exercise questions)
- HTML과 HTTP에 대해 간략하게 정의하고 둘의 차이점을 설명하라.
- 웹 브라우저의 기능을 설명하라.
- 5~10분간 인터넷을 살펴보고 일반 텍스트, 이미지, HTML, PHP와 .NET(aspx) 같은 동적 페이지, PDF, 워드 문서, 플래시 동영상 등 다른 형식의 콘텐츠를 찾아보라. 이 중 일부에 접근하여 컴퓨터가 이를 표시해주는 방법에 대해 생각해 보라.
- 정적 웹 페이지와 동적 웹 페이지의 차이점은 무엇인가?
- HTTP 오류 코드 목록 찾아 그 중 5개를 열거하고, 각각이 의미하는 바를 설명하라.
- 사운드 오브 뮤직에서 가정교사가 된 슬기로운 수녀님이 하신 말씀처럼
- 영화 사운드 오브 뮤직의 주인공인 마리아는 수녀답지 않은 쾌활함과 독창성으로 인해, 수녀를 그만 두고 가정교사가 됩니다. 역자주.