2025-12-16
1일 1아티클
Simon Willison
유용한 HTML 도구를 만들기 위한 패턴들
단일 HTML 파일로 강력한 도구를 만드는 핵심 패턴
- HTML 도구의 기본 구조
- 단일 파일 : HTML, CSS, JavaScript를 하나의 파일에 모두 넣기 → 쉬운 배포, AI의 코드 작성 용이
- No React, No Build : 복잡한 빌드 과정 피하기 → 순수 HTML/JS가 훨씬 가볍고 수정 용이
- CDN 활용 : 외부 라이브러리 필요 시, npm install 대신 CDN 주소 직접 가져와 사용
- 작게 유지 : 코드가 짧아야 AI가 쉽게 이해 및 수정 가능
- 프로토타입은 ‘아티팩트’나 ‘캔버스’로
- ChatGPT, Claude, Gemini의 Canvas(Artifacts) 사용해 즉석에서 도구 생성 및 실행
- 프롬프트 팁 : No React를 명시 → 복사해서 쓰기 좋은 순수 코드 제작
- 복잡한 건 코딩 에이전트에게
- Claude Code 등의 코딩 에이전트는 직접 코드 실행 및 테스트 가능 → 복잡한 도구 제작 시 유리
- 호스팅은 깃허브 페이지로
- LLM 채팅창 안에서만 실행 시, 데이터 로딩 제한 등 제약 사항
- 만들어진 HTML 코드 복사 후 Github Pages 등 정적 호스팅 서비스 활용 → 영구적인 웹 도구
- Copy & Paste 활용
- 사용자가 텍스트나 이미지를 ‘붙여넣기’ 시 자동 변환하고, 결과물을 다시 ‘복사’ 버튼으로 쉽게 가져가도록 제작할 것
- 모바일 환경에서 유용, 서식 있는 텍스트 및 이미지 데이터 처리 가능
- 디버깅 도구 직접 만들기
clipboard-viewer,cors-fetch등 디버깅 도구 직접 제작 → 웹 브라우저의 숨겨진 기능 이해 및 강력한 도구 제작에 효과적
- 상태 저장은 URL 또는 로컬 스토리지에
- URL : 아이콘 에디터 등 공유가 필요한 작업 상태는 URL에 저장
- LocalStorage : 긴 글, API key 등 민감 정보는 브라우저 내부 저장소에 저장 → 서버 전송 없는 안전한 관리
- CORS 지원 API 활용
- 서버 없이 브라우저에서 바로 데이터 가져오는 CORS 지원 API 적극 활용
- ex. GitHub API(코드 내용), PyPI(파이썬 패키지 정보), iNaturalist(동식물 정보), etc.
- LLM도 API로 직접 호출
- OpenAI, Anthropic 등의 API를 HTML 도구에서 직접 호출
- 단, API key는 코드에 직접 넣지 않고 사용자에게 입력받아 LocalStorage에 저장
- 파일 열기 및 다운로드
- 서버에 업로드할 필요 없이, 브라우저가 사용자 파일을 직접 열어서 읽고 처리
- ex. 이미지 크롭, PDF OCR, etc.
- 처리된 결과물도 서버 없이 브라우저에서 바로 파일 생성 후 다운로드 가능
- 파이썬도 브라우저에서 실행
- Pyodide 사용 시 파이썬 코드를 브라우저에서 실행 가능, 데이터 분석 및 이미지 처리 가능
- WebAssembly 덕에 파이썬 외에도 C/C++로 작성된 고성능 라이브러리(ex. FFmpeg, Tesseract)도 웹에서 직접 사용 가능
- 기존 도구 재조립
- 이미 만든 도구의 코드를 AI에게 보여주고, 비슷하게 만들어달라고 하거나 기능을 합치게 시킬 시 더 빠르고 정확하게 새로운 도구 제작
복잡한 서버나 프레임워크 없이도, HTML 파일 하나와 AI의 도움으로 유용한 도구 제작 가능
오늘 배운 것
- 잡페어(con.)
내일 할 일
- 잡페어(con.)