SDUI 시스템 구축기 (1): JSON 기반 UI 렌더링 설계

// 브랜드별 분기 처리의 현실
function ProductPage({ brand, product }) {
  if (brand === 'sports') {
    return <SportsProductPage product={product} />;
  } else if (brand === 'luxury') {
    return <LuxuryProductPage product={product} />;
  } else if (brand === 'casual') {
    return <CasualProductPage product={product} />;
  } else if (brand === 'outdoor') {
    return <OutdoorProductPage product={product} />;
  }
  // ... 브랜드가 추가될 때마다 분기문 증가
}

// 테마 기반 접근
const sportsTheme = {
  primaryColor: '#000000',
  font: 'bold',
  layout: 'dynamic'
};
 
const luxuryTheme = {
  primaryColor: '#f5f5dc',
  font: 'serif',
  layout: 'classic'
};

// 기존 방식: JSX로 직접 UI 정의
<div className="container">
  <h1>제품명</h1>
  <img src="product.jpg" />
</div>

// 새로운 방식: JSON으로 UI 구조 표현
{
  "type": "div",
  "role": "container",
  "children": [
    {
      "type": "h1", 
      "role": "text",
      "content": "제품명"
    },
    {
      "type": "img",
      "role": "image", 
      "src": "product.jpg"
    }
  ]
}

export interface ElementBase {
  // 개발자를 위한 설명 (JSON 내 주석 용도)
  description?: string;
  // 실제 렌더링될 HTML 태그 (div, span, button 등)
  type: ElementType;
  // 어떤 React 컴포넌트로 렌더링할지 결정하는 key
  role: ElementRole;
  // 인라인 스타일 정의
  style?: CSSProperties;
  // 자식 요소들 (재귀 구조로 중첩 가능)
  children?: Element[];
}

export type ElementRole =
  | 'container'            // 다른 요소들을 그룹화
  | 'text'                 // 텍스트 콘텐츠 표시
  | 'image'                // 이미지 표시
  | 'button'               // 버튼 요소
  // ...

// role 값을 key로, 실제 React 컴포넌트를 값으로 가지는 매핑 테이블
export const COMPONENT_MAP = {
  container: Container,
  text: Text,
  image: Image,
  button: Button,
  // ...
};
 
// JSON Element를 받아 해당하는 React 컴포넌트로 렌더링
function ElementRenderer({ element }: { element: Element }) {
  // element.role 값으로 COMPONENT_MAP에서 컴포넌트를 찾음
  // 매핑되지 않은 role은 기본값으로 Container 사용
  const Renderer = COMPONENT_MAP[element.role] || COMPONENT_MAP.container;
  
  return <Renderer {...element} />;
}

// 스포츠 브랜드: 큰 이미지 중심의 역동적인 레이아웃
{
  "role": "container",
  "children": [
    {
      "type": "img",
      "role": "image", 
      "style": { "width": "100%", "height": "400px" }
    },
    {
      "type": "h1",
      "role": "text",
      "content": "제품명"
    }
  ]
}
 
// 럭셔리 브랜드: 중앙 정렬의 우아한 레이아웃
{
  "role": "container", 
  "children": [
    {
      "type": "h1",
      "role": "text",
      "content": "브랜드명",
      "style": { "textAlign": "center", "fontFamily": "serif" }
    },
    {
      "type": "img",
      "role": "image",
      "style": { "width": "60%", "margin": "0 auto" }
    }
  ]
}

// TextElement: content 속성 필수
export interface TextElement extends ElementBase {
  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
  role: 'text';
  content: ElementContent;
}
 
// ImageElement: src, alt 속성 사용 가능
export interface ImageElement extends ElementBase {
  type: 'img';
  role: 'image';
  src?: string;
  alt?: string;
}
 
// ButtonElement: buttonType으로 버튼 종류 지정
export interface ButtonElement extends ElementBase {
  type: 'button';
  role: 'button';
  buttonType?: 'submit' | 'reset' | 'button';
}
 
// 모든 Element 타입의 유니온
export type Element = 
  | TextElement 
  | ImageElement 
  | ButtonElement
  // ...

// 1. 서버 응답을 Element 배열로 파싱
const elements: Element[] = parseJsonToElements(serverResponse);
 
// 2. 페이지에서 Element 배열을 순회하며 렌더링
function JsonRenderPage({ elements }: { elements: Element[] }) {
  return (
    <>
      {elements.map((element, index) => (
        <ElementRenderer key={index} element={element} />
      ))}
    </>
  );
}
 
// 3. ElementRenderer가 role에 맞는 컴포넌트를 선택하고, children을 재귀적으로 처리
function ElementRenderer({ element }: { element: Element }) {
  const Renderer = COMPONENT_MAP[element.role] || COMPONENT_MAP.container;
 
  return (
    <Renderer data={element} style={element.style}>
      {element.children?.map((child, index) => (
        <ElementRenderer key={index} element={child} />
      ))}
    </Renderer>
  );
}

// 평면적 구조: 단순하지만 확장성 부족
{
  "type": "div",
  "role": "container",
  "child1Type": "h1",
  "child1Content": "제목",
  "child2Type": "img", 
  "child2Src": "image.jpg"
}
 
// 중첩 구조: 유연하지만 복잡성 증가
{
  "type": "div",
  "role": "container",
  "children": [
    {
      "type": "h1",
      "role": "text",
      "content": "제목"
    },
    {
      "type": "img", 
      "role": "image",
      "src": "image.jpg"
    }
  ]
}

// src를 필수로 하면 안전하지만, 동적 데이터 바인딩이 필요한 경우는?
export interface ImageElement extends ElementBase {
  type: 'img';
  role: 'image';
  src: string;    // 필수로 하면 타입 안전성은 높아지지만
  alt: string;    // 서버 데이터를 바인딩해야 하는 경우 문제가 된다
}

function Container({ data, style, children }: ContainerProps) {
  const Tag = data.type; // 'div', 'section', 'article' 등
 
  return <Tag style={style}>{children}</Tag>;
}

function Text({ data, style }: TextProps) {
  const Tag = data.type; // 'h1', 'h2', 'p', 'span' 등
 
  return <Tag style={style}>{data.content}</Tag>;
}