diff --git a/.workspace/showcase.json b/.workspace/showcase.json
index 5b79428..7e0aaf3 100644
--- a/.workspace/showcase.json
+++ b/.workspace/showcase.json
@@ -7,7 +7,7 @@
"symbol": "ㅎ",
"color": "#2563eb",
"summary": "한글 문장으로 개발하고 JavaScript·Node·VS Code로 연결하는 프로그래밍 언어",
- "description": "한글스크립트(HangulScript)는 문장형 코드를 JavaScript와 .d.ts로 빌드하는 언어입니다. npm 0.8.0에서 목록·집합·사전·복사·정렬 등 61개 한글 함수를 제공하며, 24개 페이지의 공식 문서와 개발 로드맵을 공개했습니다. Node 직접 실행, React·Vue Vite 연동, 타입 검사와 VS Code 편집 기능을 지원합니다.",
+ "description": "한글스크립트(HangulScript)는 문장형 코드를 JavaScript와 .d.ts로 빌드하는 언어입니다. npm 0.8.0에서 목록·집합·사전·복사·정렬 등 61개 한글 함수를 제공하며, 29개 페이지의 공식 문서와 개발 로드맵을 공개했습니다. Node 직접 실행, React·Vue Vite 연동, 타입 검사와 VS Code 편집 기능을 지원합니다.",
"features": [
"시작 표기 없는 문장형 .hgs와 JavaScript·타입 선언 빌드",
"목록·집합·사전·정렬·복사·검증 등 61개 한글 함수",
@@ -16,7 +16,8 @@
"Node 직접 실행·다중 모듈 빌드·React/Vue Vite 연동",
"언어 전용 홈페이지·공식 문서·영문 소개·독립 플레이그라운드",
"VS Code 정식 확장: 포맷·진단·타입 정보·정의 이동·ㅎ 아이콘",
- "npm 자동 게시·VS Code 확장 릴리스 검증과 VSIX 패키징"
+ "npm 자동 게시·VS Code 확장 릴리스 검증과 VSIX 패키징",
+ "온라인 입문과 변수·조건문·반복문·함수 실행 예제"
],
"status": "live",
"links": [
@@ -34,8 +35,8 @@
}
],
"evidence": {
- "verifiedAt": "2026-10-22",
- "note": "2026-10-22: npm 0.8.0 latest public, published by GitHub Actions run 39729721166 using repository secret without interactive OTP. Public archive SHA1 ee08e7cbbdb900d212fd10e62d2a3717a301ed99 matches CI artifact; local archive contents identical. 45 tests and actual macOS/Linux VS Code host checks pass. 61 API examples typecheck; non-UI examples execute. 23 docs routes have unique metadata and internal links. Production healthchecks pass; Chrome search for deep copy opens its reference and shared demo returns 10 after copying nested data. React/Vue builds pass with public 0.8.0. VS Code light/dark HGS icons verified in actual host. GitHub v0.8.0 release includes 0.3.0 VSIX; Marketplace public gallery confirms 0.3.1 as latest with bilingual name and English HangulScript search visibility. Playground redesigned with white/blue documentation theme, default language example and fixed console for logs/errors; calculator result cards removed. Production deployment verified. English introduction at /en/ is public; reciprocal ko/en/x-default language alternates, self canonicals, JSON-LD, sitemap entry and bilingual title verified. Displayed and executed playground JavaScript now match: direct output becomes console.log and referenced helpers include transitive definitions; 48 tests pass, including standalone execution, aliases, local console shadowing and UI dependencies. Production healthchecks pass. Language homepage now prioritizes language syntax, types, installation, docs and ecosystem; editor moved to /playground/ with legacy shared-link redirects. Home does not boot compiler workers. All new route links verified; 48 tests pass. Independent npm and VS Code release workflows added. VS Code dry-run Actions 39735579323 passed 49 tests, actual editor integration and packaged VSIX with SHA-256 artifact. Marketplace publishing credentials remain unconfigured; actual automatic extension publication is not yet verified. Natural-language syntax RFC added as an unimplemented proposal, with exact-name-first Windows target selection and explicit rejection of unsupported negation. Existing type checking, module graph and source-diagnostic documentation corrected against source and tests. Official documentation now has 24 routes."
+ "verifiedAt": "2026-10-25",
+ "note": "공식 문서 29개 경로와 온라인 입문·변수·조건문·반복문·함수 예제 추가. 각 예제의 타입 검사와 예상 출력 검증. 대표 도메인 canonical과 기존 편집기 격리 실행 유지."
},
"en": "HangulScript"
}
diff --git a/README.md b/README.md
index 4e39ca5..85e025f 100644
--- a/README.md
+++ b/README.md
@@ -344,4 +344,6 @@ Node에서 직접 실행하려면 `node --import @uiwwsw/hangulscript/register s
언어 패키지는 `vX.Y.Z`, VS Code 확장은 `vscode-vX.Y.Z` GitHub Release로 각각 게시합니다. 테스트·빌드 후 검증한 아카이브를 사용하며, 확장은 게시 없는 시험 실행도 지원합니다. [릴리스 가이드](docs/publishing.md)를 확인하세요.
+온라인 입문: [설치 없이 한글로 코딩하기](https://hangulscript.vercel.app/docs/online/) · [반복문 예제](https://hangulscript.vercel.app/docs/loops/) · [함수 예제](https://hangulscript.vercel.app/docs/functions/)
+
AI 학습·미세조정 및 학습용 데이터 수집에 대한 권리자 의사는 [AI 이용 고지 / AI use notice](AI-TRAINING-NOTICE.md)를 참고하세요.
diff --git a/docs/guides/conditions.md b/docs/guides/conditions.md
new file mode 100644
index 0000000..35276ac
--- /dev/null
+++ b/docs/guides/conditions.md
@@ -0,0 +1,27 @@
+# 한글 코딩 조건문 예제
+
+조건이 참일 때만 코드를 실행하는 방법입니다. 한글스크립트의 정해진 문장형 문법으로 작성하고 JavaScript로 변환해 실행합니다.
+
+## 실행 예제
+
+```hgs
+점수는 85이다
+만약 점수 >= 80 이라면:
+ 출력("통과")
+```
+
+[브라우저에서 이 예제 열기](/playground/#code=7KCQ7IiY64qUIDg17J2064ukCuunjOyVvSDsoJDsiJggPj0gODAg7J20652866m0OgogICAg7Lac66ClKCLthrXqs7wiKQ==) — 실행 버튼을 누르면 설치 없이 확인할 수 있습니다. 공유 코드는 자동 실행하지 않습니다.
+
+## 예상 출력
+
+```text
+통과
+```
+
+## 직접 바꿔 보기
+
+`점수`를 70으로 바꾸면 아무것도 출력하지 않습니다. `>=`는 이상을 비교합니다. 조건문 본문은 들여쓰기로 구분합니다.
+
+## 다음 단계
+
+[온라인 입문](online.md) · [설치와 첫 실행](start.md) · [전체 문법](../../LANGUAGE.md) · [입문 예제 목록](/docs/#tutorials)
diff --git a/docs/guides/functions.md b/docs/guides/functions.md
new file mode 100644
index 0000000..6dee68d
--- /dev/null
+++ b/docs/guides/functions.md
@@ -0,0 +1,28 @@
+# 한글 프로그래밍 함수 만들기
+
+입력을 받아 결과를 돌려주는 코드를 재사용합니다. 한글스크립트의 정해진 문장형 문법으로 작성하고 JavaScript로 변환해 실행합니다.
+
+## 실행 예제
+
+```hgs
+인사(이름: 문자열)를 정의한다:
+ 돌려주기 "안녕, " + 이름
+
+출력(인사("우리말"))
+```
+
+[브라우저에서 이 예제 열기](/playground/#code=7J247IKsKOydtOumhDog66y47J6Q7Je0KeulvCDsoJXsnZjtlZzri6Q6CiAgICDrj4zroKTso7zquLAgIuyViOuFlSwgIiArIOydtOumhAoK7Lac66ClKOyduOyCrCgi7Jqw66as66eQIikp) — 실행 버튼을 누르면 설치 없이 확인할 수 있습니다. 공유 코드는 자동 실행하지 않습니다.
+
+## 예상 출력
+
+```text
+안녕, 우리말
+```
+
+## 직접 바꿔 보기
+
+함수는 이름을 붙인 처리 과정입니다. 정의하는 것만으로 실행되지 않으며 `인사("우리말")`로 호출합니다. 인수를 바꾸어 반환되는 문자열의 차이를 확인하세요.
+
+## 다음 단계
+
+[온라인 입문](online.md) · [설치와 첫 실행](start.md) · [전체 문법](../../LANGUAGE.md) · [입문 예제 목록](/docs/#tutorials)
diff --git a/docs/guides/loops.md b/docs/guides/loops.md
new file mode 100644
index 0000000..655081f
--- /dev/null
+++ b/docs/guides/loops.md
@@ -0,0 +1,31 @@
+# 한글 코딩 반복문 예제
+
+목록을 순회하고 조건과 반복을 함께 사용합니다. 한글스크립트의 정해진 문장형 문법으로 작성하고 JavaScript로 변환해 실행합니다.
+
+## 실행 예제
+
+```hgs
+점수들은 [75, 92, 88]이다
+각 점수를 점수들에서:
+ 만약 점수 >= 80 이라면:
+ 출력(점수)
+출력("평균:", 평균(점수들))
+```
+
+[브라우저에서 이 예제 열기](/playground/#code=7KCQ7IiY65Ok7J2AIFs3NSwgOTIsIDg4XeydtOuLpArqsIEg7KCQ7IiY66W8IOygkOyImOuTpOyXkOyEnDoKICAgIOunjOyVvSDsoJDsiJggPj0gODAg7J20652866m0OgogICAgICAgIOy2nOugpSjsoJDsiJgpCuy2nOugpSgi7Y+J6regOiIsIO2Pieq3oCjsoJDsiJjrk6QpKQ==) — 실행 버튼을 누르면 설치 없이 확인할 수 있습니다. 공유 코드는 자동 실행하지 않습니다.
+
+## 예상 출력
+
+```text
+92
+88
+평균: 85
+```
+
+## 직접 바꿔 보기
+
+`각 점수를 점수들에서:`는 목록의 값을 하나씩 꺼냅니다. 목록에 값을 추가하거나 기준 점수를 바꾸어 결과를 비교하세요. 평균은 조건을 통과한 값뿐 아니라 전체 목록을 기준으로 계산합니다.
+
+## 다음 단계
+
+[온라인 입문](online.md) · [설치와 첫 실행](start.md) · [전체 문법](../../LANGUAGE.md) · [입문 예제 목록](/docs/#tutorials)
diff --git a/docs/guides/online.md b/docs/guides/online.md
new file mode 100644
index 0000000..e69ced7
--- /dev/null
+++ b/docs/guides/online.md
@@ -0,0 +1,29 @@
+# 설치 없이 한글로 코딩하기
+
+한글스크립트(HangulScript)는 한글 문장과 들여쓰기로 작성한 코드를 JavaScript로 변환하는 프로그래밍 언어입니다. 한글 스크립트를 처음 찾았다면 온라인 플레이그라운드에서 시작할 수 있습니다. 일반적인 한국어 질문을 모두 이해하는 도구는 아니며 정해진 문법을 사용합니다.
+
+## 온라인 실행 순서
+
+1. [한글 코딩 플레이그라운드](/playground/)를 엽니다.
+2. 아래 코드를 입력합니다.
+3. 실행 버튼을 누릅니다.
+4. 콘솔에서 `안녕, 세상!`을 확인합니다. 변환된 JavaScript도 함께 볼 수 있습니다.
+
+```hgs
+출력("안녕, 세상!")
+```
+
+Node.js나 편집기를 설치하지 않고 브라우저에서 먼저 확인할 수 있습니다. 코드는 시간 제한이 있는 격리 환경에서 동작합니다. 파일·서버·외부 네트워크를 사용하는 Node 프로그램의 실행 환경과는 다릅니다.
+
+## 한글 프로그래밍 언어 기초
+
+- [변수와 자료형](variables.md): 이름을 붙여 숫자와 문자열을 저장합니다.
+- [조건문](conditions.md): 조건을 만족할 때만 실행합니다.
+- [반복문](loops.md): 목록의 값을 하나씩 처리합니다.
+- [함수](functions.md): 입력을 받아 결과를 돌려줍니다.
+
+예제를 실행한 뒤 값과 조건을 바꾸어 예상 출력과 비교하세요.
+
+## 프로젝트에서 사용하려면
+
+[설치와 첫 프로그램](start.md)에서 npm 설치·Node 실행·JavaScript 빌드를 이어갈 수 있습니다. [VS Code 설정](/docs/vscode/)과 [React·Vue 연결](/docs/frameworks/)도 제공합니다. 미구현 기능과 제약은 [지원 안내](/docs/support/)에서 확인하세요.
diff --git a/docs/guides/start.md b/docs/guides/start.md
index a65ca49..33f97da 100644
--- a/docs/guides/start.md
+++ b/docs/guides/start.md
@@ -19,4 +19,9 @@ npx ksc run main.hgs
배포에는 `npx ksc build main.hgs --out-dir dist`를 사용합니다. JavaScript와 타입 선언 `.d.ts`가 함께 생성됩니다. 생성된 `.js`를 Node에서 실행할 프로젝트에는 package.json의 `"type": "module"`을 설정하세요.
-설치 없이 확인하려면 [실행 화면](/#playground)을 사용하세요. 공유한 코드는 자동 실행하지 않습니다. 브라우저는 격리된 실행 환경에서 최대 2초 동안 동작합니다.
+설치 없이 확인하려면 [실행 화면](/playground/)을 사용하세요. 공유한 코드는 자동 실행하지 않습니다. 브라우저는 격리된 실행 환경에서 최대 2초 동안 동작합니다.
+
+
+## 한글 코딩 기초
+
+[온라인 입문](online.md) · [변수](variables.md) · [조건문](conditions.md) · [반복문](loops.md) · [함수](functions.md)
diff --git a/docs/guides/variables.md b/docs/guides/variables.md
new file mode 100644
index 0000000..d55fef1
--- /dev/null
+++ b/docs/guides/variables.md
@@ -0,0 +1,29 @@
+# 한글 코딩 변수와 자료형
+
+이름을 붙여 숫자와 문자열을 저장합니다. 한글스크립트의 정해진 문장형 문법으로 작성하고 JavaScript로 변환해 실행합니다.
+
+## 실행 예제
+
+```hgs
+이름: 문자열은 "한글스크립트"이다
+점수: 숫자는 80이다
+출력(이름)
+출력(점수 + 10)
+```
+
+[브라우저에서 이 예제 열기](/playground/#code=7J2066aEOiDrrLjsnpDsl7TsnYAgIu2VnOq4gOyKpO2BrOumve2KuCLsnbTri6QK7KCQ7IiYOiDsiKvsnpDripQgODDsnbTri6QK7Lac66ClKOydtOumhCkK7Lac66ClKOygkOyImCArIDEwKQ==) — 실행 버튼을 누르면 설치 없이 확인할 수 있습니다. 공유 코드는 자동 실행하지 않습니다.
+
+## 예상 출력
+
+```text
+한글스크립트
+90
+```
+
+## 직접 바꿔 보기
+
+문자열은 따옴표로 감싸고 숫자는 따옴표 없이 작성합니다. `점수`를 90으로 바꾸어 출력 결과를 비교하세요. 숫자 타입에 문자열을 넣으면 타입 오류가 발생합니다.
+
+## 다음 단계
+
+[온라인 입문](online.md) · [설치와 첫 실행](start.md) · [전체 문법](../../LANGUAGE.md) · [입문 예제 목록](/docs/#tutorials)
diff --git a/scripts/build-docs.js b/scripts/build-docs.js
index b17397e..8a00d80 100644
--- a/scripts/build-docs.js
+++ b/scripts/build-docs.js
@@ -7,6 +7,11 @@ import { standardCatalog } from './standard-catalog.js';
export const docPages = [
['','공식 문서','한글스크립트의 문법·표준 기능·도구를 한곳에서 확인하세요.',null],
['start','시작하기','설치부터 첫 .hgs 실행과 JavaScript 빌드까지.','docs/guides/start.md'],
+ ['online','설치 없이 한글로 코딩하기','브라우저에서 한글 코딩을 시작하고 변수·조건문·반복문·함수를 배웁니다.','docs/guides/online.md'],
+ ['variables','한글 코딩 변수와 자료형','이름을 붙여 숫자와 문자열을 저장합니다.','docs/guides/variables.md'],
+ ['conditions','한글 코딩 조건문 예제','조건이 참일 때만 코드를 실행하는 방법입니다.','docs/guides/conditions.md'],
+ ['loops','한글 코딩 반복문 예제','목록을 순회하고 조건과 반복을 함께 사용합니다.','docs/guides/loops.md'],
+ ['functions','한글 프로그래밍 함수 만들기','입력을 받아 결과를 돌려주는 코드를 재사용합니다.','docs/guides/functions.md'],
['language','문법 안내','변수·함수·흐름·클래스·타입을 문장형으로 표현합니다.','LANGUAGE.md'],
['collections','자료구조 고르기','목록·집합·사전·복사·정렬의 차이를 이해합니다.','docs/guides/collections.md'],
['modules','모듈과 Node','파일을 나누고 JavaScript와 타입 선언으로 배포합니다.','docs/guides/modules.md'],
@@ -55,7 +60,7 @@ export async function buildDocs(origin,output='site-dist') {
content+=` ${escape(item.category)} ${escape(item.summary)} ${escape(item.notes)}${escape(item.name)}
${escape(signatures.get(item.name))}
실행 화면에서 열기 ↗${escape(item.example)}
한글스크립트 0.8의 공식 문서입니다. 문법을 배우고, 자료구조를 고르고, 기존 프로젝트와 연결하세요. 예제는 첫 줄부터 문장형으로 작성합니다.
${escape(d)}
읽기 ↗`).join('')}전체 ${standardCatalog.length}개 함수의 입력 타입·반환값·복사와 변경 규칙을 설명합니다.
한글스크립트 0.8의 공식 문서입니다. 문법을 배우고, 자료구조를 고르고, 기존 프로젝트와 연결하세요. 예제는 첫 줄부터 문장형으로 작성합니다.
${escape(d)}
읽기 ↗`).join('')}전체 ${standardCatalog.length}개 함수의 입력 타입·반환값·복사와 변경 규칙을 설명합니다.
GET STARTED
프로젝트에 패키지를 설치하고 main.hgs 파일을 만듭니다. 빌드 없이 직접 실행하거나 배포용 JavaScript를 생성할 수 있습니다.
npm install --save-dev @uiwwsw/hangulscript출력("안녕, 세상!")npx ksc run main.hgsECOSYSTEM
LEARN BY RUNNING
한글스크립트(HangulScript)는 한글 문법으로 작성한 코드를 JavaScript로 변환합니다. 온라인에서 예제를 실행하고, 값을 바꾸며 결과를 확인하세요.
OUR DIRECTION
한글스크립트는 누구나 익숙한 우리말로 생각을 표현하고, 그 생각을 프로그램으로 만들어 갈 수 있는 언어를 꿈꿉니다. 낯선 기호와 딱딱한 표현 앞에서 망설이던 사람도 따뜻한 문장으로 개발의 즐거움을 느낄 수 있도록. 많은 사람에게 오래 사랑받는 언어로, 한 문장씩 함께 만들어 가겠습니다.
“1부터 10까지 다 합치면?”처럼 자연스럽게 말하며 개발하는 것이 최종 목표입니다. 이 표현은 아직 지원하지 않습니다. 현재는 정해진 문장 규칙을 해석하며, 0.x에서 문법과 API가 바뀔 수 있습니다.
현재 지원 범위와 로드맵 →OPEN SOURCE
문법 제안부터 오류 제보, 문서 개선까지 누구나 참여할 수 있습니다.