brunch

매거진 나에게 맞는 IT 직업 찾기

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by OurStellar Feb 28. 2023

7. 클라이언트의 독립, 웹 서비스의 발전

웹 서비스 발전과정과 웹 서비스 구조의 이해

클라이언트 - 서버 구조의 시스템은 사용자에게 풍부한 그래픽, 빠른 성능 등 만족할 만한 결과를 안겨주었다. 하지만 클라이언트마다 프로그램을 깔아야 하는 것은 부담이었다. 그런데 뜻밖에도 인터넷과 Web의 결합에서 이 문제를 해결할 수 있는 길을 찾을 수 있었다.

기술과 네트워크 성능의 발전으로 웹은 계속 진화하여 프로그램을 클라이언트에 깔지 않고, 웹 브라우즈(인터넷 익스플로, 크롬 등)만 있으면 어떤 클라이언트에서도 서버에 접속할 수 있었다. 또 클라이언트 - 서버에서 제공하는 그래픽 같은 풍부한 사용자 인터페이스를 누릴 수 있게 되었다. 브라우즈만 있으면 어떤 클라이언트를 통해 내외부 어디서나 서버에 접속할 수 있게 되었다. 비로소 클라이언트는 서버로부터 독립되었다. 바야흐로 Web, Web서비스의 혁명이 시작되었다. 그러나 이런 발전은 한 번에 이루어지지 않았다.

Web 서비스의 발전 과정

인터넷은 1960년대 군사목적으로 서버와 서버 간의 통신의 필요에 의해 등장했다. 초기 중앙집중 서버와 더미 터미널이 연결된 메인프레임 그림을 떠 올려보자. 중앙에 있는 서버는 혼자서 일하고 더미 터미널만 연결되어 있다. 다른 서버와 네트워크로 연결되어 있지 않다. 이후 전산실의 서버와 서버, 또 다른 전산실의 서버와의 연결이 되면서 세상의 모든 컴퓨터는 연결되기 시작했다. 그 연결은 오늘날 전 세계 32억만 개의 스마트폰까지 연결하고 있다.

인터넷 등장으로 바로 웹 서비스 환경이 만들어진 것은 아니다. 웹은 30년 뒤 1990년대 등장하였고, 웹 등장으로 인터넷은 활성화되기 시작했다. 인터넷이라는 네트워크 인프라 기반에서 사용자들이 쉽게 사용할 수 있는 웹 브라우즈를 통한 웹서비스 구조가 만들지고, 발전에 발전에 거듭하여 오늘날 가장 일반적인 IT 서비스 구조로 자리 잡았다.

웹 서비스의 발전과정을 일반적으로 4단계로 구분하나, 4단계는 아직 진행 중이므로 여기서는 3단계까지 살펴보고자 한다. 웹 서비스의 발전과정을 살펴보는 이유는 발전과정을 이해한다면 오늘날 웹 서비스 구조를 제대로 이해할 수 있다. 또 발전과정에서 웹의 중요한 기술 및 용어를 자연스럽게 알 수 있을 것이라 생각된다.

｜1세대 웹 : 단순한 html페이지를 보여주는 정적 서비스｜

웹 사이트의 시초는 1990년대 팀 버너스 리가 개발한 월드 와이드 웹(WWW, World Wide Web)이다. 팀 버너스 리는 서버에 있는 문서를 웹으로 열람할 수 있도록 웹 서버 구축하고, 클라이언트에서 문서를 보여 주는 웹 브라우즈를 만들었다. 웹 서버와 클라이언트 통신할 때 사용하는 프로토콜로 HTTP라는 통신 규약을 정의하고, 웹 브라우저에 정보를 표시할 수 있게 하는 프로그래밍 언어 HTML을 만들었다.(이렇게 어려운 말을 한 번에 쏟아 버리시니 -ㅠ-ㅠ, 너무 어려워요)

그럼 지금 한 말이 무슨 말인지 하나씩 살펴봅시다.

웹 서버는 인터넷 기반으로 클라이언트에게 웹 서비스를 제공하는 컴퓨터, 서버이다.(웹 서비스를 하면 웹 서버, 파일 서비스를 하면 파일 서버, 메일 서비스를 하면 메일 서버, DB관리를 하면 DB서버)

클라이언트는 접속하고자 하는 웹 서버 주소(www.abc.co.kr와 같은, URL이라고도 한다)를 가지고 통신 규칙(http 프로토콜)에 맞게 요청하고, 웹 서버로 부터 해당 페이지의 응답을 받아서 화면에 표시한다.

웹 서버는 클라이언트가 요청하기를 기다리고 있다가, 클라이언트가 요청한 페이지나 데이터를 만들어서 응답을 한다. 웹 서버는 html로 페이지를 만들어진 클라이언트로 전달하면 클라이언트 브라우즈는 html을 해석하여 우리가 보는 웹 페이지로 보여준다.

｜프로토콜, (일반적으로) 통신 프로토콜｜
프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구한다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 한다.

HTTP(HyperText Transfer Protocol)는 웹 서비스 통신을 위한 프로토콜로 클라이언트가 요청을 하면, 웹 서버가 요청에 응답을 하는 방식이다. 이는 클라이언트가 요청을 하지 않으면 웹 서버가 먼저 클라이언트에 접근할 수 없다. 웹 서버가 응답을 하고 나면 통신은 끊어지고 클라이언트가 요청할 때까지 기다려야 한다.(브라우즈에서 주소 입력하는 곳에 http(s)://www.abc.co.kr과 같은 주소에 http 또는 https가 있다. 이는 http프로토콜로 www.abc.co.kr웹 서버로 접속하겠다는 의미이다. 참고로 https는 보안이 적용된 http프로토콜이라고 생각하면 된다)

다음 알아볼 것은 html이다. HTML(Hyper Text Markup Language)은 웹 브라우즈에서 문서를 표현하기 위한 약속, 표준이다.

Hyper Text는 링크가 포함된 텍스트를 말한다. 구글 검색 후 검색 결과 텍스트를 클릭하면 새로운 화면으로 이동된다. 검색 결과 텍스트에는 클릭하면 연결되는 링크 정보가 포함되어 있다는 것을 추측할 수 있다.

Markup Language는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.(뭔 말이여ㅠㅠ) 이럴 때 쉽게 접근하는 방법이 있다. 예를 들어보자.

위 그림을 보면 html이 어떤 것인지를 충분히 이해할 것이다. 문서의 교정 부호처럼 교정 부호를 <> 안에 태그라는 명령어를 사용하여 브라우즈가 이를 알고 문서를 표현하게 하는 것이 html 문서이다. 또 관련된 다른 문서와 연결할 수 있도록 하이퍼 링크가 포함되어 있는 것도 있다. 이러한 html의 태그는 표준화되어 있다. 따라서 표준을 수용하는 브라우저라면 어떤 html문서를 똑 같이 화면에 나타 낼 수 있다. 브라우즈에서 웹 문서를 보려면 html양식에 맞추어 작성하여야 한다.

웹을 지탱하고 구성하는 기술 세 가지 :
HTTP(프로토콜), URL(서버 주소), HTML(문서 표시 기준)

문서로 시작한 html은 차즘 텍스트 보다 디자인의 요구가 더 커졌다. 그러다 보니 html 태그에 디자인 관련 태그가 많아지고, html작성이 복잡하게 되었다. 그래서 문서의 본연 즉 문자와 디자인 요소를 분리하고자 했다. html 문서 내에서 사용하는 스타일(폰트, 색상, 백그라운드 색상 등)을 별도로 만들어 놓고 계속 사용하는 방법을 생각하게 되었다. 예를 들면 1번 스타일은 폰트 굴림체 9, 폰트 색상 검정, 배경색상 하양, 2번 스타일은 폰트 굴림체 15, 강조, 폰트 색상 빨감, 배경색상 노랑 등과 같이 스타일 패턴을 저자해 놓고 문서에 필요할 때마다 각각의 패턴을 불러 쓴다면 매번 하나하나 적용하는 수고를 덜 수 있을 것이다. 웹 표준개발기구 W3C에서 CSS(Cascading Stylesheets – 종속형 스타일시트)를 표준으로 발표한다.

｜CSS(Cascading Stylesheets – 종속형 스타일시트)｜
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다. HTML이 텍스트나 이미지, 표와 같은 구성요소로 웹 문서 뼈대라면, CSS는 색상이나 크기, 이미지 크기. 위치 등 웹 문서의 디자인을 만드는 것으로 템플릿처럼 재활용이 가능하다.

1세대 웹 서비스는 html 페이지를 전송하는 정적인 웹이다. 초창기 웹사이트는 html페이지만 보여주는 단순한 텍스트와 간단한 이미지 정도의 페이지만 서비스가 가능했다(위키 페이지를 보는 것을 생각하면 된다). 웹 페이지는 보여주기만 하는 정적인 페이지로 어떤 동적인 움직임이나 기능이 없는 단순한 페이지였다.

1세대 웹의 대표 기술 : HTML, CSS

｜2세대 웹 : Java Scrip를 통한 동적요소의 적용｜

웹 서비스 프로토콜, html 표준이 공개되면서 웹 서비스는 급속하게 발전되기 시작했다. 사람들은 웹 서비스에 더 많은 기능을 요구하기 시작했다. 웹 브라우즈에 보이는 페이지는 전혀 움직이지 않는 문서에 불과했다. 사용자는 리치 클라이언트처럼 움직이는 화면, 기능적인 화면을 만들기 위한 웹 기술을 발전시켰다.

웹 서비스는 클라이언트가 웹 서버로 부터 페이지를 호출하면 통신은 단절되고 더 이상 움직임이 없다. 그러나 사용자가 웹 화면 위 메뉴에 마우스를 갖다 대면 메뉴가 펼쳐지고 마우스가 있는 메뉴 색상이 반전되는 웹 화면을 경험했을 것이다. 문서 중심의 html과 디자인 중심의 CSS로는 이런 동작을 만들 수 없어 웹에서 움직이도록 하는 프로그래밍이 필요했다. 따라서 웹 표준은 JavaScript를 도입하여 이러한 동작을 할 수 있도록 했다. 웹 표준으로 JavaScript가 적용되고 2세대 브라우즈가 나오면서 웹은 더 다이내믹하고 풍부한 사용자 경험을 줄 수 있게 되었다.

｜JavaScript｜
웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 프로그래밍 언어다. 웹 페이지의 내용을 정적이 아닌 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있도록 하는 프로그래밍할 수 있는 언어다.

**참고로 우리가 알고 있는 개발 언어 Java와 전혀 다른 프로그래밍 언어이다.

자바스크립트의 영역이 점점 더 커지면서 여러 웹 서비스들은 웹 사이트에 동적인 요소뿐만 아니라 서버와의 데이터를 주고받는 프로그래밍으로 자바스크립트를 적극 활용하기 시작했습니다.

예를 들어 학생들의 성적 문서를 보기 위해 1세대의 웹 서비스가 모든 학생들의 점수를 표로 만들어 문서로 보는 방법이라면,

홍길동 - 90

임꺽정 - 78

김복동 - 60

2세대 웹에서는 홍길동이라는 이름을 입력하면 홍길동의 점수가 나오는 동적인 서비스가 가능해졌다.

학생 이름 : 홍길동 [조회] 클릭 -----------> 홍길동 : 90

브라우저에서 자바스크립트를 이용하여 프로그래밍이 가능하면서 이제 웹은 단순한 문서만은 아니게 되었다. 프로그래밍이 가능하다는 것은 사람들의 의지대로 웹 서비스를 만들 수 있다는 것이다. 따라서 웹에서 자바스크립트의 도입은 단순히 동적인 요소 이외에 큰 움직일 수 있는 웹 브라우즈를 움직일 수 있다는 의미를 가지게 되었고 더 큰 기능으로 발전 가능성을 열었다.

자바스크립트의 도입으로 웹은 획기적인 발전을 이루었지만 웹 서비스 구성은 아직도 1세대 웹과 유사했고 자바스크립트의 사용도 아직 제한적이었다. 그러나 웹은 지속적인 고도화를 통해 자바스크립트와 같은 브라우즈상의 프로그래밍이 대세가 되었고, 이들 프로그래밍을 위한 별도 서버가 구성이 되는 3세대로 발전하면서 오늘날 웹 서비스 구조를 갖추게 된다.