카카오, 어드민 UI 컴포넌트 모노레포 개발로 얻은 이점 공유

카카오 FE플랫폼팀은 사내 디자인 시스템을 적용한 어드민 UI 컴포넌트 프로젝트를 개발하며 모노레포(Monorepo) 방식을 채택해 얻은 이점을 공유했다. 이 프로젝트는 React, 바닐라 JavaScript, 그리고 향후 Vue까지 지원하기 위해 복잡한 컴포넌트의 로직과 렌더링 로직을 분리하는 아키텍처를 채택했다.

로직과 렌더링의 분리

날짜 선택기(Datepicker)처럼 부가 기능이 많은 컴포넌트에서 중복 구현을 피하기 위해, 실제 화면을 그리는 로직을 제외한 순수 로직 객체를 Core 패키지로 분리했다. 각 UI 환경(React, HTML 등)은 이 Core 패키지를 의존하여 화면을 그리고 상호작용을 제어하는 구조다. 이를 통해 @kakao/admin-ui-core, @kakao/admin-ui-react, @kakao/admin-ui-html 등 여러 패키지를 하나의 저장소에서 관리한다.

모노레포 도입의 실용적 이점

카카오 FE 플랫폼팀은 모노레포 방식을 통해 다음과 같은 개발 효율성을 확보했다.

• 의존성 관리 자동화: 패키지 간 로컬 개발 시 필요한 심볼릭 링크 설정과 npm install 과정을 스크립트로 자동화하여 수동 관리의 부담을 줄였다.
• 설정 일관성 유지: ESLint, Prettier, Jest, Storybook 등 개발 도구 설정을 저장소 루트에서 관리하여 중복을 줄이고 동일한 버전을 사용하도록 통제했다.
• 원자적 변경 관리: 패키지 간 의존성 변경이나 버전 업데이트가 필요한 작업을 하나의 커밋과 브랜치로 처리하여 변경 이력 추적을 용이하게 했다.
• 통합 테스트 및 배포: 모든 패키지의 단위 테스트, E2E 테스트 등을 한 번에 실행하는 스크립트를 통해 CI 환경을 간소화하고, 사내 NPM 레지스트리 배포를 자동화했다.

이 프로젝트는 Lerna를 주요 관리 도구로 사용했으며, npm 7+의 워크스페이스 기능이나 Yarn 워크스페이스와의 병행 사용 가능성도 언급했다.