Read Original
#Frontend

CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지

CMS 모노레포 개선기: 빌드 시간 단축부터 번들 최적화까지
01

Summary

14분 걸리던 배포를 8분으로! 여기어때의 Next.js 모노레포 생존기

TurboRepo 병렬 빌드부터 AI 기반 번들 다이어트까지, 개발 생산성을 2배 높인 실전 최적화 전략

거대한 모노레포 환경에서 겪는 빌드 정체 현상을 해결하기 위해 기술적 한계를 돌파한 과정을 담았습니다. 단순한 설정 변경을 넘어 리소스 제약 속에서 안정성을 확보하는 방법과 AI를 활용해 수천 개의 파일을 효율적으로 분석하여 번들 크기를 줄인 구체적인 사례를 공유합니다.

  • 01TurboRepo 병렬 빌드 도입으로 빌드 시간 43% 파격 단축
  • 02메모리 부족 현상에 대응하는 '병렬 실패 후 순차 재시도' 전략 설계
  • 03AI 에이전트를 활용한 대규모 소스 코드 분석으로 최적화 포인트 자동 식별
  • 04Lottie(1.6MB→400KB) 및 lodash 임포트 방식 개선을 통한 번들 최적화
  • 05Spring Boot와 Next.js가 결합된 특수 구조에서의 현실적인 CI/CD 개선 경험

RECOMMENDATION

모노레포 빌드 속도 저하로 고민하는 팀이나, 복잡하게 얽힌 공통 패키지의 번들 사이즈를 안전하게 줄이고 싶은 시니어 프론트엔드 개발자에게 적극 추천합니다.

The Problem

10개 이상의 Next.js 앱이 포함된 모노레포 환경에서 순차적 빌드 방식으로 인해 배포 시마다 약 14분이 소요되어 개발 생산성이 저하되는 문제가 있었습니다. 특히 프론트엔드 빌드 결과물이 Spring Boot JAR에 포함되는 구조적 제약으로 인해 작은 수정에도 전체 앱을 다시 빌드해야 하는 비효율이 발생했습니다.

The Solution

TurboRepo를 도입하여 빌드 파이프라인을 병렬화하고, 빌드 실패 시 안전하게 재시도하는 로직을 구축했습니다. 또한 AI 에이전트를 활용하여 대규모 코드베이스 내의 lodash 및 Lottie 라이브러리 사용 패턴을 분석하고, 개별 임포트 방식으로 전환하여 번들 사이즈를 최적화했습니다.

The Result

배포 시간이 기존 14분에서 8분으로 약 43% 단축되었으며, 주요 라이브러리의 임포트 방식 개선을 통해 전체 앱 합산 약 1.6MB의 번들 사이즈를 절감했습니다.

Trade-off

병렬 빌드 시 메모리 점유율이 급증하여 빌드 서버 리소스 부족으로 인한 간헐적 실패 위험이 존재하며, 이를 위해 동시 실행 수를 제한하고 실패 시 순차 재시도 로직을 추가해야 했습니다.

03

Key Concepts

Concept · 01

TurboRepo

Vercel에서 개발한 JavaScript/TypeScript 모노레포용 고성능 빌드 시스템으로, 지능적인 캐싱과 병렬 실행을 지원합니다.

  • 10여 개의 Next.js 앱 빌드를 병렬로 처리하고, 변경되지 않은 앱은 캐시를 통해 빌드를 건너뛰도록 설정했습니다.
Concept · 02

Tree Shaking

최종 번들에서 사용되지 않는 코드를 제거하여 파일 크기를 최적화하는 기술입니다.

  • lodash 전체를 가져오던 방식에서 개별 함수 단위 임포트로 변경하여 필요한 코드만 번들에 포함되도록 개선했습니다.
Concept · 03

Static Export

Next.js 앱을 서버 런타임 없이 정적인 HTML, JS, CSS 파일로 변환하여 배포하는 모드입니다.

  • Spring Boot 서버가 정적 리소스를 서빙하는 아키텍처에 맞춰 output: 'export' 설정을 적용하여 빌드 결과물을 생성했습니다.