브라우저에 www.naver.com을 입력하면 무슨 일이 일어날까요?

 

 

🌐 브라우저에 www.naver.com을 입력하면 어떤 일이 일어날까요? 

지긋지긋한 면접 질문 중 하나. 브라우저에 ~를 입력하면 무슨 일이 벌어질까요!!!!!!!!!!
저만 골치아픈가요 🥲

우리 모두가 매일같이 사용하는 웹 브라우저.
그 주소창에 www.naver.com을 입력하면 어떤 일이 일어나는지, 내부 동작을 단계별로 정리해보았습니다.
겉으로 보기엔 단순한 동작처럼 보이지만, 브라우저 내부에서는 꽤나 많은 일들이 벌어지고 있어요. 
이 골치아픈 놈을 이제 해결해봅시다.

 

---

브라우저에 www.naver.com을 입력하면 벌어지는 일

1️⃣ URL 파싱

브라우저는 사용자가 입력한 주소를 URL 파싱으로 분석해 프로토콜, 호스트, 경로 등을 파악합니다.
예를 들어 https://www.naver.com의 경우:

• 프로토콜: https
• 호스트: www.naver.com
• 경로: / (생략된 경우 기본)

 

2️⃣ 브라우저 캐시 확인

브라우저는 DNS 캐시, HTTP 캐시 등 기존에 저장된 정보가 있는지 확인합니다.
만약 이전 방문 기록이 있다면, 일부 데이터는 네트워크 요청 없이 재사용될 수도 있어요.

 

3️⃣ DNS 조회

www.naver.com이라는 도메인을 IP 주소로 변환하기 위해 DNS 서버를 조회합니다.
이때 OS → 로컬 DNS 캐시 → ISP DNS 서버 순서로 확인하며,
결과적으로 예: 223.130.195.200 같은 IP를 얻습니다.

 

4️⃣ TCP 연결 (3-way 핸드셰이크)

IP를 알아낸 브라우저는 해당 서버와 TCP 연결을 맺습니다.

• [SYN] → [SYN-ACK] ← [ACK] 과정을 거치는 3-way 핸드셰이크가 이루어져요.

 

5️⃣ TLS 핸드셰이크 (HTTPS인 경우)

보안 연결을 위해 TLS 핸드셰이크가 진행됩니다.
이 과정에서 인증서 검증, 대칭키 교환 등이 이루어지며 암호화된 통신이 준비됩니다.

 

6️⃣ HTTP 요청 전송

연결이 완료되면 TCP 위에서 다음과 같은 형태의 HTTP 요청이 전송됩니다.
요청에는 쿠키, 토큰, 브라우저 정보 등이 함께 포함될 수 있어요.

GET / HTTP/1.1  
Host: www.naver.com  
User-Agent: ...

 

7️⃣ 서버 응답

서버는 요청을 처리한 뒤, HTML 문서와 함께 응답을 반환합니다.

 

HTTP/1.1 200 OK  
Content-Type: text/html

이 외에도 브라우저는 HTML을 파싱하며 JS, CSS, 이미지 등 추가 리소스를 요청합니다.

 

8️⃣ 렌더링 파이프라인 실행

도착한 HTML을 기반으로 브라우저가 렌더링 작업을 시작합니다.

1. HTML을 HTML 파싱하여 DOM Tree 생성 (필요시 JS를 실행하여 DOM을 조작함)
2. CSS를 CSS 파싱하여 CSSOM Tree 생성
3. DOM Tree와 CSSOM Tree를 합쳐서 Render Tree 생성
4. 레이아웃을 계산하여 Render Tree 생성
5. Painting -> 화면 출력

 

9️⃣ 웹 페이지 표시

이제 사용자는 네이버의 홈 화면을 볼 수 있게 됩니다.
추가적인 사용자 상호작용(클릭, 입력 등)에 따라 자바스크립트가 동작하며 동적인 페이지가 완성됩니다.

 

 

요약

1. URL 파싱
2. 브라우저 캐시 확인
3. DNS 조회
4. TCP 3-way-handshake 연결
5. TLS 핸드셰이크 (https인 경우)
6. HTTP 요청 전송
7. 서버 응답
8. 렌더링 파이프라인 실행
9. 웹 페이지 표시

 

 

---

✨ 마무리

이처럼 우리가 주소창에 URL을 입력하는 간단한 동작 하나에도
브라우저와 네트워크, 서버, 렌더링 등 다양한 기술이 복합적으로 작동하고 있어요.
이 과정을 이해하면, 개발 중 발생하는 다양한 문제를 더 쉽게 해결할 수 있습니다.