볼타 마이크로 프론트엔드와 디자인 시스템

배경

볼타는 전자세금계산서 SaaS입니다. 서비스가 커지면서 단일 빌드와 단일 배포가 병목이 됐습니다. 앱마다 UI가 흩어져 있었고, 쌓인 기술 부채로 앱 안정성도 떨어져 있었습니다. 대량의 실시간 알림을 처리할 때는 메인 스레드가 막혀 화면이 끊기곤 했습니다.

결정과 구현

• 마이크로 프론트엔드 전환: 앱별로 따로 배포할 수 있도록 모놀리식 구조를 마이크로 프론트엔드로 점진적으로 옮겼습니다. Turborepo 모노레포를 만들어 앱과 패키지의 경계를 정하고, 변경된 앱만 빌드되도록 캐시 단위를 나눴습니다.
• AWS Amplify에서 Vercel로 옮기면서 앱마다 프로젝트를 분리해 배포와 롤백을 앱별로 할 수 있게 했습니다. Next.js 빌드 캐시와 번들을 최적화해 배포 주기도 줄였습니다.
• Shadcn 기반 디자인 시스템: 자사 디자인 토큰 레이어를 따로 두고, Shadcn 컴포넌트가 토큰을 거쳐서만 스타일을 받도록 감쌌습니다.
• 컴포넌트 prop 규약을 intent, size, variant 세 축으로 정해 새로운 변형도 시스템 안에서 표현되게 했습니다. 여러 앱이 같은 패키지를 쓰게 하고, 흩어진 UI를 차례로 디자인 시스템으로 옮겼습니다.
• FSD 아키텍처 전환: FSD(Feature-Sliced Design)를 도입해 도메인 간 결합을 분리하고, TanStack Query로 데이터 흐름을 정리하면서 불필요한 전역 상태를 없앴습니다.
• 레거시는 조금씩 옮겨 전환 위험을 나눴습니다. 안정성 개선 전후로 Sentry에서 크래시 프리율이 96%에서 99.8%로 오른 것을 확인했습니다.
• 대량 알림 처리는 Web Worker로 분리했습니다. SSE 이벤트 처리와 Zustand 중앙 상태, 재연결과 에러 처리를 함께 묶어, 실시간으로 알림을 받는 중에도 UI가 끊김 없이 렌더링되게 했습니다.