URL 입력 시 웹 브라우저에서 일어나는 과정 이해하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 앱 개발자, 네트워크 성능 최적화 담당자, 초보 프론트엔드 개발자
핵심 요약
- DNS 룩업 시간이 첫 번째 네트워크 지연 요인 (예:
8.8.8.8
DNS 서버 지연) - TCP 핸드셰이크 및 TLS 핸드셰이크 (HTTPS의 경우 추가 단계)가 성능 저하의 주요 원인
- 서버 응답 시간과 클라이언트 렌더링 (예: 대량의 JavaScript 실행 지연)은 앱 성능에 직접적 영향
섹션별 세부 요약
1. URL 입력 시 DNS 역할
- 브라우저는
www.example.com
을 IP 주소(93.184.216.34
)로 변환하는 DNS 요청을 보냄 - DNS는 인터넷의 전화부 역할:
8.8.8.8
(Google DNS) 또는 ISP DNS 서버에 요청 - DNS 캐시 미스는 첫 로딩 지연의 주요 원인
2. TCP 연결과 포트 역할
- IP 주소를 알면 TCP 핸드셰이크 (3-way handshake: SYN, SYN-ACK, ACK)를 수행하여 연결
- HTTP 기본 포트 80, HTTPS 기본 포트 443을 통해 요청 전달
- 포트는 서버가 요청을 어떤 서비스(예: 웹 서버)로 라우팅하는 기준
3. 데이터 전송과 패킷 분할
- 요청 데이터는 패킷 단위로 분할 (예: 5MB 이미지 시 20개 이상의 패킷 생성)
- TCP가 패킷 손실/중복/순서 오류를 자동 복구 (retransmission, sequencing)
- 인터넷 경로 차이로 인해 패킷 전달 시간이 달라질 수 있음
4. 성능 저하 요인 분석
- DNS 룩업 시간, TCP 핸드셰이크, TLS 핸드셰이크, 서버 응답 시간, 페이로드 크기, 클라이언트 렌더링
- 예시: 5MB 히어로 이미지로 인한 페이로드 증가, 서버 위치(Europe)와 사용자 위치(Brazil) 간 지연
- CDN 에지 서버의 위치도 지연에 영향
결론
- 웹 앱 성능 문제는 React 코드가 아닌 DNS 설정, 서버 응답 시간, CDN 위치 등 네트워크/서버 측 요인에 기인할 수 있음
- HTTP 헤더 최적화, 캐싱 전략, TLS 1.3 도입 등으로 성능 개선 가능
- 네트워크 스택 이해는 디버깅 인스턴트를 향상시키는 핵심 기술