발표 주제 소개
거대한 서비스를 쪼개서 마이크로 프론트엔드를 만드는 이야기를 주제로 발표를 시작한다. 레거시 UI를 리뉴얼하는 차세대 프로젝트에서 모노리식 SPA로 작업한 내용을 어떻게 나눴는지, 실제 사례와 느낀 점을 공유하겠다고 밝힌다.
발표자가 참여한 프로젝트가 리액트·타입스크립트로 빠르게 시작한 모노리식 SPA임을 설명한다. 처음부터 마이크로 프론트엔드를 알고 시작하기 어려웠고, 나중을 위해 앱 전체 상태 관리를 하는 구조로 개발했다고 소개한다.
메일·드라이브·태스크·위키·캘린더·주소록 등 결제를 제외한 7개 서비스를 다루면서, 하나에 한두 명이 붙다 보니 도메인 지식이 특정인에게 쏠리는 문제를 겪는다. 서비스가 복잡해질수록 팀을 키우고 오너십을 주고 싶었지만 거대 레거시에서는 쉽지 않았다고 회고한다.
메인 서비스와 하위 서비스를 나누고 URL로 이동시키되, 불필요한 소스 코드가 함께 실리는 문제를 애플리케이션 쉘로 푼다. 공통 레이아웃을 쉘에 두고 각 서비스로 라우팅하며, 레이지 로딩과 번들 분리로 더 편한 로딩 효과를 얻는다.
여러 서비스 화면을 한 페이지에 통합하는 기술이 더 어려운 문제임을 짚는다. 프레임워크에 상관없이 쓸 수 있는 웹컴포넌트를 소개하고, 메일 작성 화면에서 드라이브 파일을 첨부하는 시나리오로 서비스 간 화면·코드가 얽히는 상황을 설명한다.
드라이브 API 사용 코드가 서비스 경계를 넘나드는 문제를 DDD 바운디드 컨텍스트로 정리하고, 빌드 타임이 아닌 런타임에 통합하기 위해 웹팩 모듈 페더레이션을 도입한다. expose 설정, 리모트 엔트리 js, 엔진엑스 동적 주소와 캐싱으로 서비스를 독립 배포하는 구조를 만든다.
통째로 라우팅되는 페이지와 다른 서비스에 끼워 넣는 프래그먼트를 구분한다. 프래그먼트를 함수로 받아 지연 로딩하며 드라이브 다운·네트워크 에러·로딩 상태에 대응하고, 쉘과 서비스가 페이지·프래그먼트를 주고받는 통합 흐름을 정리한다.
마이크로 프론트엔드는 대단한 코딩 기술이 아니라 서비스 복잡도가 충분히 커졌을 때의 선택일 뿐이며, 억지로 적용하면 잘 안 된다고 못박는다. 영역별 책임과 역할을 명확히 나누고 팀 오너십과 권한을 주는 조직 철학이 진짜 핵심임을 강조하며 마무리한다.