프론트엔드
MFE 환경에서 공통 헤더(GNB) 개편하기
두줄요약
MFE 환경에서 이중 관리되던 공통 헤더를 Module Federation과 어댑터 모듈로 통합했습니다. 쿠키 스냅샷과 CSS, transform 모션으로 UX·DX 균형을 개선했습니다.
문제 상황
- 도메인별 MFE 분리 후 공통 헤더 변경마다 여러 패키지의 갱신·배포가 필요한 운영 부담
- Antman 레거시와 React 앱쉘의 헤더 이중 관리, 런타임 로딩에 따른 스켈레톤 깜빡임과 레이아웃 이동
구조와 흐름
- 리버스 프록시로 URL별 애플리케이션을 라우팅하고, App Shell의 공통 영역을 Module Federation으로 런타임 로딩
- Antman용 별도 Vite 엔트리와 어댑터 모듈로 React 헤더를 단독 번들링·로드
- 쿠키 스냅샷을 HTML data attribute·CSS 변수로 주입해 동일한 컴포넌트 트리에서 스켈레톤 구성
선택 이유
- 헤더 단독 배포와 S3 경로 기반 롤백이 가능한 Module Federation 채택
- SSR 전환에 따른 전 패키지 재배포 부담 대신 스냅샷 기반 스켈레톤으로 UX·DX 균형 추구
성능/운영 포인트
- MutationObserver와 동일 높이 placeholder로 헤더 로딩 시 Layout Shift 완화
- height·scale 변경 대신 transform: translateY 기반 Composite 모션으로 reflow와 스크롤 버벅임 감소
- 잔여 과제로 앱쉘 API 로딩 지연과 Antman 레거시 마이그레이션 완료
