웹 브라우저에서 Enter를 누른 후 일어나는 모든 일들 낱낱이 파헤치기

백엔드 개발자라면 웹 브라우저에서 검색창에 문자열을 입력 후 'Enter'키를 눌렀을 때 백엔드에서 발생하는 일련의 과정들을 모두 알고 있어야 한다고 생각합니다. 훗날 서버에 문제가 발생하거나 성능을 보완해야 하는 경우를 대비해야 하기 때문입니다.  

출처_https://livebook.manning.com/concept/aspnet/process

 

먼저, 사용자가 구글 검색창에서 'Backend Developer'를 검색한다고 가정하겠습니다. 이때, 사용자가 검색 엔진에 입력하는 텍스트를 '쿼리'라고 합니다. 사용자가 브라우저 검색창에 쿼리를 입력하고 엔터를 누르면 브라우저는 ① URL을 구성합니다. 예를 들어, 'Backend Developer'를 검색한 경우에는  'https://www.searchengine.com/search?q= Backend Developer'와 같은 URL이 생성됩니다.

출처_https://www.geeksforgeeks.org/working-of-domain-name-system-dns-server/

 

브라우저는 URL의 도메인 부분(www.searchengine.com)을 IP 주소로 변환하기 위해 DNS(Domain Name System) 서버에 질의합니다. DNS 서버는 브라우저가 실제 서버에 접근할 수 있도록 도메인 이름을  IP 주소로 변환하여 브라우저에 전달합니다.

 

DNS 서버로부터 IP 주소를 전달 받은 브라우저는 ② HTTP 요청을 준비합니다. 이때 TCP 프로토콜을 이용하여, 3-way handshake 과정을 통해 통신합니다. HTTPS 요청일 경우, TLS(Transport Layer Securiy) handshake가 추가됩니다.

이를 통해 데이터 암호화 및 보안 연결이 설정됩니다.

**HTTPS(HTTP over TLS)란? : HTTP에 보안을 추가한 프로토콜로, SSL/TLS를 사용하여 웹 브라우저와 웹 서버 간의 데이터 통신을 암호화합니다. 이는 클라이언트와 서버 간에 주고받는 데이터가 중간에서 가로채이거나 변조되는 것을 방지하고, 서버의 신원을 확인하여 신뢰할 수 있는 통신을 가능하게 합니다. 일반적으로 HTTPS는 URL의 "https://" 접두사와 함께 표시됩니다.

출처_https://junshock5.tistory.com/143

 

3-way handshake

1. 클라이언트가 서버에 연결 요청을 보내기 위해 SYN 플래그가 설정된 패킷을 전송합니다.

2. 서 버는 클라이언트의 SYN 패킷을 수신하고, 이를 확인하기 위해 SYN과 ACK 플래그가 설정된 패킷을 클라이언트에게 반환합니다.

3. 클라이언트는 서버의 SYN-ACK 패킷을 수신하고, 이를 확인하기 위해 ACK 플래그가 설정된 패킷을 서버에게 보냅니다.

이 3단계 과정이 완료되면, 클라이언트와 서버 간의 TCP 연결이 설정되고, 데이터 전송이 가능해집니다.

출처_https://junshock5.tistory.com/143

 

TLS(Transport Layer Securiy) handshake

컴퓨터 네트워크 상에서 통신의 보안을 제공하는 프로토콜입니다. TLS는 데이터를 암호화하여 클라이언트와 서버 간의 기밀성과 무결성을 보장하며, 신원 인증을 통해 서버의 신뢰성을 확인합니다. 이는 이전 버전인 SSL(Secure Sockets Layer)을 대체하는 표준 프로토콜로, HTTPS, 이메일, 메시징 등 다양한 인터넷 서비스에서 사용됩니다.

출처_https://www.fortinet.com/kr/resources/cyberglossary/waf-vs-firewall

 

요청이 전달될 때, 네트워크와 WAF(Web Application Firewall) 방화벽을 거칩니다. 방화벽은 보안 규칙에 따라 요청을 허용하거나 차단합니다. 네트워크 방화벽은 공격의 위험을 방지하기 위해 무단 액세스로부터 LAN(보안 근거리 네트워크)을 보호합니다. 주요 목표는 보안 구역을 덜 안전한 구역과 분리하고 두 구역 간의 통신을 제어하는 것입니다. WAF는 추가된 방화벽으로 HTTP 트래픽을 타깃으로 지정하여 웹 애플리케이션을 보호합니다. WAF는 외부 사용자와 웹 응용 프로그램 사이에 위치하여 모든 HTTP 통신을 분석하고 사용자 또는 웹 애플리케이션에 도달하기 전에 악성 요청을 감지하고 차단합니다. 

 

이제 클라이언트로부터 HTTP(S) 요청을 받은 ③ 웹 서버에서 어떤 작업을 하는지 알아보겠습니다.

출처_https://vinahost.vn/en/what-is-an-application-server/

 

웹 서버는 정적 콘텐츠(ex) HTML, CSS, JavaScript, 이미지 파일)를 직접 제공할 수 있습니다. 만일 요청이 동적 콘텐츠나 비즈니스 로직을 요구하는 경우, 웹 서버는 이를 어플리케이션 서버로 전달합니다. 

웹은 처음에는 간단한 문서를 전달하는 용도였으나 사용자 수가 많아지면서 복잡한 리소스(동적 페이지나 데이터베이스를 통한 콘텐츠 등)가 요구되기 시작했고 모든 리소스를 한 개의 어플리케이션으로만 처리하기 어려워졌습니다. 이를 해결하기 위해 만든 것이 게이트웨이입니다.

출처_https://straw961030.tistory.com/90

 

게이트웨이는 클라이언트나 서버에게 요청을 처리해달라는 부탁을 받고 요청에 대한 응답을 할 수 있습니다. 또한, HTTP 트래픽을 다른 프로토콜로 변환하여 클라이언트가 다른 프로토콜을 알 필요 없이 서버에 접속할 수 있게 하는 역할을 수행합니다. 예를 들어, 클라이언트가 어플리케이션이 FTP인 서버에게 FTP 트래픽이 아닌 HTTP 트래픽을 보내어도 게이트웨이가 변환해주어 FTP 서버와 통신을 가능하게 해주는 것이 게이트웨이의 역할입니다.

게이트웨이의 가장 일반적인 형태인 어플리케이션 서버는 목적지 서버와 게이트웨이를 한 개의 서버로 결합합니다. 즉, 어플리케이션 서버는 HTTP를 통해서 클라이언트(웹 서버)와 통신하고 서버 측에 있는 어플리케이션 프로그램에 연결하는 서버 측 게이트웨이입니다.

 

어플리케이션 서버는 웹 서버에서 받은 요청을 처리하며, 비즈니스 로직을 실행합니다. 어플리케이션 서버는 필요한 데이터에 접근하기 위해 데이터베이스 서버에 쿼리를 전송합니다.

**비즈니스 로직이란? : 어플리케이션 서버가 특정 도메인의 비즈니스 규칙과 요구사항을 처리하는 방식. 사용자 인증, 세션 관리, 데이터 검증 , 비즈니스 규칙 적용, 응답 또는 출력 생성이 포함될 수 있습니다.

 

여기서 어플리케이션 서버는 WAS(Web Application Server)를 의미하는데 웹 서버와 웹 컨테이너가 합쳐진 형태로서, 웹 서버 단독으로는 처리할 수 없는 데이터베이스 조회나 다양한 로직 처리가 필요한 동적 컨텐츠를 제공합니다. 즉, 위에서 클라이언트와 웹 서버, 어플리케이션 서버, 데이터베이스 서버 사이의 관계를 나타낸 그림을 다시 표현하면 아래와 같은 그림이 됩니다.

**웹 컨테이너란? : 웹 서버가 보낸 JSP, PHP 등의 파일을 수행한 결과를 다시 웹 서버로 보내주는 역할을 함

출처_https://codechasseur.tistory.com/25

 

출처_https://codechasseur.tistory.com/25

 

 

데이터베이스 서버는 어플리케이션 서버로부터 받은 쿼리를 처리하고, 동적 콘텐츠 생성을 위해 데이터를 저장, 관리 및 검색합니다. 그 후 결과 데이터를 어플리케이션 서버에 반환합니다. 어플리케이션 서버는 데이터베이스로부터 받은 데이터를 처리하여 클라이언트에게 보낼 응답을 생성합니다. 생성된 응답은 다시 웹 서버로 전달되고 웹 서버는 ④ 클라이언트에게 최종 응답을 전송합니다.

 

최종 응답을 받은 ⑤ 클라이언트는 HTML, CSS, Javascirpt, Image 등이 포함된 리소스를 렌더하여 사용자에게 새로운 브라우저를 보여줍니다.

 

렌더링은 브라우저가 HTML, CSS, JavaScript 등의 코드와 데이터를 처리하여 최종적으로 사용자가 볼 수 있는 그래픽 화면으로 변환하는 과정입니다.

1. HTML 파싱: HTML 코드를 해석하여 DOM(Document Object Model) 트리를 생성합니다.

2. CSS 파싱: CSS 스타일을 해석하여 스타일 규칙을 적용합니다.

3. 레이아웃 배치: 각 요소의 크기와 위치를 계산합니다.

4. 출력: 요소들을 브라우저에 출력합니다.

 

출처_https://docs.tosspayments.com/resources/glossary/dom

 

DOM 트리란 웹 페이지의 구조를 트리 형태로 표현한 객체 기반의 모델입니다. 웹 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성하며, 이 트리는 웹 페이지의 요소들을 계층적으로 나타냅니다. 각 노드는 HTML 태그, 속성, 텍스트 등을 나타내며, 부모-자식 관계를 통해 요소 간의 관계를 표현합니다. DOM 트리를 통해 JavaScript 같은 프로그래밍 언어로 웹 페이지의 요소를 추가하거나 삭제하고, 속성을 변경하거나 스타일을 수정하는 등 내용과 구조를 동적으로 변경할 수 있습니다. 

 

'Enter'키를 누른 후 웹의 백단에서 발생하는 일들을 정리해보면,

1. 검색창의 쿼리를 바탕으로 URL 생성

2. DNS 서버로 URL을 전송하여 IP 주소를 응답 받음

3. 브라우저가 HTTP 요청을 준비(TCP 프로토콜 이용)하여 웹 서버로 전송(HTTPS라면 TLS 추가)

4. 웹 서버는 전달 받은 요청이 동적 콘텐츠나 비즈니스 로직을 요구하는 경우, 어플리케이션 서버로 전달

5. 어플리케이션 서버는 필요한 데이터에 접근하기 위해 데이터베이스 서버에 쿼리를 전송

6. 데이터베이스 서버는 요청을 처리한 후 결과 데이터를 어플리케이션 서버에 반환

7. 어플리케이션은 다시 웹 서버로 결과를 반환

8. 웹 서버는 클라이언트에게 최종 응답을 전송

9. 클라이언트는 전달받은 리소스를 렌더하여 새로운 브라우저 생성

 

브라우저가 생성되기까지 1초도 안되는 짧은 시간동안 이렇게나 복잡하고 많은 과정들이 있다는 것을 알고 나니 개발자의 배움에는 역시 끝이 없는 것 같습니다. 앞으로도 웹 프로세스에 대해 깊이 있게 공부하여 웹 어플리케이션의 설계와 구현에서 발생할 수 있는 다양한 문제들을 보다 효과적으로 해결할 수 있도록 해야겠습니다.