웹 컴포넌트 UI 컴포넌트 라이브러리로 프레임워크 마이그레이션 준비하기

본 글은 Vue2에서 React로의 점진적인 프레임워크 마이그레이션을 준비하며 발생하는 UI 개발 비용을 최소화하기 위해 웹 컴포넌트를 도입한 경험을 공유합니다. 에잇퍼센트는 성장함에 따라 개발자와 디자이너 간의 소통 비용 증가, 디자인 일관성 문제, 중복 개발 등의 UI 개발 문제를 겪었습니다.

이러한 문제를 해결하기 위해 디자인 시스템 도입을 논의했으나, 주력 기술인 Vue2의 지원 중단 예고와 향후 React로의 마이그레이션 계획 때문에 UI 컴포넌트를 Vue2로 구현하는 것에 대한 우려가 있었습니다. 기존 기술 스택으로 UI 컴포넌트 라이브러리를 구현하면 마이그레이션 시 재구현 비용이 발생하고, 이는 상당한 시간과 비용을 요구하는 상황이었습니다.

이에 대한 해결책으로 웹 컴포넌트를 활용하여 프레임워크에 종속되지 않는 UI 컴포넌트를 구축하고, 이를 통해 점진적인 마이그레이션을 지원하며 UI 개발 비용을 절감하는 방안을 모색했습니다.