웹? 월드 와이드 웹!
몇번인가 웹에 대해 궁금해 하시는 분들이 있어서 관련 부분 용어와 함께 개념을 위주로 정리해 봤습니다. 기술은 많고 아는 건 적어서 가벼운 글로 적었습니다.^^;
1. 웹이란?
흔히 인터넷 혹은, 웹이라고 부르는 World Wide Web(WWW)은 HTML과 HTTP를 중심으로 된 광역 네트워크입니다. 이름에서도 알 수 있듯이 세계를 두루두루 거미줄처럼 엮는다는 의미를 가지고 있습니다.
조금 더 세분해 보면 웹은 HTTP(Hyper Text Transfer Protocol)를 사용해 HTML(Hyper Text Markup Language)로 작성된 문서를 전송하는 서비스 입니다. 그리고 “인터넷(Internet)”은 웹을 서비스하는 광대역 네트워크 망을 의미합니다. 이때, 네트워크란 여러 개의 점(노드)가 서로 연결(링크)된 것을 의미합니다. 즉, 웹이란 컴퓨터 네트워크를 통해 문서를 전달하기 위한 구조라고 할 수 있습니다.
CERN에서 시작된 웹은 연구자들끼리 서로의 연구 결과 등을 공유하기 위해 시작되었다고 합니다. 다만 문서의 표현력과 기능성을 높이는 과정에서 수많은 곁가지가 붙고, 그로인해 많은 부가 기능들이 개발 활용되어 현재의 모습이 되었습니다. 가장 최근의 HTML규격은 HTML 5와 CSS3, JavaScript, XML 2.0 등으로 구성된 종합 규격으로 플레쉬의 기능을 대부분 포함하는 수준을 지향하고 있습니다.
2. 웹에 사용되는 기술들
위에서 정의 했듯이 웹은 문서 전달을 위한 구조입니다. 따라서 그 안에는 문서 전달 방법들을 포함하게 됩니다. 주로 W3C(World Wide Web Consortium)에서 정의하는 많은 기술들이 웹기술로 표현됩니다만, 그것들을 지원하기 위한 모든 기술을 다 웹에 사용되는 기술로 정의할 수 있습니다.
흔히 사용자 입장에서 접할 수 있는 것은 전달 수단이 되는 HTTP, 그리고 문서 작성에 사용되는 HTML, CSS, J(ava)Script, 데이터 전달을 위한 XML관련 기술들(XML, XLST, XPath, XQuery), 문서구조 정의를 위한 DOM 등이 있습니다.
다만 이런 문서 기술들 만으로는 매우 정적인 HTML이 됩니다. 따라서 이를 위한 서버쪽 기술로 Java Servlet, JSP, Rubi on Rails, ASP, ASPX, PHP, CGI(Perl,...) 등등의 서버 기술이 개발되었고, 이를 지원하기위한 DB와 상위 구조를 조직하는 기술들이 추가 됩니다.
반대로 서버의 능력이 커지고, 동시에 각 단말의 성능이 올라가면서 네트워크라는 답답한 구간을 조금더 효율적으로 써보려는 시도들이 생겨났습니다. 그 결과 DHTML(Dynamic HTML)의 단계를 거쳐서 AJAX(Asynchronous Javascript and XML)나, JSON(JavaScript Object Notation)과 같은 부가 기술이 탄생합니다. 또 다른 측면으로 웹의 제약사항을 넘은 기능을 구현하기 위해 Java Applet, ActiveX, Flash, Silverlight 등 웹과 같이 동작하지만 웹이아닌 기술들이 첨가 되어 현재와 같은 형태로 나타납니다. 또한 서비스적인 측면으로 RSS나 Web service, X-internet 등 응용도 여러가지 추가됩니다.
3. 웹의 기본 원리
웹은 기본적으로 단말이 문서를 서버에 요청하면, 서버가 해당 문서를 단말에 전송하고, 이를사용자가 보는 3단계로 구성됩니다.
----------
1. 요청 : 단말이 보고자 하는 문서를 서버에 요구하는 메시지를 보냄
2. 응답 : 서버가 문서를 포함해 단말에서 요청한 문서에 대한 응답을 함
3. 표현 : 단말에서 돌아온 문서에 대한 화면을 구성해 사용자에게 표시
----------
이때 문서의 형태는 HTML, XML, CSS, JavaScript파일, 그림, 영상 등 모든 형태가 다 됩니다. 그리고 전송되는 응답의 형태는 요청과 무관하게 서버에서 지정해서 보내주게 됩니다. 따라서 그림파일을 요청해도 보여줄수 없다는 HTML파일이 전달될 수도 있습니다. 위의 1,2과정에서 흔히 사용되는 규약이 HTTP입니다.
(HTTP규격은 http://www.w3.org/Protocols/rfc2616/rfc2616.html에 공개되어 있습니다.)
표현은 이러한 전송 결과를 어떻게 처리할지 단말에서 자유롭게 하게되어 있습니다. 반대로 말하면 단말에서 표현할수 있는지 여부에 대해 서버는 잘 모르는 상태에서 전송을 하기 때문에 인코딩이 깨지거나, 이상하게 표현되는 페이지들이 발생할 수 있습니다.
3-1. 요청
일반적으로 어떤 웹사이트를 들어갈 경우 URL(Universal Resource Locator)를 입력합니다. 흔히 와싸다는 www.wassada.com이라고 표현 합니다. 그러나 실제 URL은 http://www.wassada.com/ 과 같이 기술됩니다.
이는 최초로 URL을 정한 사람이 규정한 표현법이 위와 같기 때문입니다. 해석하자면
http프로토콜을 사용하고, 대표 사이트(www)이며, wassada라는 이름을 쓰는 기업(com)이라는 의미가 됩니다.
URL은 "프로토콜://도메인/도메인내 주소?요청정보"와 같은 규격이며, URL인코딩이란 방법을 사용해 표현합니다. 이렇게 표현된 URL은 HTTP의 헤더에 포함되어 다른 정보와 함께 서버로 전송됩니다.
또한 요청에는 쿠키와 브라우저에 대한 정보, 그리고 Post방식의 폼데이터가 포함됩니다. 이러한 값들은 서비스를 개발하는 단계에서 그리고 결과를 보여줄 브라우저에 따라서 다른 값을 가질 수 있습니다.
3-2. 응답
응답은 서버의 처리 방법에 따라 동적 또는 정적으로 구성된 문서를 단말에 전송하는 과정입니다.
응답에는 보통 400이나, 404, 500과 같은 처리 코드와 메시지, 그리고 문서의 종류, 문서의 유효시간등과 실제 문서가 포함되어 전송됩니다. 단말은 이러한 데이터를 그대로 받아서 결과에 따라서 처리 방법을 정하게 됩니다.
500과 같은 에러 코드가 왔다면 에러 페이지나 에러를 표시하고, 원하는 페이지나 그림이 왔다면 그 내용을 알맞게 가공하게 됩니다.
3-3. 표현
표현은 흔히 우리가 브라우저라고 부르는 프로그램의 주요기능입니다. 물론 위의 요청이나, 응답도 브라우저에서 하지만 대부분의 브라우저에서 요청이나 응답의 과정은 크게 다르지 않습니다. 브라우저가 아니더라도 규격만 지켜진다면 요청이나 응답을 통해 정보를 받아서 사용자에게 표시할 수도 있습니다. 다만 브라우저 만큼 모든 정보를 잘 표현하지 못하는 경우가 대부분입니다.
인터넷 익스플로러나, 크롬등 각 브라우저는 이러한 표현과정에서 스크립트를 수행하고, 영상을 재생하고, 외부프로그램을 구동하며, 사용자와 상호작용하게 됩니다.
4. HTML
웹에서 우리눈에 가장 잘 보이는 부분은 HTML문서 입니다. HTML은 Hyper Text Markup Language의 약자로 말 그대로 Hyper Text를 표현하기 위한 언어입니다. 이 언어의 방식이 뭔가 표시(Mark)를 해서(up) 뜻을 표현하기 때문에 Markup Language라고 씁니다.
Hyper Text라는 뜻은 일반적으로 우리가 쓰는 글이 Text입니다. 이러한 Text에 링크나, 그림, 영상등 다른 초월적(Hyper)기능을 추가한 문서가 Hyper Text입니다. 초창기 HTML은 Link나 문서 형식관련된 몇개의 태그만 있는 간단한 형태 였다면 현재는 그 구조를 매우 복잡하게 구현합니다.
현재 HTML의 주 버전은 W3C에서 정한 HTML 4.01을 표준으로 하고 있고, 현재 HTML 5가 도입중입니다. HTML은 W3C가 표준을 정하지만, 브라우저 회사가 이를 전부 따르는것은 아니라서 대표적으로 인터넷 익스플로러는 6.0까지 표준을 대충만 지켰습니다.
4-1. HTML과 태그(Tag)
HTML에서 뭔가 의미를 기술할때 사용하는 것이 태그(tag)입니다. 태그도 결국 텍스트 이긴하지만 앞/뒤로 의미를 가진 괄호(<와 >)를 붙여서 태그임을 알립니다.
예를 들어 HTML문서의 시작은 <html>로 표시합니다.그리고 끝은 </html>로 표시합니다. 일부 태그는 <img … />와 같이 단일 태그로 표시 하기도 합니다.
HTML에서 태그로 싸인 부분은 태그에 해당하는 형태와 의미를 가진다고 봅니다. 예를 들어서 title 태그는 문서의 제목을 의미합니다. 그리고 title 태그 사이에 있는 문장은 브라우저의 제목으로 표시가 됩니다. 또 다른 예로 b태그는 굵은 글씨체를 p태크는 문단을 의미하는 용도로 사용됩니다.
4-2. HTML과 속성(Attribute)
HTML에서 태그는 꽤 많이 정의 되어 있습니다. 그러나 태그의 조합 만으로는 모든 형태를 표현할 수 없습니다. 예를 들어서 빨간색 글씨를 표현하는 태그는 존재 하지 않습니다. 그렇기 때문에 태그의 괄호 안에 a=b의 형식으로 추가 적인 설정을 기입할 수 있는데 이를 속성(Attribute)라고 합니다. 예를 들어 빨간색 글씨는 font 태그에 color=red라는 속성을 주어 다름과 같이 표현 합니다.
<font color=red> 빨간글씨 </font>
위와 같이 font태그로 둘러싸인 “빨간글씨”라는 문장은 붉은 색으로 표현됩니다.
4-3. HTML과 XML
HTML은 사실 SGML이라는 언어에서 파생된 것으로 봅니다. 그런데 SGML은 매우 복잡한 규격이라 이를 단순화 하는 과정에서 많은 불 규칙적인 점들이 도입됩니다. 이러한 불규칙성은 작성하는 사람에게는 편리하지만, 이를 표현해야 하는 컴퓨터에게는 매우 불리합니다. 이러한 불 규칙성을 다시 규칙적이고, 단순하면서도 처리하기 쉬운 형태로 바꾼 것이 XML입니다. XML은 eXtensible Markup Language의 약자로 데이터를 HTML처럼 태그로 감싸 사람과 컴퓨터 모두에게 읽고 이용하기 편리하게 만든 언어입니다.
HTML은 많은 태그가 미리 지정되어 있지만, XML은 사용하는 용도에 따라 태그를 구성해서 사용합니다. XML이 대두 되면서 HTML을 XML화 시키려는 시도가 XHTML입니다. 최근의 소식에 의하면 XHTML은 W3C가 업계의 저항에 부딪혀 사실상 포기한 상태라고 합니다.
XML이 최근 많이 사용되는 곳은 AJAX나, RSS와 같이 HTTP를 통해 데이터를 주고 받는 곳 입니다.
4-4. HTML과 JavaScript
초기 HTML은 Text와 그림을 표현하는 목적 외에는 없었습니다. 그런데 HTML의 활용이 늘어나면서 HTML을 좀 더 역동적으로 표현하려는 욕구가 발생했습니다. 그래서 등장하게된 것이 script태그 입니다. 스크립트를 처음 만들 당시 범용 언어로 Java가 뜨고 있었기 때문에 Java의 형식과 구조를 빌려서 JavaScript라는 언어가 넷스케이프에 의해 도입됩니다. 이후 마이크로소프트사도 Jscript라는 변형과 VBScript라는 독자 규격도 도입합니다만, 결국 현재 표준은 JavaScript로 굳어지게 됩니다.
JavaScript는 그 자체로 하나의 프로그래밍 언어입니다. 현재는 버전도 1.0에서 업그레이드 되어 객체지향 프로그래밍 등을 포함하는 규격으로 정의되고 있습니다. JavaScript의 표준은 ECMAScript 또는 ECMA-262라는 표준 규격을 통해 정의 되고 있습니다. 최근에는 4.0이 개발중이며, 속도나, 기능면에서 여타 일반 프로그래밍 언어 만큼 강력한 언어로 성장하고 있습니다.
JavaScript의 발달과 HTML의 DOM(Document Object Model)의 확립, 그리고 XML의 활성화등 몇가지 요소가 합쳐 지면서 실시간으로 강력한 HTML기능을 구현하기 위한 AJAX(Asynchronous Javascript and Xml)이 등장하게 됩니다. 또한 AJAX와 별개로 JavaScript의 활용을 높이기 위해 더 빠른 데이터 전송방법으로 JSON(Javascript Object Notation)도 많이 사용됩니다.
4-5. HTML과 CSS
다시 초기 HTML로 돌아가보면 HTML은 각 태그가 어떤 표현에 대한 의미를 가집니다. 즉 B태그는 굵은 글자체로 된 문자열을 의미 합니다. 그런데 이러한 구조에서는 문장과 표현이 서로 뒤섞이게 됩니다. 또한 굵은 글자체로된 문자열에 폰트가 다르게 되면 다시 font태그를 다시 써 줘야 되고, 이러한 과정이 반복되면 작성이 어려워 지게 됩니다. 또한 한번 작성한 문서에서 형식을 바꿀 필요가 생기면 전체를 다시 살펴 보면서 형식을 수정해 주어야 합니다.
이러한 문제점이 대두되면서 형식과 내용을 분리하기 위해 등장한 것이 CSS입니다. CSS는 Cascading Style Sheet의 약자로 “HTML의 태그를 꾸미는 방법”을 재정의 하는 방법입니다. CSS를 사용하면 태그에 class를 부여하거나 사용자 정의 태그를 사용할 수 있게 됩니다. 또한 CSS를 통해 각종 화면효과도 스크립트 없이 사용이 가능해지는 장점이 있습니다.
4-6. HTML에서 특수 기호
HTML은 대부분의 문장을 그대로 표현 합니다. 그런데 몇 가지 문제가 생겼습니다. 예를 들어 <와 같이 태그에 쓰이는 기호는 표현할 수 없고, 일부 특수 기호는 표현하기 위해서 입력하는 사람이 힘들다는 점이었습니다. 그래서 HTML규격에 의하면 HTML은 특수한 인코딩으로 표현됩니다. 일반적인 텍스트는 그대로 두고 특수기호의 앞에는 &를 붙이고 끝에는 ;을 붙여서 그 사이에 내용을 한글자의 기호로 표현 하는 방식입니다. 이런 방식으로 표현하는 특수 기호는 괄호 외에도 &나 각종 구두점등 많은 기호문자로 확장됩니다. 또한 실제 글자의 코드값을 바로 표현하기 위해 &#숫자;의 형식으로 표현하는 기능도 있습니다.
(참조 : http://www.w3schools.com/TAGS/ref_symbols.asp )
4-7. HTML과 DOM
DOM은 Document Object Model의 약자로 HTML문서를 객체형태로 정의한 모델입니다. 초기 DOM은 넷스케이프에서 정의를 시작했으며, IE에서 변형을 만들어 냄으로서 2가지 이상의 비표준으로 사용되었습니다. 현재는 많은 부분을 W3C표준으로 정의함으로인해 표준화 된 DOM을 사용할 수 있습니다. 그러나 아직 많은 구버전 브라우저가 비표준 또는 독자규격을 따르고 있기 때문에 DOM에 다른 동작은 개별적으로 테스트해 볼 필요가 있습니다.
5. 웹 서버
흔히 웹서버라고하면 Web으로 작성된 서비스를 제공용하기 위한 서버를 의미 합니다. Apache가 가장 유명하며, 마이크로소프트사의 Internet Information Server (IIS) 도 역시 많이 사용되는 웹서버입니다. 초창기 웹은 단순히 HTTP 요청을 처리하기 위해 서버를 운영 했기 때문에 그만큼 서버가 단순했습니다. 그러나 점점 이용자가 늘고, 해킹등 보안 위협도 증가 했으며, 동시에 사용자의 요구도 복잡해졌습니다.
이러한 각종 요구를 충족하기 위해 웹서버의 뒤에는 어플리케이션 서버와 데이터 베이스서버같은 지원군이 붙었고, 앞에는 방화벽이나, L4스위치와 같은 보호장치들이 들어서게 됩니다. 각각의 요소들은 역할을 나누어 각 요소에서 하는 일을 전문화 하고, 부담을 줄여 줄 수 있게 됩니다.
5-1. 어플리케이션 서버
웹의 논리적인 데이터 처리 및 그에 따른 비즈니스 로직을 처리하기 위한 서버 입니다. PHP, Java, Servlet, ASP, ASPX 와 같은 언어 및 기술들이 사용됩니다.
5-2. 데이터베이스 서버
늘어나는 데이터를 효율적으로 관리하고 처리하기 위해 데이터 베이스 서버를 사용합니다.
5-3. 방화벽과 L4스위치
방화벽은 불법적인 침입을 원천적으로 막아 서버를 보호하기 위한 기능이고, L4스위치는 몰려드는 요청을 적절하게 여러개의 서버로 분산하기 위해 존재합니다.
6. 정리
제가 알고 있는 웹이 어떤 것인지 교양 수준에서 대략적으로 훑어 봤습니다. 사실 위에서 본 내용은 수박 겉 핥기 수준의 내용입니다. 다만, 웹을 앞으로 공부하는데 있어서 어떤것을 공부할지 방향을 잡기 위한 정보가 되었으면 합니다. 지금까지 읽어 주셔서 감사합니다.^^
ps. 잘못된 부분이나 이견이 있으면 지도 부탁 드립니다.^^
ps2. 허접한 글이라 펌은 자제해 주시기 바랍니다.^^
![[잡글] 웹? 월드 와이드 웹! - 와싸다닷컴](upload/happy_config/info_logo.png "[잡글] 웹? 월드 와이드 웹! - 와싸다닷컴"){kind=logo}
제목
