tech.inflab.com · 2026. 03. 06.

MFE 환경에서 공통 헤더(GNB) 개편하기

AI 엔지니어링 브리핑

인프런은 여러 서비스가 나뉘어 운영되는 환경에서 헤더를 한 곳에서 관리하면서도 화면의 깜빡임과 성능 문제를 줄이도록 구조를 개편했습니다.

문제 & 배경

문제 & 배경: 서비스별로 프론트엔드를 분리한 마이크로프론트엔드 환경에서 헤더를 여러 프로젝트와 레거시 시스템에서 따로 관리해야 해 수정과 배포가 번거롭고, 런타임 로딩 때문에 화면이 깜빡이는 문제가 있었습니다.

기술 & 해결책

기술 & 해결책: Module Federation으로 헤더를 독립 배포하고 레거시 화면에는 어댑터로 불러오게 통합했으며, 쿠키에 저장한 이전 헤더 상태를 서버 HTML의 속성과 CSS로 먼저 보여 주고 스크롤 애니메이션은 height 대신 transform을 사용해 레이아웃 밀림과 버벅임을 줄였습니다.

교훈 & 주의점

교훈 & 주의점: 모든 문제를 가장 이상적인 SSR 구조로 해결하기보다 팀의 배포 방식에 맞춰 UX와 개발 편의성 사이의 현실적인 균형을 선택했으며, API 로딩 지연과 레거시 시스템 마이그레이션은 여전히 개선 과제로 남았습니다.

내용이 비슷해요

내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.