brunch

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 테크유람 Sep 06. 2016

HTTP/2에서 Frame, Stream의 의미

HTTP/2는 어떻게 메시지가 구성되어 있는가?

HTTP1.1에서 HTTP 요청과 응답은 메시지(Message)라는 단위로 구성이 되어 있다.

메시지는 Status Line, Header와 Body(또는 data, payload 등으로 표현하기도 한다) 등으로 이루어져 요청과 응답에 필요한 정보를 담고 있다.

curl 명령을 통해 HTTP1.1을 사용하여 brunch 사이트에 접속을 하면, 다음과 같이 HTTP1.1 기반의 메시지 구성을 확인할 수 있다. 아래 캡쳐 이미지는 응답 메시지가 어떤 내용으로 구성되어 있는지를 확인해 준다.

Status line은 실제로 응답에 사용된 HTTP 버전 및 RFC에 정의된 응답 코드(Status Code)가 있고, 응답 내용에 대한 힌트 정보가 담긴 Header, 실제 HTML등의 콘텐트가 담긴 Body부분으로 구성된 것을 알 수 있다.

HTTP/2에서는 HTTP1.1에서의 메시지라는 단위외에 frame, stream 이라는 단위가 추가 되었다. HTTP/2의 구조를 이해하기 위해서는 이 세 개의 기본 구조에 대한 기술적 이해가 필요하다.

Frame: HTTP/2 통신상의 제일 작은 정보의 단위이며, Header 혹은 Data 둘 중 하나.

Message: H1.1과 마찬가지로 요청 혹은 응답의 단위이며, 다수의 Frame으로 이루어짐.

Stream: 클라이언트와 서버 사이에 맺어진 연결을 통해 양방향으로 주고받는 하나 혹은 복수개의 Message.

즉, Frame 여러개가 모여 Message, Message 여러개가 모여 Stream이 되는 구조이다.

Frame < Message < Stream

H1.1 시절에는 요청과 응답이 메시지라는 단위로 완벽하게 구분되어 있었으나, H2에서는 Stream이라는 단위를 통해 요청과 응답이 묶일 수 있는 구조가 만들어졌다고 볼 수 있다.

출처: High Performance Browser Networking | O'Reilly

위의 예제 그림은 클라이언트-서버 간 하나의 TCP 연결 상태에서의 N개의 스트림 구성을 보여준다.

Stream 1번은 요청 메시지 하나, 응답 메시지 하나가 있고, 요청 메시지는 하나의 Header 프레임(GET 요청 이기에 특별히 Data 부분이 존재 하지 않는다)으로 구성되어 있고, 응답 메시지는 각각 헤더 프레임, 데이터 프레임으로 구성되어 있다. Stream N의 그림을 보면, 응답 뿐만 아니라 복수개의 요청 프레임 또한 하나의 스트림안에 존재한다.

HTTP1.1에서는 요청과 응답은 각각 하나의 메시지가 하나의 오브젝트의 요청과 응답을 담당하였는데 HTTP/2에서는 스트림 하나가 다수개의 요청, 이에 대한 다수개의 응답 정보를 포함하고 있는 구조로 바뀐것이다. 이렇게 스트림 방식을 사용하면서 동시에 요청 및 응답할 수 있는 오브젝트의 개수가 H1.1 버전보다 늘어나게 된것이다.

그동안 Stream이라는 단어가 IT용어로 사용될때엔 비디오 스트림, 오디오 스트림, 파일 스트림 등, 주로 멀티미디어 관련 콘텐트나, 파일을 끊김없이(seamless) 연속적으로 전달할때 사용 되었다. - 참고: https://en.wikipedia.org/wiki/Stream_(computing)

이제는 HTTP/2를 통해 웹 상에서 콘텐트를 주고 받는것 또한 스트림을 통해 연속적으로 전달함으로서, 좀 더 유연한 요청과 응답의 구조를 가지게 되었다고 볼 수 있다.

스트림이 가진 유연한 구조 덕분에, 서버에서 만들어진 응답 프레임들은 요청 순서에 상관없이 만들어진 순서대로 클라이언트에 전달이 될 수 있다. 즉 하나의 TCP 연결상에서, 다수의 클라이언트 요청과 서버의 응답이 비동기 방식으로 이루어지는 기술을 멀티플렉싱(multiplexing)이라 H2에서 명명하였는데, 이를 통해 H1.1에서 특정 요청의 응답이 지연되면, 전체 후속 응답이 모두 지연되는 HOL 문제(https://en.wikipedia.org/wiki/Head-of-line_blocking)가 자연스레 해결되었다.

많은 콘텐트를 한번에 전달해야 하는 포탈 사이트나 쇼핑몰 처럼 하나의 웹 페이지가 수 많은 이미지와 자바스크립트, CSS등의 오브젝트로 덮여있다면, 웹 프론트 엔드 성능 최적화(FEO: Front End Optimization)을 특별히 진행하지 않아도, HTTP1.1에서 HTTP/2 프로토콜 업그레이드를 진행한 웹 사이트의 로딩 속도는 그전보다 빨라질 수 있다. 아카마이에서 만든 HTTP/2 데모 사이트 - https://http2.akamai.com/demo 를 보면, 수 많은 썸네일로 이루어진 지구 모양의 Spinning Globe 이미지 로딩이 얼마나 빨라지는지에 대한 데모를 볼 수가 있다.

다음 번 HTTP/2 관련 블로깅은 멀티플렉싱(multiplexing)에 대한 글이 될것이다.

keyword