웹 컴포넌트로 프레임워크 전환 준비하기

Vue2가 EOL을 맞으면서, 에잇퍼센트는 React로의 점진적 마이그레이션을 준비해야 했다. 동시에 디자인 시스템도 도입하려다 보니, 같은 UI 컴포넌트를 프레임워크마다 따로 구현하고 다시 유지보수해야 하는 문제가 예상됐다.

초기에는 다음 세 가지 선택지가 있었다.

• Vue2로 먼저 UI 컴포넌트를 만들고 나중에 React로 다시 구현한다.
• 먼저 Vue2를 React로 마이그레이션한 뒤 React용 UI 컴포넌트를 만든다.
• Vue2와 React UI 컴포넌트를 동시에 구현한다.

어느 선택도 비용이 컸고, 특히 점진적 마이그레이션에서는 두 프레임워크가 공존하기 때문에 UI가 쉽게 파편화된다. 같은 버튼이라도 구현과 수정이 분리되면 UI 일관성, 유지보수, 디자이너와 개발자 간 커뮤니케이션 비용이 모두 나빠진다.

해결책은 프레임워크에 종속되지 않는 UI 컴포넌트를 만드는 것이었다. 브라우저 표준 기술인 **웹 컴포넌트(Web Components)**를 쓰면 Vue와 React 양쪽에서 동일한 컴포넌트를 재사용할 수 있고, Shadow DOM으로 스타일도 캡슐화할 수 있다.

구현에는 Lit을 사용했다. Lit은 웹 컴포넌트를 더 생산적으로 작성하게 해 주는 라이브러리로, 반응성, TypeScript, SSR, 데코레이터 기반 선언형 코드 작성을 지원한다.

그 결과 에잇퍼센트는 디자인 시스템 eds-wc를 웹 컴포넌트로 만들고, Vue2에서 React로 넘어가는 과정에서도 같은 컴포넌트를 그대로 쓸 수 있게 됐다. 효과는 다음과 같다.

• React용 UI를 다시 구현할 필요가 없다.
• eds-wc를 **SOT(Single Source of Truth)**로 유지할 수 있다.
• 마이그레이션 과정의 UI 파편화와 커뮤니케이션 비용을 줄일 수 있다.

Next.js로 전환 중인 실제 화면에서도 여러 eds-wc 컴포넌트를 그대로 조합해 사용할 수 있었고, 프론트엔드 개발자는 프레임워크별 UI 재작성보다 비즈니스 로직에 집중할 수 있게 됐다.