아키텍처
RiGrid: Server Driven UI를 통해 변화에 민첩하게 대응하기
두줄요약
서버 주도 UI인 RiGrid로 비즈니스 데이터와 UI 데이터를 분리해 결합도를 낮췄습니다. Grid, Cell, GraphQL 기반 설계로 유지보수성과 확장성을 높였습니다.
문제 상황
- 프론트엔드 UI 데이터와 백엔드 비즈니스 데이터의 강결합
- 배지 노출 조건 변경 시 백엔드와 프론트엔드 동시 수정 필요
- 기술 부채 누적로 유지보수 비용과 생산성 저하
원인 분석
- API 스펙과 UI 표현 로직의 직접 결합
- 플랫폼별로 서로 다른 로직을 프론트엔드에 구현하는 구조
- 동일한 데이터의 중복 처리와 확장성 저하
해결 방법
- Server Driven UI 기반 RiGrid 도입
- Grid와 Cell, IR로 UI와 데이터 구조 표준화
- GraphQL, DataLoader, Redis 캐싱으로 응답 효율과 재사용성 개선
성능/운영 포인트
- AsyncCell로 비동기 렌더링 지원
- 하위 호환성 유지를 위한 기존 필드 변경 금지와 신규 필드 추가
- 스키마 변경 영향 검증과 문서화로 운영 안정성 확보