- HTML·JavaScript·CSS를 한 파일로 묶어 실행하는 HTML tools 제작 경험을 바탕으로 반복되는 설계 패턴 정리
- 2년간 150개 이상 제작된 소형 도구들이 실제로 어떻게 만들어지고 유지되는지 구체 사례 중심으로 설명
- 빌드 단계 없는 구조와 CDN 활용으로 복사·붙여넣기 기반 개발 흐름이 자연스럽게 형성됨
- URL·localStorage·파일 열기·다운로드·Pyodide·WebAssembly까지 브라우저 기능만으로 가능한 범위 확장
- 프롬프트와 결과 기록, 기존 도구 재조합을 통해 도구 컬렉션 자체가 개발 기반이 되는 흐름 강화
HTML tools 개념과 사례
- HTML 한 파일에 JavaScript와 CSS를 함께 넣어 즉시 실행 가능한 소형 웹 도구들을 HTML tools라고 부름
- 지난 2년간 150개 이상 제작되었고, 대부분 LLM이 작성한 코드로 구성
- 대표 사례
- 전체 도구 모음은 tools.simonwillison.net에서 확인 가능하며, 월별 보기로 제작 흐름을 살펴볼 수 있음
- 대부분 도구에 GitHub 소스와 프롬프트 또는 트랜스크립트 기록이 함께 공개됨
HTML tool의 기본 구조
- JavaScript와 CSS를 인라인으로 포함한 단일 HTML 파일 구성
- JSX 빌드가 필요한 React를 사용하지 않아 복사·재배포가 단순해짐
- 필요한 라이브러리는 CDNjs나 jsDelivr 같은 CDN에서 직접 로드하고 의존성은 최소화
- 코드 규모를 수백 줄 수준으로 유지해 유지보수 부담을 낮추고, LLM이 빠르게 읽고 수정 가능한 상태 유지
Canvas·Artifacts 기반 프로토타이핑
- ChatGPT Canvas, Claude Artifacts, Gemini Canvas를 이용해 HTML 도구를 즉시 실행하며 초기 형태를 잡는 방식
- “No React” 조건을 넣어 빌드 단계 없이 바로 동작하는 코드 생성
- JSON을 붙여넣으면 YAML로 변환하는 예제
더 복잡해지면 코딩 에이전트로 전환
- Claude Code나 Codex CLI를 사용하면 Playwright 등으로 브라우저 테스트를 포함한 반복 작업 자동화 가능
- 더 복잡한 도구(예: Bluesky 스레드 뷰어)에서는 이러한 에이전트로 “업그레이드”하는 방식 사용
- simonw/tools 레포지토리에 직접 PR을 생성해 도구를 추가·업데이트
- 웹 기반 에이전트를 활용한 작업 과정은 Claude Code for web 사용 영상에서 확인 가능
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로 접근 가능
- 대부분 도구가 simonw/tools 레포에서 관리되며 tools.simonwillison.net 으로 제공됨
복사·붙여넣기 중심 입출력
- 많은 도구가 붙여넣은 입력을 변환하고 다시 클립보드로 복사하게 만드는 형태를 핵심 메커니즘으로 사용
- 모바일에서 복사·붙여넣기가 불편해 “Copy to clipboard” 버튼을 자주 추가함
- OS 클립보드가 여러 포맷을 함께 담을 수 있고, JavaScript paste 이벤트에서도 이러한 “리치” 데이터에 접근 가능
- 대표 도구
디버깅 도구
- 브라우저에서 다뤄지는 실제 데이터 구조를 확인하기 위한 전용 도구 제작
-
clipboard-viewer: 텍스트·리치 텍스트·이미지·파일 등 클립보드 데이터 전체 표시
- 추가 도구
URL에 상태 저장
- 서버 DB 없이도 URL에 많은 상태를 저장할 수 있음
- 북마크·공유를 염두에 둔 도구에서 이 패턴을 선호
-
icon-editor: 24×24 아이콘 편집 상태를 URL에 그대로 보존
localStorage 활용
- localStorage는 사용자 디바이스에 데이터를 지속 저장하며 서버에 노출하지 않는 브라우저 API
- URL에 담기 어려운 큰 상태나 API 키 같은 비밀값 저장에 사용하며, 정적 호스트의 서버 로그 노출 위험을 피하기 위함
-
word-counter: 작성 중 텍스트를 자동 저장
-
render-markdown: 마크다운 작성 중 내용 유지
-
haiku: API 키를 localStorage에 저장해 웹캠 이미지를 바탕으로 하이쿠 생성
CORS 가능한 API 활용
- CORS(Cross-origin resource sharing)는 다른 도메인의 API를 브라우저 JavaScript가 호출할 수 있는지 제어하는 메커니즘
- CORS 헤더가 열린 API는 HTML tools에 유리한 자원이며, 시간이 지나며 목록을 모을 가치가 있음
- iNaturalist, PyPI, GitHub(공개 레포 콘텐츠를 raw.githubusercontent.com로 익명 접근 가능), Bluesky, Mastodon 등 사용
- 도구 사례
LLM API 직접 호출
- OpenAI·Anthropic·Gemini JSON API를 CORS로 브라우저에서 직접 호출
- API 키를 HTML에 박아두면 탈취와 과금 위험이 있어, localStorage에 저장하는 “secrets 패턴”을 사용
- 사용자 경험 측면에서 API 키 발급·붙여넣기 과정이 마찰이 크지만 동작은 함
- 예제 도구
파일 열기 두려워하지 않기
-
<input type="file">로 파일을 서버에 업로드하지 않아도 브라우저에서 직접 읽어 활용 가능
-
ocr: PDF.js와 Tesseract.js를 이용해 PDF를 페이지 이미지로 바꾸고 브라우저에서 OCR 수행
-
social-media-cropper: 이미지 열기/붙여넣기 후 소셜 미디어용 비율(예: Twitter/LinkedIn 2:1, Substack 1.4:1 등)로 크롭 지원
-
ffmpeg-crop: 비디오 크롭 ffmpeg 명령 생성
다운로드 파일 제공하기
- 서버 없이도 브라우저에서 파일을 생성해 다운로드로 제공할 수 있음
- JavaScript 생태계에 다양한 포맷 생성 라이브러리가 존재
- 예제 도구
Pyodide와 WebAssembly
-
Pyodide로 Python을 WebAssembly로 컴파일해 브라우저에서 실행하는 배포판
- CDN에서 깔끔하게 로드 가능해 HTML tools에 쓰지 않을 이유가 없
- micropip을 통해 CORS로 PyPI의 순수 Python 패키지를 추가 로드할 수 있음
- 도구 사례
WebAssembly로 더 넓히기
- Pyodide가 가능한 기반은 WebAssembly 덕분이며, 다른 언어로 작성된 소프트웨어도 브라우저에서 로드 가능해짐
-
Squoosh.app 은 여러 이미지 압축 라이브러리를 브라우저에서 제공
- 도구 사례
이전 도구 재조합
- 100개 이상의 단일 공개 컬렉션이 있으면 LLM이 도구들을 쉽게 재조합할 수 있다는 점이 또 다른 장점
- 때로는 이전 도구를 컨텍스트에 복사해 넣고, 코딩 에이전트에서는 이름으로 참조하거나 예시 검색을 시키는 방식 사용
- 동작하는 도구의 소스코드가 편집 라이브러리 사용 패턴까지 포함한 문서 역할을 하며, LLM의 성공 확률을 높임
- pypi-changelog 제작 과정 전체 기록: 프롬프트 트랜스크립트
- “pypi package explorer” 도구를 보라고 지시한 뒤 zip-wheel-explorer 소스를 읽고, PyPI API로 wheel을 가져와 버전 간 diff를 렌더링하고 Copy 버튼을 제공하는 새 도구를 만들도록 프롬프트를 구성
-
브라우저에서 OCR 실행하기 도 참고
프롬프트·트랜스크립트 기록
- LLM 사용 기록을 저장·공개하는 습관을 통해 스스로의 활용 능력을 키울수 있음
- 채팅형 LLM 플랫폼에서 만든 도구는 share 기능을 기록 수단으로 사용
- Claude Code·Codex CLI 같은 에이전트 사용 시 터미널 전체 트랜스크립트를 복사해 terminal-to-html로 로그를 HTML로 변환하고 Gist로 공유
- 완성 도구를 레포에 저장할 때 커밋 메시지에 트랜스크립트 링크를 포함 - 기록 모음: tools.simonwillison.net/colophon
마무리
- 지난 1년 반 동안 이 방식으로 LLM과 HTML 도구를 탐험하는 과정이 매우 즐거웠고, HTML로 만들 수 있는 범위와 LLM 능력을 이해하는 데 큰 도움이 됐음
- 본인만의 도구 컬렉션을 시작하려면 GitHub 레포를 만들고 GitHub Pages를 켜서 .html 파일을 복사해 넣는 것만으로 시작 가능
- 보너스로 Claude Code와 shot-scraper를 이용해 이 글의 스크린샷을 추가한 트랜스크립트 링크 제공