안녕하세요.
 

그누보드7 템플릿 시스템의 JSON 레이아웃 문법이 어렵고 난해하다는 피드백을 많이 받았습니다. 그래서 JSON 레이아웃 엔진은 지금 그대로 유지하면서, HTML 과 유사한 문법을 추가로 제공하는 방안을 검토하고 있습니다. 방향을 확정하기 전에 여러분의 의견을 구하고자 합니다.
 

같은 화면(환영 카드)을 두 문법으로 작성한 예시입니다.

현행 JSON (79줄):
{
  "meta": {
    "is_partial": true,
    "description": "홈 환영 카드 - 로그인 시 사용자명 표시"
  },
  "type": "basic",
  "name": "Div",
  "props": {
    "className": "col-span-2 bg-gradient-to-br from-blue-600 to-purple-700 rounded-xl px-6 py-10 text-white"
  },
  "children": [
    {
      "type": "basic",
      "name": "Div",
      "props": { "className": "flex items-center gap-2 mb-2" },
      "children": [
        { "type": "basic", "name": "Icon", "props": { "name": "sparkles", "className": "w-5 h-5" } },
        { "type": "basic", "name": "Span", "props": { "className": "text-sm font-medium opacity-90" }, "text": "Welcome" }
      ]
    },
    {
      "type": "basic",
      "name": "H2",
      "props": { "className": "text-xl font-bold mb-2" },
      "text": "{{_global.settings?.general?.site_name ?? 'Site'}}$t:home.welcome_suffix"
    },
    {
      "type": "basic",
      "name": "P",
      "props": { "className": "text-sm opacity-90 mb-4" },
      "text": "{{_global.settings?.general?.site_description ?? '$t:home.welcome_description'}}"
    },
    {
      "type": "basic",
      "name": "Div",
      "props": { "className": "flex gap-3" },
      "children": [
        {
          "id": "register_button",
          "type": "basic",
          "name": "Button",
          "if": "{{!_global.currentUser?.uuid}}",
          "props": {
            "className": "px-4 py-2 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 rounded-lg font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center gap-1 cursor-pointer"
          },
          "actions": [{ "type": "click", "handler": "navigate", "params": { "path": "/register" } }],
          "children": [
            { "type": "basic", "name": "Span", "text": "$t:home.get_started" },
            { "type": "basic", "name": "Icon", "props": { "name": "arrow-right", "className": "w-4 h-4" } }
          ]
        },
        {
          "id": "dashboard_button",
          "type": "basic",
          "name": "Button",
          "if": "{{_global.currentUser?.uuid}}",
          "props": {
            "className": "px-4 py-2 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 rounded-lg font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center gap-1 cursor-pointer"
          },
          "actions": [{ "type": "click", "handler": "navigate", "params": { "path": "/mypage" } }],
          "children": [
            { "type": "basic", "name": "Span", "text": "$t:home.go_to_mypage" },
            { "type": "basic", "name": "Icon", "props": { "name": "arrow-right", "className": "w-4 h-4" } }
          ]
        },
        {
          "type": "basic",
          "name": "Button",
          "props": {
            "className": "px-4 py-2 bg-white/20 text-white rounded-lg font-medium text-sm hover:bg-white/30 transition-colors cursor-pointer"
          },
          "actions": [{ "type": "click", "handler": "navigate", "params": { "path": "/page/about" } }],
          "text": "$t:home.learn_more"
        }
      ]
    }
  ]
}
 

동일 내용의 HTML 문법 (28줄, 그누보드7 전용):
<fragment description="홈 환영 카드 - 로그인 시 사용자명 표시">
  <div class="col-span-2 bg-gradient-to-br from-blue-600 to-purple-700 rounded-xl px-6 py-10 text-white">
    <div class="flex items-center gap-2 mb-2">
      <icon name="sparkles" class="w-5 h-5"/>
      <span class="text-sm font-medium opacity-90">Welcome</span>
    </div>
    <h2 class="text-xl font-bold mb-2">{{_global.settings?.general?.site_name ?? 'Site'}}$t:home.welcome_suffix</h2>
    <p class="text-sm opacity-90 mb-4">{{_global.settings?.general?.site_description ?? '$t:home.welcome_description'}}</p>

    <div class="flex gap-3">
      <button ref="register_button" if="!_global.currentUser?.uuid"
              class="px-4 py-2 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 rounded-lg font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center gap-1 cursor-pointer">
        <on click><navigate path="/register"/></on>
        <span>$t:home.get_started</span>
        <icon name="arrow-right" class="w-4 h-4"/>
      </button>
      <button ref="dashboard_button" if="_global.currentUser?.uuid"
              class="px-4 py-2 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 rounded-lg font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex items-center gap-1 cursor-pointer">
        <on click><navigate path="/mypage"/></on>
        <span>$t:home.go_to_mypage</span>
        <icon name="arrow-right" class="w-4 h-4"/>
      </button>
      <button class="px-4 py-2 bg-white/20 text-white rounded-lg font-medium text-sm hover:bg-white/30 transition-colors cursor-pointer">
        <on click><navigate path="/page/about"/></on>
        $t:home.learn_more
      </button>
    </div>
  </div>
</fragment>
 

적용 방식

• 템플릿/확장 개발자는 기존 JSON 문법과 HTML 문법 중 원하는 쪽을 선택해 개발할 수 있습니다. 기존 JSON 템플릿은 아무 변경 없이 그대로 동작합니다.
• 템플릿/확장 설치 시점에 서버가 HTML을 JSON 으로 자동 변환해 저장합니다. 렌더링 엔진은 지금과 동일하게 JSON 으로 동작하므로 성능/호환성에 영향이 없습니다.
• 레이아웃 코드 편집기에서는 HTML 모드 / JSON 모드를 자유롭게 오가며 편집할 수 있도록 지원할 예정입니다. (위지윅 편집기는 기존 JSON 생성 방식 유지)

이 방향이 실제 템플릿/확장 개발자 입장에서 도움이 될지, 댓글로 자유롭게 의견 부탁드립니다.

감사합니다.