Cloudflare 플랫폼에서 수직적 마 (새 탭에서 열림)
Cloudflare는 단일 도메인 내에서 여러 독립적인 Cloudflare Workers를 특정 URL 경로에 매핑하여 팀별로 자율성을 보장하는 '버전별 마이크로프론트엔드(VMFE)' 템플릿을 발표했습니다. 이 방식은 기존의 수평적 마이크로프론트엔드와 달리 경로별로 전체 기술 스택을 분리함으로써, 팀이 프레임워크 선택부터 배포 파이프라인까지 독립적으로 제어할 수 있게 합니다. 결과적으로 사용자에게는 하나의 매끄러운 서비스로 보이지만, 내부적으로는 여러 팀이 서로의 간섭 없이 독립적으로 기능을 개발하고 배포할 수 있는 환경을 제공합니다. ### 수직적 마이크로프론트엔드(VMFE)의 정의와 이점 * **경로 기반의 독립성**: `/blog`, `/docs`, `/dash`와 같은 URL 경로별로 개별 Worker를 할당하며, 각 경로는 프레임워크, 라이브러리, CI/CD 파이프라인을 포함한 전체 스택을 독립적으로 소유합니다. * **기술 선택의 유연성**: 마케팅 페이지에는 Astro를 사용하고 대시보드에는 React를 사용하는 등, 서비스의 특성에 가장 적합한 도구를 팀별로 자유롭게 선택할 수 있습니다. * **배포 리스크 감소**: 모놀리식 구조에서 발생하던 '한 팀의 오류로 인한 전체 배포 중단' 문제를 해결하며, 특정 기능의 업데이트나 롤백이 다른 서비스에 영향을 주지 않습니다. ### URL 기반의 정교한 라우팅 구조 * **세분화된 관리**: 단순한 최상위 경로뿐만 아니라 `/dash/product-a`와 `/dash/product-b`처럼 세부 경로별로 다른 Worker를 매핑하여 대규모 애플리케이션 내의 개별 제품군을 독립적으로 관리할 수 있습니다. * **코드 공유 제로**: 각 경로는 서로 코드를 공유하지 않는 완전히 독립된 프로젝트로 운영되어 프로젝트 간의 의존성을 완벽히 차단합니다. * **실제 적용 사례**: Cloudflare는 이미 자사 대시보드에 이 전략을 적용하고 있으며, 사용자가 대시보드에서 ZeroTrust 제품으로 이동할 때 실제로는 별개의 프로젝트로 라우팅되도록 구현했습니다. ### 사용자 경험을 통합하는 기술적 전략 * **CSS View Transitions**: 서로 다른 Worker 간의 이동 시 발생하는 브라우저의 흰색 공백(interstitial loading state)을 방지하고, 내비게이션 바와 같은 공통 요소를 화면에 유지시켜 SPA(Single Page Application)와 같은 부드러운 전환 효과를 제공합니다. * **Speculation Rules API**: 사용자가 다음에 방문할 가능성이 높은 경로를 브라우저가 미리 사전 페치(prefetch)하거나 사전 렌더링하도록 설정하여, 멀티 페이지 아키텍처임에도 불구하고 즉각적인 페이지 로딩 속도를 구현합니다. * **시각적 일관성**: CSS의 `view-transition-name` 등을 활용하여 기술적인 구현 세부 사항(여러 개의 Worker 사용)을 사용자에게 노출하지 않고 단일한 애플리케이션 경험을 유지합니다. 독립적인 개발 속도와 일관된 사용자 경험이라는 두 마리 토끼를 잡고 싶은 성장하는 조직에게 이 VMFE 아키텍처는 매우 강력한 솔루션입니다. Cloudflare가 제공하는 새로운 Worker 템플릿과 최신 브라우저 API(View Transitions, Speculation Rules)를 결합하면, 기술적 복잡성을 관리하면서도 고성능의 웹 애플리케이션을 구축할 수 있습니다.