마이크로프론트엔드(Micro Frontend)는 마이크로서비스 아키텍처 원칙을 프론트엔드에 적용하여, 대형 SPA를 팀별로 독립적으로 개발·배포할 수 있는 소형 애플리케이션으로 분할하는 아키텍처 패턴이다.
| 구분 | 모놀리식 프론트엔드 | 마이크로프론트엔드 |
|---|---|---|
| 배포 단위 | 전체 앱을 단일 번들로 배포 | 기능 도메인별 독립 배포 |
| 팀 구조 | 단일 프론트엔드 팀, 중앙 집중 | 수직 팀(풀스택), 도메인 자율성 |
| 기술 스택 | 단일 프레임워크(React/Vue) | 팀별 다른 프레임워크 혼용 가능 |
| 확장성 | 팀 증가 시 코드 충돌·병목 | 팀 간 독립적 개발·배포 |
| 방식 | 원리 | 장점 | 단점 |
|---|---|---|---|
| iFrame | HTML iFrame으로 독립 앱 삽입 | 완전 격리, 레거시 지원 | UX 불연속, SEO 불리, 성능 저하 |
| Web Components | Custom Elements + Shadow DOM으로 캡슐화된 컴포넌트 | 프레임워크 독립, 브라우저 표준 | 브라우저 호환성 (폴리필 필요) |
| Module Federation | Webpack 5 기능. 런타임에 원격 모듈을 동적 로드 | 공유 의존성 중복 제거, 동적 로딩 | Webpack 의존성, 버전 불일치 위험 |
| Single-SPA | 라우팅 기반 MFE 오케스트레이션 프레임워크 | 다중 프레임워크 공존, 성숙한 생태계 | 초기 설정 복잡, 추가 런타임 번들 |
현재 주류: Webpack 5 Module Federation이 가장 많이 사용됨
마이크로프론트엔드는 대규모 팀의 프론트엔드 독립 배포를 가능하게 하지만, UI 일관성·성능·팀 간 통신의 트레이드오프가 발생한다. Module Federation이 현재 가장 실용적인 구현 방식이며, 공유 디자인 시스템과 명확한 기술 거버넌스 정책이 성공의 핵심이다.
요양원 선택 전 반드시 확인해야 할 체크리스트를 공개합니다. 공식 평가 자료 조회법, 방문 시 확인…
공공기관 채용 비리의 실태와 피해 지원자의 대응법을 정리했습니다. 채용 비리 신고 방법, 공익신고자 보호제도, 취준생…
주식 손실을 세금 절약에 활용하는 합법적 방법을 공개합니다. 해외주식 손익통산, ISA 계좌 활용, 연금계좌 절세까지…
배달이 예상 시간보다 크게 늦으면 취소·환불을 요청할 수 있습니다. 배달앱별 지연 취소 방법과 잘못 배달됐을…
통신비 절약의 핵심은 요금제 최적화입니다. 내 데이터 사용량 확인법, 알뜰폰 전환 비교, 위약금 없이 요금제…