Angular에는 기본적으로 여러 최적화가 적용되어 있지만, 애플리케이션이 커지면 로딩 속도와 사용 중의 반응성을 세밀하게 조절해야 할 수 있습니다. 이 가이드에서는 빠른 애플리케이션을 만들기 위해 Angular가 제공하는 도구와 기법을 설명합니다.
로딩 성능
로딩 성능은 애플리케이션이 얼마나 빨리 화면에 나타나고 상호작용할 수 있는 상태가 되는지를 결정합니다. 로딩이 느리면 Largest Contentful Paint(LCP)와 Time to First Byte(TTFB) 같은 Core Web Vitals에 직접적인 영향을 줍니다.
| 기법 | 역할 | 사용 시점 |
|---|---|---|
| 라우팅 규칙 지연 로딩 | 해당 화면으로 이동할 때까지 라우팅 규칙의 컴포넌트 로딩을 미뤄 초기 번들 크기를 줄입니다. | 여러 라우팅 규칙 중 일부만 초기 로딩에 필요한 애플리케이션 |
@defer를 사용한 지연 로딩 |
컴포넌트를 별도 번들로 분리해 필요할 때 불러옵니다. | 초기 렌더링에 표시되지 않는 컴포넌트, 무거운 서드 파티 라이브러리, 스크롤해야 보이는 콘텐츠 |
injectAsync를 사용한 서비스 지연 로딩 |
드물게 사용하는 서비스를 별도 청크로 분리해 필요할 때 불러옵니다. | 큰 라이브러리에 의존하는 서비스나 자주 사용하지 않는 기능 |
| 이미지 최적화 | LCP 이미지를 우선 처리하고 나머지는 지연 로딩하며, 반응형 srcset 어트리뷰트를 생성합니다. |
이미지를 표시하는 모든 애플리케이션 |
| 서버 사이드 렌더링 | 서버에서 페이지를 렌더링해 첫 화면을 빠르게 표시하고 SEO를 개선합니다. 하이드레이션으로 상호작용을 복원하고 점진적 하이드레이션으로 필요한 시점까지 각 영역의 하이드레이션을 미룹니다. | 콘텐츠가 많은 애플리케이션, 검색 엔진 색인이 필요한 페이지 |
실행 중 성능
실행 중 성능은 로딩 이후 애플리케이션의 반응성을 결정합니다. Angular의 변경 감지 시스템은 DOM을 데이터와 동기화하며, 변경 감지가 언제 어떻게 실행되는지 최적화하는 것이 실행 중 성능을 개선하는 핵심 방법입니다.
| 기법 | 역할 | 사용 시점 |
|---|---|---|
| 존리스 변경 감지 | ZoneJS의 부하를 제거하고 시그널이나 이벤트가 변경을 알릴 때만 변경 감지를 실행합니다. | 새 애플리케이션(Angular v21+의 기본값) 또는 전환할 준비가 된 기존 애플리케이션 |
| 느린 연산 | 비용이 큰 템플릿 표현식과 라이프사이클 후킹 메서드를 찾아 최적화합니다. | 프로파일링 결과 특정 컴포넌트 때문에 변경 감지 사이클이 느려지는 경우 |
| 컴포넌트 하위 트리 건너뛰기 | OnPush 변경 감지로 변경되지 않은 컴포넌트 트리를 건너뜁니다. |
변경 감지를 더 세밀하게 제어해야 하는 애플리케이션 |
| 존 오염 | 서드 파티 라이브러리나 타이머가 유발하는 불필요한 변경 감지를 방지합니다. | 프로파일링 결과 변경 감지 사이클이 과도하게 발생하는 존 기반 애플리케이션 |
성능 측정하기
최적화 방법을 아는 것만큼 무엇을 최적화할지 파악하는 것도 중요합니다. Angular는 브라우저 개발자 도구와 통합되어 병목을 찾을 수 있게 합니다.
| 도구 | 역할 |
|---|---|
| Chrome DevTools 프로파일링 | 브라우저 프로파일링과 함께 Angular 고유의 성능 데이터를 기록합니다. 색상으로 구분한 플레임 차트에서 컴포넌트 렌더링, 변경 감지 사이클, 라이프사이클 후킹 메서드를 확인할 수 있습니다. |
| Angular DevTools | 컴포넌트 트리 검사기와 변경 감지 사이클을 시각화하는 프로파일러를 제공하는 브라우저 확장 프로그램입니다. |
먼저 최적화할 부분
어디서 시작해야 할지 모르겠다면 먼저 Chrome DevTools의 Angular 트랙으로 애플리케이션을 프로파일링해 구체적인 병목을 파악하세요.
일반적으로 다음과 같은 부분부터 시작할 수 있습니다:
- 초기 로딩이 느린 경우 —
@defer로 큰 컴포넌트를 메인 번들에서 분리하고,NgOptimizedImage로 첫 화면의 이미지를 우선 처리하며, 서버 사이드 렌더링으로 콘텐츠를 더 빠르게 전달하세요. - 로딩 후 상호작용이 느린 경우 — 존리스 변경 감지가 활성화되어 있는지 확인하고, 템플릿이나 라이프사이클 후킹 메서드의 느린 연산을 찾아보세요.
불필요한 변경 감지를 줄이기 위해
OnPush를 사용하는 것도 고려하세요.