AI BriefingMFE 환경에서 공통 헤더(GNB) 개편하기
핵심 내용
Module Federation 기반 헤더를 스냅샷과 transform 모션으로 UX/DX 균형 있게 개편했다.
자세히 보기
인프런의 헤더(GNB) 는 강의, 챌린지, 멘토링, 클립, 커뮤니티 같은 핵심 서비스를 더 명확하게 드러내기 위해 개편됐다.
초기에는 Antman 모놀리식에서 시작해 리액트 기반의 MFE 구조로 분리했지만, 공통 헤더를 수정할 때마다 앱쉘과 각 도메인 패키지를 모두 배포해야 하는 문제가 남았다. 이를 해결하기 위해 서버 사이드 컴포지션, CI/CD 디스패치 자동화, 런타임 로딩(Module Federation)을 비교했고, 독립 배포와 유지보수성을 이유로 런타임 로딩을 선택했다.
다만 이 방식은 또 다른 복잡함을 만들었다.
- Antman용 JS 헤더와 앱쉘용 React 헤더를 이중 관리해야 했다.
- 헤더를 Antman 레이아웃에 직접 붙이면서 스타일 충돌과 Layout Shift를 처리해야 했다.
- 이를 위해 Vite로 Antman 전용 엔트리를 만들고,
emotion으로 클래스 충돌을 줄였으며,MutationObserver와 placeholder로 로딩 전후 레이아웃 변화를 막았다.
가장 눈에 띄는 문제는 SSR 페이지 전환마다 반복 노출되는 스켈레톤 깜빡임이었다. 이를 해결하려고 이전 헤더 상태를 쿠키에 저장한 뒤, 서버에서 getState 로 읽어 <html> 의 data-* attribute와 CSS 변수로 주입하는 스냅샷 방식을 도입했다. 컴포넌트 트리는 그대로 두고 CSS만으로 노출 여부와 라벨을 제어해 하이드레이션 에러를 피했고, 최초 방문자는 주요 아이콘만 보여 주는 식으로 처리했다.
검색바 영역도 같은 방식으로 경로 정보를 함께 넘겨 스켈레톤 단계부터 높이를 확보했다. 이후 스크롤 모션은 height 변경으로 인한 reflow 대신 transform: translateY() 기반으로 바꿔, CPU 부담을 줄이고 GPU Composite 단계에서 자연스럽게 움직이도록 개선했다.
결국 이번 개편은 SSR로 완전히 전환하지 않고도 UX를 끌어올리면서, 헤더는 앱쉘 한 벌로 통합해 배포 부담을 줄인 현실적인 절충안 이었다. 남은 과제는 앱쉘의 API 로딩 속도 개선과, Antman의 레거시 페이지를 모두 React로 마이그레이션해 어댑터 레이어를 제거하는 일이다.
이 한국어 요약은 AI가 자동으로 만들었습니다. 원문의 주장과 맥락은 원문에서 확인해 주세요. 저작권은 원저작자에게 있습니다.
