여러 브랜드의 상세 페이지를 개발을 하는 페이지가 있습니다. 해당 브랜드들은 호텔, 음식점, 쇼핑몰등 다양한 업종을 가지고 있습니다. 이때 해당 브랜드들의 소개 페이지를 만들기에는 각각의 페이지를 만들어야 하기 때문에 개발이 매우 복잡해집니다.

Nextjs에서는 각 페이지를 서버에서 받아와서 동적으로 렌더링하게 구성할 수 있습니다. 대부분의 페이지를 동적으로 렌더링한다면 균일한 컴포넌트에 텍스트나 이미지만 다르게 렌더링을 하고, 조금 복잡하더라도 컴포넌트를 조건문으로 렌더링을 해도 되지만, 브랜드 종류가 다양하다면 문제가 생깁니다 위와 같이 다양한 브랜드 조건이 많고 해당 브랜드들이 수십가지가 된다면 브랜드별로 다른 컴포넌트를 렌더링해주어야 합니다.

이러한 방법을 해결하기 위해서 App 개발에 사용되는 SDUI (Server Driven UI)를 사용했습니다.

APP의 경우 업데이트를 하기 위해서는 앱스토어에 심사를 받고 업데이트를 해야하기 때문에 빠르게 업데이트를 하기 어렵습니다. 그래서 서버에서 데이터 뿐만아니라 화면을 구성하는 구성요소까지 같이 보내는 방법으로 화면을 그리는 방법을 사용합니다.

저의 경우 이러한 방식에 착한하여 여러 페이지를 다루는 프로젝트에 적용을 했습니다.

화면 구성

Json 방식으로 type에 사용할 컴포넌트를 지정하고 해당 컴포넌트의 파라미터를전달하여 렌더링을 시킵니다.

const ComponentMap = {
  Container: dynamic(() => import("./Container")),
  Title: dynamic(() => import("./Title")),
  Text: dynamic(() => import("./Text")),
  Card: dynamic(() => import("./Card")),
  Icon: dynamic(() => import("./Icon")),
  ...
};

export const Widget = ({ ...props }: WidgetProps) => {
  const Component = ComponentMap[type];

  if (!Component) {
    return null;
  }

  return <Component {...props} />;
};

SDUI에서는 화면 구성을 변경할때 아래와 같이 서버에서 Json의 위치만 변경하여 빠르게 유저에게 변경된 화면을 보여줄수 있습니다.

[
  {
    type: "Search"
  },
  {
    type : "Category"
    data : category-list
  },
  {
    type : "ProductList"
    data : prduct-list
  }
]

[
  {
    type : "Category"
    data : category-list
  },
  {
    type : "ProductList"
    data : prduct-list
  },
  {
    type: "Search"
  },
]

결론

다른 방법으로는 HTML코드를 전송하여 화면에 그리는 방법이 있지만, 각 데이터와 화면 구성을 분리하여 관리하기 어렵고 유지보수 측면에서도 힘듭니다. 저의 경우 브랜드의 내용을 관리하는 페이지에서 데이터를 변경하면 해당 브랜드에 반영 되도록 해야했었는데 HTML코드를 전송하는 방법의 경우 화면과 데이터를 분리하기 힘들었기때문이 SDUI방식은 매우 유용했습니다.

SDUI를 사용하기된 이유인 여러 페이지에서 여러 컴포넌트를 동적으로 구성하는 경우가 아니더라도, 화면 배치상에서 수정할때 개발팀이 아니더라도 관리자 페이지에서 데이터만 수정하면 화면이 변경되도록 하는 방법으로도 사용할 수 있었기 때문에 업무의 효율성을 높일 수 있었습니다.