한샘몰 웹 서비스 성능 최적화 프로젝트

2025년 3월 30일 (1달 전)

프로젝트 개요

한샘몰 모바일 웹 서비스의 성능 개선을 위한 프로젝트를 진행했습니다. 주요 목표는 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

문제점 분석 및 개선 작업

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 lcp2 lcp3 lcp4

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

개선 결과

디자인 시스템 및 전시 컴포넌트 번들 사이즈

  • 평균 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 지표를 크게 개선하였고,
  • 사용자 체감 속도 및 전환율 향상에 기여하였으며,
  • 개발 및 배포 과정의 효율화로 개발 생산성 또한 크게 향상되었습니다.