TVING의 새로운 백오피스 Refine 구축기 — (1)
아키텍처
TVING의 새로운 백오피스 Refine 구축기 — (1)
두줄요약
TVING이 Refine과 AI Agent를 활용해 백오피스 개발 속도를 높인 과정을 소개했습니다. 모노레포와 GraphQL, 자동화 규칙으로 컨벤션 기반 생산성을 강화했습니다.
핵심 내용
- TVING 백오피스 구축에 Refine을 도입한 배경과 이유 소개
- 반복적인 관리자 화면 개발 부담을 줄이기 위해 AI Agent와 컨벤션 기반 개발 흐름을 결합
- 모노레포, GraphQL, 권한 추상화, 코드 생성·검토·lint 자동화로 백오피스 생산성 강화
구조와 흐름
- frontend, gateway, mesh, backend로 나눈 모노레포 구성
- Turborepo와 pnpm workspace로 타입과 스키마를 공유하는 개발 방식
- GraphQL 스키마를 명세로 삼아 화면과 데이터 구조를 맞추는 설계
선택 이유
- Headless 구조로 UI 라이브러리 선택이 자유로운 점
- CRUD, 권한 제어, Audit log 같은 사내 도구용 기능이 기본 제공되는 점
- AI Agent가 정해진 컨벤션을 따라 페이지를 생성하기 쉬운 점
적용해볼 점
- 프론트 코드 규칙과 예시를 문서화해 AI와 사람이 같은 기준으로 작업하는 방식
- 스캐폴딩, 코드 리뷰, lint 자동화로 컨벤션 위반을 줄이는 흐름
- 반복적인 어드민 화면은 규칙 기반 생성과 추상화로 생산성을 높이는 접근
