인프런의 프론트엔드 개발자가 MFE(Micro Frontends) 아키텍처 환경에서 헤더(GNB)를 개편하며 겪은 기술적 도전과 해결 과정을 담고 있습니다. 기존 Monolith 구조에서 MFE로 전환하며 발생한 공통 컴포넌트 관리 문제, 런타임 로딩 시 발생하는 Layout Shift 및 스켈레톤 UI 깜빡임 문제, 그리고 스크롤 애니메이션 시의 Reflow 성능 저하 문제를 어떻게 해결했는지 상세히 설명해 드립니다. 특히, 완벽한 SSR 방식 대신 DX(Developer Experience)를 고려하여 Module Federation과 Snapshot 접근법, Vite와 Emotion을 활용한 스타일 충돌 방지, MutationObserver를 이용한 레이아웃 밀림 해결 등 현실적인 대안을 선택하여 UX를 개선한 사례를 확인해 보세요!