MFE 환경에서 공통 헤더 개편, 스냅샷과 GPU 가속으로 UX 개선!

MFE(Micro Frontend) 환경에서 공통 헤더(GNB) 개편을 통해 핵심 서비스 노출 및 사용자 경험 개선을 목표로 함

Module Federation을 활용하여 헤더를 독립적으로 배포하고, Antman(레거시) 환경과의 통합을 위해 어댑터 모듈 도입

스냅샷(Snapshot) 기법을 통해 런타임 로딩으로 인한 깜빡임(Flickering) 현상을 개선하고, UX(User Experience) 향상

CSS 속성 셀렉터(CSS Property Selector)와 CSS 변수(CSS Variable)를 활용하여 스켈레톤(Skeleton) UI를 구현하고, 레이아웃(Layout) 문제를 해결

스크롤 모션(Scroll Motion) 성능 개선을 위해 height 대신 transform 속성을 사용하여 GPU(Graphics Processing Unit) 가속을 활용

MFE 아키텍처(Architecture)와 Module Federation

본문에서는 인프런의 프론트엔드 아키텍처를 모놀리식(Monolithic)에서 MFE(Micro Frontend)로 전환한 배경을 설명한다. 도메인별 프로젝트 분리(Project Separation)를 통해 개발 생산성(Development Productivity)을 향상시키고, 장애 격리(Fault Isolation)를 달성했다. 특히, Module Federation(Module Federation)을 활용하여 헤더와 같은 공통 컴포넌트(Common Component)를 독립적으로 배포하고 관리하는 방식을 채택했다. 이는 CI/CD 디스패치(CI/CD Dispatch) 방식의 단점인 배포 충돌(Deployment Conflict) 문제를 해결하고, 런타임 로딩(Runtime Loading)을 통한 유연성을 확보하기 위한 전략이다.

어댑터 모듈(Adapter Module)을 이용한 Antman 환경 통합

Antman 환경과의 통합을 위해 어댑터 모듈(Adapter Module)을 활용하여 이중 관리(Dual Management) 문제를 해결했다. 어댑터 모듈은 리액트 컴포넌트(React Component)를 JS로 번들링(Bundling)하여 S3에 저장하고, Antman에서 런타임에 로드하는 방식으로 동작한다.

번들링 호환성(Bundling Compatibility): Vite를 사용하여 Antman 전용 엔트리 포인트를 구성하고, Module Federation의 shared 의존성을 처리

스타일 충돌 방지(Style Conflict Prevention): emotion을 사용하여 런타임에 난수화된 class name을 생성하고, Antman의 global CSS와 충돌을 방지

레이아웃 시프트(Layout Shift) 해결: MutationObserver를 활용하여 헤더 로딩 전 placeholder를 배치하고, 로딩 후 제거

이러한 과정을 통해 단일 관리(Single Management) 방식으로 전환하고, Antman 환경에서도 최신 헤더를 사용할 수 있도록 했다.

스냅샷(Snapshot) 접근법을 통한 렌더링(Rendering) 개선

런타임 로딩(Runtime Loading)으로 인한 깜빡임(Flickering) 문제를 해결하기 위해 스냅샷(Snapshot) 접근법을 도입했다. 이는 헤더의 마지막 상태를 쿠키(Cookie)에 저장하고, 스켈레톤(Skeleton) UI에 반영하는 방식이다.

쿠키 활용(Cookie Utilization): 서버에서 HTML을 내려줄 때 쿠키 값을 활용하여 스켈레톤 UI를 구성

data attribute + CSS: data attribute와 CSS 속성 셀렉터(CSS Property Selector)를 사용하여 컴포넌트 트리(Component Tree) 변경 없이 스켈레톤 UI 제어

하이드레이션 에러(Hydration Error) 방지: 서버와 클라이언트 간의 컴포넌트 트리 불일치 문제를 해결

이러한 방법을 통해 SSR(Server-Side Rendering) 없이도 사용자에게 향상된 UX(User Experience)를 제공할 수 있었다.

UX(User Experience) 향상을 위한 레이아웃(Layout) 및 모션(Motion) 개선

경로별 검색바(Search Bar) 노출 여부에 따른 레이아웃(Layout) 문제를 해결하기 위해 스냅샷(Snapshot)에서 사용한 방식을 확장했다. 또한, 스크롤 모션(Scroll Motion)의 성능을 개선하기 위해 height 속성 대신 transform: translateY()를 활용하여 GPU 가속(GPU Acceleration)을 구현했다.

검색바 영역 확보: data attribute와 CSS 속성 셀렉터(CSS Property Selector)를 활용하여 검색바 노출 여부에 따라 레이아웃 조절

스크롤 모션 성능 개선: height 변경 대신 transform: translateY()를 사용하여 reflow(Reflow)를 최소화하고, 부드러운 스크롤 모션 구현

Airbnb 헤더 구조 참고: height 변경 없이 transform만으로 모션을 처리하는 Airbnb의 헤더 구조를 참고

이러한 개선을 통해 사용자 경험을 향상시키고, 성능 저하(Performance Degradation) 문제를 해결했다.