최종 사용자를 위한 애플리케이션 경험 최적화: 변화하는 풍경

인터넷은 처음 나온 이래로 기술과 시장 역학의 발전에 힘입어 애플리케이션 전달 프로세스가 개선되고 상호 작용성이 높아지면서 그 어느 때보다 빠른 주기로 발전해 왔습니다. 기업과 정부는 사용자의 기대와 경쟁 압력에 부응하기 위해 노력해야 합니다. 사용자 경험을 방해하던 기존 기술(예: Adobe Flash, HTTP/1.x)은 쇠퇴하였고, 사용자 경험에 더 적합한 최신 기술(예: HTML5)이 대세로 떠올랐습니다.

이 논문에서는 IT 그룹이 2017년과 그 이후의 운영 및 계획 목적으로 이해해야 하는 사용자 경험에 영향을 미치는 최근의 변경 사항 중 일부를 정량화합니다.

• 콘텐츠 전송 네트워크(CDN)의 보편성
• 데이터 센터 및 서비스 제공자 네트워크 업그레이드
• 더 빠른 "마지막 마일" 및 모바일 액세스
• 성능을 위해 설계된 업데이트된 HTTP 프로토콜
• 클라이언트-서버 관계의 진화

CDN 공급업체는 사용자에게 콘텐츠를 전달하는 데 걸리는 지연 시간(대부분의 경우 ~30ms)을 줄이기 위해 주로 인구 중심지 근처에 운영하는 접속 지점(PoP)의 수를 빠르게 확대했습니다. 빠른 콘텐츠 전송을 보장하기 위해 전 세계에 인프라를 구축한 가장 인기 있는 CDN 목록은 다음과 같습니다 ^.1

CDN이 운영하는 PoP의 수와 사용자와의 근접성을 확대하고, 애플리케이션의 사용자 기반이 글로벌화됨에 따라 웹사이트는 CDN에 대한 의존도가 높아졌습니다. 2015년 3월 현재 인터넷의 사용 가능한 HTML 콘텐츠의 11%가 CDN에 호스팅되었습니다.² 2016년에는 그 수치가 17%로 증가했고, 2017년 3월 현재 CDN에서 호스팅되는 HTML 콘텐츠는 최대 20%에 달했습니다. 2년도 채 되지 않아 CDN에 호스팅된 HTML 콘텐츠의 양이 거의 두 배로 늘어났는데, 이러한 추세로 인해 사용자에게 콘텐츠가 전송되는 데 걸리는 지연 시간이 크게 단축되었습니다.

10G/40G/100G 이더넷 포트(및 이에 상응하는 더 높은 용량의 스위치와 라우터)를 구현함으로써 기업 네트워크, WAN 연결, 원격지에 위치한 엔드포인트의 인터넷 성능이 획기적으로 향상되었습니다. 향후 4년 동안 기업과 서비스 제공업체 네트워크는 25G로 계속 업그레이드되고, 100G 연결은 2015년 대비 거의 5배의 업그레이드 대역폭 용량을 갖게 될 것입니다.³

데이터 센터와 엣지 인프라를 업그레이드하는 데 투자함으로써 서비스 제공업체 네트워크와 기업 데이터 센터에서 클라이언트로 향하는 애플리케이션 트래픽에 대한 병목 현상이 발생하는 문제가 완화되었습니다.

경쟁이 심화됨에 따라 전 세계 인터넷 서비스 제공업체(ISP)와 이동통신사는 고객에게 연결을 제공하는 통신 네트워크의 마지막 단계인 '마지막 마일'과 모바일 사용자를 위한 다운로드 속도를 높였습니다. 아래는 2015년 미국, 아시아, 유럽의 ISP별 다운로드 성과를 보여주는 차트입니다.⁴

전 세계적으로 인터넷 연결의 "마지막 마일"은 예전보다 훨씬 빨라졌으며 오늘날 사용 가능한 대역폭은 웹 애플리케이션에서 향상된 사용자 경험을 제공하는 데 도움이 됩니다.

HTTP/2 사양 의 개발은 주로 HTTP1.x의 성능 문제로 인해 이루어졌습니다. 2012년에 Google은 웹 콘텐츠 전송을 최적화하고 기존 HTTP 1.1 프로토콜 설계의 비효율성을 해소하기 위해 SPDY를 개발하여 보급했습니다. HTTP/2는 SPDY를 기반으로 구축되었으며, HTTP/1.1과의 호환성을 유지하면서 지연 시간과 TCP 연결 수를 줄이는 데 주로 중점을 두었습니다. 

성능 향상이라는 목표에 따라 HTTP/2 프로토콜에는 다음과 같은 변경 사항이 포함됩니다.

• 멀티플렉싱: 단일 TCP 연결에서 여러 상호작용을 제공합니다(SPDY가 제공한 것과 같음).
• 헤더 압축: 동일한 헤더를 반복적으로 전송하는 것으로 인한 중복을 줄입니다(예: 요청 URL, 사용자 에이전트, 쿠키).
• 서버 푸시: 요청된 콘텐츠와 소스 종속성(예: JS 및 CSS 파일)을 고려하여 서버에서 엔드포인트로 콘텐츠를 사전에 푸시할 수 있습니다.
• 리소스 우선 순위: 가중치와 종속성을 사용하여 유형/콘텐츠에 따라 전달 우선순위를 지정하고 전달 및 렌더링을 최적화합니다.

IETF가 2015년 중반에 프로토콜 사양을 승인한 이후 주요 웹 브라우저 제공업체는 HTTP/2 지원을 통합하기 위한 일정(아래 표 참조)을 발표했습니다.

엔드포인트 웹 브라우저에서 웹 서버에 대한 HTTP/2 요청은 2016년 초에 시작되었으며 새로운 사양을 지원하는 웹 브라우저가 출시되고 도입되면서 성장했습니다. 업데이트된 웹 브라우저에서 웹 서버에 대한 요청은 먼저 HTTP/2에서 이루어지고 HTTP/1.x로 다시 협상됩니다. 아래 그림에서는 전 세계 웹사이트에서 HTTP/2 상호작용(서버와 엔드포인트 간)이 어떻게 증가하는지 자세히 보여줍니다.⁵

HTTP/2 사양의 향상으로 HTTP/1.x 기반 인프라보다 성능이 80~1000% 더 빨라졌습니다. 사양 변경 사항이 실제 성능에 어떤 영향을 미치는지 알아보려면 다음을 실행하세요. 간단한 HTTP 대 Anthum의 HTTPS 테스트 이는 두 프로토콜 버전 간의 차이점을 보여줍니다.

이런 인프라와 프로토콜의 개선 외에도 애플리케이션의 실제 구성도 변화하고 있습니다. "프런트엔드" 가속은 예전에는 필요했는데, 이전 애플리케이션이 모든 것을 클라이언트에 "푸시"했기 때문입니다. 하지만 최신 앱은 두 가지 기본 구성 요소(클라이언트와 서버)에 분산되어 있어서 애플리케이션과의 교환(API 또는 브라우저를 통해)의 90%가 소량의 데이터와 관련이 있습니다.

첫 번째 로드 이후에 제공되는 "콘텐츠"는 매우 적습니다. 대부분의 프레젠테이션 계층(UI)은 클라이언트의 JavaScript 라이브러리(JQuery, Angular 등)를 통해 조작할 수 있습니다. 즉, 응답(프런트엔드 가속 기술의 주요 대상)에 포함되는 데이터의 양과 유형이 크게 감소했으며, 이제는 HTML이 아니라 주로 JSON이나 XML입니다.

이러한 구조적 변화로 인해 오늘날 앱 전체에서 HTML이 차지하는 비중은 감소하고 있는 반면, 다른 구성 유형은 증가하고 있습니다(아래 그림 참조).⁶

상당량의 JavaScript(및 HTML)가 CDN을 통해 제공되고 있기 때문에(개발자가 로컬이 아닌 인터넷에서 스크립트를 포함시키기 때문) 이러한 콘텐츠를 대상으로 하는 프런트엔드 가속 기술은 최신 애플리케이션에서는 그다지 중요하지 않습니다.

모바일 기기의 등장과 이전 기술(예: Adobe Flash)에서 HTML5로의 이전으로 인해, IT 애플리케이션 그룹은 브라우저에 제공되는 단일 페이지 웹 애플리케이션을 개발하기 시작했습니다. 이러한 단일 페이지 웹 애플리케이션은 일반적으로 사용자가 애플리케이션의 다른 부분을 탐색할 때 페이지를 다시 로드할 필요가 없습니다. 그 결과 탐색 속도가 빨라지고, 네트워크 전송이 더 효율적으로 이루어지고, 최종 사용자 경험이 더 좋아졌습니다.⁷ 오늘날 대부분의 웹 앱은 "한 페이지" 디자인을 염두에 두고 개발됩니다.

IT 운영의 제어 하에 있는 웹 기반 애플리케이션에 대해 이상적인 최종 사용자 경험을 만들고 유지하려면 다음 기술과 관행을 채택해야 합니다.

HTTP/2 프로토콜을 기반으로 웹 서버를 표준화합니다.

웹 인프라를 HTTP/2 표준으로 업그레이드하면 HTTP/1 및 HTTP/1.1에서 발생하던 서버 측 성능 문제가 해결됩니다. HTTP/2는 더 나은 연결 관리 외에도 웹 애플리케이션 설계자가 최적화된 콘텐츠 전송을 보장하고 엔드포인트 웹 브라우저 내에서 빌드하기 위한 우선순위를 정할 수 있도록 해줍니다.

HTTP/2 기반 요청만 수행되도록 웹 브라우저에 대한 최소 표준을 설정합니다.

내부적으로(예: 직원 및/또는 계약자) 또는 외부적으로(예: 고객 및 파트너) 브라우저를 HTTP/2 요청을 지원하는 버전으로 업그레이드하도록 촉구하면 HTTP/1.1 또는 1.0으로의 자동 협상이 사라지고 데이터 전송 효율성이 떨어집니다.

SaaS 공급업체가 모든 웹 애플리케이션에 HTTP/2를 구현했는지 확인합니다.

다시 말해, HTTP/1.1 및 1.0으로의 자동 협상을 피하는 것은 성능과 사용자 경험을 개선하는 데 도움이 됩니다.

CDN 공급업체가 사용자 및 고객의 위치에 지리적으로 맞춰 PoP를 보유하고 있는지 확인하세요.

직원, 계약자, 고객과 지리적으로 연결된 PoP 네트워크를 보유한 CDN 공급업체를 활용하면 웹 브라우저와 CDN PoP 간 상호작용에서 지연 시간이 줄어듭니다.

네트워크 기반 어플라이언스에서 캐싱 기술을 고려해보세요.

애플리케이션 앞에 온보드 캐싱 기술 네트워크 어플라이언스를 활용하면 웹 페이지 내에 필요한 정적 콘텐츠의 성능을 높이는 데 도움이 됩니다.

저렴한 오픈소스 웹 캐시를 평가해 보세요.

캐싱이 필요한 경우 Varnish 와 같이 SSD를 탑재한 저렴하고 고성능의 오픈소스 웹 캐시를 사용하는 것을 고려하세요.

비즈니스 요구 사항과 모바일 및 클라우드 컴퓨팅으로의 전환으로 인해 IT 그룹은 중요한 애플리케이션을 제공하는 동시에 사용자 경험을 최적화하라는 압박을 점점 더 많이 받고 있습니다. 현재 사용자가 웹 콘텐츠를 경험하는 방식을 변경하는 세 가지 요소가 있습니다. CDN의 용량이 크게 확장되었고, POP와 핵심 사용자 기반이 가까워서 지연 시간이 줄었습니다. 둘째로, 인터넷 프로토콜이 업데이트되어 전반적인 웹 서버와 클라이언트 성능이 향상되었습니다. 셋째, 인터넷 서버와 클라이언트 간의 관계가 바뀌어 둘 사이의 거래가 예전처럼 일방적이지 않고, 전달되는 데이터는 보다 동적이고 사용자에게 맞춰 구체적입니다. 이러한 변화에 따라 사용자 경험을 향상시키기 위해 프런트엔드 애플리케이션 제공을 최적화하기 위해 5~7년 전에 만들어진 전략은 시장 힘과 웹 기술의 자연스러운 진화로 인해 빠르게 가치가 떨어지고 있습니다.  

기업 웹 애플리케이션 인프라는 시장 변화에 맞춰 발전해야 하며, 그렇지 않으면 성능과 IT 투자 수익이 감소하게 됩니다. IT 부서의 핵심 과제는 사용자 경험을 제공하는 인프라(예: 웹 서버, 로드 밸런서, CDN, SaaS)가 웹 성능 향상을 위해 설계된 HTTP/2로 업그레이드되었는지 확인하는 것입니다.

¹ http://www.cdnplanet.com/cdns/
² 한국어: http://httparchive.org/
³ https://technology.ihs.com/589721/data-center-network-equipment-market-tracker-regional-q2-2017
⁴ https://www.stateoftheinternet.com/resources-connectivity-2015-q1-state-of-the-internet-report.html
⁵ https://w3techs.com/technologies/details/ce-HTTP/2/all/all
⁶ 한국어: http://httparchive.org/
⁷ https://techcrunch.com/2012/11/30/why-enterprise-apps-are-moving-to-single-page-design/