Vercel의 마이크로프론트엔드 도입기: 수직 분리 아키텍처

Vercel이 모놀리식 Next.js 웹사이트를 수직(Vertical) 마이크로프론트엔드 아키텍처로 전환한 과정을 공개한다. 마케팅/문서/대시보드 세 영역으로 분리하면서 빌드 시간 40% 이상 단축과 Core Web Vitals 개선을 달성했다. 수직 vs 수평 마이크로프론트엔드 선택 근거와 하드 네비게이션 성능 문제 해결 방법까지 상세히 다룬다.

핵심 포인트

수직(path 기준) 마이크로프론트엔드를 선택, 수평(페이지 내 기능 분리)은 복잡도가 높아 탈락했다
마케팅/문서/대시보드 세 영역은 사용자 동선이 자연스럽게 분리되어 마이크로프론트엔드의 이상적인 후보였다
Next.js Multi-Zones로 수직 마이크로프론트엔드를 구현, 기존 코드베이스 포크 없이 새 앱을 점진적으로 생성했다
Turborepo의 `--affected` 기능과 Remote Cache로 변경된 앱만 빌드해 CI 효율을 높였다
하드 네비게이션 성능 문제는 링크 가시화 시 프리페칭 + Chromium Speculation Rules 사전 렌더링으로 완화했다

상세 정리

문제: 단일 Next.js 앱에서 작은 코드 변경도 전체 재빌드를 유발해 빌드 시간 증가와 팀 간 병목이 발생했다
수직 vs 수평: 수직(경로별 분리)은 응집도가 높고 단순하나 앱 간 이동 시 하드 네비게이션이 발생한다. 수평(기능별 분리)은 같은 페이지에서 여러 앱이 동작하지만 복잡도가 높아 탈락했다
분리 기준: 마케팅/문서/대시보드는 별도 UI를 유지하고 사용자 동선이 자연스럽게 분리되어 이상적인 분리 단위였다
Next.js Multi-Zones: 여러 Next.js 앱을 하나의 URL 공간에서 운영할 수 있게 해주는 Next.js 기능으로 수직 마이크로프론트엔드 구현의 핵심이다
점진적 마이그레이션: 기존 코드베이스를 포크하지 않고 공유 패키지를 유지한 모노레포에서 새 앱을 별도로 생성, 기능 플래그로 트래픽을 단계적으로 전환했다
Turborepo `--affected`: 변경된 패키지/앱만 빌드하고 Vercel Remote Cache로 빌드 캐시를 팀 간 공유해 CI 시간을 대폭 줄였다
Turbopack: 로컬 개발 가속화를 위해 채택, 컴파일 속도를 개선했다
프리페칭: 링크가 뷰포트에 보이면 초기 리소스를 미리 다운로드해 브라우저 캐시를 준비한다
사전 렌더링: Chromium의 Speculation Rules API를 활용해 사용자 인터랙션 발생 시 페이지를 미리 렌더링, 사실상 즉각적인 전환 경험을 제공한다
모니터링: Speed Insights(실사용자 성능), Vercel Toolbar(레이아웃 시프트/INP 감지), Dependency Cruiser(모노레포 의존성 분석)로 검증했다
트레이드오프: 로컬 테스트와 미리보기 환경의 복잡도 증가, Draft Mode 초기 동작 불량이 발생했다. 하드 네비게이션은 제거 대신 완화 전략을 선택했다
성과: 빌드 시간 40% 이상 단축, LCP/INP 등 Core Web Vitals 개선, 크로스 마이크로프론트엔드 코드 제거로 페이지 무게 감소, 팀별 독립 배포 가능