피드로 돌아가기
리디 기술블로그Frontend
원문 읽기
RiGrid: Server Driven UI를 통해 변화에 민첩하게 대응하기
리디가 Server Driven UI 아키텍처(RiGrid)를 도입해 비즈니스 데이터와 UI 데이터 결합도를 제거하고 부분 전환 시 레이턴시 감소
AI 요약
Context
리디의 프론트엔드와 백엔드는 UI 구성을 위한 데이터와 비즈니스 데이터가 강하게 결합되어 있었다. API 스펙이 변경될 때마다 프론트엔드 코드를 수정해야 했고, 플랫폼별로 동일한 데이터에 대해 다른 비즈니스 로직을 구현하는 사례도 발생했다. 이로 인해 유지보수 비용이 증가하고 서비스 확장성과 테스트 복잡성이 악화되었다.
Technical Solution
- 데이터 분리 전략: 비즈니스 로직 데이터와 UI 데이터를 명확하게 분리하여 관리
- Grid 기반 구조 설계: 모든 페이지를 Grid와 Cell 단위로 모듈화하여 재사용 가능한 컴포넌트 구성
- IR(Intermediate Representation) 표준화: Grid와 Cell이 사용하는 모든 데이터를 중간 표현 개념으로 표준화
- GraphQL 백엔드 구현: BFF 패턴과 함께 GraphQL 기반 API를 구축하여 명확한 Schema 정의와 기존 자원 재사용 가능
- 부분 전환 전략: 작품 상세 페이지 전체가 아닌 일부 정보 요소만 RiGrid로 전환하여 서비스 안정성 확보
Impact
2024년 8월 6일 14:00 작품 상세 페이지의 RiGrid 부분 전환 후 Latency 감소 확인됨. 마케팅용 랜딩 페이지와 검색 페이지 전환 완료 후 개발 기간이 단축됨.
Key Takeaway
Server Driven UI를 통해 UI 정의를 서버에서 관리하면 클라이언트 변경 없이 서버 배포만으로 UI를 갱신할 수 있으며, 이는 Cell 단위 모듈화와 데이터 표준화를 함께 적용할 때 부분 전환 상황에서도 레이턴시 개선과 개발 생산성 향상을 동시에 달성할 수 있다.
실천 포인트
마이크로서비스 아키텍처 기반 서비스에서 프론트엔드와 백엔드의 강한 결합으로 인해 UI 변경 시 양쪽 모두 수정해야 하는 상황이라면, GraphQL과 BFF 패턴을 활용해 Grid/Cell 단위의 모듈화된 UI 컴포넌트를 설계하고 IR을 통해 데이터를 표준화하면 플랫폼 간 UI 재사용성을 높이고 API 스펙 변경에 따른 프론트엔드 수정 비용을 대폭 줄일 수 있다.