Fiddler를 활용한 HTTP 트래픽 분석 및 성능 최적화

웹 애플리케이션의 동작 방식을 이해하고 성능 병목 현상을 해결하기 위해선 HTTP 통신 과정을 투명하게 들여다볼 수 있는 도구가 필수적입니다. Fiddler는 이러한 요구를 충족하는 무료 HTTP 디버깅 프록시로, 클라이언트와 서버 간의 모든 HTTP 트래픽을 캡처하고 분석할 수 있습니다.

프록시 아키텍처와 동작 원리

Fiddler가 실행되면 시스템의 WinInet 프록시 설정을 자동으로 변경하여 자신을 중간자로 배치합니다. 이로 인해 모든 HTTP 요청과 응답이 Fiddler를 경유하게 되며, 프로그램 종료 시에는 원래 설정으로 자동 복원됩니다. IE 설정 → 인터넷 옵션 → 연결 → LAN 설정 → 고급 메뉴에서 현재 프록시가 127.0.0.1:8888로 설정되어 있는지 확인할 수 있습니다.

성능 분석 활용법

왼쪽 패널의 세션 목록에서 Ctrl 또는 Shift 키와 함께 다중 선택하면, 선택된 리소스들의 총 용량과 요청 횟수가 하단 상태 표시줄에 집계되어 표시됩니다. 이를 통해 특정 페이지를 구성하는 모든 자원의 "무게"를 측정할 수 있습니다.

초기 로딩 성능을 개선하려면 다음 전략을 고려하세요:

이미지 스프라이트 기법으로 HTTP 요청 수 감소
CSS/JS 파일 통합 및 최소화(minification)
동적 콘텐츠의 렌더링 차단 요소 제거
Gzip/DEFLATE 압축 적용

캐싱 메커니즘 분석

조건부 요청 헤더

브라우저는 캐시된 리소스의 유효성을 검증하기 위해 다음 헤더를 활용합니다:

헤더	용도
`If-Modified-Since`	지정된 시간 이후 변경되었을 경우에만 전송
`If-None-Match`	ETag 값이 일치하지 않을 경우에만 전송
`Pragma: no-cache`	캐시된 응답 수용 거부, 원본 서버 직접 요청

서버가 304 Not Modified를 반환하면 본문 없이 헤더만 전송되므로 대역폭을 절약할 수 있습니다. Fiddler에서 동일한 리소스에 대한 두 번째 요청이 304로 응답되는지 확인하세요.

캐시 제어 응답 헤더

지시자	의미
`public`	공유 캐시에 저장 가능
`private`	개인 전용 캐시에만 저장
`no-cache`	재사용 전 원본 서버 검증 필요
`no-store`	어떤 형태로도 저장 불가
`max-age=초`	지정된 시간 동안 유효
`must-revalidate`	만료 후 반드시 원본 검증

Expires는 절대 시간을, Cache-Control은 상대 시간을 기준으로 합니다. 두 헤더가 모두 없는 경우 브라우저는 휴리스틱 캐싱을 적용하거나 매번 조건부 요청을 보냅니다.

커스 규칙 스크립팅

Fiddler는 JScript.NET 기반의 이벤트 처리 시스템을 제공합니다. Rules > Customize Rules 메뉴에서 스크립트를 편집할 수 있습니다.

쿠키 포함 요청 강조

static function OnBeforeRequest(sess: Fiddler.Session) {
    if (sess.oRequest.headers.Exists("Cookie")) {
        sess["ui-color"] = "purple";
        sess["ui-bold"] = "true";
        sess["ui-customcolumn"] = "HasCookie";
    }
}

대용량 응답 표시

static function OnBeforeResponse(sess: Fiddler.Session) {
    var threshold = 25 * 1024; // 25KB
    if (sess.responseBodyBytes.length > threshold) {
        sess["ui-color"] = "red";
        sess["ui-bold"] = "true";
        sess["ui-customcolumn"] = "HeavyPayload";
    }
}

캐시 헤더 누락 감지

static function OnBeforeResponse(sess: Fiddler.Session) {
    var hasExpiry = sess.oResponse.headers.Exists("Expires");
    var hasCacheControl = sess.oResponse.headers.Exists("Cache-Control");
    
    if (!hasExpiry && !hasCacheControl) {
        sess["ui-color"] = "orange";
        sess["ui-bold"] = "true";
        sess["ui-customcolumn"] = "NoCachePolicy";
    }
}

압축 인코딩 검사

요청의 Accept-Encoding: gzip, deflate 헤더와 응답의 Content-Encoding 헤더를 비교하여 압축이 실제로 적용되었는지 확인합니다. Transformer 인스펙터를 사용하면 압축된 응답을 자동으로 해제하여 원본 크기를 확인할 수 있습니다.

정적 자원(CSS, JS, SVG)은 60-80%까지 압축률을 달성할 수 있으며, 동적 콘텐츠는 CPU 오버헤드와의 트레이드오프를 고려해야 합니다. Vary: Accept-Encoding 헤더가 없으면 압축된 버전과 비압축 버전이 잘못 캐시될 수 있으므로 주의가 필요합니다.

Inspector 유형

Fiddler는 다양한 내장 인스펙터를 제공합니다:

요청 인스펙터

Headers: HTTP 헤더와 상태 라인
TextView: 본문을 텍스트로 표시
HexView: 16진수 덤프
XML: 트리 뷰로 파싱된 XML

응답 인스펙터

Transformer: Gzip/DEFLATE/Chunked 인코딩 제거
ImageView: 이미지 미리보기
Privacy: P3P 정책 해석

고급 활용: 요청 재구성

Composer 탭(빌더 페이지)에서는 기존 세션을 드래그하여 기반으로 하거나, 수동으로 HTTP 요청을 조립하여 재전송할 수 있습니다. 이는 API 엔드포인트 테스트나 특정 헤더 조합의 영향을 검증할 때 유용합니다.

또한 Rules > Automatic Breakpoints를 설정하면 요청/응답 지점에서 실행을 일시 중지하고 편집이 가능합니다. 이 기능은 보안 테스트와 엣지 케이스 검증에 활용됩니다.

태그: Fiddler HTTP Proxy Web Performance Caching HTTP Compression

5월 27일 11:16에 게시됨

괴물 클럽