대규모 프론트엔드 아키텍처의 새로운 패러다임 - Part 2. 모듈 페더레이션 PoC

Context

MAU 800~900만 명 규모의 올리브영은 모놀리식 프론트엔드 구조로 인해 배포 병목, 코드베이스 복잡성, 팀 간 의존성 증가 문제에 직면했다. 단일 코드베이스에서 전체 애플리케이션을 한 번에 빌드·배포해야 하므로 작은 변경사항에도 배포 시간이 증가하고 장애 파급 범위가 전사 영향으로 확대되었다.

Technical Solution

• Module Federation을 Next.js SSR 환경에서 구현: Host 애플리케이션이 Remote 애플리케이션의 모듈을 런타임에 동적 로딩하고, getServerSideProps를 통해 Remote의 서버 사이드 렌더링 로직 실행
• Shared Dependencies 설정으로 React 18 같은 공유 라이브러리 중복 로드 방지: Singleton 패턴으로 버전별 의존성 관리
• 웹팩 설정에서 Expose/Container를 통해 원격 모듈 노출: Host에서 "HomeModule/home" 형태로 Remote 모듈 참조 및 로드
• 마이크로 프론트엔드 간 독립적 배포 구조: A 애플리케이션 수정 후 배포 시 B, C 애플리케이션의 재배포 없이 런타임에 변경사항 자동 반영
• 여러 팀이 개별 코드베이스에서 병렬 개발: 기능 중심의 자율적 팀 구성으로 다른 팀의 완료를 기다리지 않고 개발 진행

Impact

PoC를 통해 Next.js 기반 Module Federation의 SSR 호환성을 확인했으나, 정량적 성능 수치는 아티클에 명시되지 않음.

Key Takeaway

Module Federation은 런타임 모듈 공유로 독립적 배포를 가능하게 하지만, 대규모 팀 환경에서는 웹팩 설정 수동화, 타입 안전성 자동화, SSR 구현 복잡성을 반드시 체계화해야 실무 적용이 가능하다. Part 3의 Nx 도구를 통한 자동화가 이 난관 해결의 핵심이다.