마이크로 프론트엔드(Micro-frontends) 아키텍처: 분할 정복

백엔드가 MSA(Micro Service Architecture)로 쪼개지는 동안, 프론트엔드는 점점 더 거대해졌습니다(Front-end Monolith). 쇼핑몰 사이트에서 결제 팀, 상품 팀, 회원 팀 등 수십 명의 개발자가 하나의 리포지토리, 하나의 번들을 공유하다 보니 배포 때마다 전쟁이 벌어집니다. 이를 해결하기 위해 프론트엔드도 쪼개자는 개념이 바로 마이크로 프론트엔드입니다.

1. 핵심 개념

하나의 웹 페이지를 여러 개의 독립적인 앱의 조합으로 구성합니다.

• 헤더(GNB)는 공통 팀이 개발 및 배포.
• 상품 목록은 상품 팀이 개발 및 배포.
• 장바구니 위젯은 결제 팀이 개발 및 배포. 각 팀은 서로 다른 프레임워크(React, Vue, Angular)를 써도 상관없고(물론 권장하진 않지만), 배포 주기도 독립적입니다.

2. 구현 방식

2.1 Iframe

가장 고전적이고 확실한 격리 방식입니다. 하지만 성능이 나쁘고, 부모-자식 간 통신이 번거로우며, UX가 매끄럽지 않습니다.

2.2 Web Pack Module Federation

Webpack 5에 추가된 킬러 기능입니다. 빌드 타임이 아닌 런타임(Runtime)에 다른 앱의 코드를 불러와서 내 코드처럼 실행할 수 있습니다. 의존성(React 등) 공유도 가능해서 번들 사이즈 낭비도 줄일 수 있습니다. 현재 가장 핫한 방식입니다.

3. 장단점

• 장점: 팀 간의 간섭이 사라져 개발/배포 속도가 빨라집니다. 점진적인 업그레이드가 가능합니다.
• 단점: 복잡합니다. 너무 복잡합니다. 배보다 배꼽이 더 클 수 있습니다. 공통 스타일이나 상태 공유가 어렵습니다.

넷플릭스, 다방, 당근마켓 등이 이 아키텍처를 도입했습니다. 하지만 "구글이 하니까 우리도 하자"는 위험합니다. 조직의 규모와 문제 상황이 맞을 때 도입해야 하는 고급 전략입니다.