1. URL 입력 및 요청 시작
URL을 입력하고 Enter 키를 누르면, 브라우저는 웹사이트에 데이터를 요청할 준비를 시작한다. 예를 들어 https://www.example.com을 입력하면, 브라우저는 이 사이트에 연결할 준비를 한다.
2. DNS(Domain Name System) 조회
브라우저는 먼저 캐시를 확인하여 도메인의 IP 주소를 이미 알고 있는지 확인한다. 그렇지 않은 경우 DNS 서버에 쿼리하여 사람이 읽을 수 있는 URL(예: www.example.com)을 IP 주소(예: 192.0.2.1)로 변환한다. 이렇게 변환된 IP 주소는 인터넷 상에서 해당 서버의 위치를 알려준다.
3. 서버와의 연결 (TCP/IP)
IP 주소가 알려지면 브라우저는 3단계 핸드셰이크를 포함하는 TCP/IP 프로토콜을 통해 서버에 연결을 설정한다.
- SYN: 브라우저는 연결을 시작하기 위해 SYN(동기화) 메시지를 보낸다.
- SYN-ACK: 서버는 준비 상태를 나타내는 SYN-ACK(동기화 승인) 메시지로 응답한다.
- ACK: 마지막으로 브라우저는 연결을 확인하기 위해 ACK(승인) 메시지를 다시 보낸다.
웹사이트에서 HTTPS를 사용하는 경우, 이 연결에는 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)를 통한 추가 보안 계층도 포함된다. SSL/TLS는 브라우저와 서버 간에 교환되는 데이터를 암호화하여 중요한 정보가 가로채거나 변조되지 않도록 보호한다.
4. HTTP 요청 보내기
연결이 설정되면 브라우저는 서버에 HTTP 요청을 보낸다. 이 요청은 요청된 콘텐츠 유형(예: 데이터 가져오기를 위한 GET 요청)을 지정하고 브라우저 세부정보, 허용되는 형식 및 기타 관련 데이터가 포함된 헤더를 포함한다.
=> 예를 들어, 브라우저는 GET 요청을 보내서 example.com의 메인 페이지를 요청한다.
5. 서버의 응답 및 HTML 파일 수신
서버는 요청을 처리하고 HTML 파일과 상태 코드로 응답한다(예: 성공하면 200 OK, 페이지가 없으면 404 Not Found). 서버는 또한 CSS 파일(디자인), JavaScript 파일(동적 동작) 등 필요한 리소스를 포함해 브라우저에 응답할 수 있다.
6. 브라우저의 렌더링 준비
1. DOM 생성
브라우저는 HTML을 구문 분석하여 페이지의 모든 HTML 요소를 나타내는 트리 구조인 DOM(문서 개체 모델)을 구축한다.
2. CSSOM 생성
동시에 링크된 모든 CSS 파일을 처리하여 CSSOM(CSS 개체 모델)을 구축하고 각 요소의 스타일을 자세히 설명한다.
7. 렌더 트리 생성 및 레이아웃 계산
1. 렌더 트리
브라우저는 DOM과 CSSOM을 결합하여 계산된 스타일과 함께 표시되는 요소로만 구성된 구조인 렌더 트리를 만든다.
2. 레이아웃 계산
브라우저는 렌더 트리를 사용하여 화면에서 각 요소의 크기와 위치를 계산하여 표시할 페이지를 준비한다.
8. 페인트(Paint) 단계 및 화면 출력
- 페인트 단계에서 브라우저는 요소에 색상, 텍스트, 그림자를 적용해 실제로 화면에 그리기 위한 최종 작업을 진행한다.
- 마지막으로 브라우저는 화면에 각 요소를 그려주며, 우리가 입력한 웹사이트의 완성된 페이지가 화면에 표시된다.
요약
1. URL 입력 → 2. DNS 조회 → 3. 서버 연결 → 4. HTTP 요청 → 5. HTML/CSS/JS 수신 → 6. 렌더링 준비 (DOM/CSSOM 생성) → 7. 레이아웃 계산 → 8. 화면 출력
