[기획자의 개발지식] SDUI
SDUI (Server-Driven UI)를 적용하면 무엇이 좋아질까?
최근 회사에서 진행한 프로젝트는 서비스 화면을 개편하는 프로젝트였다. 서비스 화면을 개편하는데 사용성을 개선하는 측면도 있었지만, 내부적으로는 SDUI로 전환하는 것을 목표로 진행을 했던 프로젝트였다.
과연 SDUI는 무엇이고 왜 이것으로 전환하는 것을 목표로 진행했는지 짧게 남겨보려고 한다.
SDUI란?
SDUI는 Server Driven UI의 약자로 화면을 클라이언트에서 그리는 것이 아닌 서버에서 구성요소와 레이아웃을 내려주어 화면을 그리는 시스템 체계를 이야기 한다. (클라이언트에서 그리는 건 CDUI (Client-Driven-UI라고 한다.)
예를 들면, 클라이언트에서 화면을 그리는 구조에서는 텍스트의 문구를 바꾼다거나, 폰트 사이즈가 바뀐다거나, 이미지 영역의 규격이 달라졌을 때 클라이언트 배포가 필요했다면 SDUI를 사용하면 이런 변경 사항이 있을 때 서버 배포로 해결이 가능하다.
이미지 출처: https://medium.com/@greaflorent/server-driven-ui-a-smarter-approach-to-multi-platform-app-m단, SDUI를 적용하기 위해서는 서버와 클라이언트 사이에 컴포넌트를 무엇을 사용하겠다는 등의 체계를 세워두워야 한다.
왜 SDUI를 적용할까?
사실 최근에 회사를 옮겼고 이번 회사의 서비스 화면들은 대부분 네이티브 화면이었다. 위에서 말했듯이 사소한 변경사항에도 앱 배포를 해야지만 반영할 수 있는 구조였다. 하나의 변경 사항에 각 플랫폼마다 수정 작업을 진행해야하고, 심사 받기까지도 기간이 하루정도는 소요되기 때문에 즉각적으로 대응하기 어려운 부분이 있었다.
그러나 SDUI를 적용하고 나면 클라이언트 배포 없이도 UI 업데이트가 가능하다. 즉, SDUI 적용의 가장 큰 목적은 수정이 필요할 때 빠르게 대응하기 위해서 SDUI를 적용하고자 하였다.
어떤 장단점이 있을까?
SDUI를 적용하면서 얻을 수 있는 장점을 더 살펴본다면 다음과 같다.
1) 클라이언트 배포 없이도 UI 업데이트가 가능하다. 그 덕분에 빠르게 변경 사항을 적용할 수 있다는 장점도 생기고, 앱 버전과 무관하게 업데이트 버전을 사용자에게 보여줄 수 있다는 장점도 생긴다.
2) A/B test를 하기에도 용이하다. 서버에서만 변경하면 진행할 수 있는 부분이 많아지기 때문에 A/B test를 유연하게 진행할 수 있는 부분도 생긴다.
3) SDUI는 미리 어떤 컴포넌트를 사용할지 약속해두어야 하고, 그 안에서만 서버에서 내려준 정보를 클라이언트에서 구현할 수 있다. 즉, 사용할 수 있는 UI의 규격이 한정되어 있는 셈이다. (물론 컴포넌트를 클라이언트에서 추가한다면 새로운 컴포넌트도 구현이 가능해지나, 이땐 클라 작업이 필요하다.) 그렇기 때문에 앱 서비스 전체적으로 SDUI를 적용하게 되면 시각적으로도 일관성 있고, 통일감 있는 서비스를 만들 수 있다.
반면 단점도 일부 존재한다.
1) 정해진 컴포넌트 내에서만 구현이 가능하기 때문에 신규 UI를 적용하기에는 어려운 부분이 있다.
2) 그렇게 때문에 처음 SDUI를 구현할 때, 여러 곳에서 활용 가능할 수 있도록 잘 설계하는 것이 중요하다.
기획자로서 참고 필요한 부분
마지막으로 기획자로서는 SDUI와 관련해서 어떤 부분들을 참고하면 좋을지 작성하고자 한다.
1) 우리 회사에서 적용한 SDUI 라이브러리를 확인해두면 기획할 때 수월하다. SDUI가 적용된 영역에서는 어떤 컴포넌트만 사용할 수 있는지 미리 예측할 수 있기 때문에 디자인/개발과 이야기할 때 한층 수월할 수 있다.
2) 어떤 부분이 SDUI로 이루어져 있는지 확인해두면 기획할 때 수월하다. 앱 배포가 필요한지 아닌지 여부에 따라 프로젝트 일정이 달라지는 경우가 많다. 내가 진행하는 프로젝트에서 일부 서비스 수정이 필요한데, 앱 배포를 기다리면서까지 미룰 필요는 없다고 생각된다면 SDUI로 이루어진 영역을 찾아 그 부분을 변경하는 방식으로 기획 방향을 잡아볼 수도 있을 것이다.
3) click, long-press, scroll와 같은 인터렉션값도 SDUI로 미리 정의해서 사용할 수 있다. 초기에 SDUI를 설계하는 단계에서 기획자로서 투입된다면, 확장성을 생각해서 자주 사용하는 인터렉션값들도 미리 설계해두는 것이 필요할 것이다.
