Web5 & WebAI를 위한 차세대 마크업

JSON과 DSL에서 영감을 받아 기본적으로 안전하며 AI와 탈중앙화 웹에 이상적

웹이 지능적 존재로 시작하는 곳, 바로 여기입니다.

무엇인가 – 무엇이 아닌가?

JML (JSON-Inspired Markup Language)은 JSON 구조와 DSL에서 영감을 받은 혁신적인 마크업 언어로, Ascoos OS와 현대 웹을 위해 설계되었습니다.

목표는 전통적인 HTML에 대한 가볍고 안전하며 사용하기 쉬운 대안을 제공하는 것으로, AI 호환성, 탈중앙화(Web5), 최소한의 구문에 중점을 둡니다.

요약

이것은

  • JSON에서 영감을 받은 DSL 마크업
  • 근본부터 AST 기반
  • HTML보다 16–40% 작음
  • 제로 트러스트 & XSS 안전
  • WebAI / 에이전트에 이상적
  • 완전 UTF-8 네이티브
  • 의미론적 매크로 및 확장 기능 포함

이것은 아니다

  • 브라우저 네이티브 마크업
  • 템플릿 엔진 (Twig/Pug)
  • 단순 JSON 대체
  • 프로그래밍 언어

JML vs HTML – 2026 비교

특징JMLHTML5
크기 (Hello World 최소화)64 문자108 문자
meta + viewport 포함177 문자212 문자
평균 감소율16–40%
보일러플레이트없음DOCTYPE, head, body...
XSS 보안안전 (AST)개발자에 따라 다름
실행 가능 로직 (매크로)지원미지원
암호화지원 (WIC)미지원
브라우저 네이티브아님 (확장 필요)지원

AST – JML의 심장

JML은 단순한 마크업이 아닙니다. 네이티브 AST를 가진 DSL입니다 – 2030년의 마크업, 오늘 여기 있습니다.

의미론적 매크로, 변환, 디버깅, XSS 없는 보안을 가능하게 합니다.

추상 구문 트리 시각화

AST 구조 예시 – 검증, 매크로, 안전한 렌더링을 가능하게 합니다

JML 지금 바로 체험하기

JML (컴팩트 구문)
html {
  head {
    meta:charset('UTF-8')
    link:rel('stylesheet'),href('https://cdn.ascoos.com/bootlib/css/bootlib.min.css')
  }
  body:class('dark-theme') {
    h1{`JML에 오신 것을 환영합니다!`}
    p{`Ascoos OS를 위한 가벼운 마크업.`}
  }
}
동일한 HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.ascoos.com/bootlib/css/bootlib.min.css">
</head>
<body class="dark-theme">
    <h1>JML에 오신 것을 환영합니다!</h1>
    <p>Ascoos OS를 위한 가벼운 마크업.</p>
</body>
</html>

JML (왼쪽)은 정확히 동일한 HTML (오른쪽)을 생성합니다 – 문자 수 17% 감소.

JML Studio 및 생성된 보조 코드

DSL (도메인 특화 언어)
TAG html
  TAG head
    TAG meta CHARSET 'UTF-8'
    TAG link REL 'stylesheet' HREF 'https://cdn.ascoos.com/bootlib/css/bootlib.min.css'
  TAG body CLASS 'dark-theme'
    TAG h1
      TEXT 'JML에 오신 것을 환영합니다!'
    TAG p
      TEXT 'Ascoos OS를 위한 가벼운 마크업.'
AST (추상 구문 트리)
{
  "type": "group",
  "name": null,
  "value": null,
  "attributes": [],
  "children": [
    {
      "type": "tag",
      "name": "html",
      "value": null,
      "attributes": [],
      "children": [
        {
          "type": "tag",
          "name": "head",
          "value": null,
          "attributes": [],
          "children": [
            {
              "type": "tag",
              "name": "meta",
              "value": null,
              "attributes": [
                {
                  "type": "attribute",
                  "name": "charset",
                  "value": "UTF-8",
                  "attributes": [],
                  "children": []
                }
              ],
              "children": []
            },
            {
              "type": "tag",
              "name": "link",
              "value": null,
              "attributes": [
                {
                  "type": "attribute",
                  "name": "rel",
                  "value": "stylesheet",
                  "attributes": [],
                  "children": []
                },
                {
                  "type": "attribute",
                  "name": "href",
                  "value": "https://cdn.ascoos.com/bootlib/css/bootlib.min.css",
                  "attributes": [],
                  "children": []
                }
              ],
              "children": []
            }
          ]
        },
        {
          "type": "tag",
          "name": "body",
          "value": null,
          "attributes": [
            {
              "type": "attribute",
              "name": "class",
              "value": "dark-theme",
              "attributes": [],
              "children": []
            }
          ],
          "children": [
            {
              "type": "tag",
              "name": "h1",
              "value": null,
              "attributes": [],
              "children": [
                {
                  "type": "content",
                  "name": null,
                  "value": "JML에 오신 것을 환영합니다!",
                  "attributes": [],
                  "children": []
                }
              ]
            },
            {
              "type": "tag",
              "name": "p",
              "value": null,
              "attributes": [],
              "children": [
                {
                  "type": "content",
                  "name": null,
                  "value": "Ascoos OS를 위한 가벼운 마크업.",
                  "attributes": [],
                  "children": []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

생성된 두 형식, DSL (왼쪽)과 AST (오른쪽)는 WebAI 사용을 위해 구조화되어 있습니다.

서버 측 렌더링

<?php
/**
 * @ASCOOS-NAME        : Ascoos OS
 * @ASCOOS-VERSION     : 26.0.0
 * @ASCOOS-SUPPORT     : support@ascoos.com
 * @ASCOOS-BUGS        : https://issues.ascoos.com
 *
 * @CASE-STUDY          : jml_to_html_renderer.php
 * @fileNo              : ASCOOS-OS-CASESTUDY-SEC00268
 *
 * @desc Parses JML syntax into HTML using THTML, generates full page from nested structure.
 *
 * @since PHP 8.2.0
 */
declare(strict_types=1);
use ASCOOS\OS\Kernel\HTML\THTML;
use ASCOOS\OS\Kernel\Files\TFilesHandler;
$properties = [
    'output' => './generated_page.html'
];
try {
    $html = new THTML();
    $files = new TFilesHandler();
    // JML as string.
    $jmlString = <<<'JML'
html:lang('en') {
  head {
    meta:charset('UTF-8')
    meta:name('viewport'),content('width=device-width, initial-scale=1.0')
    title {`Advanced Sample Page`}
    style {
      `.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .header {
            text-align: center;
            color: #333;
            padding: 10px;
            border-bottom: 2px solid #000;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }`
    }
    script {
      `function validateForm() {
            let name = document.getElementById("name").value;
            let email = document.getElementById("email").value;
            if (name === "" || email === "") {
                alert("Please fill out all fields!");
                return false;
            }
            return true;
        }`
    }
  }
  body {
    div:class('container') {
      div:class('header') {
        h1 {`Welcome to Ascoos OS Demo`}
        p {`This is a complex demo with nested elements and interactivity.`}
      }
      div:class('content') {
        h2 {`User Registration`}
        form:onsubmit('return validateForm()'),method('POST'),action('/submit') {
          div:class('form-group') {
            label:for('name') {`Name:`}
            input:type('text'),id('name'),name('name'),required('')
          }
          div:class('form-group') {
            label:for('email') {`Email:`}
            input:type('email'),id('email'),name('email'),required('')
          }
          div:class('form-group') {
            label:for('country') {`Country:`}
            select:id('country'),name('country') {
              option:value('us') {`United States`}
              option:value('gr') {`Greece`}
              option:value('de') {`Germany`}
            }
          }
          button:type('submit') {`Submit`}
        }
        br
        div:class('footer') {
          p {`© 2025 Ascoos OS. All rights reserved.`}
          br
          a:href('https://ascoos.com') {`Visit our site`}
        }
      }
    }
  }
}
JML;
    $fullHtml = $html->fromJMLString($jmlString);
    $output = '' . $fullHtml;
    $files->writeToFileWithCheck($output, $properties['output']);
    echo "JML Parsed! Generated HTML:\n";
    echo $output . "\n";
    echo "Saved to: " . $properties['output'] . "\n";
    $html->Free();
    $files->Free();
} catch (Exception $e) {
    echo "Error: " . $e->getMessage() . "\n";
}
?>

PHP 렌더러를 사용하면 보일러플레이트 없이 동적 사이트용 HTML을 즉시 생성합니다.

Ascoos JML Renderer – 브라우저 확장

이 가벼운 확장 기능을 설치하여 모든 웹페이지를 JML 준비 상태로 변환: 의존성 없는 클라이언트 측 렌더링!

전체 JML 문서

<script type="text/jml">를 완전한 HTML 문서로 렌더링합니다.

인라인 JML 블록

기존 HTML 내부에 <jml> ... </jml>를 삽입합니다.

빈 태그 및 중첩 지원

br, hr, img, input + 중첩 블록, 속성, 다중 행 텍스트.

순수 JS – 의존성 없음

모든 페이지(로컬/원격)에서 작동, Manifest V3 호환.

확장 기능은 가볍습니다 (26 KB), 데이터를 수집하지 않으며 즉시 작동 – 설정 없이 JML을 실험하고 싶은 개발자에게 이상적입니다.

로드맵

2026: 조건 분기, 루프, 의미론적 매크로 v2
2027: Markdown/PDF 내보내기 + 보안 프로필
2028+: Ascoos AI를 활용한 자동 작성

자주 묻는 질문

JML은 기존 브라우저와 호환되나요?

네, 깨끗한 HTML5를 생성하는 렌더러를 통해 가능합니다. 브라우저 변경이 필요 없습니다.

JML은 스크립트와 스타일을 어떻게 처리하나요?

인라인 스크립트/스타일과 외부 링크를 지원하며, 보안을 위한 네이티브 이스케이프를 제공합니다.

React 같은 프레임워크에서 사용할 수 있나요?

네, JML → JSX 변환 또는 사용자 정의 컴포넌트로 직접 파싱하여 가능합니다.