Add Korean coding tutorials and search discovery links

.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"
 }

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)를 참고하세요.

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)

docs/guides/functions.md

@@ -0,0 +1,28 @@
+# 한글 프로그래밍 함수 만들기
+
+입력을 받아 결과를 돌려주는 코드를 재사용합니다. 한글스크립트의 정해진 문장형 문법으로 작성하고 JavaScript로 변환해 실행합니다.
+
+## 실행 예제
+
+```hgs
+인사(이름: 문자열)를 정의한다:
+    돌려주기 "안녕, " + 이름
+
+출력(인사("우리말"))
+```
+
+[브라우저에서 이 예제 열기](/playground/#code=7J247IKsKOydtOumhDog66y47J6Q7Je0KeulvCDsoJXsnZjtlZzri6Q6CiAgICDrj4zroKTso7zquLAgIuyViOuFlSwgIiArIOydtOumhAoK7Lac66ClKOyduOyCrCgi7Jqw66as66eQIikp) — 실행 버튼을 누르면 설치 없이 확인할 수 있습니다. 공유 코드는 자동 실행하지 않습니다.
+
+## 예상 출력
+
+```text
+안녕, 우리말
+```
+
+## 직접 바꿔 보기
+
+함수는 이름을 붙인 처리 과정입니다. 정의하는 것만으로 실행되지 않으며 `인사("우리말")`로 호출합니다. 인수를 바꾸어 반환되는 문자열의 차이를 확인하세요.
+
+## 다음 단계
+
+[온라인 입문](online.md) · [설치와 첫 실행](start.md) · [전체 문법](../../LANGUAGE.md) · [입문 예제 목록](/docs/#tutorials)

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)

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/)에서 확인하세요.

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)

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)

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+=`<section class="api-card" id="${escape(item.name)}"><p class="eyebrow">${escape(item.category)}</p><h2>${escape(item.name)}</h2><p>${escape(item.summary)}</p><pre class="signature"><code>${escape(signatures.get(item.name))}</code></pre><p class="api-note">${escape(item.notes)}</p><pre><code class="language-hgs">${escape(item.example)}</code></pre><a class="example-link" href="/playground/#code=${code}">실행 화면에서 열기 ↗</a></section>`;
     if(slug!=='standard-library') search.push({title:item.name+' · '+item.category,description:item.summary,url:route(slug)+'#'+encodeURIComponent(item.name)});
    }
-  } else content=`<h1>한글로 쓰고, 정확하게 실행하세요.</h1><p class="lead">한글스크립트 0.8의 공식 문서입니다. 문법을 배우고, 자료구조를 고르고, 기존 프로젝트와 연결하세요. 예제는 첫 줄부터 문장형으로 작성합니다.</p><div class="doc-grid">${docPages.filter(p=>p[0] && !p[0].startsWith('library/')).map(([s,t,d])=>`<a href="${route(s)}"><h2>${escape(t)}</h2><p>${escape(d)}</p><span>읽기 ↗</span></a>`).join('')}</div><h2>표준 기능 찾아보기</h2><p>전체 ${standardCatalog.length}개 함수의 입력 타입·반환값·복사와 변경 규칙을 설명합니다.</p><div class="category-links">${categories.map(([t,s])=>`<a href="/docs/library/${s}/">${t}</a>`).join('')}</div>`;
+  } else content=`<h1>한글로 쓰고, 정확하게 실행하세요.</h1><p class="lead">한글스크립트 0.8의 공식 문서입니다. 문법을 배우고, 자료구조를 고르고, 기존 프로젝트와 연결하세요. 예제는 첫 줄부터 문장형으로 작성합니다.</p><h2 id="tutorials">한글 코딩 입문과 실행 예제</h2><div class="doc-grid">${docPages.filter(p=>p[0] && !p[0].startsWith('library/')).map(([s,t,d])=>`<a href="${route(s)}"><h2>${escape(t)}</h2><p>${escape(d)}</p><span>읽기 ↗</span></a>`).join('')}</div><h2>표준 기능 찾아보기</h2><p>전체 ${standardCatalog.length}개 함수의 입력 타입·반환값·복사와 변경 규칙을 설명합니다.</p><div class="category-links">${categories.map(([t,s])=>`<a href="/docs/library/${s}/">${t}</a>`).join('')}</div>`;
   search.push({title,description,url:route(slug)});
   const nav=docPages.map(([s,t])=>`<a href="${route(s)}" ${s===slug?'aria-current="page"':''}>${s.startsWith('library/')?'↳ ':''}${escape(t)}</a>`).join('');
   const html=`<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${escape(title)} · 한글스크립트 HangulScript 문서</title><meta name="description" content="${escape(description)}"><link rel="canonical" href="${origin+route(slug)}"><meta property="og:title" content="${escape(title)} · 한글스크립트 HangulScript"><meta property="og:description" content="${escape(description)}"><meta property="og:url" content="${origin+route(slug)}"><meta property="og:type" content="article"><meta property="og:image" content="${origin}/og.png"><meta name="twitter:card" content="summary_large_image"><meta name="theme-color" content="#2563eb"><link rel="icon" href="/icon.svg"><link rel="stylesheet" href="/docs.css"><script type="module" src="/docs.js"></script><script type="application/ld+json">${JSON.stringify({'@context':'https://schema.org','@type':'TechArticle',headline:title,description,inLanguage:'ko',url:origin+route(slug),isPartOf:{'@type':'WebSite',name:'한글스크립트',url:origin}}).replaceAll('<','\\u003c')}</script></head><body><a class="skip" href="#content">본문으로 이동</a><header class="docs-header"><a class="brand" href="/">ㅎ <span>한글스크립트</span><small>0.8 문서</small></a><nav><a href="/playground/">실행하기</a><a href="https://github.com/uiwwsw/hangulscript">GitHub ↗</a></nav></header><div class="docs-layout"><aside><label for="docs-search">문서·함수 검색</label><input id="docs-search" type="search" placeholder="예: 정렬, 깊게복사" autocomplete="off"><div id="search-results" role="region" aria-label="검색 결과" aria-live="polite"></div><details class="docs-menu" open><summary>문서 목차</summary><nav aria-label="문서 목차">${nav}</nav></details></aside><main id="content"><div class="breadcrumb"><a href="/docs/">문서</a><span>/</span>${escape(title)}</div><article>${content}</article><footer class="doc-footer"><a href="https://github.com/uiwwsw/hangulscript/issues">문서 개선 제안 ↗</a><span>언어 0.8 · VS Code 0.3</span></footer></main></div></body></html>`;