안동민 개발노트

지난 장에서는 브라우저 개발자 도구를 활용한 고급 디버깅 기법을 통해 코드 내의 논리적 오류를 식별하고 해결하는 방법을 학습했습니다. 이제 여러분은 코드가 의도대로 정확히 동작하는지 확인하고, 문제가 발생했을 때 그 원인을 찾아 해결할 수 있는 능력을 갖추게 되었습니다.

하지만 코드가 '정확하게 동작하는 것'만큼 중요한 것이 '얼마나 효율적으로 동작하는가'입니다. 웹 애플리케이션의 성능은 사용자 경험에 직접적인 영향을 미칩니다. 느린 로딩 시간, 버벅이는 스크롤, 반응 없는 UI는 사용자를 실망시키고 이탈하게 만듭니다. 반대로 빠르고 매끄러운 웹 애플리케이션은 사용자 만족도를 높이고, 더 많은 참여를 유도합니다.

성능 프로파일링(Performance Profiling) 은 웹 애플리케이션의 성능 병목(Bottleneck) 지점을 식별하고 최적화하기 위한 과정입니다. 이는 애플리케이션이 실행되는 동안 CPU 사용량, 네트워크 활동, 메모리 사용량, 렌더링 과정 등을 상세히 분석하여, 어떤 부분이 성능 저하를 일으키는지 정확히 찾아내는 것을 목표로 합니다.

이번 장에서는 크롬(Chrome) 개발자 도구의 Performance 탭과 Lighthouse를 중심으로 웹 애플리케이션의 성능을 측정하고 분석하며, 최적화 방안을 모색하는 방법을 심층적으로 알아보겠습니다.

왜 성능 최적화가 중요한가?

사용자 경험 개선: 빠른 반응 속도는 사용자 만족도를 높이고 이탈률을 줄입니다.
검색 엔진 최적화 (SEO): Google과 같은 검색 엔진은 페이지 로딩 속도를 랭킹 요소로 고려합니다.
전환율 증가: 이커머스 등에서는 성능 개선이 직접적으로 매출 증가로 이어질 수 있습니다.
에너지 효율성: 불필요한 자원 소모를 줄여 사용자 기기의 배터리 수명을 절약합니다.
접근성 향상: 저사양 기기나 네트워크 환경이 좋지 않은 사용자도 원활하게 애플리케이션을 이용할 수 있게 합니다.

크롬 개발자 도구의 Performance 탭 활용

Performance 탭은 웹 페이지의 런타임 성능을 상세하게 분석할 수 있는 가장 강력한 도구 중 하나입니다. 페이지 로딩부터 사용자 상호작용까지, 모든 활동을 기록하고 시각화하여 병목 지점을 찾을 수 있습니다.

성능 기록 (Recording) 시작 및 분석

개발자 도구 열기: 웹 페이지에서 F12 또는 Ctrl+Shift+I (macOS: Cmd+Option+I)를 눌러 개발자 도구를 엽니다.
Performance 탭 선택: 탭 목록에서 Performance를 선택합니다.
기록 시작: 원형의 'Record' 버튼을 클릭하거나 Ctrl+E (macOS: Cmd+E)를 눌러 기록을 시작합니다.
시나리오 수행: 기록이 시작되면 웹 페이지에서 성능을 측정하고 싶은 사용자 시나리오(예: 페이지 로딩, 스크롤, 버튼 클릭, 애니메이션 등)를 수행합니다.
기록 중지: 시나리오가 끝나면 'Stop' 버튼을 다시 클릭하여 기록을 중지합니다.
결과 분석: 기록이 중지되면 상세한 성능 분석 결과가 표시됩니다.

Performance 탭의 주요 패널

기록이 완료되면 다양한 정보를 담은 패널들이 나타납니다.

Overview (개요)
- 상단에 CPU 사용량, 네트워크 활동, FPS(Frames Per Second) 그래프 등이 시간순으로 표시됩니다.
- FPS (녹색 바): 프레임 속도가 높을수록(초당 60fps에 가까울수록) 매끄러운 애니메이션과 스크롤을 의미합니다. 빨간색 바는 프레임 드롭을 나타냅니다.
- CPU (색상): CPU 사용량을 색상으로 표시합니다 (노란색: JavaScript, 보라색: Recalculate Style/Layout, 녹색: Painting, 파란색: HTML Parsing).
- NET: 네트워크 요청 활동을 보여줍니다.
- 타임라인에서 특정 영역을 드래그하여 해당 구간의 상세 정보만 확대하여 볼 수 있습니다.
Summary (요약)
- 선택된 타임라인 구간의 각 이벤트 카테고리(Loading, Scripting, Rendering, Painting 등)에 소요된 총 시간을 원형 차트와 목록으로 보여줍니다.
- 여기서 가장 많은 시간을 차지하는 부분이 주요 병목 지점일 가능성이 높습니다.
Main (메인 스레드)
- 가장 중요한 패널 중 하나입니다. 메인 스레드에서 발생한 모든 활동(JavaScript 실행, 스타일 계산, 레이아웃, 페인팅 등)이 시간순으로 계층 구조로 표시됩니다.
- Flame Chart (불꽃 차트): 각 함수 호출을 '불꽃'처럼 시각화하여, 어떤 함수가 얼마나 많은 시간을 소모했는지 직관적으로 보여줍니다. 넓고 높은 불꽃은 성능 저하의 원인일 가능성이 높습니다.
- 특정 활동(예: (anonymous) 함수, update layout)을 클릭하면 하단의 Summary 탭에 해당 활동의 상세 정보와 호출 스택(Call Stack)이 표시되어, 어떤 코드에서 이 활동이 발생했는지 추적할 수 있습니다.
- Long Tasks (오랜 작업): 50ms 이상 걸리는 작업은 빨간색으로 표시되며, 이는 UI 블로킹의 원인이 될 수 있습니다.
Bottom-Up (하향식), Call Tree (호출 트리), Event Log (이벤트 로그)
- Bottom-Up: 모든 활동을 총 소요 시간 기준으로 나열하며, 자식 활동(하위 호출)에 소요된 시간도 포함하여 보여줍니다.
- Call Tree: 호출 스택을 보여주어 어떤 함수가 어떤 함수를 호출했는지 계층적으로 파악할 수 있습니다.
- Event Log: 발생한 모든 이벤트를 시간순으로 나열합니다.

성능 최적화의 일반적인 접근 방식

Performance 탭 분석을 통해 얻은 정보로 다음과 같은 최적화 작업을 고려할 수 있습니다.

불필요한 JavaScript 실행 줄이기: Long Tasks를 유발하는 JS 코드를 최적화하거나, 웹 워커를 사용하여 백그라운드로 분리합니다.
DOM 조작 최소화: DOM 변경은 Recalculate Style 및 Layout을 유발하므로, 배치 업데이트(batch update)를 하거나, 가상 DOM을 사용하는 라이브러리(React, Vue)를 활용합니다.
CSS 최적화: 복잡한 CSS 선택자나 불필요한 re-layout(reflow)을 유발하는 속성 사용을 지양합니다.
이미지 최적화: 웹에 최적화된 형식과 크기의 이미지를 사용하고, 지연 로딩(Lazy Loading)을 적용합니다.
네트워크 요청 최소화: 번들링, 코드 스플리팅, 캐싱(서비스 워커 활용) 등으로 요청 수를 줄이고 로딩 속도를 개선합니다.
애니메이션 최적화: transform과 opacity 속성을 사용하여 GPU 가속을 활용하는 애니메이션을 구현합니다. requestAnimationFrame을 사용하여 애니메이션 프레임을 브라우저의 렌더링 주기에 맞춰 실행합니다.

Lighthouse 활용: 웹 성능 측정 자동화

Lighthouse는 Google에서 개발한 오픈소스 자동화 도구로, 웹 페이지의 품질(성능, 접근성, SEO, PWA 등)을 감사(Audit)하고 개선 방안을 제시하는 도구입니다. 개발자 도구 내에서 또는 Node.js CLI로 실행할 수 있습니다.

Lighthouse 실행 및 보고서 분석

개발자 도구 열기: 웹 페이지에서 F12 또는 Ctrl+Shift+I (macOS: Cmd+Option+I)를 눌러 개발자 도구를 엽니다.
Lighthouse 탭 선택: 탭 목록에서 Lighthouse를 선택합니다.
Audit 카테고리 선택: Performance, Accessibility, Best Practices, SEO, Progressive Web App 중 측정하고 싶은 카테고리를 선택합니다.
기기 선택: Desktop 또는 Mobile 환경을 선택합니다. (Mobile이 더 느린 네트워크 환경을 시뮬레이션하므로 일반적으로 더 유용합니다.)
Analyze page load 버튼 클릭: 감사가 시작되고 약 30초 정도 소요됩니다.
결과 보고서 확인: 감사가 완료되면 각 카테고리별 점수와 상세한 개선 제안 목록이 표시됩니다.

Lighthouse 성능 지표

Lighthouse의 성능 섹션은 다양한 지표를 제공하며, 특히 Core Web Vitals는 Google이 사용자 경험 측정의 핵심 지표로 강조하는 것들입니다.

FCP (First Contentful Paint): 페이지에서 처음으로 텍스트나 이미지가 렌더링되는 시점. (사용자가 콘텐츠를 보기 시작하는 시점)
LCP (Largest Contentful Paint): 뷰포트 내 가장 큰 콘텐츠 요소(이미지, 동영상, 텍스트 블록 등)가 렌더링되는 시점. (사용자가 페이지의 주 콘텐츠를 인식하는 시점)
CLS (Cumulative Layout Shift): 페이지 로딩 중 발생하는 예상치 못한 레이아웃 이동의 양. (시각적 안정성)
FID (First Input Delay): 사용자가 페이지와 처음 상호작용할 때(버튼 클릭, 텍스트 입력 등)부터 브라우저가 해당 상호작용에 응답할 수 있을 때까지의 지연 시간. (상호작용 준비도, Performance 탭의 Long Tasks와 관련 깊음)
TTI (Time to Interactive): 페이지가 완전히 시각적으로 렌더링되고, 초기 JavaScript가 로드되어 이벤트 핸들러가 등록되어 사용자가 페이지와 완전히 상호작용할 수 있을 때까지의 시간.
Speed Index: 페이지의 콘텐츠가 시각적으로 얼마나 빨리 채워지는지 측정.

Lighthouse 보고서의 Opportunities 및 Diagnostics 섹션은 각 지표에 영향을 미치는 문제점과 해결 방안을 구체적으로 제시해 줍니다. 예를 들어, "이미지 크기 적절하게 조정", "렌더링 차단 리소스 제거", "JS 실행 시간 단축" 등의 제안을 따르는 것이 좋습니다.

마무리하며

이번 장에서는 웹 애플리케이션의 속도와 효율성을 최적화하기 위한 필수적인 과정인 성능 프로파일링(Performance Profiling) 에 대해 심도 있게 학습했습니다.

여러분은 웹 성능 최적화의 중요성을 이해하고, 크롬 개발자 도구의 Performance 탭을 활용하여 애플리케이션의 런타임 활동(JavaScript 실행, 렌더링, 네트워크 등)을 기록하고 분석하는 방법을 배웠습니다. Overview, Summary, Main 패널의 Flame Chart를 통해 성능 병목 지점을 시각적으로 식별하고, Long Tasks를 찾아내는 노하우를 익혔습니다. 또한, Lighthouse 도구를 사용하여 웹 페이지의 성능을 자동화된 방식으로 측정하고, Core Web Vitals를 포함한 다양한 성능 지표와 함께 구체적인 개선 제안을 얻는 방법을 알아보았습니다.

성능 프로파일링은 한 번 하고 끝나는 작업이 아니라, 애플리케이션 개발 주기 동안 지속적으로 수행해야 하는 과정입니다. 끊임없이 사용자에게 최적의 경험을 제공하기 위해, 이 장에서 배운 도구와 기법들을 활용하여 여러분의 웹 애플리케이션을 분석하고 개선하는 습관을 들이시길 바랍니다. 빠르고 반응성 좋은 웹 서비스는 사용자뿐만 아니라 개발자에게도 큰 만족감을 줄 것입니다.

성능 프로파일링

On this page