# 프로젝트 개요

한샘몰 모바일 웹 서비스의 성능 개선을 위한 프로젝트를 진행했습니다. 주요 목표는 Google의 Core Web Vitals 지표인 **LCP (Largest Contentful Paint)**, **TBT (Total Blocking Time)**, **CLS (Cumulative Layout Shift)** 중심으로 성능을 개선하는 것이었습니다.

Google Lighthouse의 점수는 테스트 시점 및 환경에 따라 편차가 크기 때문에 **Google Page Speed Insights API**를 활용한 자체 모니터링 시스템을 구축하였습니다. 자사 및 경쟁사의 애플리케이션을 대상으로 **1시간 간격의 테스트를 통해 일간/주간 평균 성능 지표를 측정**하며 개선 여부를 추적했습니다.

# 성능 개선 전략

- **모바일 우선 접근**: 사용자 비율 약 85% 이상이 모바일 환경이었음
- **LCP, TBT 중심의 병목 요소 제거**
- **디자인 시스템 / 전시 컴포넌트** 담당자 및 **DevOps 파트**와 긴밀한 협업
- 성능 개선 내역을 정량적으로 검증하기 위한 **모니터링 자동화 시스템 구축**

![pages-insights](/assets/202503/pages-insights-manager.png)

# 문제점 분석 및 개선 작업

## LCP (Largest Contentful Paint)

1. **이미지 렌더링 차단 요소 제거**
   - 메인 배너 Swiper 초기화 이전에 이미지 로드를 막는 로직 존재
   - 해당 로직 제거 후, 이미지 비율 계산 → placeholder 렌더링 → 이미지 로드 순서로 구조 개선

2. **LCP 인식 대상 요소 전환**
   - background-image로 처리된 배너 div 요소 → 실제 `<img>` 태그로 전환
   - 이미지 로드 우선순위 재조정하여 하단 요소보다 배너 이미지가 먼저 렌더되도록 수정

3. **폰트 렌더링 차단 이슈 해결**
   - Pretendard 폰트 stylesheet가 렌더링 차단 유발
   - 해당 리소스를 `preload` 처리하여 렌더링 블로킹 최소화

4. **Next/Image 및 커스텀 로더 적용**
   - 디자인 시스템 이미지 컴포넌트에 `Next/Image` 적용
   - 기존 DevOps에서 제공하던 CDN + Lambda 기반 이미지 최적화 로직을 customLoader와 함께 연동하여 적용 (`unoptimized` 옵션 사용)

![lcp](/assets/202503/image.png)
![lcp2](/assets/202503/image-copy.png)
![lcp3](/assets/202503/image-copy2.png)
![lcp4](/assets/202503/image-copy3.png)

## TBT (Total Blocking Time)

1. **스크립트 평가 시간 단축**
   - Script Evaluation만으로 약 7초의 메인 스레드 블로킹 발생
   - 원인: 대형 번들 파일 (design-system-mobile.esm.js)의 비효율적 로딩

2. **불필요한 코드 제거 및 ESM 분리**
   - design-system-mobile.esm.js 모듈에서 약 74.3%가 Unused Bytes로 확인됨
   - 라이브러리 구조를 ESM 기반으로 재정비하여 Code Splitting 가능하도록 변경
   - package.json의 exports 필드를 활용해 **Entry Point 단위로 import**할 수 있도록 설정

![tbt](/assets/202503/image-copy5.png)

# 개선 결과

디자인 시스템 및 전시 컴포넌트 번들 사이즈
- 평균 40% 이상 감소

빌드 시간
- 최대 70% 단축 (Vite + ESBuild + Rollup 적용)

LCP (Largest Contentful Paint) 개선
- 평균 6초 → 1.6초로 단축

TBT (Total Blocking Time) 개선
- 평균 1,200ms → 380ms로 단축

모니터링 자동화 시스템 구축
- Google PSI API 연동, 1시간 간격 성능 트래킹을 통해 정량적 분석


# 결론

- 웹 성능 최적화를 통해 **Core Web Vitals 지표를 크게 개선**하였고,
- 사용자 체감 속도 및 전환율 향상에 기여하였으며,
- 개발 및 배포 과정의 효율화로 **개발 생산성 또한 크게 향상**되었습니다.