웹 컴포넌트로 프레임워크 마이그레이션 준비하기

문제 상황

• Vue2 EOL로 인한 React 전환 필요성
• 점진적 마이그레이션 과정에서 Vue2와 React가 공존하며 UI 컴포넌트 중복 구현과 유지보수 비용 증가 우려
• 구성원 증가로 인한 디자인 일관성 저하와 디자이너·개발자 커뮤니케이션 비용 확대

원인 분석

• 프레임워크별로 UI 컴포넌트를 따로 구현할 경우 파편화와 중복 작업 발생
• 기존 Vue2 기반 컴포넌트를 그대로 두면 React 전환 시 재구현 부담 재발
• 디자인 시스템을 프레임워크 종속적으로 운영할 경우 SOT 분산

해결 방법

• 프레임워크에 종속되지 않는 웹 컴포넌트 도입
• Lit 기반의 eds-wc로 Modal, Button, Textfield 등 공통 UI를 단일 소스로 구현
• Vue2와 React에서 동일한 컴포넌트를 재사용해 마이그레이션 중 UI 비용 최소화

성능/운영 포인트

• 두 프레임워크에서 같은 UI 코드 재사용으로 개발 비용 절감
• 하나의 코드만 유지보수하는 SOT 구조로 운영 단순화
• 디자인 일관성 유지와 커뮤니케이션 비용 감소