[FE] 마이크로 프론트엔드 아키텍처

마이크로 프론트엔드(Micro Frontend) 아키텍처

• 백엔드의 마이크로서비스(Microservice) 개념을 프론트엔드 영역으로 확장한 아키텍처 패턴.

즉, 하나의 대규모 프론트엔드 애플리케이션을 여러 개의 독립적인 “작은 프론트엔드 애플리케이션”으로 나누어 개발·배포하는 구조를 말함.

프론트엔드를 여러 개의 독립적인 애플리케이션(마이크로 앱)으로 분리하여, 각각 별도로 개발·배포하고 최종적으로 하나의 UI로 통합하는 아키텍처

사용 하는 이유

• 대규모 프로젝트의 복잡성 감소, 팀 단위 독립성 확보, 부분 배포 및 업데이트 용이성을 위해 사용

구조

• Container (또는 Shell): 전체 프레임워크 역할을 하는 메인 앱. 공통 스타일, 라우팅, 인증 등을 담당.
• Micro Apps: 독립적으로 동작하는 각 서비스 단위의 프론트엔드. 각자 독립된 빌드·배포 파이프라인을 가짐.
• Integration Layer: Container가 여러 Micro App을 하나의 페이지처럼 묶어주는 역할을 함.

장점

• 독립 배포 (Independent Deployment): 한 부분만 수정해도 전체를 재배포할 필요가 없음.

• 기술 스택 다양성 (Polyglot Frontend): React, Vue, Angular 등 다른 프레임워크를 같은 프로젝트에서 공존 가능.

• 팀 단위 개발 독립성 (Team Autonomy): 각 팀이 독자적으로 앱을 설계·테스트·배포 가능.

• 부분 롤백/배포 용이성: 장애 발생 시 특정 앱만 빠르게 롤백 가능.