🤔 웹에서 리소스를 요청하고 전달받는 과정의 중심에는 HTTP(HyperText Transfer Protocol)가 있습니다. 웹 환경이 고도화됨에 따라 HTTP 역시 지속적으로 발전해왔고, 그 흐름 속에서 HTTP/1.1 → HTTP/2 → HTTP/3로 진화해왔습니다.
📑 각 HTTP 버전의 동작 원리, 주요 특징, 그리고 성능상의 변화와 최적화 방법을 살펴보며, 현대적인 웹 환경에서 HTTP를 어떻게 이해하고 활용할 수 있을지 정리해보고자 합니다.
⭐해당 포스트는 HTTP 버전에 따른 리소스 효율과 전략을 다루었습니다⭐
💫 HTTP와 리소스 관리
HTTP는 단순히 데이터를 주고받는 전송 수단을 넘어, 웹 페이지가 리소스를 얼마나 빠르고 효율적으로 불러오고 관리할 수 있는지를 좌우하는 핵심 기술이다.
사용자가 웹사이트를 방문할 때, 수많은 이미지, 폰트, JavaScript, CSS 파일 등이 서버로부터 전송되는데, 이 모든 과정은 HTTP를 통해 이루어 진다. 따라서 HTTP의 동작 방식과 성능 특성에 따라, 리소스를 어떻게 효율적으로 관리하고 전달할 것인지에 대한 전략도 달라진다.
💫 버전별 리소스 효율화 전략
HTTP/1.1 HTTP/2 HTTP/3 각 버전의 특징과 리소스 효율화 전략에 대해 알아보자
1️⃣HTTP/1.1
🤔 HTTP/1.1의 문제점이 뭘까?
HTTP/1.1에는 파이프라인 기능이 존재하지만 Head-of-Line Blocking(HOLB) 문제로 인해, 요청당 하나의 커넥션을 사용하여 병렬성을 구현한다. 그러나, 브라우저에서는 한 호스트 당 동시 커넥션 수는 최대 6개로 제한하기 때문에 다수의 리소스를 동시에 요청할 경우 직렬화 현상이 나타난다.
그렇다면, HTTP/1.1의 직렬화 현상을 어떻게 보완할 수 있을까?
🤓 커넥션 수를 줄이는 전략을 사용해보자
이를 보완하기 위해 HTTP/1.1 환경에서는 커넥션 수를 줄이는 전략이 사용된다. 대표적으로는 1. 파일 병합 과 2. 이미지 스프라이트 방식이 있다.
-
1️⃣ HTTP/1.1 효율화 전략1 - 파일 병합
여러 CSS나 JS 파일을 하나로 묶어 요청 수 줄인다.
-
2️⃣ HTTP/1.1 효율화 전략2 - 이미지 스프라이트
여러 이미지를 하나의 큰 이미지로 결합하고, CSS를 이용해 필요한 영역만 표시한다. 결합된 이미지 하나를 받으므로 커넥션의 수가 줄어든다.
-
3️⃣ HTTP/1.1 효율화 전략3 - 도메인샤딩
콘텐츠를 여러 하위 도메인으로 분산시켜 브라우저가 병렬 요청을 더 많이 할 수 있게 하는 방법이다.
-
➡️ 파일 병합과 이미지 스프라이트를 반영한 결과, 연결 요청 수와 load시간이 줄어든 것을 확인할 수 있다.
2️⃣HTTP/2 & HTTP/3
🤔 HTTP/2와 HTTP/3가 가지는 특징이 뭘까?
HTTP/2와 HTTP/3는 HTTP/1.1에서 발생했던 요청당 하나의 커넥션 생성으로 인한 직렬화를 보완하고자 멀티플렉싱(multiplexing)을 지원한다.
이를 통해 여러 요청이 하나의 커넥션에서 병렬로 처리될 수 있게 되었으며, 리소스 요청 시의 병목 현상을 크게 줄일 수 있었다.
🤓 리소스 분리를 유지하자
HTTP/2와 HTTP/3는 멀티플렉싱을 지원하기 때문에, 각각의 리소스를 병렬로 요청할 수 있다.
또한, 여러 리소스를 동시에 요청하더라도 우선 순위를 설정하여 중요한 리소스를 먼저 받아올 수 있는 구조를 제공한다.
이로 인해 리소스를 논리적으로 분리한 채로 효율적인 전송이 가능해졌으며, 성능과 유지보수 측면에서 모두 유리한 방향으로 최적화 전략이 바뀌었다.
-
1️⃣ HTTP/2 & 3 효율화 전략1 - 파일 분리 유지
HTTP/1.1처럼 파일을 병합하지 않아도 병렬로 요청할 수 있다.
따라서 기능별, 목적별로 파일을 분리하여 유지보수성과 캐시 효율성을 높이는 전략이 유리하다. -
2️⃣ HTTP/2 & 3 효율화 전략2 - 우선순위 설정
우선 순위를 조작해 초기에 필요한 리소스가 먼저 로드되도록 한다.
예를 들어, 폰트나 주요 이미지, 핵심 JS 파일을 높은 우선순위로 지정해 페이지 초기 구동 속도를 개선할 수 있다.
❗HTTP/2에서는 중요도를 표현하기 위해 우선순위 트리(priority tree)를 사용했으나, 브라우저나 서버가 이를 제대로 구현하지 않는 경우도 많아 실질적인 효과는 제한적이었다.
HTTP/3에서는 이러한 복잡성을 줄이기 위해 우선순위 트리를 제거하고, 대신 우선순위 힌트(priority hints) 방식이 도입되고 있다.
