Back to Articles
아키텍쳐JavaScriptReactNative

서버에서 클라이언트 UI를 제어하기

서버 드리븐 UI 아키텍처의 개념과 장점. 그리고 구현방법을 알아보자

2026.06.103 min read변경연
author
postNo
status
thumbnail
description
category
tags
createdAt
updatedAt

서버 드리븐 UI

서버 드리븐 UI
이름만 봐도 알 수 있듯이 서버에서 ui 를 결정하는 것이다.
예전에는 모바일에서 많이 사용되었다. 모바일은 한번 배포하고나서 UI를 변경하기 위해서는 다시 앱을 빌드하고 심사하는 과정이 필요하기때문에 실제 고객이 업데이트 받기까지는 오랜 시간이 소요된다. 그래서 서버에서 UI 를 결정할 수 있도록 개발했고 앱의 업데이트 없이 UI를 조절할 수 있었다. 최근에는 이러한 변화가 모바일뿐 아니라 웹에도 많이 적용되고있다.
서버에서 렌더링 될 UI 를 제어한다고?
어렵게 생각할 필요는 없다. 여러분이 A/B 테스트할 때 서버 값에 의해 A화면 혹은 B화면이 보여지게 되는데, 이런것도 서버 드리븐 UI 이다.

서버 드리븐 UI란 무엇인가?

서버 드리븐 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를 하기위해서는 적절하게 필요하다고 생각되는 수많은 컴포넌트를 우선 개발해두어야 한다. 이는 절대로 간단하거나 빠르게 가능한 작업이 아니다.

참고 자료

Buy me a bear!If you like this post..