프로덕트
참여 프로젝트
볼타 마이크로 프론트엔드와 디자인 시스템
전자세금계산서 서비스 볼타의 프론트엔드를 개편했습니다. 앱별 배포 구조와 공통 디자인 시스템을 만들고, 안정성을 개선했습니다.
99.8%사용 중 오류로 멈추지 않은 비율 (Sentry 기준), 개선 전 96%
- 기간
- 2024.10 ~ 2025.06
- 소속
- 볼타코퍼레이션
- 역할
- 프론트엔드 구조 전환과 디자인 시스템 구축
- 핵심 기능
- 바뀐 앱만 배포하거나 되돌릴 수 있도록 나눴습니다. 여러 앱의 화면도 같은 디자인 기준으로 정리했습니다.
- 작업과 결과
- Sentry 기준 크래시 프리율 96%에서 99.8%로 개선
- 제각각이던 화면 요소를 하나의 디자인 시스템으로 통일
- 대량 알림 처리를 Web Worker로 분리해 화면 부하 감소
- 기술 스택
- Next.js
- Turborepo
- Vercel
- Shadcn
- TanStack Query
- Zustand
- Web Worker
- Sentry
배경
전자세금계산서 서비스 볼타에서 프론트엔드 구조를 개편했습니다. 서비스가 커지면서 한 번에 전체를 빌드하고 배포하는 방식이 부담이 됐고, 앱마다 화면 구성도 달랐습니다.
앱을 따로 배포할 수 있도록 나누고 공통 디자인 시스템을 만들었습니다. 기존 코드를 옮기면서 안정성도 개선했고, 실시간 알림이 몰릴 때 화면이 끊기는 문제를 함께 다뤘습니다.
결정과 구현
- 마이크로 프론트엔드 전환: 앱별로 따로 배포할 수 있도록 모놀리식 구조를 마이크로 프론트엔드로 점진적으로 옮겼습니다. 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가 끊김 없이 렌더링되게 했습니다.