HTML Anything 소개
HTML Anything은 사용자의 로컬 머신에 이미 설치되어 있는 AI 코딩 에이전트(Coding agent) CLI를 활용해 마크다운·CSV·엑셀·JSON·SQL과 같은 입력을 곧장 "배포 가능한 단일 파일 HTML"로 만들어 주는 에이전틱(Agentic) HTML 에디터입니다. nexu-io 팀이 운영하는 동일 계열 프로젝트인 Open Design에서 사용하던 에이전트 감지 계층, 디자인 시스템 모델, SKILL.md 프로토콜을 그대로 차용하여 HTML 출력에만 집중한 가벼운 변형판으로 출발했습니다. 별도의 API 키를 요구하지 않고, claude login이나 cursor login처럼 사용자가 터미널에서 이미 로그인해 둔 세션을 그대로 재사용한다는 점이 이 프로젝트의 핵심 정체성입니다.
배경에는 "마크다운은 작성자에게 좋은 형식이지만, 독자가 실제로 보는 것은 결국 HTML"이라는 관점이 깔려 있습니다. Anthropic의 Claude Code 팀이 내부 문서를 마크다운에서 HTML로 옮긴다고 공유한 적이 있는데, 그 글의 논지를 그대로 따라가면 레이아웃 자유도·스크린샷 친화성·플랫폼 간 재배포 용이성 모두 HTML 쪽이 훨씬 유리합니다. 다만 일반 사용자가 HTML/CSS·타입 스케일·그리드·반응형까지 직접 신경 쓰기는 어려운 일이고, 이를 해결하기 위해 HTML Anything은 ⌘+Enter 한 번이면 로컬 에이전트가 입력을 받아 "배포 가능한 한 장의 HTML"을 만들어 주고, 이후 한 번의 클릭으로 위챗(WeChat)·X(Twitter)·즈후(Zhihu)에 그대로 붙여 넣거나 .html/.png로 내려받을 수 있도록 설계되어 있습니다.
기능적으로는 8개의 코딩 에이전트 CLI(Claude Code, Cursor Agent, OpenAI Codex, Gemini CLI, GitHub Copilot CLI, OpenCode, Qwen Coder, Aider)를 자동 감지하고, 9개의 산출 표면(매거진 기사, 키노트 덱, 이력서, 포스터, 샤오훙슈 카드, 트윗 카드, 웹 프로토타입, 데이터 리포트, Hyperframes 비디오 프레임) 위에 75개의 스킬 템플릿이 펼쳐져 있는 구조입니다. Apache-2.0 라이선스로 공개되어 있으며, 백엔드는 Next.js 16 App Router + Turbopack과 React 19를 기반으로 합니다.
HTML Anything의 핵심 설계 원칙
HTML Anything의 README는 프로젝트를 떠받치는 여섯 가지 "load-bearing idea"를 명시하고 있으며, 각 원칙이 실제 구현과 어떻게 맞물려 있는지가 잘 정리되어 있습니다.
- 에이전트는 직접 만들지 않고, 사용자의 것을 재사용한다: 부팅 시
/api/agents가PATH(GUI에서 띄운 Node가 보통 놓치는~/.local/bin,~/.bun/bin,/opt/homebrew/bin,~/.npm-global/bin포함)를 스캔해 설치된 CLI를 모두 노출합니다. 각 CLI는src/lib/agents/argv.ts의 어댑터로 stdin·stdout 프로토콜과 스트림 파서가 연결됩니다. - 스킬은 플러그인이 아닌 폴더: Claude Code의
SKILL.md컨벤션을 그대로 따라SKILL.md+assets/+references/+example.html이 한 폴더에 모입니다.src/lib/templates/skills/에 폴더를 추가하고pnpm dev를 다시 시작하면 픽커에 새 스킬이 노출됩니다. - 하드 컨스트레인트로 모델 자유주행을 막는다: 모든 템플릿이 CJK 우선 폰트 스택, 8px 베이스라인 그리드, 둥근 모서리·부드러운 그림자·순흑/순백 금지, 4.5 이상의 색 대비, 사용자의 실제 데이터 사용 의무 등을 미리 못 박아 둡니다.
- 스트리밍 렌더링으로 "AI가 그리는 모습"을 본다:
POST /api/convert가 SSE(Server-Sent Events)로 동작하여 에이전트 stdout의 JSON 라인을 텍스트 델타로 파싱하고, 이를 다시 SSE 이벤트로 클라이언트에 흘려보내 iframesrcdoc에 즉시 반영합니다. - 원클릭 익스포트로 2차 손질을 없앤다:
juice로 CSS를 인라인화하여 위챗 편집기에 그대로 붙여 넣을 수 있고,modern-screenshot은 iframe을 2배 해상도 PNG로 변환해ClipboardItem으로 X·웨이보·샤오훙슈에 곧장 떨어뜨립니다. - 샌드박스 iframe으로 안전한 격리: 사용자가 만든 HTML은 항상
<iframe sandbox="allow-scripts allow-same-origin">안에서 렌더링되어, Tailwind CDN·Google Fonts·인라인 스크립트는 동작하되 쿠키와 localStorage는 호스트로부터 격리됩니다.
HTML Anything의 아키텍처와 9개의 산출 표면
전체 흐름은 브라우저에서 ⌘+Enter를 누르면 서버 라우트가 사용자의 로컬 코딩 에이전트 CLI를 자식 프로세스로 띄우고, 표준입력으로 프롬프트를 흘려보낸 뒤 stdout에서 JSON 라인을 받아 SSE로 다시 브라우저에 흘려보내는 단일 흐름입니다. README의 아키텍처 다이어그램을 보면 어디서 무엇이 일어나는지가 한눈에 들어옵니다.
┌─────────────────── Browser (Next.js 16) ────────────────────┐
│ Editor · top-bar agent picker · template picker · iframe │
└────────────┬─────────────────────────────┬──────────────────┘
│ ⌘+Enter │
▼ ▼
┌─────────────────────┐ ┌──────────────────────┐
│ GET /api/agents │ │ POST /api/convert │
│ scan PATH, list │ │ SSE — spawn CLI │
│ installed CLIs │ │ pipe stdin / stdout │
└─────────────────────┘ └──────────┬───────────┘
│ spawn + stdin pipe
▼
┌────────────────────────────────────┐
│ Local coding-agent CLI │
│ claude / codex / cursor-agent / │
│ gemini / copilot / opencode / │
│ qwen / aider │
└────────────────────────────────────┘
│
▼
stdout JSON-line ──► SSE event
│
▼
iframe srcdoc append (live)
│
⌘+C copy → ClipboardItem
⌘+S download → .html / .png
스킬은 두 개의 축, 즉 모드(mode)와 시나리오(scenario)로 정리됩니다. 모드는 prototype, deck, frame, social, office, doc, mockup, vfx 등이고, 시나리오는 design, marketing, engineering, product, finance, hr, sale, personal으로 구성되어 사용자가 픽커에서 빠르게 후보를 좁힐 수 있게 합니다. 산출 표면은 다음 9가지로 정리되며, 각 표면마다 여러 스킬이 묶여 있어 같은 입력으로도 다양한 디자인을 비교 생성할 수 있도록 되어 있습니다.
- 매거진 기사 (Magazine article): 잡지 스타일의 장문 콘텐츠
- 키노트 덱 (Keynote deck): Swiss International, Guizang Editorial, Open Slide Canvas 등 20종 스킬
- 이력서 (Résumé): A4 210×297mm의 미니멀 이력서
- 포스터 (Poster): 마케팅·잡지 스타일 포스터
- 샤오훙슈 카드 (Xiaohongshu card): 이미지+텍스트 정사각 카드
- 트윗 카드 (Tweet card): 1600×900 인용 카드
- 웹 프로토타입 (Web prototype): SaaS 랜딩, 대시보드, 데이터 리포트
- 데이터 리포트 (Data report): CSV/엑셀 입력을 시각화된 리포트로 변환
- Hyperframes 비디오 프레임 (Video frame): Remotion 호환 1920×1080 프레임 스크립트
HTML Anything의 설치 및 사용법
설치는 pnpm 기반의 일반적인 Next.js 흐름을 따릅니다. 저장소를 클론한 뒤 의존성을 설치하고 개발 서버를 띄우면 됩니다. 별도의 API 키는 필요하지 않으며, 이미 터미널에서 로그인해 둔 코딩 에이전트 CLI를 자동으로 감지해 상단 바에 노출합니다.
git clone https://github.com/nexu-io/html-anything
cd html-anything
pnpm install
pnpm dev
# → http://localhost:3000
지원하는 에이전트와 호출 방식은 다음과 같이 정리되어 있으며, 각 어댑터가 stream-json 또는 그에 준하는 JSON 라인 프로토콜을 사용하므로 토큰 델타가 실시간으로 SSE 이벤트로 흘러갑니다.
| Agent | Detection binary | Invocation |
|---|---|---|
| Claude Code | claude |
claude -p --output-format stream-json |
| OpenAI Codex | codex |
codex exec --json --sandbox workspace-write |
| Cursor Agent | cursor-agent |
cursor-agent --print --output-format stream-json --force --trust |
| Gemini CLI | gemini |
gemini --output-format stream-json --yolo |
| GitHub Copilot CLI | copilot |
copilot --allow-all-tools --output-format json |
| OpenCode | opencode-cli / opencode |
opencode run --format json --dangerously-skip-permissions - |
| Qwen Coder | qwen |
qwen --yolo - |
| Aider | aider |
aider --no-pretty --no-stream --yes-always --message-file - |
산출물을 외부로 옮길 때는 플랫폼별 익스포트 옵션을 그대로 사용하면 됩니다. 위챗 MP는 juice로 CSS를 인라인화한 결과가 그대로 붙여 넣어지고, 즈후의 경우 <mjx-container>가 data-eeimg LaTeX 이미지 자리표시자로 교체되어 업로드 후 자동으로 수식이 렌더링됩니다. X·웨이보·샤오훙슈는 modern-screenshot이 iframe을 2배 해상도 PNG로 변환해 ClipboardItem으로 작성창에 떨어뜨려 줍니다. 추가 가공이 필요한 경우 단일 파일 .html이나 고해상도 .png 다운로드도 함께 제공됩니다.
라이선스
HTML Anything은 Apache-2.0 라이선스로 공개되어 있어 개인·상업적 목적으로 자유롭게 사용·수정·재배포할 수 있으며, 파생 저작물에서 NOTICE 파일과 라이선스 고지를 함께 유지하는 정도의 의무만 따라옵니다. 스킬 디렉토리 일부는 별도의 외부 프로젝트(예: op7418/guizang-ppt-skill, tw93/kami)의 디자인을 라이선스와 저자 정보를 보존한 채 가져온 것이므로, 해당 스킬을 자체 제품에 옮길 경우에는 각 원작 저장소의 라이선스도 함께 확인해 두는 편이 안전합니다.
HTML Anything 프로젝트 GitHub 저장소
HTML Anything이 차용한 Open Design 프로젝트
Claude Code의 SKILL.md 컨벤션 문서
더 읽어보기
-
PPTX Presentation Generator: 하나의 프롬프트를 바탕으로 PPTX 형식의 파일을 자동으로 생성해주는 도구
-
AionUi: Claude Code, Codex, Gemini CLI 등, CLI AI 에이전트를 위한 AI Cowork 플랫폼 (feat. iOfficeAI)
-
Markdown for Agents: Cloudflare가 공개한, AI 에이전트를 위한 새로운 콘텐츠 요청/응답 방식
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 