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

핵심 내용

• TVING 백오피스 구축에 Refine을 도입한 배경과 이유 소개
• 반복적인 관리자 화면 개발 부담을 줄이기 위해 AI Agent와 컨벤션 기반 개발 흐름을 결합
• 모노레포, GraphQL, 권한 추상화, 코드 생성·검토·lint 자동화로 백오피스 생산성 강화

구조와 흐름

• frontend, gateway, mesh, backend로 나눈 모노레포 구성
• Turborepo와 pnpm workspace로 타입과 스키마를 공유하는 개발 방식
• GraphQL 스키마를 명세로 삼아 화면과 데이터 구조를 맞추는 설계

선택 이유

• Headless 구조로 UI 라이브러리 선택이 자유로운 점
• CRUD, 권한 제어, Audit log 같은 사내 도구용 기능이 기본 제공되는 점
• AI Agent가 정해진 컨벤션을 따라 페이지를 생성하기 쉬운 점

적용해볼 점

• 프론트 코드 규칙과 예시를 문서화해 AI와 사람이 같은 기준으로 작업하는 방식
• 스캐폴딩, 코드 리뷰, lint 자동화로 컨벤션 위반을 줄이는 흐름
• 반복적인 어드민 화면은 규칙 기반 생성과 추상화로 생산성을 높이는 접근