Web, Web resource, 웹 클라이언트와 서버의 통신

Web

 

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스

여기서 정보를 제공하는 주체를 웹 서버 (Web Server), 정보를 받는 이용자를 웹 클라이언트 (Web Client) 라고 합니다.

식당에서 음식을 서빙하는 사람 (Server)과 음식을 주문하는 고객 (Client)의 관계로 생각하시면 됩니다.

여기서, HTTP란 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙입니다.

 

이용자의 요청을 받는 부분을 프론트엔드 (Front-end), 요청을 처리하는 부분을 백엔드 (Back-end)라고 부릅니다. 

호텔 프론트에 이런저런 서비스를 요청하면 뒤의 공간에서 고객 모르게 복잡한 일들이 벌어지는 것과 비슷합니다.

프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스 (Web Resource)라는 것으로 구성됩니다. 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있습니다. 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 관련 언어로 적혀있습니다.

 

Web resource

웹에 갖춰진 정보 자산을 의미합니다.

 

웹 브라우저의 주소창에 https://www.naver.com/index.html 주소를 입력하면 naver.com 에 존재하는 /index.html 경로의 리소스를 가져오라는 의미입니다. 모든 웹 리소스는 고유의 Uniform Resource Indicator (URI)를 가지며, 이를 이용하여 식별됩니다.

 

 

웹의 프론트엔드를 구성하는 대표적인 웹 리소스

 

Hyper Text Markup Language (HTML)

웹 문서의 뼈와 살을 담당합니다. 태그와 속성을 통한 구조화된 문서 작성을 지원합니다.

 

Cascading Style Sheets (CSS)

웹 문서의 생김새를 지정합니다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트입니다. 글자의 색깔이나 모양, 배경 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있습니다. 브라우저는 이를 참고하여 웹 문서를 시각화합니다.

 

JavaScript (JS)

웹 문서의 동작을 정의합니다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있습니다. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부릅니다.

 

그 외

문서, 이미지, 동영상, 폰트 등이 있습니다.

 

 

웹 클라이언트와 서버의 통신

웹 서비스의 통신 과정

 

(클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.

(클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.

(서버) HTTP로 전달된 이용자의 요청을 해석합니다.

(서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다.

리소스를 요청하는 것이라면, 이를 탐색합니다.

계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.

(서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.

(클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.

 

용어 정리 통신 - 정보를 전하는 것. 현대에는 전화, 인터넷 등의 통신 수단을 이용하여 과거보다 시간과 공간의 제약을 받지 않고 이뤄짐. 웹 -  인터넷이라는 통신망을 활용하여 구현된 전 지구적 정보 공간 웹 클라이언트 - 웹에서 정보를 요구하는 주체 웹 서버 - 웹에서 정보를 제공하는 주체 웹 리소스 - 웹 서버가 제공하는 정보 자원(e.g. HTML, Javascript, CSS 등) 웹 서비스 - 웹 상에서 제공되는 서비스 (e.g. SNS, 온라인 쇼핑몰 등)