📌 브라우저는 이렇게 통신하고 있었구만..

웹 개발을 하다 보면 어느 순간 마주치는 개념들이 있음.

바로 '네트워크 구조', 'HTTPS', 'CORS' 같은 것들이다.

하나하나는 따로 배운 것 같은데, 막상 실제 서비스가 돌아가는 흐름 안에서는 전부 이어져 있었음.

그래서 이번 글에선 이 세 가지를 완전 초보자 눈높이에서 비유와 흐름을 중심으로 정리해보았다.

1️⃣  웹에서 데이터는 어떤 구조로 오갈까?

웹에서 데이터를 주고받는 과정을 택배가 오가는 구조로 비유하면 이해가 쉽다.

✅ LAN, MAN, WAN은 거리 개념

네트워크	비유	설명
LAN	동네 배달	집 안, 회사 내부 등 가까운 거리에서 쓰는 네트워크. 빠르고 설치 쉬움
MAN	시내 배송	도시 단위의 네트워크. 여러 건물 연결. 대학 캠퍼스처럼 넓지만 연결된 공간
WAN	전국/국제 배송	전 세계적으로 데이터를 주고받음. 인터넷이 대표적 예시

→ 정리하면, LAN은 방 안 와이파이, WAN은 인터넷이라 보면 됨

✅ OSI 7계층은 택배가 전달되는 단계

1. 물리 계층 → 택배를 실제로 싣는 트럭이나 도로 (전기/광신호)
2. 데이터 링크 계층 → 같은 동네 안 배달 주소 (MAC 주소)
3. 네트워크 계층 → 전국 주소 확인 및 경로 설정 (IP 주소)
4. 전송 계층 → 상자 나누기, 번호 붙이기 (TCP/UDP)
5. 세션 계층 → 택배 기사와 고객이 전화로 연결 유지
6. 표현 계층 → 포장 방식, 언어 번역 (인코딩/암호화)
7. 응용 계층 → 우리가 실제 쓰는 앱 (브라우저, 이메일 등)

 

→ 데이터를 보내는 쪽은 상자를 포장하고, 받는 쪽은 포장을 뜯는 구조임 (캡슐화 ↔ 역캡슐화)

✅ 예시로 이해해보기

브라우저에서 www.naver.com 입력 시

1. 입력한 URL → 응용 계층에서 처리됨
2. 인코딩된 요청 → 표현 계층, 세션 계층을 거쳐 전송 계층에서 TCP로 잘게 나눔
3. 네트워크 계층에서 IP 주소 설정 → 데이터 링크 계층에서 MAC 주소 붙임
4. 물리 계층에서 진짜 케이블이나 전파로 전송됨 → 상대 서버까지 이동

→ 이 구조가 결국 모든 인터넷 요청의 기본 흐름이었음

2️⃣ HTTP랑 HTTPS는 뭐가 다른 걸까?

✅ HTTP는 그냥 열린 상자였음

• 기본 HTTP는 택배 상자에 아무 보호도 없이 글자가 그대로 써 있는 상태였음
• 누가 가로채도 내용을 바로 볼 수 있음

✅ HTTPS는 자물쇠를 걸고, 열쇠는 받는 사람만 갖고 있음

• 이때 쓰는 게 공개키/개인키 시스템임 (비대칭 암호화)

1. 서버가 자물쇠(공개키)를 배포함
2. 클라이언트는 그 자물쇠로 상자를 잠금
3. 서버만 그 자물쇠에 맞는 열쇠(개인키)로 열 수 있음

→ 이 과정을 통해 중간에 누가 가로채도 내용은 못 보게 되는 것

✅ 그다음은 대칭키 방식으로 빠르게 통신

• 자물쇠로 초기 연결을 안전하게 만든다.
• 클라이언트와 서버는 하나의 키(세션키)를 공유해서 빠르게 주고받는다. (대칭키 암호화)

✅ 정리

방식	특징	사용 시점
비대칭키 (공개/개인키)	느리지만 안전	첫 연결, 세션키 주고받을 때
대칭키 (하나의 키)	빠르지만 키 유출 시 위험	본격적인 데이터 전송

→ HTTPS는 이 둘을 섞어 '빠르고 안전한 통신'을 만든 것이다.

3️⃣ SOP랑 CORS, 실제로 무슨 일 하는 걸까?

✅ SOP(Same-Origin Policy): 내 건물 안에서만 출입 허용

• 브라우저는 기본적으로 **같은 출처(origin)**에서 온 요청만 허용함
• 여기서 출처란 → 프로토콜 + 도메인 + 포트

예) http://example.com:3000 과 https://example.com:443 → 다른 출처!

→ 마치 회사 출입증이 우리 회사에서만 작동하는 것과 같음

✅ CORS(Cross-Origin Resource Sharing): 보안 게이트 통과 허가증

• 다른 출처에서 요청할 수 있도록 서버가 허용해주는 구조
• 즉, 서버가 "얘는 출입 허락할게"라고 문서로 내주는 것임

✅ 실제 흐름

1. 클라이언트가 다른 출처에 요청 보냄
2. 브라우저가 OPTIONS 메서드로 먼저 허가 요청 (Preflight)
3. 서버가 허가 헤더 포함 응답:
   - Access-Control-Allow-Origin
   - Access-Control-Allow-Methods
   - Access-Control-Allow-Headers
4. 브라우저가 본 요청 전송
5. 조건 충족 시 응답 받음, 아니면 에러 발생 (CORS 에러)

✅ 예시 코드 (Express)

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

✅ 마무리 정리

이 세 가지 개념은 하나의 흐름이다.

[데이터를 어떻게 보낼까?] → OSI 7계층
[어떻게 안전하게 보낼까?] → HTTPS
[다른 도메인끼리 주고받을 수 있나?] → CORS/SOP