# 유용한 HTML 도구를 만들기 위한 패턴들
> Clean Markdown view of GeekNews topic #25078. Use the original source for factual precision when an external source URL is present.
## Metadata
- GeekNews HTML: [https://news.hada.io/topic?id=25078](https://news.hada.io/topic?id=25078)
- GeekNews Markdown: [https://news.hada.io/topic/25078.md](https://news.hada.io/topic/25078.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-15T10:16:01+09:00
- Updated: 2025-12-15T10:16:01+09:00
- Original source: [simonwillison.net](https://simonwillison.net/2025/Dec/10/html-tools/)
- Points: 38
- Comments: 3
## Summary
LLM 을 이용한 실용적인 가이드를 많이 쓰는 Simon Willison의 **HTML tools**는 HTML·JavaScript·CSS를 한 파일에 담아 즉시 실행 가능한 소형 웹 도구를 만드는 접근법입니다. 빌드 과정 없이 CDN만으로 동작해 복사·붙여넣기 중심의 개발 흐름이 자연스럽게 형성되며, URL·localStorage·파일 입출력 등 브라우저 기능만으로도 충분히 확장 가능합니다. 이렇게 축적된 150여 개의 도구는 서로 재조합되어 새로운 도구의 기반이 되고, LLM이 생성한 코드가 실제로 유지·발전하는 실험적 생태계를 보여줍니다. 전체가 한 Repo안에 공개되어 있으니 내려받아서 자신의 도구를 만드는 기반으로 써도 좋을 것 같습니다.
## Topic Body
- HTML·JavaScript·CSS를 한 파일로 묶어 실행하는 **HTML tools** 제작 경험을 바탕으로 반복되는 설계 패턴 정리
- 2년간 150개 이상 제작된 소형 도구들이 실제로 어떻게 만들어지고 유지되는지 구체 사례 중심으로 설명
- 빌드 단계 없는 구조와 CDN 활용으로 **복사·붙여넣기 기반 개발** 흐름이 자연스럽게 형성됨
- URL·localStorage·파일 열기·다운로드·Pyodide·WebAssembly까지 브라우저 기능만으로 가능한 범위 확장
- 프롬프트와 결과 기록, 기존 도구 재조합을 통해 **도구 컬렉션** 자체가 개발 기반이 되는 흐름 강화
---
### HTML tools 개념과 사례
- HTML 한 파일에 JavaScript와 CSS를 함께 넣어 즉시 실행 가능한 소형 웹 도구들을 **[HTML tools](https://tools.simonwillison.net/)** 라고 부름
- 지난 2년간 150개 이상 제작되었고, 대부분 LLM이 작성한 코드로 구성
- 대표 사례
- [svg-render](https://tools.simonwillison.net/svg-render): SVG 코드를 PNG·JPEG 이미지로 변환
- [pypi-changelog](https://tools.simonwillison.net/pypi-changelog): PyPI 패키지 릴리스 간 변경 diff 생성
- [bluesky-thread](https://tools.simonwillison.net/bluesky-thread): Bluesky 토론 스레드를 중첩 구조로 표시
- 전체 도구 모음은 [tools.simonwillison.net](https://tools.simonwillison.net/)에서 확인 가능하며, [월별 보기](https://tools.simonwillison.net/by-month)로 제작 흐름을 살펴볼 수 있음
- 대부분 도구의 [GitHub 소스와 프롬프트 또는 트랜스크립트 기록이 함께 공개](https://github.com/simonw/tools)됨
### HTML tool의 기본 구조
- JavaScript와 CSS를 인라인으로 포함한 **단일 HTML 파일** 구성
- JSX 빌드가 필요한 React를 사용하지 않아 **복사·재배포가 단순**해짐
- 필요한 라이브러리는 [CDNjs](https://cdnjs.com/)나 [jsDelivr](https://www.jsdelivr.com/) 같은 CDN에서 직접 로드하고 의존성은 최소화
- 코드 규모를 수백 줄 수준으로 유지해 유지보수 부담을 낮추고, LLM이 빠르게 읽고 수정 가능한 상태 유지
### Canvas·Artifacts 기반 프로토타이핑
- ChatGPT Canvas, Claude Artifacts, Gemini Canvas를 이용해 HTML 도구를 즉시 실행하며 초기 형태를 잡는 방식
- “No React” 조건을 넣어 빌드 단계 없이 바로 동작하는 코드 생성
- JSON을 붙여넣으면 YAML로 변환하는 예제
- ChatGPT Canvas 결과: [JSON to YAML (ChatGPT)](https://chatgpt.com/canvas/shared/6938e8ece53c8191a2f9d7dfcd090d11), [전체 대화](https://chatgpt.com/share/6938e926-ee14-8006-9678-383b3a8dac78)
- Claude Artifact 결과: [JSON to YAML (Claude)](https://claude.ai/public/artifacts/61fdecb8-6e3b-4162-a5ab-6720dfe5ed19), [전체 대화](https://claude.ai/share/421bacb9-54b4-45b4-b41c-a436bc0ebd53)
- Gemini Canvas 결과: [JSON to YAML (Gemini)](https://gemini.google.com/share/03c1ac87aa40), [전체 대화](https://gemini.google.com/share/1e27a1d8cdca)
### 더 복잡해지면 코딩 에이전트로 전환
- Claude Code나 Codex CLI를 사용하면 Playwright 등으로 브라우저 테스트를 포함한 반복 작업 자동화 가능
- 더 복잡한 도구(예: Bluesky 스레드 뷰어)에서는 이러한 에이전트로 “업그레이드”하는 방식 사용
- simonw/tools 레포지토리에 직접 PR을 생성해 도구를 추가·업데이트
- 레포지토리: [github.com/simonw/tools](https://github.com/simonw/tools)
- 실제 PR 기록: [닫힌 PR 목록](https://github.com/simonw/tools/pulls?q=is%3Apr+is%3Aclosed)
- 웹 기반 에이전트를 활용한 작업 과정은 [Claude Code for web 사용 영상](https://simonwillison.net/2025/Oct/23/claude-code-for-web-video/)에서 확인 가능
### CDN 기반 의존성 관리
- 추가 라이브러리를 쓸 때는 CDN에서 로드함
- LLM의 Artifacts/Canvas가 허용하는 CDN allow-list가 있어 “PDF.js 사용” 같은 지시로 URL 구성이 됨
- 필요하면 cdnjs·jsDelivr에서 URL을 찾아 채팅에 붙여넣는 방식 사용
- npm 설치나 빌드 과정 없이 HTML 파일 하나로 동작
- npm+빌드 스텝은 개별 도구를 빠르게 해킹하고 셀프호스팅하는 생산성을 떨어뜨림
- CDN URL에 버전이 포함되어 장기간 재현 가능성 유지
### 외부 정적 호스팅
- LLM 플랫폼 내부 호스팅은 샌드박스 제약이 많아 외부 URL 데이터/이미지 로드나 외부 링크 기능이 막히는 경우가 있음
- 사용자 경험 측면에서 경고 메시지·추가 로딩·플랫폼 홍보가 끼는 문제가 생길 수 있음
- “No React + CDN” 조합이 빌드 없이 어디든 올리기 쉬움
- GitHub Pages에 HTML 파일을 올리면 바로 고정 URL로 접근 가능
- GitHub Pages 안내: [docs.github.com/pages](https://docs.github.com/en/pages)
- 대부분 도구가 simonw/tools 레포에서 관리되며 tools.simonwillison.net 으로 제공됨
### 복사·붙여넣기 중심 입출력
- 많은 도구가 붙여넣은 입력을 변환하고 다시 **클립보드로 복사**하게 만드는 형태를 핵심 메커니즘으로 사용
- 모바일에서 복사·붙여넣기가 불편해 “Copy to clipboard” 버튼을 자주 추가함
- OS 클립보드가 여러 포맷을 함께 담을 수 있고, JavaScript paste 이벤트에서도 이러한 “리치” 데이터에 접근 가능
- 대표 도구
- [hacker-news-thread-export](https://tools.simonwillison.net/hacker-news-thread-export): HN 스레드를 LLM 입력용 텍스트로 변환
- [paste-rich-text](https://tools.simonwillison.net/paste-rich-text): 붙여넣은 리치 텍스트의 HTML 추출
- [alt-text-extractor](https://tools.simonwillison.net/alt-text-extractor): 이미지 붙여넣기 후 alt 텍스트 추출
### 디버깅 도구
- 브라우저에서 다뤄지는 실제 데이터 구조를 확인하기 위한 전용 도구 제작
- [clipboard-viewer](https://tools.simonwillison.net/clipboard-viewer): 텍스트·리치 텍스트·이미지·파일 등 클립보드 데이터 전체 표시
- 추가 도구
- [keyboard-debug](https://tools.simonwillison.net/keyboard-debug)
- [cors-fetch](https://tools.simonwillison.net/cors-fetch)
- [exif](https://tools.simonwillison.net/exif)
### URL에 상태 저장
- 서버 DB 없이도 URL에 많은 상태를 저장할 수 있음
- 북마크·공유를 염두에 둔 도구에서 이 패턴을 선호
- [icon-editor](https://tools.simonwillison.net/icon-editor): 24×24 아이콘 편집 상태를 URL에 그대로 보존
### localStorage 활용
- localStorage는 사용자 디바이스에 데이터를 지속 저장하며 서버에 노출하지 않는 브라우저 API
- URL에 담기 어려운 큰 상태나 API 키 같은 비밀값 저장에 사용하며, 정적 호스트의 서버 로그 노출 위험을 피하기 위함
- [word-counter](https://tools.simonwillison.net/word-counter): 작성 중 텍스트를 자동 저장
- [render-markdown](https://tools.simonwillison.net/render-markdown): 마크다운 작성 중 내용 유지
- [haiku](https://tools.simonwillison.net/haiku): API 키를 localStorage에 저장해 웹캠 이미지를 바탕으로 하이쿠 생성
### CORS 가능한 API 활용
- CORS(Cross-origin resource sharing)는 다른 도메인의 API를 브라우저 JavaScript가 호출할 수 있는지 제어하는 메커니즘
- CORS 헤더가 열린 API는 HTML tools에 유리한 자원이며, 시간이 지나며 목록을 모을 가치가 있음
- iNaturalist, PyPI, GitHub(공개 레포 콘텐츠를 raw.githubusercontent.com로 익명 접근 가능), Bluesky, Mastodon 등 사용
- 도구 사례
- [species-observation-map](https://tools.simonwillison.net/species-observation-map)
- [zip-wheel-explorer](https://tools.simonwillison.net/zip-wheel-explorer)
- [github-issue-to-markdown](https://tools.simonwillison.net/github-issue-to-markdown)
- [terminal-to-html](https://tools.simonwillison.net/terminal-to-html)
- [bluesky-quote-finder](https://tools.simonwillison.net/bluesky-quote-finder)
### LLM API 직접 호출
- OpenAI·Anthropic·Gemini JSON API를 CORS로 브라우저에서 직접 호출
- API 키를 HTML에 박아두면 탈취와 과금 위험이 있어, localStorage에 저장하는 “secrets 패턴”을 사용
- 사용자 경험 측면에서 API 키 발급·붙여넣기 과정이 마찰이 크지만 동작은 함
- 예제 도구
- [openai-audio-output](https://tools.simonwillison.net/openai-audio-output)
- [gemini-bbox](http://tools.simonwillison.net/gemini-bbox)
### 파일 열기 두려워하지 않기
- `<input type="file">`로 파일을 서버에 업로드하지 않아도 브라우저에서 직접 읽어 활용 가능
- [ocr](https://tools.simonwillison.net/ocr): PDF.js와 Tesseract.js를 이용해 PDF를 페이지 이미지로 바꾸고 브라우저에서 OCR 수행
- [social-media-cropper](https://tools.simonwillison.net/social-media-cropper): 이미지 열기/붙여넣기 후 소셜 미디어용 비율(예: Twitter/LinkedIn 2:1, Substack 1.4:1 등)로 크롭 지원
- [ffmpeg-crop](https://tools.simonwillison.net/ffmpeg-crop): 비디오 크롭 ffmpeg 명령 생성
### 다운로드 파일 제공하기
- 서버 없이도 브라우저에서 파일을 생성해 다운로드로 제공할 수 있음
- JavaScript 생태계에 다양한 포맷 생성 라이브러리가 존재
- 예제 도구
- [svg-render](https://tools.simonwillison.net/svg-render): SVG를 렌더링해 PNG/JPEG 다운로드 제공
- [social-media-cropper](https://tools.simonwillison.net/social-media-cropper): 크롭된 이미지 다운로드 제공
- [open-sauce-2025](https://tools.simonwillison.net/open-sauce-2025): 일정표를 만들고, 캘린더에 추가할 수 있는 ICS 파일 다운로드를 제공
### Pyodide와 WebAssembly
- [Pyodide](https://pyodide.org/)로 Python을 WebAssembly로 컴파일해 브라우저에서 실행하는 배포판
- CDN에서 깔끔하게 로드 가능해 HTML tools에 쓰지 않을 이유가 없
- micropip을 통해 CORS로 PyPI의 순수 Python 패키지를 추가 로드할 수 있음
- 도구 사례
- [pyodide-bar-chart](https://tools.simonwillison.net/pyodide-bar-chart)
- [numpy-pyodide-lab](https://tools.simonwillison.net/numpy-pyodide-lab)
- [apsw-query](https://tools.simonwillison.net/apsw-query)
### WebAssembly로 더 넓히기
- Pyodide가 가능한 기반은 WebAssembly 덕분이며, 다른 언어로 작성된 소프트웨어도 브라우저에서 로드 가능해짐
- [Squoosh.app](https://squoosh.app/) 은 여러 이미지 압축 라이브러리를 브라우저에서 제공
- 도구 사례
- [ocr](https://tools.simonwillison.net/ocr) : [Tesseract.js](https://tesseract.projectnaptha.com/) 는 이미 존재하는 Tesseract OCR 엔진의 웹 어셈블리 포트를 활용
- [sloccount](https://tools.simonwillison.net/sloccount)**: David Wheeler의 Perl 과 C로 된 [SLOCCount](https://dwheeler.com/sloccount/) 유틸리티를 브라우저로 포팅. [상세 소개](https://simonwillison.net/2025/Oct/22/sloccount-in-webassembly/).
- [micropython](https://tools.simonwillison.net/micropython)** : [@micropython/micropython-webassembly-pyscript](https://www.npmjs.com/package/@micropython/micropython-webassembly-pyscript)
### 이전 도구 재조합
- 100개 이상의 단일 공개 컬렉션이 있으면 LLM이 도구들을 쉽게 **재조합**할 수 있다는 점이 **또 다른 장점**
- 때로는 이전 도구를 컨텍스트에 복사해 넣고, 코딩 에이전트에서는 이름으로 참조하거나 예시 검색을 시키는 방식 사용
- 동작하는 도구의 **소스코드가 편집 라이브러리 사용 패턴까지 포함한 문서 역할**을 하며, LLM의 성공 확률을 높임
- pypi-changelog 제작 과정 전체 기록: [프롬프트 트랜스크립트](http://gistpreview.github.io/?9b48fd3f8b99a204ba2180af785c89d2)
- “pypi package explorer” 도구를 보라고 지시한 뒤 zip-wheel-explorer 소스를 읽고, PyPI API로 wheel을 가져와 버전 간 diff를 렌더링하고 Copy 버튼을 제공하는 새 도구를 만들도록 프롬프트를 구성
- [브라우저에서 OCR 실행하기](https://simonwillison.net/2024/Mar/30/ocr-pdfs-images/) 도 참고
### 프롬프트·트랜스크립트 기록
- LLM 사용 기록을 저장·공개하는 습관을 통해 스스로의 활용 능력을 키울수 있음
- 채팅형 LLM 플랫폼에서 만든 도구는 share 기능을 기록 수단으로 사용
- Claude Code·Codex CLI 같은 에이전트 사용 시 터미널 전체 트랜스크립트를 복사해 [terminal-to-html](https://tools.simonwillison.net/terminal-to-html)로 로그를 HTML로 변환하고 Gist로 공유
- 완성 도구를 레포에 저장할 때 커밋 메시지에 트랜스크립트 링크를 포함 - 기록 모음: [tools.simonwillison.net/colophon](https://tools.simonwillison.net/colophon)
### 마무리
- 지난 1년 반 동안 이 방식으로 LLM과 HTML 도구를 탐험하는 과정이 매우 즐거웠고, HTML로 만들 수 있는 범위와 LLM 능력을 이해하는 데 큰 도움이 됐음
- 본인만의 도구 컬렉션을 시작하려면 GitHub 레포를 만들고 **GitHub Pages를 켜서 .html 파일을 복사해 넣는 것만으로 시작 가능**
- 보너스로 Claude Code와 shot-scraper를 이용해 이 글의 스크린샷을 추가한 트랜스크립트 링크 제공
- [Claude Code + shot-scraper 트랜스크립트](http://gistpreview.github.io/?1b8cba6a8a21110339cbde370e755ba0)
## Comments
### Comment 48811
- Author: bobross0
- Created: 2026-01-07T14:33:57+09:00
- Points: 1
HTML 패턴들
### Comment 47909
- Author: hiyama
- Created: 2025-12-17T16:17:13+09:00
- Points: 1
재밌어 보이네요
### Comment 47866
- Author: aer0700
- Created: 2025-12-17T08:00:39+09:00
- Points: 1
멋지네요