프론트엔드
AI로 디자인시스템 마이그레이션하기 (1): 여정의 시작
두줄요약
AI 에이전트와 codemod를 활용해 Mantine v6 디자인시스템을 v8로 점진 마이그레이션했습니다. v6·v8 공존, 자동 검증, QA 보강으로 전환 위험을 낮췄습니다.
문제 상황
- Mantine v6 기반 디자인시스템을 20여 개 애플리케이션에서 직접 의존하는 구조
- v6의 미지원 컴포넌트·낮은 반응형 DX·TypeScript 5 호환성 문제와 향후 생태계 변화 대응 필요
- 기존 시스템 대체, 패키지 매니저 전환, 스타일 전환을 함께 시도한 1차 마이그레이션의 높은 전환 부담
구조와 흐름
- 별도 레포와
-next패키지로 Mantine v8 기반 디자인시스템 구축 - 클래스 접두사·ThemeProvider 분리와
peerDependencies에서dependencies로의 전환을 통한 v6/v8 공존 - 공식 문서 색인, 커맨드화한 변환·테스트·검증, 파일 기반 작업 맥락 인계를 활용한 AI 에이전트 오케스트레이션
트레이드오프
- v8 의존성 패키지 내 격리로 공존 안정성 확보 대신 번들 크기 증가 감수
- 스타일 기술 전면 교체 대신
@mantine/emotion유지로 마이그레이션 범위 축소 - Emotion
css prop과 v8stylesAPI의 우선순위 충돌에 대응하는 codemod 보강 필요
성능/운영 포인트
- v6/v8 비교 스토리북, 픽셀 단위 자동 비교 테스트, Next.js 샘플 앱으로 배포 전 검증
- AST 기반 codemod으로 import·prop·스타일 변환 자동화와 애플리케이션별 설정 지원
- 단순한 애플리케이션부터 적용하고 QA 발견 패턴을 codemod·가이드에 반영하는 점진적 위험 축소
