[General] UI 평균 응답시간 측정 방법 정리

웹 어플리케이션의 성능을 진단할 때, UI의 평균 응답시간을 측정하는 일은 매우 중요합니다. 특히 백엔드 API가 수없이 많은 경우, 전체가 아닌 사용자 인터페이스에서 호출되는 요청만 집계하는 방식이 필요합니다. 본 글에서는 UI 평균 응답시간을 측정하는 여러 가지 방법을 단계별로 정리합니다.

1. 평균 응답시간 기본 개념

• 평균 응답시간은 총 응답시간 / 총 요청 수로 계산됩니다.
• 실무에서는 API마다 속도가 다르므로 API별 평균 응답시간을 따로 구하는 것이 일반적입니다.
• UI 요청만 별도로 필터링하여 평균을 구해야 정확한 사용자 체감 속도를 반영할 수 있습니다.

2. 백엔드 로그를 활용한 방법

2-1. UI 요청만 필터링하기

로그 데이터에서 UI 요청을 식별하는 대표적인 방법은 다음과 같습니다.

• endpoint 기준: /ui/, /web/, /page/와 같은 경로 prefix로 구분
• User-Agent 기준: 브라우저 기반 요청만 추출 (예: %Chrome%, %Firefox%)
• 헤더 기준: X-Requested-By: UI 등의 커스텀 헤더 사용 시

2-2. SQL 예시

SELECT
  ROUND(AVG(EXTRACT(EPOCH FROM end_time - start_time) * 1000), 2) AS ui_avg_response_time_ms
FROM
  api_logs
WHERE
  endpoint LIKE '/ui/%'
  AND status_code BETWEEN 200 AND 299;

위 쿼리를 통해 UI 요청 중 정상 응답(200~299)만 평균 응답시간(ms)으로 계산할 수 있습니다.

3. 브라우저 개발자 도구(DevTools) 활용

3-1. 수동 확인 방법

• 크롬 개발자 도구의 Network 탭에서 요청별 응답시간을 확인할 수 있습니다.
• 여러 요청을 선택해 응답시간의 평균을 계산하면 되지만, 반복 분석에는 비효율적입니다.

3-2. JavaScript를 활용한 자동 측정

window.addEventListener('load', () => {
  const entries = performance.getEntriesByType('resource');
  const apiEntries = entries.filter(entry => entry.initiatorType === 'xmlhttprequest' || entry.initiatorType === 'fetch');

  const responseTimes = apiEntries.map(entry => entry.duration);
  const avgResponseTime = responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length;

  console.log('UI 평균 응답시간 (ms):', avgResponseTime.toFixed(2));
});

• performance.getEntriesByType('resource')로 모든 요청 정보 수집
• entry.duration은 해당 요청의 총 응답시간(ms)
• 특정 API만 필터링하려면 entry.name.includes('/ui/') 조건 추가 가능

4. 실서비스에 활용하는 방식

백엔드로 응답시간 전송

fetch('/monitoring/ui-response', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    avg_ui_response_time: avgResponseTime,
    timestamp: new Date().toISOString()
  })
});

• 실제 사용자의 브라우저에서 측정된 응답시간을 서버로 전송하여 분석할 수 있습니다.
• 시간대별, 지역별, 사용자 단말별 성능 측정이 가능해집니다.

5. 기타: APM 도구 활용

• Datadog, New Relic, Elastic APM 등의 도구는 UI 요청도 자동으로 수집 및 시각화할 수 있습니다.
• 설정만 잘 되어 있다면 별도 개발 없이도 평균 응답시간을 모니터링할 수 있습니다.

마무리

UI의 평균 응답시간을 측정하는 방법은 상황에 따라 다르지만, 핵심은 정확하게 UI 요청만 분리하여 평균을 구하는 것입니다. 로그 분석, 브라우저 API 활용, APM 도구 도입 등 다양한 방식이 있으며, 목적에 따라 적절한 방법을 선택하는 것이 중요합니다.