무엇인가 – 무엇이 아닌가?
JML (JSON-Inspired Markup Language)은 JSON 구조와 DSL에서 영감을 받은 혁신적인 마크업 언어로, Ascoos OS와 현대 웹을 위해 설계되었습니다.
목표는 전통적인 HTML에 대한 가볍고 안전하며 사용하기 쉬운 대안을 제공하는 것으로, AI 호환성, 탈중앙화(Web5), 최소한의 구문에 중점을 둡니다.
요약
이것은
이것은 아니다
JML vs HTML – 2026 비교
| 특징 | JML | HTML5 |
|---|---|---|
| 크기 (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 지금 바로 체험하기
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를 위한 가벼운 마크업.`}
}
}
<!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 및 생성된 보조 코드
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를 위한 가벼운 마크업.'
{
"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을 실험하고 싶은 개발자에게 이상적입니다.
로드맵
자주 묻는 질문
JML은 기존 브라우저와 호환되나요?
네, 깨끗한 HTML5를 생성하는 렌더러를 통해 가능합니다. 브라우저 변경이 필요 없습니다.
JML은 스크립트와 스타일을 어떻게 처리하나요?
인라인 스크립트/스타일과 외부 링크를 지원하며, 보안을 위한 네이티브 이스케이프를 제공합니다.
React 같은 프레임워크에서 사용할 수 있나요?
네, JML → JSX 변환 또는 사용자 정의 컴포넌트로 직접 파싱하여 가능합니다.