[Network] 1. 웹

[그림으로 쉽게 이해하는 웹/HTTP/네트워크를 읽고 정리합니다.]

웹?

웹(WWW, World Wide Web, web)은 1989년 소프트웨어 공학자 팀 버너스리에 의해 고안되었다.

이 때는 전 세계의 하드웨어와 소프트웨어 사양이 다르고, 물리적으로도 거리가 있어 지금처럼 인터넷을 사용해 자료를 구하는 것처럼 자료를 찾기가 쉽지 않았다. 웹이 탄생하면서 방대한 양의 문서를, 범세계적으로 접근할 수 있게 되었고, 인터넷을 이용해 개개인의 컴퓨터 사양과 무관하게 필요한 정보를 찾을 수 있게 되었다. 

 

웹의 기능을 사용하기 위해서 꼭 필요한 구성 요소들이 있다. 크게 URL, HTTP, HTML 3가지다. 예를 들어 햄버거를 먹고 싶을 때, 맥도날드의 위치를 찾아 그 곳으로 가고, (이제는 키오스크지만) 직원에게 주문을 한다. 상스치콤 1개 포장이요. 내 주문을 알아 들은 직원은 얼마 후 내게 상스치콤을 건넨다. 이 때 내가 찾은 맥도날드의 위치가 URL(Uniform Resource Locator)이 된다. URL은 웹의 주소 격으로 특정 웹의 위치를 찾는 역할을 한다. 나와 직원 간의 주문을 HTTP(Hypertext Transfer Protocol)이라고 한다. 프로토콜은 대개 규약, 약속이라는 뜻으로 나와 직원이 한국말, 서로 알고 있는 메뉴와 가격을 이야기 하듯 웹 브라우저와 웹 서버도 서로 이해할 수 있는 형태로 통신하기로 '약속'한 것이다. 주문이 끝나고 내게 건네지는 상스치콤처럼, 웹 브라우저와 웹 서버 간의 통신으로 HTML(HyperText Markup Language)라는 언어로 작성된 문서를 받아 웹 페이지를 표시한다.

 

여기서 웹 브라우저는 크롬, 사파리 같은 프로그램으로 웹 문서를 열기 위해 사용하는 응용 소프트웨어다. URL과 HTTP를 사용해 웹 서버에 데이터를 요청하고, 받아온 HTML 문서나 JS 코드의 문서를 웹 페이지 형태로 바꿔주는 역할을 하기도 한다.

---

웹 애플리케이션 아키텍쳐

위에서 햄버거를 주문할 때, 주문하자마자 햄버거가 뿅 하고 나타나지는 않는다. 우리 눈에 보이진 않지만 카운터 너머 주방에서 패티를 굽고 소스를 뿌리고 포장을 하고 여러 작업을 거친 후에 햄버거가 나타난다. 웹도 우리가 주소창에 URL을 검색하고 1초도 걸리지 않아 페이지를 보여주지만, 그 이면에서는 여러 통신이 이루어진다. 이렇게 웹이 동작하는데 필요한 요소나 상호 작용을 정의해 놓은 것들을 웹 애플리케이션 아키텍처(Web Application Architecture)라고 한다. 그냥 웹 애플리케이션이 만들어지는 구조라고 이해하면 될 것 같다.

 

내가 맥도날드 직원에게 주문을 하면, 맥도날드 직원은 주방에서 일하는 직원에게 '상스치콤 1개 만들어주세요' 하고 주문서를 건넨다. 주방에서 일하는 직원은 그 주문서를 확인한 후 상스치콤 1개를 만들어 맥도날드 직원에게 건넨다. 그러면 맥도날드 직원은 내게 상스치콤을 건넨다.

 

[손님] - [맥도날드 직원] - [주방에서 일하는 직원]

[유저] - [웹 클라이언트] - [웹 서버]

 

유저가 웹에 접근한다. 정확히는 웹 브라우저 주소창에 naver를 입력해 naver 메인 페이지를 보려고 한다. 그럼 웹 클라이언트는 유저가 입력한 URL에 대한 정보를 찾아 HTTP 메세지 형태로 서버에게 요청(request)한다. 예컨대 'naver 메인 페이지 줘!'라고 요청한다. 웹 서버는 앞에서 요청한 HTTP 메세지를 확인하고 이에 맞게 HTML, CSS, JS, 이미지 파일 등등 필요한 데이터를 처리한 후 웹 클라이언트에게 응답(response)한다. 그럼 웹 클라이언트는 유저에게 요청한 화면을 구현해 보여준다.

 

이 때 [웹 서버]의 뒤에는 [WAS]와 [DB]가 있다.

 

WAS(Web Application Server)는 웹 서버를 보조하는 역할이다. 웹 서버가 다뤄야 할 데이터에는 HTML, CSS와 같은 정적 콘텐츠 + 데이터 베이스로부터 필요한 데이터를 조회하거나 다양한 로직 처리가 필요한 동적 콘텐츠로 분류할 수 있다. 이 때 WAS는 동적 콘텐츠를 받아 처리해 웹 서버의 일을 보조한다.

 

DB(DataBase)는 웹 서버가 사용할 데이터들을 담은 창고, 보관소 역할을 한다. 저장 뿐만 아니라 WAS에서 동적 콘텐츠를 제공하기 위해 접근하기도 한다. 예컨대 내가 티스토리에 새로 포스팅을 하면 그 내용을 서버에 저장해야 하는데, 이 때 WAS에서 SQL 질의를 통해 DB에 이 정보를 저장하게 요청하면 DB는 WAS의 요청에 맞게 데이터를 기존 목록에 추가한다. DB의 종류로는 오라클이나 MongoDB, MySQL 등이 있다. 

 

냉장고 정리도 잘하고 알바도 잘 쓰고 직원과 메인 쉐프의 케미로 대박난 맛집처럼, 이렇게 상호작용을 고려해 웹 어플리케이션 아키텍처를 설계하면 실제 웹을 구현할 때 발생할 수 있는 위험을 줄이고 안정적으로 웹을 운영할 수 있다. 

---

HTML, CSS, JS

일반적으로 웹 페이지는 HTML, CSS, JS로 구성되어 있는데, HTML은 뼈, CSS는 살, JS는 사람의 움직임을 담당한다고 비유한다.

 

웹은 하이퍼텍스트 문서로 이루어져 있는데, 하이퍼텍스트 문서를 만드는데 사용하는 언어가 바로 HTML(Hypertext Markup Language)이다. 하이퍼텍스트 마크업 언어니까. 마크업이란 화면의 구조를 명시하는 언어를 의미하는데, HTML은 제목은 <h1> 태그, 버튼은 <button> 태그와 같이 태그를 이용해서 화면의 구조를 짠다. 웹이 어떤 모양을 갖출지 뼈대를 잡는 역할을 한다.

 

CSS(Cascading Style Sheets)는 이렇게 뼈대를 갖춘 웹에 살을 붙이는 역할을 한다. 예를 들어 <h1> 태그로 만든 제목은 무슨 폰트로 표현할 것인지, <button> 태그로 만든 버튼은 무슨 색, 무슨 모양으로 표현할 것인지 디자인을 담당한다. 

 

JS는 마크업 언어인 HTML, 스타일 언어인 CSS와 달리 '프로그래밍' 언어다. HTML, CSS는 딱 그 역할에만 맞게 뼈대를 만들고 살을 덧붙히기만 하지만, JS는 연산이나 명령을 수행할 수 있다. 그래서 HTML, CSS가 만든 웹 사이트에 어떤 동작을 할 수 있게끔 움직일 수 있는 것이다. <button>을 누르면 어떤 창이 뜨는지, 스크롤을 내리면 무슨 이벤트가 발생하는지 웹 페이지에 동적인 기능을 제공한다.

---

이 부분까지는 매우 간단하고 개발 초입에서 귀에 못 박히도록 들었던 내용이라 술술 읽었다.