1212 웹 마스터 입문 (1/5): 웹의 동작 원리와 3대 구성 요소
✅ 1. 웹(Web)은 어떻게 동작하는가? (기본 모델)
-
우리가 웹 브라우저에 주소(
www.google.com)를 입력하고 엔터를 치면, 웹 페이지가 눈앞에 나타나기까지 보이지 않는 곳에서 여러 통신이 일어납니다. 이 과정을 이해하는 것이 웹 관리의 첫걸음입니다. -
클라이언트-서버 모델 (Client-Server Model):
- 클라이언트 (Client): 웹 페이지를 요청(Request)하는 주체. 일반적으로 사용자의 웹 브라우저(Chrome, Safari 등)를 의미합니다.
- 서버 (Server): 클라이언트의 요청을 받아, 적절한 응답(Response)을 보내주는 컴퓨터. 웹 서버는 항상 요청을 기다리고 있습니다.
➕ 간단한 동작 흐름
- [사용자] 웹 브라우저 주소창에
www.google.com을 입력합니다. - [브라우저 → DNS 서버] 브라우저는 먼저 DNS(Domain Name System) 서버에 "
www.google.com의 진짜 IP 주소가 뭐야?"라고 물어봅니다. - [DNS 서버 → 브라우저] DNS 서버는 "
172.217.175.110이야"라고 IP 주소를 알려줍니다. - [브라우저 → 웹 서버] 브라우저는 알아낸 IP 주소(
172.217.175.110)를 찾아가, HTTP(HyperText Transfer Protocol)라는 통신 규약에 맞춰 "Google 홈페이지(HTML 문서)를 줘!"라고 요청(Request)합니다. - [웹 서버 → 브라우저] 구글 웹 서버는 요청을 받고, 홈페이지를 구성하는 파일들(HTML, CSS, JavaScript, 이미지 등)을 응답(Response)으로 보내줍니다.
- [브라우저] 브라우저는 응답으로 받은 파일들을 해석(렌더링)하여, 우리가 볼 수 있는 시각적인 웹 페이지로 그려줍니다.
✅ 2. 웹 페이지의 3대 구성 요소
- 모든 웹 페이지는 세 가지 핵심 기술의 조합으로 만들어집니다. 웹 마스터는 이 세 가지 요소의 역할과 관계를 명확히 이해해야 합니다.
| 기술 | 역할 | 설명 | 비유 |
|---|---|---|---|
| HTML | 구조 (Structure) | 웹 페이지의 뼈대를 잡고, 텍스트, 이미지, 비디오 등 콘텐츠의 의미와 구조를 정의합니다. | 건물의 골조, 사람의 뼈 |
| CSS | 스타일 (Presentation) | HTML로 만들어진 구조에 색상, 폰트, 레이아웃 등 시각적인 디자인을 입힙니다. | 건물의 인테리어, 사람의 옷 |
| JavaScript | 동작 (Behavior) | 사용자의 클릭, 스크롤 등 상호작용에 반응하고, 콘텐츠를 동적으로 변경하거나 서버와 통신합니다. | 건물의 엘리베이터, 사람의 움직임 |
- 관심사의 분리 (Separation of Concerns): 이 세 가지 기술의 역할을 명확히 분리하여 작성하는 것이 매우 중요합니다. 예를 들어, HTML 파일에 직접 스타일(
style="...")을 넣거나, 동작(onclick="...")을 넣는 것은 유지보수를 매우 어렵게 만듭니다.
✅ 3. 웹 서버(Web Server)와 WAS(Web Application Server)
- 서버는 역할에 따라 크게 두 종류로 나눌 수 있습니다.
➕ 웹 서버 (Web Server)
- 주요 역할: 정적(Static) 콘텐츠를 제공합니다.
- 정적 콘텐츠: HTML, CSS, JavaScript, 이미지 파일처럼, 누가 언제 요청하든 항상 동일한 내용을 보여주는 파일.
- 동작: 클라이언트로부터 HTTP 요청을 받으면, 미리 저장된 정적 파일을 찾아서 그대로 전달합니다.
- 대표적인 소프트웨어: Apache, Nginx
➕ WAS (Web Application Server)
-
주요 역할: 동적(Dynamic) 콘텐츠를 생성하여 제공합니다.
-
동적 콘텐츠: 사용자의 요청, 시간, 데이터베이스의 값 등에 따라 내용이 실시간으로 변경되는 콘텐츠. (e.g., 로그인 정보, 게시판 목록, 현재 시간)
-
동작: 클라이언트의 요청을 받아, 서버 사이드 언어(Java, Python, PHP 등)로 작성된 비즈니스 로직을 실행하고, 데이터베이스를 조회하는 등의 처리를 거쳐 결과를 HTML 형태로 생성하여 웹 서버에 전달합니다.
-
대표적인 소프트웨어: Tomcat (Java), Gunicorn (Python)
-
현대적인 웹 아키텍처: 보통 웹 서버와 WAS를 함께 사용합니다.
- 사용자의 모든 요청은 웹 서버(Nginx)가 가장 먼저 받습니다.
- 요청이 정적 콘텐츠(이미지 등)이면, 웹 서버가 직접 처리하여 빠르게 응답합니다.
- 요청이 동적 콘텐츠(로그인 등)이면, 웹 서버는 요청을 WAS(Tomcat)로 전달(Proxy)하여 처리를 위임하고, 그 결과를 받아 클라이언트에게 전달합니다. 이를 통해 서버의 부하를 분산하고 효율성을 높입니다.
📌 요약
- 웹은 클라이언트(브라우저)가 서버에 요청(Request)을 보내고, 서버가 응답(Response)을 주는 클라이언트-서버 모델을 기반으로 동작합니다.
- DNS는 도메인 이름을 IP 주소로 변환해주는 "인터넷 전화번호부" 역할을 합니다.
- 모든 웹 페이지는 구조(HTML), 스타일(CSS), 동작(JavaScript)이라는 3가지 요소로 구성됩니다.
- 서버는 정적 콘텐츠를 처리하는 웹 서버(Nginx, Apache)와, 동적 콘텐츠를 생성하는 WAS(Tomcat)로 역할을 분리하여 효율성을 높이는 것이 일반적인 구조입니다.
