서버 주도 UI로 네이티브 앱 UI 유연성 확보!

네이티브 앱의 UI는 배포 후 수정이 어려워 A/B 테스트 등 유연한 UI 제공에 제약이 존재함

Server Driven UI는 서버에서 UI 정보를 제공하여 클라이언트의 UI 유연성을 확보하는 설계 방식임

GraphQL을 활용하여 UI 컴포넌트의 재사용성을 높이고, 하위 호환성을 보장함

Server Driven UI의 핵심 원리

Server Driven UI는 서버가 UI 구성 정보를 API 응답으로 제공하여 클라이언트의 렌더링을 제어한다. 구체적으로, 서버는 GraphQL 스키마를 기반으로 UI 컴포넌트 리스트를 반환한다. 따라서 클라이언트는 서버 응답에 따라 동적으로 UI를 구성하며, A/B 테스트와 개인화 UI 구현에 용이하다.

GraphQL을 활용한 UI 컴포넌트 관리

GraphQL은 UI 컴포넌트의 재사용성과 타입 안전성을 보장한다. 프래그먼트를 통해 UI 컴포넌트를 요청하고, 서버는 해당 화면에 필요한 컴포넌트를 반환한다. 반면, 클라이언트와 서버 간의 타입 정의 불일치는 GraphQL 스키마를 통해 해결하며, 하위 호환성을 유지한다.

지그재그의 Server Driven UI 구현

지그재그는 컴포넌트 메서드를 활용하여 화면별 UI를 유연하게 관리한다. Component : Method 페어를 설계도로 정의하고, ComponentMaker를 통해 컴포넌트를 생성한다. 따라서, 화면별 UI 변경을 위해 서버 측 설계도 수정만으로 가능하며, UI 컴포넌트 조립의 유연성을 확보한다.