CHAP 1. 웹(Web)의 개념

📌 1️⃣ 웹이란?

✅ 기초 정의

Web (World Wide Web) = 전 세계 정보가 하이퍼텍스트 링크로 연결된 거대한 정보 공간
핵심 요소:
1. HTML → 웹 페이지 내용 구성 (뼈대)
2. URL → 웹 주소 (위치)
3. HTTP/HTTPS → 데이터 주고받는 프로토콜 (약속)

🕰️ 웹의 역사 & 발전 흐름

시대	주요 사건
1989	팀 버너스 리, WWW 개념 제안
1991	HTML & 첫 웹사이트 등장
1995	JavaScript 출시 → 동적 웹 가능
2000s	AJAX + CSS 발전 → UX 개선, 비동기 통신
2010s	HTML5, SPA (React, Vue), 모바일 퍼스트
2020s	PWA, WebAssembly, AI+Web, Web 3.0, Metaverse Web 등장

🧩 비유로 쉽게 이해

웹 = 거대한 도서관 📚

요소	비유 🌟
웹 페이지	📖 책
하이퍼링크	🔗 책 속 ‘참고 페이지 링크’
URL	🏷️ 책의 ISBN 번호
브라우저	👓 책 읽는 도구 (도서관에서 책 읽기)
서버	📦 도서관 창고
HTTP/HTTPS	📮 책을 주고받는 우편 규칙

🎯 심화 포인트

웹 ≠ 인터넷!
- 인터넷: 전세계 네트워크 인프라 (도로)
- 웹: 인터넷 위에서 돌아가는 서비스 (자동차)
하이퍼미디어: 텍스트 뿐만 아니라, 이미지, 영상, 음악도 링크 가능
웹 3.0 (시맨틱 웹) → AI가 데이터 의미까지 이해하는 지능형 웹으로 진화 중

💼 기술 면접 포인트

Q: 웹과 인터넷의 차이는?

구분	웹	인터넷
정의	하이퍼텍스트 기반 정보 서비스	전세계 네트워크 인프라
예시	웹사이트, 브라우저	IP, TCP/IP, 라우터

🌐 2️⃣ 웹 브라우저와 서버 구조

✅ 기초 개념

구성 요소	역할
🖥️ 클라이언트 (브라우저)	사용자 입력 → 서버 요청, HTML/CSS/JS 렌더링
🗄️ 서버	요청 처리 → 데이터, 파일 전달
🗃️ 데이터베이스 (DB)	서버와 연동, 데이터 저장/조회

🔁 웹 요청-응답 흐름

[사용자 → URL 입력]
       ↓
[브라우저 → 서버에게 요청(Request)]
       ↓
[서버 → HTML, CSS, JS 응답(Response)]
       ↓
[브라우저 렌더링 → 사용자에게 보여짐]

🧩 비유

요소	비유 🌟
브라우저	🍽️ 식당 손님
URL	📜 메뉴판
서버	🍳 주방
데이터베이스	📦 재료 창고

💡 심화 포인트

개념	설명
Stateless 구조	요청-응답 독립적 → 세션, 쿠키, 토큰으로 상태 유지 필요
클라이언트	프론트엔드 → HTML, CSS, JS 담당
서버	백엔드 → DB, API, 인증, 비즈니스 로직
CDN 활용	정적 파일 빠르게 배포
API 서버 따로 분리 (REST API, GraphQL)	확장성↑, SPA 연동 가능

💼 면접 포인트

Q: 클라이언트-서버 구조 장점은?

역할 분리, 유지보수 용이
Stateless → 확장성 높음 (서버 수평 확장 가능)

💬 3️⃣ HTTP/HTTPS 프로토콜

✅ 기초 개념

프로토콜	설명
HTTP (HyperText Transfer Protocol)	웹 데이터 전송 약속, 요청-응답 기반
HTTPS	HTTP + SSL/TLS 암호화 추가

🔐 HTTPS 왜 중요한가?

보안 요소	설명
암호화 (Encryption)	데이터 도청 방지
무결성 (Integrity)	데이터 변조 방지
인증 (Authentication)	서버 진짜임을 인증 (SSL 인증서)

📨 HTTP 요청-응답 실전 예시

브라우저 → 서버
GET /index.html HTTP/1.1
Host: www.example.com

서버 → 브라우저
HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>

🧩 비유

프로토콜	비유 🌟
HTTP	📬 엽서 (내용 훤히 보임)
HTTPS	📦 자물쇠 채운 택배

💡 심화 포인트

프로토콜	특징
HTTP	빠르지만 평문 → 보안 취약
HTTPS	암호화, SEO 영향 있음, 성능 약간 낮음
TLS 1.3	최신 프로토콜, 핸드셰이크 속도 개선

💼 면접 포인트

Q: HTTPS가 중요한 이유?

데이터 도청/변조 방지
SEO 영향 (HTTPS 사이트 검색 상위 노출)
브라우저 보안 경고 방지 (🔒 표시)

🔒 4️⃣ 웹 표준 & 접근성

✅ 기초 개념

개념	설명
웹 표준 (W3C)	HTML, CSS, JS → 브라우저가 일관성 있게 해석하도록 규칙
웹 접근성 (WCAG)	장애, 기기 제약 없이 모두 사용 가능

💡 심화 내용

요소	상세 설명
W3C (World Wide Web Consortium)	HTML5, CSS3, ARIA 등 표준 제정 기관
WCAG (Web Content Accessibility Guidelines)	POUR 원칙 적용
POUR 원칙	Perceivable (인지 가능), Operable (조작 가능), Understandable (이해 가능), Robust (견고)
SEO & 접근성 관계	시맨틱 태그 사용, alt 속성, heading 계층 구조 → SEO에도 긍정 영향

🧩 비유

개념	비유 🌟
웹 표준	🚦 교통 법규 → 모든 브라우저가 똑같이 해석
웹 접근성	♿ 장애인 전용 주차장, 점자 블록

💼 면접 포인트

Q: 웹 접근성이 중요한 이유?

법적 의무 (장애인 차별 금지법)
사용자층 확대 (장애인·고령자)
SEO 최적화 (구조화된 정보 제공)

📚 최종 요약 테이블

항목	핵심 개념	심화 포인트
🌍 웹 정의	HTML+URL+HTTP 기반 하이퍼텍스트 시스템	하이퍼미디어, 웹 3.0 (시맨틱+AI)
🌐 클라이언트-서버	요청-응답 구조, 역할 분리	Stateless, 세션/쿠키, REST API/DB 연동
💬 HTTP/HTTPS	요청-응답, 암호화(TLS) 차이	SEO 영향, 인증서 구조, 성능 영향
🔒 표준 & 접근성	W3C & WCAG 준수	POUR 원칙, 시맨틱 태그, ARIA, SEO 연계