HTML 도구를 만드는 유용한 패턴들

게시일: 2025년 12월 13일 | 원문 작성일: 2025년 12월 10일 | 저자: Simon Willison | 원문 보기

HTML 도구란?

Simon Willison은 “HTML 도구”를 HTML, JavaScript, CSS를 단일 파일로 결합해 실용적인 기능을 제공하는 애플리케이션이라고 설명해요. 지난 2년간 그는 150개 이상의 이런 도구를 만들었고, 대부분 LLM의 도움을 받았어요.

대표적인 예시:

핵심 원칙

1. 단일 파일 아키텍처

2. React와 빌드 스텝 피하기

Simon은 프롬프트에 “no React”라고 넣어요. React는 빌드 스텝이 필요하기 때문에 LLM이 생성한 코드를 바로 실행할 수 없거든요.

3. CDN에서 의존성 로드

의존성이 적을수록 좋지만, 필요하다면 cdnjs나 jsdelivr 같은 CDN에서 로드하면 돼요. 빌드 스텝 없이도 강력한 라이브러리를 사용할 수 있어요.

개발 워크플로우

프로토타이핑

초기 개발에는 Claude Artifacts, ChatGPT Canvas, Gemini Canvas 같은 도구가 유용해요. 공유 가능한 링크와 실시간 프리뷰를 제공하죠.

코딩 에이전트

더 복잡한 프로젝트에는 Claude Code나 Codex CLI 같은 코딩 에이전트가 유용해요. Playwright로 테스트하고, 저장소에 직접 작업하고, PR을 만들 수 있어요.

기술 구현 패턴

상태 관리

URL에 상태 저장:

• 북마크와 공유가 가능한 애플리케이션 상태
• 쿼리 파라미터나 해시 프래그먼트 활용
• 예: 검색 필터, 설정 등

localStorage 활용:

• 더 큰 상태나 민감한 데이터(API 키) 저장
• 서버로 보내지 않고 클라이언트에만 저장
• 사용자 환경설정, 인증 토큰 등

파일 처리

<input type="file"> 엘리먼트로 서버 업로드 없이 클라이언트에서 직접 파일을 처리할 수 있어요. 예를 들어 ocr 도구는 PDF.js와 Tesseract.js로 이미지에서 텍스트를 추출하고, social-media-cropper는 이미지를 플랫폼별 크기로 잘라요.

다운로드 생성

JavaScript 라이브러리를 사용하면 브라우저에서 직접 다운로드 가능한 파일을 만들 수 있어요. svg-render는 SVG에서 PNG/JPEG를 생성하고, open-sauce-2025는 ICS 캘린더 파일을 만들어요.

API 통합

CORS를 지원하는 유용한 API들:

• iNaturalist — 동물 목격 데이터
• PyPI — Python 패키지 정보
• GitHub — 공개 저장소 콘텐츠
• Bluesky — 소셜 미디어 작업
• Mastodon — 연합 데이터

LLM API 직접 호출:

OpenAI, Anthropic, Gemini 같은 LLM API도 CORS를 지원해요. 사용자가 자신의 API 키를 localStorage에 저장해두면 서버 없이도 AI 기능을 쓸 수 있어요.

고급 기능

Pyodide — 브라우저에서 Python 실행

Pyodide는 WebAssembly로 컴파일된 Python 배포판으로, 브라우저에서 직접 실행돼요. CDN에서 깔끔하게 로드되고, micropip으로 PyPI에서 순수 Python 패키지를 설치할 수 있어요.

WebAssembly — 데스크톱 앱을 브라우저로

WebAssembly를 활용하면 강력한 데스크톱 애플리케이션을 브라우저에 포팅할 수 있어요:

모두 서버 없이 브라우저에서 실행돼요.

복사-붙여넣기 패턴

이런 도구들은 대부분 간단한 워크플로우를 공유해요:

1. 콘텐츠를 붙여넣기
2. 변환/처리
3. 클립보드로 복사해 다른 곳에서 재사용

Rich clipboard 포맷:

클립보드에 여러 데이터 표현을 동시에 캡처할 수 있어요:

• Hacker News 스레드 익스포터 — 토론을 여러 포맷으로 변환
• 리치 텍스트 HTML 추출 — 포맷팅을 보존하면서 추출
• 이미지 alt 텍스트 추출 — 접근성 메타데이터 가져오기

디버깅과 발견 도구

Simon은 숨겨진 기능을 드러내는 커스텀 디버깅 도구도 만들어요:

이런 도구들은 웹 API의 기능을 이해하고 활용하는 데 도움을 줘요.

호스팅과 배포

GitHub Pages가 완벽한 이유

Simon은 GitHub Pages를 선호해요:

• LLM 샌드박스 제약 없음 — ChatGPT나 Claude가 다운되어도 도구는 계속 작동해요
• 신뢰할 수 있는 정적 파일 제공 — 추가 인프라가 필요 없어요
• 무료 — 공개 저장소는 무료로 호스팅돼요
• 영구적 — 과거에 만든 도구에 계속 접근할 수 있어요

도구 리믹싱과 반복

이미 만든 도구들이 LLM의 참고 자료가 돼요 — 어떻게 구현하는지 예제를 보여주니까요:

• 라이브러리 사용법이 코드로 문서화되고
• API 통합 패턴을 실제로 보여주고
• 코딩 에이전트가 이름으로 참조하거나 검색할 수 있죠

Simon의 도구 컬렉션은 tools.simonwillison.net에서 볼 수 있어요. “월별 보기”가 전체 컬렉션을 탐색하기 좋고, 거의 모든 예제가 푸터에 GitHub “소스 보기” 링크를 포함하고 있어요.

문서화 관행

Simon은 LLM 대화 기록을 공개해요:

• 플랫폼의 “공유” 기능으로 트랜스크립트를 공개
• GitHub 커밋 메시지에 대화 링크를 임베드
• tools.simonwillison.net의 colophon에서 확인 가능

시작하기