웹앱의 전환, Micro Frontends 아키텍처

문제 상황

• 200개가 넘는 페이지와 복잡한 HR 도메인을 하나의 앱에서 다루며, 각 스쿼드가 독립적으로 개발·배포할 수 있는 구조 필요
• 공통 UI가 모든 앱 빌드에 포함되는 모놀리식/페이지 단위 구조의 롤백 부담, 느린 빌드와 배포 제약
• 공통 코드 중복, 앱 이동 시 성능 부하와 부자연스러운 사용자 경험 문제

구조와 흐름

• React 기반 Node.js 웹앱 프레임워크 위에서 런타임 통합 Micro Frontends 아키텍처로 전환
• 각 마이크로 앱을 개별 배포 단위로 분리하고, 런타임에 하나의 앱처럼 통합
• dev, qa, production 순으로 점진 전환하며 전사 사용 환경에 맞춤

해결 방법

• 기존 프레임워크 의존성을 인터페이스 수준에서 흡수하고 빌드타임 코드 바꿔치기 구현
• 프레임워크에 영향받지 않는 코드 분리와 커스텀 플러그인 제작으로 2개 환경 동시 빌드 유지
• 스쿼드 협업 기간 확보, 문서 제공, 주간 Q&A로 회귀 테스트와 전환 이슈 정리

적용해볼 점

• 대규모 B2B SaaS에서도 UI 단위 분리와 독립 배포를 통해 조직 리듬을 맞추는 구조 고려
• 아키텍처 전환 시 개발자 경험보다 운영 가능성과 회귀 테스트 체계를 함께 설계
• 전환 초기에 협업 문서와 커뮤니케이션 채널을 촘촘히 운영