Amazon CloudWatch RUM

이번 글에서는 AWS CloudWatch의 RUM 기능에 대해 살펴볼 예정입니다.
Datadog RUM과 비교해본 내용도 포함되어 있답니다! 많 관 부 (❁´◡`❁)

들어가기 앞서⚠️ TMI

사실 저는 지금까지 기술 지원 엔지니어로서 클라우드 인프라에 집중해 일을 해왔습니다.
그러다 보니 모니터링의 중요성에 대해서는 깊이 체감하지 못했고,
RUM 같은 생소한 기능이 왜 필요한지도 잘 이해하지 못했습니다.
하지만 이번 테스트를 통해 모니터링, 나아가 옵저버빌리티의 중요성을 조금이나마 느낄 수 있었습니다.

RUM은 단순 모니터링을 넘어선 트러블슈팅 툴이기도 합니다.
로그를 일일이 수집해 분석하는 대신, 실시간으로 성능 지표, 오류 정보, 디바이스 및 브라우저 환경, 위치 등을 빠르게 파악하여 이슈를 더 효율적으로 해결할 수 있도록 도와주는 고마운 존재라고 할 수 있지요!
그럼 함께 RUM에 대해 살펴보러 가볼까요! ヾ(≧▽≦*)o

그래서 RUM이 뭔데요? 왜 써야되는데요!

① 제가 알고 있던 RuM은 럼이었는데요?
모니터링 RUM은 Real User Monitoring의 약자로, 실제 사용자들이 웹사이트나 앱을 어떻게 사용하고 있는지를 실시간으로 관찰하는 기술을 뜻합니다.

예를 들어 누군가가 어떤 웹사이트에서 접속해서

페이지가 느리게 열리거나,
버튼을 눌렀는데 반응이 없거나
오류가 나서 페이지를 멈췄다거나

등의 생기면, RUM을 통해 그 상황을 화면 뒤에서 바로 볼 수 있게 됩니다.

② 잠시 엔지니어가 아닌 사용자 입장에서 생각해봅시다.

쿠X이나 무X사에 들어가서 상품을 검색하고, 장바구니에 담고, 결제를 하잖아요?
이 때 페이지가 느리거나 오류가 나면 짜증이 나겠지요?!

이처럼 사용자 입장에서는 잘 보이고, 잘 눌리고, 빨리 뜨는가가 매우 중요합니다.
페이지가 느리거나 오류가 발생하면 이는 곧 매출에 영향을 미치기도 하겠지요? 💸

시스템이 정상적으로 작동하더라도, 사용자 입장에서는 전혀 다른 경험을 하고 있을 수 있습니다.
이런 사용자 경험의 문제를 실시간으로 포착하고 대응할 수 있게 해주는 것이 바로 RUM입니다.

③ 다시 엔지니어 입장에서, 서버 로그나 모니터링 지표만으로 문제를 추적하는 것은 쉽지 않습니다.

RUM은 사용자 환경에 특화된 다양한 데이터를 수집해 문제를 더 빠르고 정확하게 식별할 수 있도록 도와줍니다. 결국 RUM은 단순한 모니터링 도구가 아니라, 사용자 경험 전반에 대한 통찰력을 제공하고,기술 지원과 운영을 더 나은 방향으로 발전시킬 수 있는 실용적인 도구라고 할 수 있겠습니다!

AWS CloudWatch RUM 직접 써본 썰 풉니다.

아마 이 글을 읽으시는 분들 중에는 'RUM' 하면 가장 먼저 Datadog을 떠올리시는 분들이 많으실 것 같아요. 🐶 그런데, AWS에서도 CloudWatch를 통해 RUM 기능을 제공하고 있다는 사실. 알고 계셨나요?
한국어 블로그 기준으로도 2021년에 관련 포스팅이 올라온 걸 확인할 수 있었습니다. 꽤 됐네요..?!

AWS CloudWatch RUM과 Datadog RUM을 동일한 애플리케이션에 각각 적용해 보았습니다.

테스트는 하기 단계와 같이 진행했습니다!

AWS EC2를 이용해 Node.js와 Express로 만든 웹 애플리케이션 실행
앱에 AWS CloudWatch RUM과 Datadog RUM에서 제공하는 JavaScript SDK 코드 조각을 삽입하여, 실제 사용자 활동 데이터를 수집할 수 있도록 구성

구구절절 ver 테스트 단계༼ つ ◕_◕ ༽つ

EC2 (ubuntu)에 간단한 Node.js / Express 애플리케이션 올리기

apt update && apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
apt install -y nodejs
node -vnpm -v
mkdir rum-test-app && cd rum-test-app
npm init -y
npm install express

구조

rum-test-app/
├── index.js          
├── package.json
├── node_modules/
└── public/
    └── index.html

index.js

const express = require('express');
const app = express();
const path = require('path');

// 정적 파일 서빙
app.use(express.static('public'));

// 루트 요청 시 index.html 반환
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public/index.html'));
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`App running at http://localhost:${PORT}`);
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>RUM Test App</title>
  </head>
  <body>
    <h1>Hello from RUM Test App!</h1>
    <p>This is a test page instrumented with Datadog RUM.</p>
    <button onclick="alert('Button clicked!')">Click Me</button>
  </body>
</html>

백그라운드에서 앱 실행

npm install -g pm2
pm2 start index.js --name rum-test-app
pm2 status

애플리케이션 스크린샷

Datadog RUM에서 New Application 구성 🐶

CDN async 형식으로 index.html 코드에 해당 스크립트 삽입 🐶

<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v6/datadog-rum.js','DD_RUM')
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '',
      applicationId: '4e1cb4e2-e956-4689-827e-0da17c2f6ec9',
      // `site` refers to the Datadog site parameter of your organization
      // see https://docs.datadoghq.com/getting_started/site/
      site: 'datadoghq.com',
      service: 'xxx-rum-test-app',
      env: '<ENV_NAME>',
      // Specify a version number to identify the deployed version of your application in Datadog
      // version: '1.0.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 20,
      defaultPrivacyLevel: 'mask-user-input',
    });
  })
</script>

async 속성을 쓰는 이유

async는 페이지 로딩을 블로킹 하지 않음
기본적으로 <script> 태그는 HTML이 파싱되는 도중 만나면 그 자리에서 로딩과 실행을 기다리게 해서 페이지 로딩 속도를 늦출 수 있으나, async 속성을 쓰면 스크립트가 백그라운드에서 비동기적으로 다운로드되고, 다운로드가 끝나면 즉시 실행됨. HTML 파싱은 그동안 계속 진행되기 때문에 페이지가 더 빨리 보이게 됨.
외부 스크립트(CDN)는 네트워크 의존도가 높음
Datadog RUM 같은 스크립트는 외부 서버에서 받아오기 때문에 네트워크 지연, 서버 문제, 연결 실패 등이 있을 수 있음. async를 쓰면 이런 문제로 인해 페이지 전체 로딩이 지연되는 것을 방지할 수 있음

Datadog RUM 모니터링 확인 🐶
- 초기에 스크립트에서 startSessionReplayRecording 및 sessionReplaySampleRate: 20 이슈로 Session Replay가 동작하지 않음 → 스크립트 수정 후 정상 동작됨을 확인

앱을 복사해서, 3001번 포트로 서비스하는 앱을 하나 더 올림

AWS CloudWatch ⌚
하기처럼 구성 후 index.html 스크립트에 JavaScript 코드 주입

<script>
  (function(n,i,v,r,s,c,x,z){x=window.AwsRumClient={q:[],n:n,i:i,v:v,r:r,c:c};window[n]=function(c,p){x.q.push({c:c,p:p});};z=document.createElement('script');z.async=true;z.src=s;document.head.insertBefore(z,document.head.getElementsByTagName('script')[0]);})(
    'cwr',
    '88c4be37-dbb7-4d21-a6a7-a5c1fd6ed620',
    '1.0.0',
    'ap-northeast-2',
    'https://client.rum.us-east-1.amazonaws.com/1.19.0/cwr.js',
    {
      sessionSampleRate: 1,
      identityPoolId: "ap-northeast-2:77cb5b2f-e615-4b1a-9239-42e8cdda102b",
      endpoint: "https://dataplane.rum.ap-northeast-2.amazonaws.com",
      telemetries: ["performance","errors","http"],
      allowCookies: true,
      enableXRay: false
    }
  );
</script>

트러블 슈팅 시 개발자도구에서 이런식으로 AWS RUM으로 요청이 가는지 확인했었음 ⌚
- 처음엔 이렇게 안되었다가, 새로운 모니터를 만들면서 새 자격증명을 다시 생성하니 잘됨

AWS CloudWatch RUM 대시보드에서 확인할 수 있는 주요 데이터는 다음과 같습니다.

탭 이름	주요 기능	포함된 시각화/도구	필터링/추적 기능
Performance	페이지 성능 정보 확인 - 로드 시간, 요청 정보, 웹 바이탈 - 시간 경과에 따른 로딩 속도	대화형 웹 바이탈 그래프 페이지 로드 트렌드	특정 데이터 포인트 선택 → 관련 이벤트 추적 가능
Errors & Sessions	자주 발생하는 오류 및 세션 정보 - 사용자 디바이스, 브라우저 별 오류 정보	오류 히스토그램 오류 목록 보기	사용자/이벤트 세부 정보 기준 필터 오류 메시지 클릭 시 상세 보기
HTTP Requests	실패한 요청 URL, 장치, 브라우저 정보 네트워크 오류 포함	요청 히스토그램 요청 및 네트워크 오류 목록	응답 코드 또는 오류 메시지별 필터 선택 시 상세 정보 제공
Sessions	세션 관련 지표 및 목록	세션 시작 이벤트 히스토그램 세션 목록 보기	이벤트 유형/사용자/세부 정보별 필터 sessionId 클릭 시 상세 정보
Events	RUM 이벤트 전체 보기	이벤트 히스토그램 이벤트 목록 보기	이벤트 유형/사용자/세부 정보별 필터 RUM 이벤트 선택 시 원시 이벤트 보기
Browsers & Devices	브라우저 및 디바이스 별 성능 및 사용량 정보	브라우저/디바이스 전환 보기	단일 브라우저 선택 시 버전별 데이터 표시
User Journey	고객 탐색 경로 분석 진입 및 종료 페이지, 경로 비율 확인	경로 시각화 노드 그래프 하이라이트 기능	노드 클릭 시 세부 정보 단일 경로 강조 표시 가능

AWS RUM Dashboard 바로보기 ༼ つ ◕_◕ ༽つ

CloudWatch > Application Signals > RUM 에서 모니터 생성 후 대시보드를 통해 모니터링 할 수 있습니다.

AWS vs Datadog

① 둘 다 괜찮은데...🤔
간단한 테스트를 통해 AWS CloudWatch RUM과 Datadog RUM을 구성해본 결과,
두 서비스 모두 프론트엔드 페이지 모니터링을 효과적으로 수행한다는 점을 확인할 수 있었습니다. 비록 실제 웹 개발자는 아니기 때문에 기능 활용에 한계는 있었지만, 대신 비용 측면에서 비교해보겠습니다!

② Datadog RUM Pricing

기본 RUM 요금 ( Session Replay 미포함 )

연간 요금제 : $1.88 / 1,000세션
온디맨드 요금제 : $2.75 / 1,000세션
- 주요 기능
  - 웹 및 모바일 앱 성능 측정 (iOS, Android 포함)
  - 페이지 뷰 및 사용자 행동 자동/사용자 정의 추적
  - 퍼널 분석 및 사용자 좌절(Frustration) 신호 분석
  - 리소스 지연, 긴 작업(Long Tasks) 감지
  - 코드 오류 및 크래시 보고

RUM + Session Replay 요금

연간 요금제 : $2.25 / 1,000세션
온디맨드 요금제 : $3.25 / 1,000세션
주의사항 : 이 요금제에서 세션당 과금은 Replay가 포함된 경우에만 발생합니다.
- 추가 기능
  - 세션 영상 형태의 Replay 시청
  - 클릭 기반 Heatmap 시각화
  - 사용자 입력 정보 기본적으로 제외 (프라이버시 보호)
  - DevTools로 버그 발생 시점 분석 가능

③ AWS CloudWatch RUM Pricing

RUM 이벤트 10만 건 당 $1.00

RUM 이벤트란?
- 예 : 페이지 보기(Page View), JavaScript 오류, HTTP 오류, 퍼포먼스 데이터 등
  - 한 사용자의 한 세션에서 수십 개의 이벤트가 생성될 수 있음
  - 하루에 약 5,000명의 사용자가 있는 서비스에서 사용자 1인당 평균 20개의 이벤트가 발생한다면

④ AWS vs Datadog

💸 요금 비교 💸

항목	Datadog RUM (기본)	Datadog RUM + Replay	AWS CloudWatch RUM
과금 기준	1,000 세션당	1,000 세션당	100,000 이벤트당
연간 요금	$1.88 / 1,000 세션	$2.25 / 1,000 세션	$1.00 / 100,000 이벤트
50만 세션/월 기준 (예시)	약 $940	약 $1,125	약 $100 (20이벤트/세션 가정)

🛠️ 기능 비교 🛠️

기능 항목	Datadog RUM (기본)	Datadog RUM + Replay	AWS CloudWatch RUM
Funnel Analysis	✅	✅	❌
Core Web Vitals	✅	✅	✅
Frustration Signals	✅	✅	❌
Error Tracking	✅	✅	✅
Session Replay	❌	✅	❌
Click Heatmaps	❌	✅	❌
User & Device Info	✅	✅	✅
DevTools-style Debugging	❌	✅	❌