1. 웹 페이지란?
지금의 인터넷은 단순히 취미를 즐기기 위한 것이 아니라 거의 모든 정보에 접근할 수 있는 도구이자, 전 세계 사람들과 소통할 수 있는 커뮤니케이션의 공간입니다. 개발자를 목표로 하고 있는 저는 당연히 인터넷과 웹이 어떻게 동작하는지에 대해 배워야 하지만, 이번 포스팅에서는 독자분들도 이해할 수 있도록 어떤 과정을 통해 사용자에게 웹 페이지를 보여주는지 자세하게 알아보겠습니다.
2. 웹 서버 & 웹 클라이언트
지금 보는 웹 페이지는 어떻게 사용자에게 전달되는 걸까? 이걸 알기 위해서는 먼저 웹서버(Server), 웹 클라이언트(Client) 구조에 대해 알고 있어야 합니다.
2.1 웹서버(Web Server)
서버(Server)는 어원 그대로 서비스 제공자란 뜻입니다. 웹 서버는 인터넷 서비스를 제공하는 프로그램을 의미합니다. 또한 해당 프로그램을 실행하는 컴퓨터를 뜻하는 물리적인 장치를 의미하기도 합니다.
웹서버는 클라이언트의 요청을 받고 해당하는 적절한 정보, 콘텐츠를 제공합니다. 주로 웹페이지, 파일 등을 전달합니다. 또한, 웹서버는 정해진 서비스 외에 클라이언트의 다른 요청에는 정상적으로 동작하지 않습니다.
2.2 웹 클라이언트(Web Client)
웹 클라이언트는 사용자의 동작을 감지하고 웹서버에 정보를 요청하는 프로그램입니다. 클라이언트는 서버가 전달한 리소스(HTML, CSS, Javascript)를 해석하고 렌더링 하여 웹 페이지를 보여줍니다. 웹 클라이언트의 종류로는 웹 브라우저, 웹 어플리케이션, 모바일 앱 등이 있습니다. 우리에게 익숙한 클라이언트 프로그램이 웹 브라우저입니다.
3. 브라우저에 www.naver.com을 입력하면 생기는 일
브라우저 주소창에 www.naver.com 을 입력하면 네이버 메인페이지가 브라우저에 표시됩니다. 이때 메인페이지를 보여주기 위해 서버와 브라우저간에 발생하는 일은 아래와 같습니다.
- 사용자가 입력한 URL을 브라우저가 파싱 하여 프로토콜, 도메인, 경로, 리소스 등을 추출
- 웹 사이트를 호스팅 하는 웹 서버의 위치(IP주소)를 조회
- 웹 서버에 TCP/ IP 연결
- 브라우저가 특정 페이지를 가져오기 위한 HTTP 요청 전송
- 웹 서버가 HTTP응답을 생성하고 클라이언트에 전송
- 브라우저가 HTTP 응답을 통해 웹 페이지를 렌더링
3.1 URL 파싱
첫번째로 브라우저는 사용자가 입력한 URL을 파싱 하여 구조를 파악합니다. URL은 요청하고자 하는 여러 정보들이 포함되어 있기 때문에 이들을 분리해야 합니다. URL의 구성요소는 다음과 같습니다.
- 프로토콜(Protocol) : URL 통신에서 사용되는 통신 규약
- 도메인(Domain) : 네트워크 상에서 서버를 식별할 수 있는 이름
- 경로(Path) : 서버 내 리소스의 위치를 나타내는 경로
- 포트번호(Port) : 서버 컴퓨터 내의 어플리케이션에 연결하기 위한 번호
3.3 DNS 조회
Domain Name System이란 호스트의 도메인 이름을 IP주소로 변환시켜 주는 시스템입니다.
브라우저는 서버와 연결하기 위해 서버의 위치 정보를 알고 있어야 합니다. 컴퓨터가 어디에 위치하는지 나타내기 위해 인터넷 네트워크 상에서는 IP주소를 사용하고 있습니다.
하지만, 사용자의 URL에는 IP주소가 아니라 도메인 네임이 있기 때문에 각 도메인에 대응하는 IP주소값을 찾는 작업이 추가적으로 이뤄져야 합니다. 해당 작업이 DNS 조회입니다.
IP주소(223.130.195.200)는 숫자로만 길게 구성되어 있기 때문에 사용자는 좀 더 기억하기 쉬운 도메인(www.naver.com)을 사용한다!
사용자는 IP주소를 얻기 위해 DNS서버에 요청하여 DNS 조회를 수행합니다. 이렇게 DNS 서버에 요청하는 행위를 DNS Query라고 합니다.
전 세계에 있는 모든 사람들이 DNS 조회를 수행할 수 있도록 Internet Service Provider(ISP)에서 DNS서버를 구축, 운영하고 있습니다. 또한 각 ISP에서 관리하는 DNS서버는 효과적인 DNS Query를 수행하도록 계층적인 구조(Tree)를 지니고 있습니다.
DNS 조회는 우선적으로 로컬, 라우터, ISP에 캐싱된 데이터를 확인합니다. 만약 캐싱된 데이터가 없다면 Resolver 서버는 Root DNS 서버부터 시작하여 하위 DNS 서버를 재귀적으로 조회합니다.
3.3 TCP / IP
DNS조회를 통해 서버의 IP주소를 얻었으면 이제 서버와 통신할 준비가 되었습니다. 인터넷 네트워크는 멀리 떨어진 컴퓨터끼리 데이터를 전하기 위하여 통신 규칙을 정했습니다. 그게 바로 TCP/IP (Transmission Control Protocol/Internet Protocol) 전송제어 프로토콜입니다. 브라우저는 IP주소를 토대로 서버와 TCP/IP 연결을 수립합니다.
- Internet Protocol : IP는 데이터 패킷을 라우팅 하고 전달하는 역할을 하는 프로토콜입니다. IP는 패킷의 출발지와 목적지 주소를 지정하고, 이를 통해 패킷이 올바른 목적지로 전달되도록 보장합니다.
- Transmission Control Protocol : TCP는 데이터를 안정적으로 전송하기 위한 프로토콜입니다. TCP는 신뢰성 있는 연결 기반 프로토콜로 데이터 전송 중에 발생할 수 있는 손실을 방지하고 안정적인 데이터 전송을 보장합니다.
OSI 7계층에서 TCP는 전송 계층, IP는 네트워크 계층, HTTP는 응용 계층에 해당합니다.
3.4 HTTP Request / Response
Hypertext Transfer Protocol(HTTP)는 인터넷상에서 웹 클라이언트와 서버 간 데이터를 주고받는 통신에 대한 프로토콜입니다. 클라이언트가 요청(Request)을 하고 서버가 응답(Response)을 주고받는 방식으로 동작합니다. 브라우저는 서버와 TCP/IP 연결이 되면, HTTP Request 메세지를 생성하고 이를 서버에 전송합니다.
- HTTP Request : 요청 메세지는 메소드 종류, URL, 헤더, Body로 구성되어 있습니다.
- Method : GET(요청), POST(추가), PUT(업데이트), DELETE(삭제)와 같은 메소드들이 있습니다.
- URL : 사용자가 얻고자 하는 리소스의 경로입니다.
- Header : 클라이언트 정보, 요청의 형식, 인증과 같은 요청에 대한 추가적인 정보가 있습니다.
- Body : Post와 같이 데이터를 추가할 때 전달되는 데이터의 본문입니다.
- HTTP Response : 클라이언트의 요청을 받은 서버가 해당 요청에 대한 HTTP 응답을 생성하고 이를 다시 클라이언트에게 전송합니다.
- Status Code : 요청의 처리 결과를 나타내는 세자리 숫자입니다. 일반적으로 2xx(성공), 3xx(리다이렉션), 4xx(클라이언트 오류), 5xx(서버 오류)입니다.
- Hearder : 응답의 형식, 캐싱 정책, 인증 등과 같은 응답에 대한 추가 정보를 나타냅니다.
- Body : 응답으로 전송되는 데이터입니다. HTML, CSS, JavaScript 같은 리소스가 포함됩니다.
브라우저가 성공적으로 HTTP 응답 메세지를 받으면 HTML, CSS, JavaScript와 같은 리소스를 해석하고 랜더링 하여 화면에 표시함으로써 모든 과정이 마무리됩니다.
4. 참고자료
- https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
- http://www.tcpschool.com/webbasic/component
- https://www.hostinger.com/tutorials/what-is-a-url
- http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
