🐢 Server-Driven UI(SDUI)는 화면에 보여지는 UI 랜더링을 클라이언트가 아닌 서버 위주로 진행하는 방식이다. 앱 서비스는 빠르게 UI를 변경시키고 싶어도 버전 업데이트 및 심사

🐢 Server-Driven UI(SDUI)는 화면에 보여지는 UI 랜더링을 클라이언트가 아닌 서버 위주로 진행하는 방식이다. 앱 서비스는 빠르게 UI를 변경시키고 싶어도 버전 업데이트 및 심사 등으로 시간이 걸리기 때문에 특히 이런 요구사항이 많았다. 👻 이에 Airbnb는 앱과 웹에서 모두 UI가 통일된 Ghost Platform을 만들었다. Ghost Platform은 서버의 응답값을 받아 Section Component를 만들고 여기에 interaction을 추가한 후, 전체적인 레이아웃을 정의하여 화면을 렌더링하는 방식이다. 🔄 SDUI에서는 서버에서 데이터와 UI 값을 함께 내려준다. 또한 Web/iOS/Android가 모두 동일한 backend response로 처리할 뿐만 아니라, 동일한 GraphQL Schema를 사용하여 모든 플랫폼이 동일한 응답을 이용하는 universal schema를 만들었다. ℹ️ Section은 UI Component를 표현하는 데이터로, 어떤 데이터를 표현할 지에 대한 정보를 가지고 있는 구성 요소이다. Seciton Component들은 각 플랫폼의 Native Language를 통해 구현되어 있으며, Section Component Type에 따라서 다르게 렌더링된다. 📱 Screen은 화면, 레이아웃을 정의하며, sction이 어떻게 들어갈 지 정의하는 구성 요소이다. ILayout에 의해 레이아웃의 배치와 디테일한 정보를 정의하며, modal, popup, popover, full screen 등에 관한 정보 역시 포함하고 있다. 🖱️ 마지막으로 IAction이라는 Schema를 통해 Event Handling도 제어 가능하다. 즉, 사용자와 인터렉션하는 UI의 Action까지도 서버 응답 값을 통해 dynamic하게 변경이 가능하다는 뜻이다. 🤔 다양한 실험 및 테스트, 유저 별 최적화, 빠른 개선 등을 위해 SDUI를 부분적으로 사용하는 기업은 있지만, 전체 구조를 플랫폼화한 경우는 거의 없다. 다양한 커스터마이징 니즈 때문에 플랫폼 별로 동일하게 UI를 변경하는 것은 어렵기 때문이다. 단점도 분명히 존재하지만, 통일된 UI가 중요하거나 실험, 개선, 배포 등이 매우 빠른 주기를 갖는 서비스라면 고려해 볼 만하다.