3. 인터넷은 어떻게 작동하는가?

이 강좌는 Dev.Opera의 ' 3: How does the Internet work?'을 번역한 문서입니다. 번역과 관련된 안내는 여기에서 확인해 주세요.

• 역자들 : 써니, 겨미겨미, 봄눈, 이군, 유자, 호브레드, 혜윰, 비티

때때로, 행동뒤의 톱니바퀴와 팬밸트에 주목하는 비밀스런 것이 당신에게 주어진다. 오늘은 당신에게 행운의 날이다. 이미 당신이 이미 알고 있는 친숙하면서도 가장 화끈한 기술을 내가 안내할 것이다. : 월드 와이드 웹. 주제 음악 큐~!

월드 와이드 웹의 기본적인 기술:

• 하이퍼 텍스트 마크업언어 Hypertext Markup Language (HTML)
• 하이퍼 텍스트 전송 프로토콜 Hypertext Transfer Protocol (HTTP)
• 도메인 이름 시스템 Domain Name System (DNS)
• 웹 서버와 웹 브라우저 Web servers and web browsers
• 정적, 동적 컨텐츠 Static and dynamic content

이건 매우 근본적인 것들 - 대부분 대상의 범위를 벗어나지 않는다. 클라이언트와 웹에 대해 다른 사람들과 얘기할 때 당신이 적절한 언어를 사용하는 것은 더 나은 웹 사이트를 구축하는데 도움이 되지 않는다. 사운드 오브 뮤직에 나온 수녀는 말했다. “우리는 ABC로 시작하고 Mi 로 시작하는 노래를 불렀다.” 이 문서에서 보고하는 것은 http를 사용하여 컴퓨터로 의사소통하는 것은 TCP/IP, 다른 언어로 이동을 만들려는 웹페이지라는 것이다. 이 문서의 내용은 다음과 같다:

• 인터넷을 통한 의사 소통은 어떻게 하는가?
• 요청과 응답
• 컨텐츠 유형
  • 일반 텍스트
  • 웹표준
  • 동적인 웹 페이지
  • 다른 응용 프로그램이나 플러그 접속
• 정적 vs 동적인 웹사이트
• 요약
• 연습한 것 질문하기

다행히도, 우리는 컴퓨터에 간단한 것이 있다. 월드 와이드 웹에 관해서 대부분의 페이지는 같은 언어, HTTP라는 흔한 프로토콜을 사용하는 HTML로 작성되어 있다. HTTP는 윈도우 머신을 Linux의 최신 버전과 같이 조화를 이루게 하는 보통의 인터넷 언어이다. HTTP를 해석하고 HTML을 사람이 볼 수 있는 형태로 바꾸는 프로그램인 웹브라우저의 사용을 통해 (도 래 미!) HTML로 쓰여진 웹페이지는 전화기, PDA와, 심지어는 비디오게임 시스템을 통해 언제든지 읽힐 수 있다.

비록 그들이 같은 언어로 말하는 중이라도, 웹에 엑세싱 할수 있는 다양한 장비는 서로 대화 할수 있게 해주는 적절한 어떤 룰을 가질것을 필요로 한다. -이것은 수업중에 질문 할 때 손을 올리는 것을 배우는 것과 비슷하다. HTTP는 인터넷에 대한 그들의 기본적 룰을 준비한다. HTTP 때문에, 한 클라이언트 기계(당신의 컴퓨터 같이)는 서버로부터 웹페이지에 대한 요청을 시작하는것은 그 규칙중 하나가 되야한다는 알고 있다. 서버는 웹사이트가 거주하는 컴퓨터이다. - 당신이 당신의 컴퓨터에 웹의 주소를 타이핑 할때, 서버는 당신의 요청을 받고, 당신이 원하는 웹페이지를 찾는다. 그리고, 이것을 다시 당신의 웹 브라우저에 보여지도록 당신의 컴퓨터에 보낸다.

나는 모든 부분에서 컴퓨터가 인터넷과 통신하는 것을 보았었기 때문에 보다 자세히 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에러를 보게되는데 왜냐하면 당신이 이 서버의 실제 루트를 접근하는 권한을 가지고 있지 않기 때문이다.

http://www.apple.com은 기본적으로 http://17.149.160.10/을 위한 별칭으로 작동하는데 왜 그리고 어떻게 하나? 이것은 사람들이 숫자로 이루어진 긴 문자열보다 단어를 더 잘 기억하기 때문이다. 이 작업을 수행하는 시스템을 DNS(Domain Name System)이라고 부르며, 본래 인터넷에 연결된 모든 서버의 포괄적인 자동 디렉토리(comprehensive automatic directory)라고도 한다. 당신이 주소바에 http://dev.opera.com을 입력하고 엔터를 치면, 주소는 네임서버(name server)에 보내지고, IP 주소와 연결시키려고 한다. 네임서버에는 인터넷에 연결된 수많은 서버들이 있지만 모든 DNS 서버가 인터넷의 모든 서버들을 위한 목록을 가지고 있지는 않다. 그래서 당신의 요청을 만족하는 서버에서 참조될 수 있는 시스템이 있다.

그래서 DNS 시스템은 www.opera.com 웹 사이트를 보면, 17.149.160.10의 위치를 찾아서 당신의 웹 브라우저에 IP 주소를 돌려 보낸다.

당신의 컴퓨터는 서버에게 IP 주소를 요청하고, 응답이 돌아오기를 기다린다. 만약 모든게 잘 된다면, 서버는 클라이언트에게 모든 것이 괜찮다는 짧은 메세지를 돌려 보낸다. (그림 1을 보자) 이런 메세지 유형은 HTTP 헤더 안에 포함되어 있다.

그림 1: 이 경우에, 모든것이 좋고 서버는 올바른 웹 페이지를 돌려받는다.

만약 무엇인가 잘못되는 경우에, 예를들면 당신이 URL을 부정확하게 입력했다면, HTTP 에러 돌려받게 될 것이다. “페이지를 찾을 수 없습니다”라는 악명 높은 404 에러는 가장 흔한 경우다.

• http://dev.opera.com/joniscool.html 를 입력하십시오. - 페이지가 존재하지 않습니다. 그래서 당신은 404 오류를 보게 될것입니다. 몇 페이지와 다른 웹사이트에 존재하지 않는지 시도해 보십시요. 당신은 반환된 다양한 페이지들을 볼것입니다. 이것은 일부 웹 개발자들이 기본 오류 페이지를 웹 서버에 남기기 때문이고, 존재하지 않는 반환된 페이지들이 보이게 될때쯤에 다른 사용자 오류 페이지들을 코딩합니다. 이것은 이 과정에서 다루지 않은 진보된 기술이지만, 잘하면 dev.opera.com문서에 곧 소개될것이다. 마지막으로 URL에 대한 메모 - 보통 첫번째 URL의 실제 파일 이름 끝에 있는 경우 (예로 http://www.mysite.com/), 그리고 후속 페이지가 가끔 할 일을 하고 가끔은하지 않습니다. 당신은 항상 실제 파일에 액세스 하고 있지만 때때로 웹 개발자는 URL이 있는 파일이름을 나타내지 않기 위해서 웹서버를 셋업합니다. 깔끔하고 쉽게 기억하는 URL, 어떤 사용자를 위해 더 나은 경험을 인도하는 웹사이트. 우리는 다시, 확실히 진보되는 것과 같이, 이 과정에서 어떻게 이 일을 하는지 커버하지 않을것이다. 우리는 문서 마지막에 서버 및 파일/폴더 디렉토리 구조를 업로드 하는 파일을 커버합니다.

지금 당신에게 HTTP 요청/응답이 나타났다면, 지금 당신은 인터넷에서 볼것으로 예상된 다른 컨텐츠 유형에 당신의 주의를 돌릴 것입니다. 나는 4가지 유형 - 일반 텍스트, 웹 표준, 동적 웹 페이지, 그리고 다른 애플리케이션 또는 플러그인을 필요로 합니다.

인터넷 초기에, 어떤 웹표준이나 플러그인이 오기이전에, 인터넷은 주로 이미지와 .txt의 확장된 텍스트파일이나 그 유사한것뿐이었다. 평문이 인터넷을 만났을때, 어떤 과정의 복잡함의 없이 그 브라우저는 현재의 상태를 보여준다. 당신은 가끔 평문을 대학사이트에서 얻는다.

그 월드와이드웹의 기본골조는 세개의 메인 웹표준이 있다 - HTML(혹은 XHTML, 나는 우리 목적에 맞게 두 호환적인 이것을 사용할것이다), CSS 와 자바스크립트

하이퍼텍스트 마크업 랭귀지는 커뮤니티가 목적인만큼 실제로 꽤 좋은 이름이다. HTML은 문서를 나누고 내용과 구조를 명시하고, 그리고 각각의 파트의 의미를 정의하는데 사용된다.(그것은 당신이 웹사이트에서 본 모든 텍스트 등을 포함한다.) 페이지의 다른 구성을 구분하는 요소를 사용된다. 캐스케이딩 스타일 시트는 당신에게 요소가 표시하는 방법을 완벽하게 제어할수있다. 스타일 선언을 이용하여 모든 문단을 두배의 여백으로(line-height: 2em;), 또는 두번째 제목을 녹색으로(color: green;) 만들기가 쉽다. 포맷팅으로부터 구조를 분리하는것은 다수의 장점이 있고, 우리는 다음 항목에서 좀더 자세하게 볼 것이다. HTML과 CSS를 같이 사용함으로써 파워의 증거로, 그림2에서 왼쪽은 포맷팅의 거의 없는 평문이고, 오른쪽은 CSS 스타일들이 적용된 같은 HTML이다.

성공적인 요청 응답

그림 2 : 왼쪽의 단순한 HTML, 오른쪽의 CSS가 적용된 HTML

마지막으로, 자바스크립트는 당신의 웹사이트에 동적인 기능들을 제공한다. 클라이언트 컴퓨터에서 작동할 자바스크립트의 작은 프로그램을 쓸 수 있다. 서버에서 설치할 특별한 소프트웨어를 요구하지않는다.자바스크립트는 당신의 웹사이트에 기본적인 기능과 양방향 대화를 추가할 수 있지만 서버사이드 프로그램 언어들과 동적인 웹페이지를 필요로 하는 제한사항이 있다.

가끔 인터넷을 열어볼 때 당신은 . html 확장자가 없는 웹페이지들을 만나게 될 것이다. (그것들은 .php, .asp, .aspx, .jsp, 또는 다른 낯선 확장자를 가지고 있다.) 이것들은 동적인 웹 기술들의 모든 예로, 이것은 동적인 섹션을 가지고 있는 웹페이지를 만들 때 사용할 수 있다. (이들은 그 값을 예를 들어 데이터베이스, 폼, 또는 다른 데이터 소스를 다른 결과로 보여준다.) 우리는 아래 정적 대 동적 페이지 섹션에서 웹 페이지의 이러한 유형을 다루도록 하겠다.

웹 브라우저들이 웹 표준과 같은 믿을 수 있는 기술들을 해석하고 표시하는 기능만을 갖추었기 때문에 만약 당신이 복잡한 파일 포맷이나 플러그인을 필요로 하는 기술을 사용한 웹 페이지를 담고 있는 URL을 요청한다면, 그것은 당신의 컴퓨터로 다운로드 되거나 브라우저에 그 플러그인이 설치된 경우 그 플러그인을 이용하여 열게 될 것이다. 예를 들어:

• 만약 당신이 Word 문서, Excel 파일, PDF, 압축 파일(예로 ZIP 혹은 SIT), Photoshop PSD 같은 복잡한 이미지 파일, 혹은 브라우저가 이해할 수 없는 또 다른 복잡한 파일을 만나게 되는 경우, 브라우저는 보통 당신에게 그 파일을 다운로드 할지 혹은 열 것인지 물어볼 것이다. 이 두가지의 경우는 보통 비슷한 결과를 갖는다. 하지만 후자의 경우는 파일을 다운로드 한 후 그 파일을 이해할 수 있는 어플리케이션이 설치되어 있는 경우에만 열릴 것이다.
• 만약 당신이 Flash 무비, MP3 혹은 다른 음악 포맷, MPEG 혹은 다른 비디오 포맷을 만나게 되는 경우, 브라우저는 플러그인이 설치되어 있는 경우에 그것을 재생할 것이다. 만약 플러그인이 설치되어 있지 않다면 당신은 필요한 플러그인 설치 링크를 제공받거나, 혹은 파일을 다운로드하여 그 파일을 실행할 수 있는 데스크탑 어플리케이션을 통해 볼 것이다.

물론, 일부 애매한 영역이 있다. 예를 들어 SVG(Scalable Vector Graphics)는 일부 브라우저(예를 들어 오페라. IE의 경우 내장되어 있지 않다.)에 내장되어 실행되는 웹 표준이다. IE는 SVG를 이해할 수 있는 플러그인이 필요하다. 많은 브라우저들이 몇몇의 플러그인이 이미 설치되어 있는 상태로 배포되기 때문에 당신은 컨텐츠가 플러그인을 통해 표시되는지 브라우저에 내장되어 표시되는지 걱정할 필요가 없다.

그래서 정적인 웹 사이트와 동적인 웹 사이트는 무엇이고, 두가지가 어떻게 다른가? 초콜릿 상자와 같이 모든 것을 채울 수 있다:

정적인 웹 사이트는 HTML과 그래픽이 콘텐츠인 웹 사이트로 정확하게 우리가 이 기사의 대부분을 통해서 보고 있다. - 만약 웹사이트를 만든 사람이 서버에서 정적인 페이지의 사본을 수동으로 바꾸지 않는 한 어떤 방문에게나 똑같이 보여진다.

또 다른 한편으로 동적인 웹 사이트는 서버의 콘텐츠는 같지만 HTML이 같은 대신에, 동적인 코드를 포함한다. 당신이 웹 사이트에 정보를 주면 그것에 의해서 다른 정보를 보여줄 수도 있다. 당신의 브라우저에서 www.amazon.com을 열어보자. 그리고 5개의 다른 상품을 검색하. 아마존(Amazon)은 당신에게 5개의 서로 다른 페이지를 보내지 않고, 같은 페이지를 다섯번 보냈다. 하지만 매번 각기 다른 동적인 정보가 채워졌다. 이 다른 정보는 데이터베이스에서 저장되고, 요청될 때 관련 정보를 불러오고, 웹 서버는 동적인 페이지에 포함해서 준다.

주목해야 할 다른 것은 특별한 소프트웨어는 반드시 동적인 웹 사이트를 만들기 위해서 서버에 설치되어야 한다. 그런데 일반적인 정적 HTML 파일들은 .html 확장자에 저장되었다. 이 파일들은 HTML에 추가되는 특별한 동적 코드를 가지고, 클라이언트에게 보내지기 전에 추가 처리가 필요한 웹 서버를 구별하기 위한 확장자로 저장된다. (데이터베이스에 삽입된 자료를 가진 것과 같이)-예를들어 PHP 파일들은 대개 .php 확장자를 가진다.

많은 동적 언어를 선택할 수 있는데 이미 PHP를 언급했고, 다른 예를 들면 Python, Ruby on Rails, ASP.NET과 Coldfusion을 포함할 수 있다.

결국은, 이 모든 언어들은 데이터베이스와 통신하는 것이나, 폼에 들어간 유효한 정보에 대한 것 등 대체로 같은 성능을 가진다. 하지만 그것들은 약간 다르게 작동하고, 약간의 장단점을 가진다. 결국은 당신에게 가장 맞는 것을 고르면 된다.

우리는 이 과정에서 동적 언어에 대해서 더 이상 자세히 다루지 않을 것이다. 하지만 나는 당신이 더 알고 싶거나 그것들에 대해서 읽고 싶은 경우를 대비하여 참고자료를 제공한다:

• Rails: Fernandez, Obie. (2007), The Rails Way. Addison-Wesley Professional Ruby Series.
• Rails screencasts
• PHP: Powers, David (2006), PHP Solutions: Dynamic web development made easy, friends of ED.
• [http://www.php.net/docs.php | PHP Online documentation]]
• ASP.NET: Lorenz, Patrick. (2003). ASP.NET 2.0 Revealed. Apress.
• ASP.NET: online ASP.NET documentation and tutorials.

이것은 어떻게 인터넷이 작동하는가의 배후에 관한 내용이다. 이 글은 사실은 단지 많은 주제들의 표면적인 것에 대해서 쓰고 있다. 그러나 이것은 그 주제들의 각각의 입장에서 어떻게 서로 연관되어있는지, 그리고 함께 작동하는지에 대해 보여준다는 측면에서 유용하다고 할 수 있다.

여전히 HTML, CSS 그리고 Javascript에 대한 실제의 언어 체계에 대해 배워야 할 많은 것들이 남겨져 있다. 그리고 이것은 우리가 다음에 배울 글에 나와있다. (다음 차례의 글은 웹 발전의 모델이 되는 “웹 표준”인HTML, CSS 그리고 Javascript에 초점을 맞춘다. 그리고 웹 페이지의 코드를 살펴본다.)

• HTML과 HTTP에 대한 간략한 정의를 제공하고 두개 사이의 차이점에 대해 설명하라.
• 웹 브라우저의 기능에 대해 설명하라
• 인터넷을 5분에서 10분간 둘러보고, 플래시무비,워드문서,PDF파일, NET (.aspx) 페이지, PHP와 같은 동적인 페이지, HTML,이미지파일, 내용물을 소개하는 텍스트 등등의 다양한 형태의 것들을 찾아보아라.
• 정적인 페이지와 동적인 페이지는 각각 어떻게 다른가?
• HTTP의 에러 코드 다섯개를 찾아 쓰고, 각각이 무엇을 의미하는지를 설명하라.

Jonathan Lane은 British Columbia 의 Mayne Island에 위치한 웹 응용 개발 회사인 Industry Interactive의 회장이다. 그는 Lethbridge대학의 Re-Development Center에서 수 년에 걸쳐 웹 프로젝트의 진행자 역할을 하는 것으로 처음 일을 시작했다. 그는 Flyingtroll에 블로그를 만들고 최근에는 베이스캠프 관리응용 프로젝트를 위해 이메일을 통해 접촉하는 Mailmanagr로 발전시키고 있다.