AWS 기술 블로그

CloudWatch Real User Monitoring(RUM)을 사용하여 Amazon CloudFront의 성능 테스트를 준비하고 실행하기

이 글은 Networking & Content Delivery 블로그에 게시된 글 (Prepare and run performance tests for Amazon Cloudfront with Real User Monitoring)를 한국어로 번역 및 편집하였습니다.

소비자 대상 웹사이트와 모바일 앱의 경우, 사용자의 화면에 콘텐츠가 로드되는 속도는 사용자의 브라우징 경험뿐만 아니라 비즈니스의 성공에도 직접적인 영향을 미칩니다. 만약 콘텐츠 로딩에 시간이 오래 걸린다면, 사용자는 거래를 완료하기 전에 페이지를 떠날 수 있고, 이는 매출에 부정적인 영향을 미칠 수 있습니다. Amazon CloudFront와 같은 콘텐츠 전송 네트워크(CDN)를 사용하면 전 세계 사용자에게 낮은 지연 시간과 높은 전송 속도로 데이터, 비디오, 애플리케이션, API 등을 안전하게 전달하여 웹사이트의 성능을 개선할 수 있습니다.

웹사이트의 정적 콘텐츠(HTML, 이미지, 스타일시트, JavaScript 파일 등)는 CloudFront 엣지 로케이션과 리전 엣지 캐시에 저장된 캐시 사본에서 제공될 수 있습니다. 반면에 새롭게 업데이트된 콘텐츠나 API 호출처럼 캐시할 수 없는 동적 콘텐츠는 CloudFront가 원본 서버에서 가져와 AWS 글로벌 네트워크를 통해 빠르고 최적화된 경로로 전달합니다.

성능을 향상하기 위해서는, 간단히 CloudFront 배포(distribution)를 설정해 웹사이트 트래픽이 전 세계적으로 분산된 CloudFront의 엣지 네트워크를 통해 전달되도록 구성하면 됩니다. CloudFront를 통해 콘텐츠를 제공하도록 설정한 뒤에는, 웹사이트의 성능을 모니터링하여 어떤 이점을 얻고 있는지 확인하고, 성능 최적화를 위해 구성 변경이 필요한 부분이 있는지 파악해야 합니다. 이 글에서는 Amazon CloudWatch Real User Monitoring(RUM)을 사용해 CloudFront를 통해 콘텐츠를 전달하는 경우와 그렇지 않은 경우의 사용자 경험 차이를 파악하고, 웹사이트 성능을 모니터링하는 방법을 소개합니다.

CloudFront를 위한 Synthetic Monitoring과 RUM

일반적으로 웹사이트의 성능을 측정하기 위해 사용할 수 있는 모니터링 방식은 두 가지가 있습니다.

Synthetic Monitoring: 이는 웹사이트 사용자의 여정과 상호 작용을 시뮬레이션하여 웹사이트 성능을 모니터링하는 방식입니다. 지리적 위치, 네트워크, 디바이스, 브라우저 등과 같은 변수가 미리 결정된 통제된 환경에서 수행됩니다. 외부 변수를 통제함으로써 백엔드 인프라와 애플리케이션 측면에서 성능 병목 지점이 어디인지, 그리고 성능 문제가 발생하는 근원을 파악하는 데 도움이 됩니다. 그러나 이 방법은 실제 사용자들이 실제 환경에서 겪는 경험을 항상 반영하지는 않습니다.

Real User Monitoring(RUM): 애플리케이션 내부에 브라우저나 클라이언트의 피드백을 수집하는 코드를 삽입함으로써 실제 사용자와 웹사이트의 상호 작용을 분석하는 방식입니다. 이는 사용자 브라우징 경험에 영향을 미치지 않으면서 수동적으로 데이터를 수집합니다. 이를 통해 고객이 특정 디바이스, 브라우저, 네트워크 환경에서 웹사이트와 어떻게 상호 작용하고 있는지, 그리고 웹사이트 성능에 대한 실제 경험이 어떤지를 파악할 수 있습니다.

아키텍처 개요

먼저, Application Load Balancer(ALB) 뒤에 있는 Amazon Elastic Compute Cloud(Amazon EC2) 인스턴스에서 웹 애플리케이션을 배포합니다. 이미 보유한 웹 애플리케이션을 사용해도 되고, 아래 샘플 3티어 웹 애플리케이션 구성도를 참고해서 배포해도 됩니다. 이후, 퍼블릭 ALB 엔드포인트 URL을 통해 브라우저에서 해당 웹사이트에 접속합니다. 이 시나리오는 CloudFront를 적용하기 전, 사용자들이 겪는 기본적인 경험을 나타냅니다.

그림 1: 샘플 3티어 웹 애플리케이션 구성도

충분한 데이터를 확보한 후, 앞서 사용한 ALB를 “오리진(Origin)“으로 지정하는 CloudFront 배포를 구성합니다. CloudFront는 각 배포마다 고유한 도메인 이름을 제공합니다. 이제는 브라우저에서 웹사이트에 접속할 때, CloudFront URL을 사용합니다. 이는 CloudFront가 구현된 후의 사용자 경험을 나타냅니다. 두가지 테스트에서 수집된 데이터를 비교함으로써, CloudFront를 이용해 콘텐츠를 전달했을 때 사용자들이 얻게 되는 성능 향상을 확인할 수 있습니다. 아래 다이어그램은 이번 테스트를 위한 아키텍처를 보여줍니다.

그림 2: 솔루션의 아키텍처 다이어그램

CloudWatch를 통한 CloudFront 모니터링

RUM에 대해 살펴보기 전에, CloudFront에서 직접 CloudWatch와 통합하여 제공되는 운영 지표를 먼저 살펴볼 수 있습니다. 이 지표들은 CloudWatch 콘솔을 통해 확인할 수 있으며, 추가 비용 없이 제공됩니다. CloudFront 배포가 처리한 HTTP 요청 수, 사용자 다운로드 및 업로드 바이트 수, 그리고 4XX 및 5XX 오류 발생 건수 등을 모니터링할 수 있습니다.

추가 비용을 지불하면 더 다양한 지표를 활성화할 수 있는데, 예를 들어 CloudFront 배포의 캐시 적중률(Cache Hit Rate), 캐시되지 않은 콘텐츠를 제공할 때의 오리진 레이턴시(Origin Latency) 등이 있습니다.

그림 3: CloudWatch에서 확인할 수 있는 CloudFront 모니터링 지표

이 데이터는 웹사이트의 상태를 판단하고 웹사이트로 유입되는 사용자 트래픽 개요를 파악하는 데 유용합니다. 그러나 웹사이트 성능 측면에서 실제 사용자의 경험에 대해 깊이 있는 통찰을 제공하지는 않습니다. 바로 이 부분을 보완하기 위해 RUM을 활용합니다.

RUM을 사용하여 웹사이트 성능 살펴보기

이제 동일한 웹 애플리케이션에 대해 RUM을 적용할 수 있습니다. 이를 위해 먼저 CloudWatch RUM에서 앱 모니터를 생성하고, 모니터링하려는 웹사이트의 HTML 페이지에 RUM이 생성한 코드 조각(code snippet)을 삽입해야 합니다.

1) CloudFront 없이 RUM 적용

우리는 먼저 CloudFront 없이 성능을 측정하는 것부터 시작합니다. AWS Management Console에서 ALB 엔드포인트 URL을 가져와 브라우저에서 이 URL을 사용하여 웹사이트에 접속합니다. 웹사이트를 탐색하는 동안, 웹 페이지에 삽입된 코드는 여러 가지 성능 지표를 CloudWatch RUM으로 전송합니다. 이러한 지표들은 콘솔의 CloudWatch RUM 섹션에서 확인할 수 있으며, 아래 스크린샷에 예시가 나와 있습니다.

주의사항: CloudWatch RUM 웹 클라이언트를 임베디드 스크립트로 설치하려면, 애플리케이션의 <head> 요소 내에서 다른 <script> 태그보다 위에 RUM 웹 클라이언트 구성 코드 조각을 붙여넣어야 합니다.

그림 4: HTML 페이지에 삽입된 CloudWatch RUM 스크립트 예시

Performance 탭은 페이지 로드 시간과 사용자가 겪은 오류 등의 웹페이지 주요 지표를 보여주고, 이어서 추가 정보를 제공합니다. 이 주요 지표들은 Positive, Tolerable, Frustrating의 세 단계로 구분됩니다.

그림 5: CloudWatch 성능 탭에서 페이지 로드 시간 표시

사용자 브라우저에서 웹페이지가 완전히 로드되는 각 단계에 소요되는 시간도 확인할 수 있습니다. 여기에는 초기 연결을 설정하는 데 걸리는 시간, SSL 핸드 셰이크 시간, 첫 번째 바이트를 로드하는 데 걸리는 시간, 전체 로딩 완료 시간 등이 포함됩니다.

그림 6: 웹페이지 로딩 과정에서 각 단계별 소요 시간의 세부 분석 예시

이전 예시에서, 특정 사용자가 웹 페이지를 로드하는 데 걸리는 평균 시간은 764ms이며, 초기 연결(Initial Connection)에 278ms, 첫 번째 바이트 로드(Time to first Byte)에 280ms가 걸리는 것을 확인할 수 있습니다. 이는 동일한 웹 페이지를 CloudFront를 통해 제공할 때, 성능이 어떻게 달라지는지 비교할 수 있는 기준선(Baseline)으로 활용할 수 있습니다.

2) CloudFront와 함께 RUM 적용

이제 AWS 콘솔에서 앞서 생성한 CloudFront 배포로 이동하여 CloudFront 도메인 URL을 확인할 수 있습니다. 그 다음 브라우저에서 해당 URL을 사용하여 웹사이트에 접속합니다. 이 과정에서 새로운 데이터 포인트가 다시 한 번 CloudWatch RUM으로 전송되며, 이는 CloudFront를 통해 콘텐츠가 전달될 때 사용자가 겪는 경험을 보여줍니다. 이제 다시 한 번 성능 지표를 모니터링할 수 있습니다.

그림 7: CloudFront 활성화 후 페이지 로드 시간을 표시하는 CloudWatch 성능 탭

그림 8: CloudFront 활성화 후 웹페이지 로딩 과정에서 각 단계별 소요 시간의 세부 분석

이전 예시에서, 동일한 사용자의 웹 페이지 로드 총 소요 시간은 447ms로 줄어들었고, 초기 연결(Initial Connection)에는 단 17.5ms만이 소요되었습니다. 여기서 ALB 앞에 CloudFront를 배포함으로써 페이지 로드 시간을 약 40% 단축하여 사용자 경험이 개선되었음을 확인할 수 있습니다.
CloudWatch RUM은 CloudFront를 통해 제공되는 웹사이트에 대해 여러 가지 추가적인 통찰력을 제공합니다. 아래 스크린샷에서 볼 수 있듯이, 지역별 사용자에 대한 웹사이트 성능을 확인하고, 어떤 사용자가 원활한 경험을 하고 있으며, 페이지 로드 시간 지연으로 인해 어떤 사용자가 불만족스러운 경험을 하고 있는지 비교할 수 있습니다.

그림 9: CloudWatch RUM이 제공하는 사용자 지리적 위치별 페이지 로드 성능 예시

여러 브라우저와 디바이스 유형을 통해 웹사이트에 접속하는 사용자들의 브라우징 경험에 대한 상세 정보도 확인할 수 있습니다. 아래 스크린샷과 같이, 어떤 브라우저와 디바이스를 사용하는 사용자들이 어떤 경험을 하고 있는지 살펴볼 수 있습니다.

그림 10: CloudWatch RUM이 제공하는 사용자 브라우저별 페이지 로드 성능 예시

게다가, 아래 스크린샷에서 볼 수 있듯이, RUM이 모니터링하는 모든 이벤트의 원본 로그 항목을 확인할 수 있으며, 사용자가 웹사이트를 탐색하는 과정을 추적할 수도 있습니다.

그림 11: CloudWatch RUM 원시 이벤트 로그 예시

아래 스크린샷과 같이 랜딩 페이지에서 이후 웹사이트와의 상호작용까지 전체 사용자 여정을 추적할 수도 있습니다.

그림 12: CloudWatch RUM을 사용하여 추적한 사용자 여정 예시

맺음말

이 글에서는 RUM을 사용해 최종 사용자 관점에서 웹사이트 성능에 대한 통찰을 얻는 방법과, CloudFront를 활용해 얻을 수 있는 성능 개선 효과를 모니터링하는 방법을 알아보았습니다. 이렇게 수집한 데이터를 기반으로, 애플리케이션의 어떤 부분을 추가로 최적화하여 사용자 경험을 향상시킬 수 있을지 파악할 수 있습니다. 또한, CloudFront에서 제공하는 다양한 기능을 구성함으로써 웹사이트 성능을 더욱 개선할 수 있습니다.

KwangYoung Kim

KwangYoung Kim

김광영 Automotive Solutions Architect는 자동차와 모빌리티 기업 고객의 클라우드 여정을 돕기 위해 기술 교육에서부터 아키텍처 논의, 설계, PoC, 시스템 컷오버 지원 등 다양한 업무를 수행하고 있습니다.