🌐 웹(Web) 1세대 (Web 1.0) 통신 구조 전체 정리
- 웹 1세대는 인터넷 네트워크 환경에서 HTML 문서를 서버와 클라이언트가 주고받는 구조로 동작
- 웹은 기본적으로 데이터 교환(Data 입출력)과 이를 해석하기 위한 프로토콜(Protocol, 규약) 을 기반으로 구성
⇒ 서로 다른 컴퓨터가 동일한 규칙을 사용해야 통신이 가능하며, TCP·HTTP·HTML Parser가 각각 역할을 나누어 수행
① 웹 1세대(Web 1.0) — HTML 문서 중심 구조
- 웹 1세대는 서버가 HTML 문서를 저장하고 있다가 사용자의 요청이 들어오면 해당 파일을 그대로 전달하는 정적 웹(Static Web) 구조
- 서버는 데이터 처리나 사용자 상호작용 없이 단순히 문서를 제공하며, 사용자는 브라우저를 통해 내용을 읽는 방식으로 서비스를 이용
- 예:브라우저는 이 HTML을 받아 화면에 출력한다.
- ⇒ 웹 1세대는 HTML 문서 전달 중심의 구조
- <h1>안녕하세요</h1>
② TCP 규격 — 메시지 전달 역할
- TCP(Transmission Control Protocol)는 서버와 브라우저 사이에서 데이터를 안정적으로 전달하는 역할
- TCP는 데이터를 여러 개의 패킷으로 나누어 전송하고, 수신 측에서 이를 다시 조립하여 순서를 보장하고 오류 발생 시 재전송을 수행
- 중요한 점은 TCP는 데이터의 내용을 이해하지 않는다는 것
- HTML 문서이든 이미지이든 TCP 입장에서는 단순한 문자 또는 바이트 데이터일 뿐임
- 예:이 요청 메시지가 웹 요청인지 HTML 관련 내용인지 TCP는 판단하지 않음"데이터를 안전하게 보내라."⇒ TCP는 웹 문서의 의미와 관계없이 전달 자체를 담당하는 계층
- 만 수행
- 단순히:
- GET /index.html HTTP/1.1
③ HTTP 프로토콜 — 웹 데이터 규격 정의
- HTTP(HyperText Transfer Protocol)는 TCP 위에서 동작하며 전달되는 데이터의 의미와 처리 방법을 정의
- 브라우저는 HTTP 요청(Request)을 생성하여 서버에 웹 페이지를 요청
- 예:서버는 HTTP 응답(Response)을 반환한다.
- GET /index.html HTTP/1.1 Host: example.com
- 예:여기서 중요한 정보는 Header이 정보는 브라우저에게:라고 알려준다.
- 즉 HTTP는 TCP가 전달한 데이터를 어떻게 해석해야 하는지 규칙을 제공
- "이 데이터는 HTML 문서다."
- Content-Type: text/html
- HTTP/1.1 200 OK Content-Type: text/html
⇒ HTTP는 데이터 의미와 형식을 정의하는 프로토콜
④ IP 주소와 MAC 주소 — 송수신 대상 식별
데이터가 정확한 컴퓨터로 전달되기 위해서는 송신자와 수신자를 구분
IP 주소
예:
167.18.199.0 (송신)
167.18.199.1 (수신)
네트워크 상에서 어느 컴퓨터인지 위치를 식별
즉:
목적지 찾기.
MAC 주소
예:
AC-74-B1-4F-3C-E30
실제 네트워크 장비의 고유 번호이다.
IP가 건물 주소라면 MAC 주소는 실제 방 번호와 같다.
⇒ IP는 논리적 주소, MAC은 물리적 주소.
⑤ SW · OS · H/W — 실제 통신 수행 구조
Software(SW)
↓
Operating System(OS)
↓
Hardware(H/W)
SW
- 브라우저가 HTTP 요청 생성.
OS
- TCP/IP 규격 처리.
- 주소 관리.
- 데이터 송수신 제어.
H/W
- 네트워크 카드와 케이블을 통해 실제 데이터 전달.
사진의 빨간 박스 영역이 실제 물리적 통신 구간
⇒ OS는 통신 관리자, H/W는 실제 전달 담당.
⑥ HTML Parser — 문서 해석 단계
- 브라우저는 HTTP 응답 Header를 확인
Content-Type : text/html
- HTML일 경우 HTML Parser가 실행된다.
- 예:브라우저 내부에서는 다음 구조로 변환된다.이를 DOM(Document Object Model)이라고 하며 화면 출력의 기반이 된다.
- ⇒ HTML Parser는 텍스트 데이터를 웹 문서 구조로 변환하는 역할
- html └ body └ h1
- <html> <body> <h1>Hello</h1> </body> </html>
⑦ 웹 1세대 전체 통신 흐름
Browser(SW)
↓ HTTP Request 생성
OS 처리 (TCP/IP)
↓
H/W 전송
↓
IP + MAC 주소 기반 네트워크 이동
↓
Server 도착
↓ HTML 생성
HTTP Response 생성
↓
TCP 전달
↓
Client Browser 수신
↓ HTTP 해석
HTML Parser 실행
↓
DOM 생성
↓
웹 페이지 출력
🌐 웹(Web) 2세대 (Web 2.0) 통신 구조 정리
웹 2세대는 단순 HTML 문서를 전달하던 1세대와 달리 서버가 사용자 요청(Request)을 분석하고 데이터를 가공하여 동적으로 페이지를 생성하는 구조이다. 즉 사용자마다 다른 결과를 제공하는 고객 맞춤형 동적 웹(Dynamic Web) 환경이 등장하였다.
① 웹 2세대 — Data + Style 기반 동적 페이지
웹 1세대가 HTML 문서를 그대로 전달했다면 웹 2세대는 서버가 데이터를 처리하여 HTML을 새로 생성함
즉:
2세대 = Data + Style
- Data → DB 데이터.
- Style → HTML/CSS 화면 구조.
- 서버는 사용자 요청에 따라 서로 다른 HTML 페이지를 생성한다.
⇒ 웹 2세대는 사용자 요청 기반 동적 HTML 생성 구조회원 A → 내 정보 페이지 회원 B → 다른 정보 페이지 - 예:
② HTTP Request — GET / POST 요청 처리
- 클라이언트(Client)는 HTTP Request를 통해 서버에 데이터를 전달함
또는GET url + encoding + param - POST param(body)
- 사진 예시:
- GET
- URL에 데이터 포함.
- 조회 목적.
- /search?name=kim
- POST
- Body 영역으로 데이터 전달.
- 로그인, 회원가입 등 데이터 처리.
- id=abc password=1234
서버는 Request를 분석하여 어떤 작업을 수행할지 결정
⇒ HTTP Request는 사용자 입력 전달 역할
③ Backend Server — Request 분석 및 Data 가공
웹 2세대에서는 Backend Server가 등장한다.
1. Request 파악
2. Data 가공처리
- 서버는 다음을 수행
- 요청 URL 분석.
- 파라미터 확인.
- DB 조회.
- 예:
로그인 요청 → DB 사용자 조회 → 결과 생성.
즉 서버는 단순 파일 전달이 아니라 프로그램이 동작
⇒ Backend Server는 비즈니스 로직 처리 담당
④ Database(DB) — 데이터 저장 및 조회
- 웹 2세대는 데이터베이스와 연결
- Back Server → DB 연결
- 역할:
- 회원 정보 저장.
- 게시판 글 저장.
- 상품 정보 관리.
- 요청 발생 시:
- SELECT user FROM DB
데이터 조회 후 결과 반환.
⇒ DB는 동적 페이지 생성의 핵심 데이터 저장소
⑤ HTTP Response — HTML + Data 반환
- 웹 2세대에서는 서버가 데이터를 처리한 후 HTML을 새롭게 생성한다.
- Response(html + data = http)
- 예:
- <h1>홍길동님 환영합니다</h1>
- 사용자마다 다른 결과.
즉:
- HTML 구조
- DB 데이터
합쳐서 응답 생성
⇒ 서버는 HTML을 실시간 생성하여 반환
⑥ TCP/IP — 데이터 전달 과정
웹 2세대 역시 TCP/IP 기반에서 동작
HTTP
↓
TCP/IP
↓
Network
TCP 역할:
- 패킷 분할.
- 순서 보장.
- 재전송.
1세대와 동일하게 전달 담당.
⇒ TCP는 여전히 데이터 전달 담당 계층
⑦ FrontEnd Server — Style 담당
Frontend Server = Style
- 역할:
- HTML
- CSS
- 화면 구조 제공.
- Backend에서 생성된 데이터를 받아 화면 구성
⇒ Frontend는 사용자 화면 표현 담당
⑧ 전체 웹 2세대 통신 흐름
Client Browser
↓ HTTP Request (GET/POST)
TCP/IP 전달
↓
Backend Server
↓ Request 분석
↓ DB 조회 및 Data 가공
↓ HTML 생성
HTTP Response(html + data)
↓ TCP/IP 전달
Browser 수신
↓
HTML Parser 실행
↓
화면 출력
web page = html + css + javascript
- html : 문서 구조 (계층 구조) + 내용
- css : 스타일
- javascript : 사용자와의 상호작용
🌐 웹(Web) 3세대
“사람이 아니라 컴퓨터(봇)가 웹 내용을 이해하게 만드는 것” 이다.
🌐 시맨틱 웹(Semantic Web) 레이어 정리
① 봇(Bot)이란?
- 검색엔진 크롤러 (Googlebot, Naverbot 등)
- AI 에이전트
- 데이터 수집 프로그램
같은 자동 프로그램
- 사람은:보면 의미를 이해한다.
- <h1>안녕하세요</h1>
- 컴퓨터는:
- 그냥 문자열.
⇒ “이 페이지가 무엇에 대한 내용인지 알려주는 정보” 가 필요하므로 시맨틱 웹이 역할
② Meta Tag — 의미 정보 제공
네가 적은 코드:
<meta keywords ="Advent of Code, 2024, programming ....">
이건 HTML 안에 숨겨진 정보다.
사용자는 화면에서 못 본다.
하지만:
👉 봇은 읽는다.
의미:
"이 웹페이지는 프로그래밍 + Advent of Code 관련 페이지야."
검색엔진:
- 페이지 주제 이해.
- 검색 결과 정렬.
대표 Meta 정보
예:
<meta name="keywords" content="AI, programming">
<meta name="description" content="coding tutorial">
역할:
- 검색엔진 SEO.
- 페이지 분류.
즉:
⇒ 웹 문서의 의미 설명.
③ 시맨틱 웹(Semantic Web) 개념
웹 1세대:
HTML 문서 전달.
웹 2세대:
사용자 맞춤 동적 페이지.
웹 3세대(시맨틱 웹):
컴퓨터가 내용 의미까지 이해.
예:
<h1>사과</h1>
사람:
- 과일?
- 회사 Apple?
컴퓨터:
몰라.
그래서:
<meta keywords="fruit">
또는 구조 데이터 추가.
→ 의미 명확.
④ 시맨틱 웹 레이어 의미
웹 위에:
의미 정보 층(layer)을 하나 더 올린 것.
구성:
- Meta tag
- RDF
- XML
- JSON-LD
- Schema.org
같은 데이터.
즉:
HTML (보이는 내용)
+
Semantic Data (의미 설명)
🌐 시맨틱 웹 + 온톨로지 데이터 구조 설명
① Raw Data (원시 데이터)
- 여러 테이블(T1, T2, T3, T4)에 데이터가 흩어져 있음
- 데이터 의미나 관계가 명확하지 않음
- 사람만 이해 가능.
⇒ 단순 데이터 조각 상태.
② Metadata (데이터 설명 정보)
- 각 컬럼이나 테이블의 의미를 설명
- 예:
- C11 = material id C12 = quantity
⇒ 데이터 구조 설명 단계.
③ Clean Data (정제 데이터)
- Raw Data를 정리하여 Material, Factory, Supplier로 구분
- 관계가 보이도록 데이터 정리.
예:
Material
Factory
Supplier
⇒ 사람이 이해 가능한 데이터 구조.
④ Ontology (의미 관계 정의)
- 데이터 간 개념과 관계 정의.
예:
Factory → Material → Supplier
의미:
- 공장은 재료를 사용.
- 공급자는 재료를 공급.
⇒ 컴퓨터와 AI가 의미를 이해 가능.
⑤ Rich App Layer (서비스 활용)
- 의미 관계를 기반으로 서비스 제공.
가능한 기능:
- 검색.
- 추천.
- AI 질문 응답.
예:
Supplier → cheese → London
⇒ 의미 기반 서비스 제공 단계.
핵심 흐름 (전체)
Raw Data
↓
Metadata
↓
Clean Data
↓
Ontology (관계 정의)
↓
Rich Application (AI 서비스)
html
gui ⇒ 픽셀 기반
동적으로 사용자의 반응응ㄹ