- 아키텍쳐
서버 드리븐 UI
서버 드리븐 UI
이름만 봐도 알 수 있듯이 서버에서 ui 를 결정하는 것이다.
예전에는 모바일에서 많이 사용되었다. 모바일은 한번 배포하고나서 UI를 변경하기 위해서는 다시 앱을 빌드하고 심사하는 과정이 필요하기때문에 실제 고객이 업데이트 받기까지는 오랜 시간이 소요된다. 그래서 서버에서 UI 를 결정할 수 있도록 개발했고 앱의 업데이트 없이 UI를 조절할 수 있었다. 최근에는 이러한 변화가 모바일뿐 아니라 웹에도 많이 적용되고있다.
서버에서 렌더링 될 UI 를 제어한다고?
어렵게 생각할 필요는 없다. 여러분이 A/B 테스트할 때 서버 값에 의해 A화면 혹은 B화면이 보여지게 되는데, 이런것도 서버 드리븐 UI 이다.
서버 드리븐 UI란 무엇인가?
서버 드리븐 UI는 사용자 인터페이스의 구조와 내용을 서버에서 정의하고, 클라이언트는 이 정의에 따라 UI를 렌더링하는 방식이다. 전통적인 개발에서는 서버가 데이터만 제공하고 클라이언트가 이 데이터를 어떻게 표시할지 결정했다. 반면, 서버 드리븐 UI에서는 서버가 데이터뿐만 아니라 UI 레이아웃, 컴포넌트 타입, 스타일 등의 정보도 함께 제공한다.
단지 이전에 데이터만 제공하던 것에서 컴포넌트 정보와 스타일을 추가로 제공하는 것 뿐이다.
서버 드리븐 UI 구현 예시
아래는 서버 드리븐 UI를 사용한 화면 예시이다.
이 화면은 다음과 같은 섹션으로 구성되어 있다.
아래에서 설명하는 코드는 예시를 표현한것으로 실행되는 코드는 아니다. 실제로는 아래 데이터뿐 아니라 수많은 추가데이터가 필요하다.
1. 헤더 영역
{
"type": "header",
"components": [
{
"type": "padding_top_area",
"data": {
"value": 20,
}
}
{
"type": "image",
"data": {
"url": "https://sample-image.com",
}
}
]
}2. 컨텐츠 영역
"type": "content",
"components": [
{
"type": "text",
"data": {
"value": "안녕하세요.\n반갑습니다.",
}
}
{
"type": "text",
"data": {
"value": "25.05.22 18시 강남역 인근 식당"
}
}
]3. 지도 영역
"type": "content",
"components": [
{
"type": "map_kakao",
"data": {
"latitude": 127.123456,
"longitude": 34.123456,
}
}
]클라이언트 앱은 이러한 JSON 구조를 해석하여 적절한 UI 컴포넌트로 렌더링한다. 각 플랫폼(iOS, Android, 웹)은 동일한 JSON을 받지만, 각자의 네이티브 컴포넌트를 사용하여 플랫폼에 최적화된 방식으로 UI를 표시할 수 있다.
서버 드리븐 UI의 기술적 구현
클라이언트 측 구현
클라이언트 측에서는 서버에서 받은 UI 명세를 해석하고 렌더링하는 인터프리터가 필요하다.
const renderComponent = () => {
switch (type) {
case 'padding_top_area':
return <div style="padding: {}" />;
case 'image':
return <img src={} >;
case 'text':
return <span>{}</span>;
case 'map_kakao':
return <div>{...}</div>;
}
};결론
서버 드리븐 UI는 현대적인 앱 개발에서 많은 이점을 제공하는 아키텍처이다.
빠른 업데이트와 개발 효율성 향상 등의 장점을 통해 비즈니스 요구사항에 더 민첩하게 대응할 수 있다. 물론, 모든 애플리케이션에 적합한 것은 아니고 UI 실험이 잦은 커머스 서비스에 효과적이라고 생각한다. 그리고 복잡한 인터랙션이나 고성능이 요구되는 앱에서는 한계가 있을 수 있다.
프로젝트에서 서버 드리븐 UI를 고려하고 계신다면, 점진적으로 도입하여 그 이점을 경험해보시기 바란다. 작은 부분부터 시작하여 경험을 쌓고, 점차 확장해 나가는 전략이 성공적인 도입의 방법이 될 수 있다.
일반적으로 서버 드리븐 UI를 하기위해서는 적절하게 필요하다고 생각되는 수많은 컴포넌트를 우선 개발해두어야 한다. 이는 절대로 간단하거나 빠르게 가능한 작업이 아니다.