Testlify - 공용 컴포넌트 라이브러리

Testlify는 네 개의 개별 애플리케이션으로 이루어진 제품군인데, 각 앱이 똑같은 버튼, 폼, 모달, 테이블을 저마다의 방식으로 다시 만들고 있었습니다. 같은 작업을 네 번 하는 셈이었고, 제품 간 UI도 조금씩 어긋나고 있었습니다. 저는 앱마다 중복 구현하는 대신 공용 컴포넌트 라이브러리 하나로 가자고 주장했고, 그것을 직접 만들어 배포했습니다.

만든 것

• 결정: 각 앱이 자기 복사본을 계속 들고 가게 두는 대신 UI를 하나의 라이브러리로 통합하자고 설득했습니다. 초기 비용과, 이미 치르고 있던 UI 어긋남 및 중복 작업 비용을 저울질했습니다. 합의가 되고 나서는 제가 구현을 맡았습니다.
• 설계부터 무상태로: 컴포넌트를 무상태이자 표현 전용으로 유지해, 앱마다 다른 로직을 담지 않고 네 제품 어디에나 깔끔하게 들어가도록 했습니다. 데이터와 동작은 각 앱이 연결하고, 라이브러리는 오직 보이는 모습과 느낌만 책임집니다.
• 비공개 npm 패키지로 배포: 버전 관리되는 비공개 npm 패키지로 배포해, 모든 앱이 일반적인 의존성처럼 동일한 컴포넌트를 가져오고 버전 업만으로 수정 사항과 개선을 받아갑니다. 복사-붙여넣기도, 포크도 없습니다.

왜 중요했나

UI를 한 번 만들어 네 앱 전체에서 재사용하니 기능 개발 시간이 약 30% 줄었습니다. 팀들은 같은 기본 요소를 다시 만드는 일을 그만두고 공용 세트를 조합하기 시작했습니다. 라이브러리에 가한 변경이 네 곳에 손으로 다시 적용되는 대신 한 번에 모든 곳에 반영되니 제품군 전체의 모습도 일관되어졌습니다.