Programming/Network

웹사이트에 처음 접근할 때 발생하는 과정

마실개 2025. 4. 3. 14:37
반응형

웹사이트에 처음 접속할 때, 브라우저와 서버 간에는 다양한 과정이 발생합니다. 이 과정은 사용자의 요청(Request)이 웹 서버로 전달되고, 서버가 응답(Response)을 반환하여 브라우저가 웹 페이지를 표시하는 흐름으로 진행됩니다. 이번 글에서는 사용자가 웹사이트에 처음 접근할 때 발생하는 주요 단계를 알아보겠습니다.

1. URL 입력 및 DNS 조회

사용자가 브라우저의 주소창에 https://example.com과 같은 URL을 입력하면, 먼저 도메인 이름을 실제 IP 주소로 변환하는 과정이 필요합니다. 이를 DNS(Domain Name System) 조회라고 합니다.

  1. 브라우저는 먼저 로컬 캐시(이전 방문 기록)에서 해당 도메인의 IP 주소를 찾습니다.
  2. 로컬 캐시에 없으면 운영체제(OS)의 DNS 캐시를 확인합니다.
  3. 그래도 없으면 ISP(인터넷 서비스 제공업체)의 DNS 서버에 요청을 보냅니다.
  4. 최종적으로 루트 네임서버와 도메인별 네임서버(NS)를 거쳐 해당 도메인의 IP 주소를 찾습니다.

이 과정이 완료되면 브라우저는 웹 서버와 통신할 준비를 마칩니다.

 

2. 브라우저와 웹 서버 간의 TCP 연결

DNS 조회가 끝나면, 브라우저는 해당 IP 주소를 사용하여 웹 서버와 TCP(Transmission Control Protocol) 연결을 수립합니다. 이 과정에서 3-way Handshake라는 과정이 이루어집니다.

  1. 클라이언트(브라우저)가 서버에 SYN 패킷을 보냅니다.
  2. 서버가 응답으로 SYN-ACK 패킷을 보냅니다.
  3. 클라이언트가 다시 ACK 패킷을 보내면 연결이 완료됩니다.

이후 브라우저는 서버와 데이터를 주고받을 수 있는 상태가 됩니다.

 

3. HTTP/HTTPS 요청 전송

TCP 연결이 완료되면 브라우저는 웹 서버에 HTTP 또는 HTTPS 요청을 보냅니다. 이 요청에는 다음과 같은 정보가 포함됩니다.

  • 요청 메서드(GET, POST, PUT 등)
  • 요청 URL (/index.html 등)
  • 브라우저 정보 (User-Agent)
  • 쿠키 (이전 방문 기록이 있을 경우)
  • 기타 요청 헤더

만약 HTTPS를 사용하는 경우, TLS(SSL) 핸드셰이크 과정이 추가로 수행되어 보안이 강화됩니다.

 

4. 서버의 응답 처리

웹 서버는 요청을 받은 후, 적절한 리소스를 찾아 브라우저에 응답합니다. 응답 과정은 다음과 같습니다.

  1. 요청된 리소스(HTML, CSS, JavaScript, 이미지 등)를 확인합니다.
  2. 필요한 경우 데이터베이스에서 정보를 조회합니다.
  3. 서버 측 언어(PHP, Node.js, Python 등)를 사용해 동적으로 콘텐츠를 생성합니다.
  4. 응답을 HTTP 응답 형식으로 반환합니다.

서버의 응답에는 다음과 같은 요소가 포함될 수 있습니다.

  • 상태 코드(200 OK, 404 Not Found 등)
  • 응답 헤더(Content-Type, Cache-Control 등)
  • 응답 본문(HTML, JSON 등)

 

5. 브라우저의 렌더링 과정

서버가 응답을 보내면, 브라우저는 이를 받아서 웹페이지를 표시합니다. 이 과정은 여러 단계로 이루어집니다.

  1. HTML 파싱: HTML 문서를 해석하여 DOM(Document Object Model) 트리를 생성합니다.
  2. CSS 파싱: CSS 파일을 해석하여 스타일을 적용합니다.
  3. JavaScript 실행: JavaScript 파일을 다운로드하고 실행합니다.
  4. 레이아웃 및 렌더링: DOM과 CSSOM(CSS Object Model)을 결합하여 화면을 그립니다.
  5. 이미지 및 추가 리소스 로드: 웹 페이지의 추가 리소스를 다운로드하여 완전한 페이지를 표시합니다.

 

6. 추가 요청(비동기 요청, 캐싱 활용)

웹 페이지가 처음 로드된 후에도 추가 요청이 발생할 수 있습니다.

  • AJAX 또는 Fetch API를 이용한 비동기 요청
  • 브라우저 캐시 및 CDN(Content Delivery Network) 활용
  • 서비스 워커(Service Worker)를 이용한 오프라인 지원 및 푸시 알림 처리

 

7. 최적화 및 성능 개선 요소

웹사이트가 빠르게 로드되도록 하기 위해 다음과 같은 최적화 기법이 사용됩니다.

  • 브라우저 캐싱: 자주 사용하는 리소스를 캐시에 저장하여 재요청을 방지합니다.
  • CDN 사용: 정적 파일(이미지, CSS, JS 등)을 여러 지역의 CDN 서버에서 제공하여 로딩 속도를 높입니다.
  • Gzip 압축: HTTP 응답을 압축하여 전송량을 줄입니다.
  • Lazy Loading: 이미지 및 비동기 로딩을 활용하여 초기 로딩 속도를 높입니다.
  • 최소화된 코드 사용: CSS, JavaScript를 최소화하여 파일 크기를 줄입니다.

 

웹사이트 접근 시 OSI 7계층에 따른 대응 역할을 알고 싶으시다면 아래 포스트 참조해주세요.

https://biesil.tistory.com/38

반응형
저작자표시 비영리 변경금지 (새창열림)