TVING의 새로운 백오피스 Refine 구축기 — (1)

TVING Service Platform 팀이 운영자 요청마다 서버 개발자가 프론트엔드까지 직접 개발해야 하는 비효율을 해소하기 위해 Refine 프레임워크와 AI Agent를 결합한 백오피스 구축 사례를 다룬다. TypeScript 기반 모노레포와 GraphQL 스키마 기반 설계로 AI의 코드 생성 정확도를 높인 구조가 핵심이다.

핵심 포인트

서버 개발자가 운영 요청마다 프론트엔드까지 개발하는 병목을 해소하기 위해 백오피스 전용 React 프레임워크 Refine을 선택했다.
Refine은 명확한 컨벤션과 Headless 구조, Provider 추상화 덕분에 AI Agent와의 궁합이 뛰어나다고 판단했다.
GraphQL을 데이터 레이어로 사용해 스키마 자체가 API 명세 역할을 하며 타입 공유가 자동으로 이루어진다.
AI 정확도 확보를 위해 룰북 문서화 + 스캐폴딩 명령 + 사후 4단계 검증 프로세스를 도입했다.
컨벤션이 도구의 기본값이 되는 구조로 AI의 자유도를 제한해 일관성을 확보했다.

상세 정리

문제 배경: 운영자 데이터 요청이나 UI 변경마다 서버 개발자가 프론트엔드까지 함께 작업해야 해 병목이 됐다. 백오피스는 완벽함보다 정확성이 중요하므로 AI 활용 빠른 개발이 가능하다고 판단.
Refine 선택 이유: List/Show/Create/Edit CRUD 컴포넌트 제공, Headless 구조로 UI 라이브러리 자유 선택, 명확한 컨벤션으로 AI와 궁합이 좋다.
모노레포 구성: Frontend/Gateway/Mesh/Backend 4개 앱을 TypeScript로 통일, GraphQL 스키마가 타입 공유 기반이 된다.
GraphQL 채택 이유: 스키마 자체가 API 명세이므로 프론트-백 간 타입 일관성을 자동 보장하고, AI가 스키마 기반으로 코드 생성할 수 있다.
AI 정확도 확보 1 — 룰북: Refine CRUD 컴포넌트 사용, GraphQL을 Custom Hook으로 분리, 디자인 토큰 활용 등 구체적 규칙을 문서화해 AI에 주입한다.
AI 정확도 확보 2 — 스캐폴딩: 리소스 X에 List 페이지 만들어줘 한 줄 명령으로 폴더 구조·타입·테스트 파일까지 자동 생성.
AI 정확도 확보 3 — 사후 검증: 코드 생성 → 작성 중 적용 → 검토 → 실행 전 자동 검증 4단계로 AI 출력물을 즉시 검증한다.
핵심 설계 철학: 컨벤션이 도구의 기본값이 되도록 구조를 설계해 AI의 자유도를 제한하고 일관성을 확보했다.