웹 브라우저에서 URL 입력 시 발생하는 과정 이해

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 도입 등으로 성능 개선 가능
  • 네트워크 스택 이해는 디버깅 인스턴트를 향상시키는 핵심 기술