브라우저 주소창에 URL을 입력하면 화면이 뜨기까지: DNS부터 렌더링까지 빠른 답 주소 입력 뒤 바로 화면이 뜨는 것이 아니라 DNS 조회, 연결 수립, TLS 협상, HTTP 요청, 렌더링이 순서대로 진행됩니다. 첫 화면 속도는 서버 응답 시간만이 아니라 CSS 다운로드, JavaScript 실행, 레이아웃·페인트 비용에도 크게 영향을 받습니다. HTTPS 사이트는 요청 전에 인증서 검증과 키 협상이 들어가므로 TLS 단계가 별도 병목이 될 수 있습니다. 병목은 Chrome DevTools의 Network와 Performance 탭으로 네트워크 지연과 렌더링 비용을 나눠 확인하는 것이 가장 빠릅니다. 목차 흐름으로 보기 왜 이 과정을 같이 봐야 하나 연결이 열리기 전: DNS, TCP, TLS, HTTP 응답이 화면이 되는 핵심: DOM, CSSOM, 렌더 트리 레이아웃, 페인트, 컴포지팅은 각각 무엇을 하나 첫 화면을 늦추는 흔한 비용 DevTools로 병목을 어떻게 찾나 구성과 설정으로 줄일 수 있는 비용 면접과 실무에서 자주 틀리는 설명 흐름으로 보기 1 DNS 조회 ↓ 2 TCP 연결 ↓ 3 TLS 협상 ↓ 4 HTTP 요청/응답 ↓ 5 DOM·CSSOM 생성 ↓ 6 레이아웃·페인트·컴포지팅 이 여섯 단계는 웹 페이지 로딩의 가장 큰 뼈대입니다. 앞쪽은 리소스를 받아오는 네트워크 흐름이고, 뒤쪽은 받은 데이터를 실제 화면으로 바꾸는 브라우저 렌더링 흐름입니다. 페이지가 느릴 때 원인을 정확히 찾으려면 이 둘을 섞지 말고 끊어서 봐야 합니다. 왜 이 과정을 같이 봐야 하나 브라우저 주소창에 https://www.google.com 을 입력하는 행동은 단순히 “서버에 요청한다”로 끝나지 않습니다. 브라우저는 먼저 어디로 연결할지 찾아야 하고, 안전한 연결을 만들어야 하며, HTML과 정적 자원을 받아온 뒤 그것을 다시 화면용 구조로 바꿔야 합니다. 사용자가 보는 첫 화면은 서버 응답 그 자체가 아니라, 브라우저가 수행한 렌더링 파이...