콘텐츠 우선 웹 런타임 구축 (UI를 템플릿이 아닌 렌즈로)

Source: Dev.to

대부분의 웹 앱은 오늘날 다음과 같은 패턴을 따릅니다:

• 페이지 디자인
• 컴포넌트 작성
• 라우트 추가
• 레이아웃 로직을 영원히 반복
• 새로운 화면마다 CSS를 배포

최신 프레임워크를 사용하더라도, 우리는 여전히 같은 페이지 개념을 반복해서 재구성합니다.

그래서 저는 다른 접근 방식을 탐구하기 시작했습니다:

페이지를 UI가 아니라 구조화된 콘텐츠 + 의도로 작성한다면 어떨까요?
제가 만들고 있는 것은 바로 그 것입니다: 인터페이스가 고정되지 않고 페이지가 JSON 노드로 선언되는 콘텐츠‑우선 런타임.

The Idea

UI를 다음과 같이 구축하는 대신:

// traditional component tree

다음과 같이 선언합니다:

{
  "type": "Layout",
  "props": {
    "leftSidebarConfig": {
      "initialView": "rail",
      "elements": [
        { "type": "link", "props": { "label": "Home", "icon": "home", "href": "/" } },
        { "type": "link", "props": { "label": "Catalog", "icon": "palette", "href": "/catalog" } }
      ]
    }
  },
  "children": [
    {
      "type": "Page",
      "props": { "title": "Runtime demo" },
      "children": [
        { "type": "Button", "props": { "variant": "contained" }, "children": ["Click me"] }
      ]
    }
  ]
}

그런 다음 런타임이 이를 마운트합니다:

GUI.mount(spec, "#root");

Why This Is Different

• ✅ UI는 단지 렌더러일 뿐
• ✅ 레이아웃은 모든 곳에서 재사용 가능
• ✅ 네비게이션은 데이터가 된다
• ✅ 페이지는 포커스 공간이 된다
• ✅ 콘텐츠가 주요 산물이 된다

Navigation as a Link List

사이드바를 하드코딩하는 대신, 네비게이션은 링크 노드들의 리스트가 됩니다:

{
  "type": "link",
  "props": {
    "label": "Storybook",
    "icon": "auto_stories",
    "href": "https://example.com"
  }
}

이제 모든 화면이 동일한 네비게이션 규칙, 테마 연결, 레이아웃 로직을 공유할 수 있으므로 “사이드바”를 다시 만들 필요가 없습니다.

This Starts Feeling Like a Browser

어느 순간 깨달았습니다: 나는 구조화된 콘텐츠를 위한 브라우저를 만들고 있다는 것을. 런타임은 다음과 같습니다:

• 레이아웃 엔진
• 테마 엔진
• 노드 렌더러
• 인터랙션 라우터

그 외 모든 것은 단지 콘텐츠일 뿐입니다. 페이지는 템플릿이 아니라 콘텐츠가 존재하는 공간이 됩니다.

Why AI Fits Naturally Here

이 모델은 AI와 완벽하게 맞아떨어집니다. 전체 React 프로젝트를 생성하는 대신, AI는 작은 스펙을 생성할 수 있습니다:

{
  "type": "Page",
  "props": { "title": "Themes" },
  "children": [
    { "type": "ThemesCatalog", "props": { "minimal": true } }
  ]
}

CSS도, 라우팅 코드도, 컴포넌트 연결도 필요 없고, 런타임이 렌더링할 구조화된 의미만 있으면 됩니다.

What I’m Working Toward

다음 단계는 이를 “사이트 스펙”으로 정형화하는 것입니다:

{
  "site": "this.GUI",
  "nav": [ /* … */ ],
  "pages": {
    "/": { /* spec */ },
    "/catalog": { /* spec */ }
  }
}

그래서 런타임은 실제 콘텐츠 브라우저가 됩니다:

• 라우트 로드
• 스펙 마운트
• 레이아웃 재사용
• 포커스를 동적으로 생성

The Core Principle

인터페이스를 만들지 마세요. 의미를 해석하는 런타임을 만들세요.

그렇게 하면 UI는 템플릿이 아니라 렌즈가 됩니다.

이러한 고통을 겪어보셨다면, 이 방향이 마음에 드실 겁니다. 저는 이를 neurons.me의 일부로 공개적으로 구축하고 있습니다.