웹의 기본 개념 정리 : 브라우저, 서버/클라이언트, IP·DNS·도메인·포트, HTTPS, DOM, 렌더링

웹 개발/보안을 공부할 때 가장 먼저 부딪히는 용어들이 있다.
브라우저, 서버, 클라이언트, IP/DNS/도메인/포트 같은 단어들인데, 각각 따로 외우기보다 “서로 어떻게 연결되는지”를 한 번에 잡는 게 훨씬 중요하다.

---

 

1. 웹브라우저(Web Browser)란?

웹브라우저는 사용자가 웹을 이용할 수 있게 해주는 프로그램이다.

• 웹 서버에 요청(Request) 을 보내고
• 서버로부터 응답(Response) 을 받은 뒤
• HTML/CSS/JS, 이미지, JSON(API) 같은 데이터를 해석해서 화면에 보여주는 역할을 한다.

예: Chrome, Edge, Safari, Firefox

 

---

 

2. 서버(Server)란?

서버는 서비스(service)를 제공하는 주체다.
즉, “서버 = service + er”처럼 무엇을 제공하느냐가 핵심이다.

• 웹 서버: 웹 페이지/웹 API 제공
• DB 서버: 데이터 조회/저장 제공
• 그 외에도 파일 서버, 메일 서버, 게임 서버 등 다양한 서버가 있다.

서버는 물리적인 “컴퓨터”를 뜻할 때도 있고, 그 위에서 돌아가는 “프로그램”을 뜻할 때도 있다(둘 다 문맥에 따라 서버라고 부른다).

 

---

 

3. 클라이언트(Client)란?

클라이언트는 서버로부터 서비스를 제공받는 주체다.

예를 들면:

• 브라우저는 웹 서버의 클라이언트
• 모바일 앱은 API 서버의 클라이언트

중요한 포인트는 서버/클라이언트는 “고정된 존재”가 아니라 역할(role) 이라는 점이다.
상황에 따라 서버가 클라이언트가 되거나, 클라이언트가 서버가 될 수도 있다.

 

---

 

4. IP, DNS, Domain(도메인), Port(포트)란?

IP 주소: 집주소(숫자)

IP는 네트워크에서 장치를 식별하는 “주소”다.
비유하면 집주소 같은 개념이고, 보통 숫자로 표현된다.

• IPv4 예: 203.0.113.10
• IPv6 예: 2001:db8::1

또한 IP는

• 공인 IP(public): 인터넷에서 직접 식별되는 주소
• 사설 IP(private): 집/회사 내부망에서만 쓰는 주소로 나뉜다.

 

도메인(Domain): 집주소가 불편해서 붙인 별명

IP는 숫자라서 외우기 어렵다. 그래서 사람이 쓰기 편한 “이름(별명)”을 붙인 게 도메인이다.

예: example.com

 

DNS: 도메인을 IP로 바꿔주는 시스템

DNS(Domain Name System) 는 도메인을 IP 주소로 변환해주는 시스템이다.

간단 흐름:

1. 브라우저에 example.com 입력
2. DNS에 “이 도메인의 IP가 뭐야?” 질문
3. DNS가 IP를 알려줌
4. 그 IP로 접속한다

 

포트(Port): 서비스 번호

한 컴퓨터(IP) 안에서도 여러 서비스가 동시에 실행될 수 있다.
이때 “어떤 서비스로 들어갈지” 구분해주는 번호가 포트다.

즉, 포트 = 서비스 번호

예시:

• 203.0.113.10:80 → 80번 서비스로 접속
• 203.0.113.10:443 → 443번 서비스로 접속

자주 쓰는 Well-known port(대표 포트):

• HTTP: 80
• HTTPS: 443
• SSH: 22
• DNS: 53

 

---

 

5. 네트워크(Network)란?

네트워크는 장치들이 서로 통신(데이터를 주고받음) 할 수 있게 연결된 구조다.

• 네트워크 = 통신
• 인터넷 = 네트워크의 집합(전 세계 네트워크가 연결된 것)

“종이컵 전화기의 선을 늘리면 장거리 통신이 된다”는 비유처럼, 멀리 보낼수록 중간에서 연결해주는 장치/경로가 더 중요해진다.

 

---

 

6. 공유기란?

가정에서 말하는 공유기는 보통 라우터 + 스위치 + Wi-Fi 기능이 합쳐진 형태다.

핵심 역할:

1. 집 안에 내부 네트워크(LAN) 를 만든다
2. 여러 기기가 인터넷을 공유해서 쓰게 한다
3. 기기들에 사설 IP를 나눠주고(DHCP), 바깥으로는 공인 IP로 대표해서 통신(NAT)하는 경우가 많다

정리하면 공유기는 “집 안의 기기들이 서로 대화하고, 인터넷과도 대화하도록 해주는 관문”이다.

 

---

 

7. HTTPS란?

HTTP (Hypertext Transfer Protocol, 인터넷 데이터 통신 규약)

HTTP는 브라우저(클라이언트)와 서버가 웹 데이터를 주고받기 위한 통신 규칙(프로토콜)이다.
초기에는 HTML 중심이었지만 지금은 JSON(API), 이미지/영상 등 거의 모든 웹 데이터가 HTTP로 오간다.

HTTPS (HTTP Secure)

HTTPS는 HTTP에 보안(암호화) 을 추가한 것이다.
즉, HTTPS = HTTP Secure

HTTPS가 중요한 이유:

• 도청 방지: 중간에서 가로채도 해독이 어려움
• 위변조 방지: 중간에서 내용 바꿔치기 방지
• 서버 신원 확인: 인증서로 “진짜 사이트인지” 확인

 

---

 

8. DOM이란?

DOM(Document Object Model) 은 브라우저가 HTML 문서를 읽어서 만든 트리(Tree) 구조의 객체 모델이다.

왜 DOM이 필요할까?

• JavaScript는 페이지를 “문자열 HTML”로 다루는 게 아니라
• DOM이라는 구조를 통해 요소를 찾고, 수정하고, 추가/삭제한다.

예: 버튼 클릭 시 문구 변경, 리스트 추가, 화면 일부 숨기기 등

 

---

 

9. 브라우저 렌더링 과정(주소 입력 → 화면 출력)

웹페이지가 뜨기까지의 큰 흐름은 다음과 같다.

1. URL 입력
2. DNS 조회(도메인 → IP)
3. 서버 연결(IP + Port, HTTPS면 TLS 과정 포함)
4. HTTP 요청/응답(HTML 등 수신)
5. HTML 파싱 → DOM 생성
6. CSS 파싱 → CSSOM 생성
7. DOM + CSSOM → Render Tree 생성
8. Layout(레이아웃): 크기/위치 계산
9. Paint(페인트): 색/글자/테두리 등을 그림
10. Composite(합성): 레이어를 합쳐 최종 화면 출력
11. JavaScript 실행 중 DOM/CSS 변경 시 일부 과정이 반복될 수 있음

 

---

 

전체를 한 문장으로 요약하면

브라우저(클라이언트)가 도메인을 DNS로 IP로 바꾼 뒤, 해당 IP의 특정 포트(서비스) 로 접속해 HTTP/HTTPS로 데이터를 주고받고, 받은 HTML/CSS/JS를 파싱해 DOM 기반으로 렌더링하여 화면에 보여준다.