출근길에 휴대폰으로 naver.com을 치거나, 카페에서 노트북으로 쇼핑몰에 들어갈 때 있잖아요. 우리는 그냥 주소창에 글자 몇 개 넣었을 뿐인데, 화면에는 이미지와 버튼과 글이 촤르륵 떠요.
근데 잠깐만요. 컴퓨터는 “naver.com” 같은 말을 사람처럼 알아듣는 걸까요?
전혀 아니에요. 사실 그 짧은 순간 뒤에서는 길 찾기, 초인종 누르기, 택배 받기, 방 꾸미기가 거의 동시에 벌어져요.
🧭 첫 번째 관문, 주소를 진짜 위치로 바꿔요
웹사이트 주소는 사람용 별명이에요. 친구 번호를 외우기 힘드니까 연락처에 “민수”라고 저장하는 것과 비슷해요. 브라우저도 마찬가지예요. 우리는 example.com을 입력하지만, 컴퓨터끼리는 숫자로 된 IP 주소를 써요.
이때 등장하는 게 DNS예요. DNS는 Domain Name System의 줄임말인데, 쉽게 말하면 인터넷 전화번호부예요.
| 사람이 입력한 것 | 컴퓨터가 필요한 것 |
|---|---|
example.com | 93.184.216.34 같은 IP 주소 |
| 기억하기 쉬운 이름 | 실제 찾아갈 숫자 주소 |
Cloudflare는 DNS를 “인터넷의 전화번호부”라고 설명해요. 도메인 이름을 IP 주소로 바꿔 브라우저가 인터넷 자원을 불러올 수 있게 해준다는 뜻이에요.
주소창 입력은 여행의 시작이고, DNS는 내비게이션에서 목적지를 좌표로 바꾸는 순간이에요.
🚪 서버에게 “문 좀 열어주세요”라고 말해요
IP 주소를 찾았다고 끝이 아니에요. 이제 브라우저는 해당 서버에 요청을 보내요. 이때 주로 쓰는 약속이 HTTP예요.
HTTP는 식당 주문서처럼 생각하면 쉬워요.
- 브라우저: “이 페이지 주세요.”
- 서버: “네, 여기 HTML 문서예요.”
- 브라우저: “이미지랑 CSS도 필요하네요.”
- 서버: “여기 추가 파일들이에요.”
MDN은 HTTP를 웹에서 리소스를 가져오기 위한 프로토콜, 즉 클라이언트와 서버가 요청과 응답을 주고받는 방식으로 설명해요. 여기서 클라이언트는 보통 내 브라우저, 서버는 웹사이트가 있는 컴퓨터예요.
조금 더 현실적으로 말하면, 웹페이지 하나는 한 장짜리 종이가 아니에요. HTML, CSS, JavaScript, 이미지, 폰트 같은 파일 묶음이에요. 그래서 브라우저는 “메인 요리 하나요” 하고 끝내는 게 아니라 “밥, 반찬, 소스, 냅킨도 주세요”처럼 여러 번 요청할 수 있어요.
🧱 받은 파일을 화면으로 조립해요
서버가 파일을 보내주면 이제 브라우저의 진짜 손재주가 시작돼요. HTML은 뼈대, CSS는 옷과 인테리어, JavaScript는 움직임이라고 보면 돼요.
예를 들어 쇼핑몰 페이지라면 HTML은 “상품명은 여기, 가격은 여기, 버튼은 여기”라고 구조를 잡아요. CSS는 “가격은 굵게, 버튼은 파랗게, 카드 모양은 둥글게”라고 꾸며요. JavaScript는 “버튼을 누르면 장바구니 숫자를 올려줘” 같은 행동을 맡아요.
여기서 살짝 어려운 개념 하나만 볼게요. Critical Rendering Path, 한국어로는 보통 주요 렌더링 경로라고 불러요. 브라우저가 HTML, CSS, JavaScript를 해석해서 실제 화면의 픽셀로 바꾸는 과정이에요.
MDN은 이 과정을 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변환하는 단계라고 설명해요. 그러니까 브라우저는 파일을 그냥 펼치는 게 아니라, 레고 설명서를 읽고 실제 완성품을 조립하는 셈이에요.
수식처럼 써보면 이래요. 웹페이지는 문서 하나가 아니라 여러 재료의 합이에요. 그래서 이미지가 너무 크거나 JavaScript가 무거우면 화면이 늦게 뜰 수 있어요.
⚡ 왜 어떤 사이트는 빠르고 어떤 사이트는 느릴까요?
같은 인터넷인데 어떤 사이트는 번쩍 뜨고, 어떤 사이트는 하얀 화면만 오래 보일 때 있죠. 이유는 여러 가지예요.
| 느려질 수 있는 이유 | 무슨 뜻이에요? |
|---|---|
| DNS 조회가 늦음 | 목적지 주소 찾기가 오래 걸려요 |
| 서버 응답이 늦음 | 식당 주방이 바빠요 |
| 파일이 너무 큼 | 택배 상자가 너무 무거워요 |
| 렌더링이 복잡함 | 조립해야 할 레고가 너무 많아요 |
그래서 웹 성능 개선은 단순히 “인터넷 빠르게 해주세요” 문제가 아니에요. 주소 찾기, 서버 처리, 파일 크기, 브라우저 조립 과정을 하나씩 줄이는 작업에 가까워요.
💡 주소창에 입력하고 화면이 뜨는 1~2초는 사실 작은 물류센터 하나가 풀가동되는 시간이에요.
🧩 한 줄로 정리하면요?
주소창에 뭔가를 입력하면 브라우저는 먼저 DNS로 실제 주소를 찾고, HTTP로 서버에 파일을 요청하고, 받은 HTML·CSS·JavaScript를 조립해서 화면에 보여줘요.
우리는 그냥 엔터 한 번 눌렀을 뿐인데, 인터넷은 뒤에서 꽤 바쁘게 뛰고 있었던 거죠. 다음에 하얀 화면이 잠깐 보이면 “아, 지금 레고 조립 중이구나” 하고 봐도 될 것 같아요. 그럼 다음 글에서 또 가볍게 뜯어봐요 👋
📚 참고 자료
- Cloudflare Learning Center, “What is DNS?”
- MDN Web Docs, “HTTP overview”
- MDN Web Docs, “Critical rendering path”
- web.dev, “Understand the critical path”
댓글
아직 댓글이 없어요