Show HN: 단일 HTML 파일(420 KB)로 구현된 Unix 환경

Source: Hacker News

개요

HTML 파일 하나에 담긴 Unix 환경.

• 셸, 파일시스템, git, npm, vi, 그리고 200개 이상의 명령어.
• 압축 시 약 420 KB. 서버가 필요 없습니다. 지금 바로 브라우저에서 실행됩니다.

shiro.computer

user@shiro:~$ npm init -y
Wrote to /home/user/package.json

user@shiro:~$ npm install left-pad
added 1 package

user@shiro:~$ echo 'const lp = require("left-pad"); console.log(lp("hello HN", 30, "."))' > app.js

user@shiro:~$ node app.js
......................hello HN

user@shiro:~$ git init && git add . && git commit -m "shipped from a browser tab"
Initialized empty Git repository in /home/user
[main (root-commit) a1b2c3d] shipped from a browser tab
 3 files changed, 17 insertions(+)

user@shiro:~$ ▮

정적 HTML 파일이 Unix 셸로 부팅됩니다. 파일시스템은 IndexedDB이며, 명령어는 JavaScript로 구현됩니다. 페이지를 새로 고쳐도 파일이 유지됩니다. 모든 것이 클라이언트‑사이드에서 실행되므로—서버 없이도 오프라인에서 동작합니다.

앱 빌드 및 상호작용

카운터를 작성하고, 서비스를 제공하고, 셸에서 버튼을 클릭하고, 그래프 도구로 업그레이드하고, git으로 커밋합니다.

Interact → counter → serve → page commands → upgrade → commit

앱을 서비스하고 page를 사용해 DOM 요소를 클릭·읽은 뒤 커밋합니다.

실제 git, 서버 없음

init, add, commit, diff — 모두 isomorphic‑git을 통해 클라이언트‑사이드에서 실행됩니다.

GIF로 스냅샷 만들기

전체 파일시스템을 GIF로 캡처합니다. 다른 인스턴스로 드래그하면 복원됩니다.

Seed GIF → snapshot → drag → restore

source → target (예시)

작동 원리

파일시스템

POSIX‑유사 API를 제공하는 IndexedDB: stat, readdir, readFile, writeFile, mkdir, symlink, chmod, glob. 파일은 새로 고침 후에도 지속됩니다.

셸

파이프, 리다이렉트, $variables, &&, ||, 인용, 히어도크 등을 지원—실제 스크립팅에 충분한 POSIX 기능을 제공합니다.

패키지

레지스트리에서 가져온 실제 npm tarball. node가 JavaScript 파일을 실행합니다. esbuild가 TypeScript를 번들링합니다. require()가 node_modules를 해석합니다.

하나의 파일

단일 독립형 HTML. 모든 JS/CSS가 빌드 과정에서 인라인됩니다. 압축 시 약 420 KB. 어디에든 배포 가능—GitHub Pages, S3, 혹은 로컬에서 열기만 하면 됩니다.