Keeneat · 2023
Keeneat – AI 작곡 서비스의 서비스 웹과 백오피스 Turborepo 모노레포
AI 작곡 서비스의 서비스 웹과 백오피스를 Turborepo 모노레포로 통합
개요
AI 작곡 서비스 Keeneat의 서비스 웹과 백오피스를 개발했습니다. 두 제품을 하나의 Turborepo 모노레포로 합치고 공용 UI 패키지를 분리해, 같은 컴포넌트와 디자인 토큰을 쓰도록 설계했습니다.
배경
문제
서비스 웹과 백오피스가 따로 만들어져 같은 컴포넌트와 스타일을 두 번씩 관리해야 했습니다.
주요 작업
- Turborepo 모노레포로 서비스 웹과 백오피스를 통합하고 공용 UI 패키지를 별도 워크스페이스로 분리
- 브랜드에 맞춘 테마 토큰과 Atomic Design 기반 컴포넌트 계층으로 Ant Design 기반 디자인 시스템 구축
- 팀이 함께 쓰는 컴포넌트 컨벤션 정리
- Chart.js로 백오피스 그래프 UI 개발
- 렌더링 최적화로 주요 화면 렌더링 200ms → 50ms
성과
- 렌더링 200ms → 50ms
렌더링 최적화로 주요 화면의 렌더링 시간을 75% 줄였습니다.
- 서비스 웹·백오피스 모노레포 통합
공용 UI 패키지를 분리해 두 제품이 같은 컴포넌트와 디자인 토큰을 씁니다.
핵심 기능
- 01
공용 UI 패키지
서비스 웹과 백오피스가 하나의 컴포넌트·디자인 토큰 패키지를 공유합니다.
- 02
백오피스 통계 그래프
Chart.js로 회원 통계 등 운영 지표 그래프를 만들었습니다.
화면
※ 녹화 화면의 민감한 정보는 블러 처리했습니다.
