- Claude Artifacts 는 HTML, CSS, JavaScript를 사용하여 인터랙티브한 싱글 페이지 앱을 생성하고, Claude 인터페이스 내에서 결과를 확인하며 추가로 개선할 수 있는 기능임
- 최근 Claude 활동 내역을 SQLite로 변환하여 분석한 결과, 지난 주에 Claude Artifacts를 예상보다 많이 사용했음을 발견함.
- 이 기능을 통해 문제를 직접 해결하거나 프로토타입을 만드는 데 유용한 도구로 활용함.
[Claude Artifacts로 만든 프로젝트들]
URL to Markdown with Jina Reader 활용
- Jina Reader API를 호출하여 웹 페이지 전체 텍스트를 마크다운으로 변환하는 웹 UI 개발
- URL 입력 → Jina Reader API로 마크다운 생성 → 마크다운 출력 및 "Copy" 버튼 제공
- 모바일 Safari에서 페이지 전체 텍스트를 LLM에 복사/붙여넣기 하기 어려웠던 문제 해결
SQLite in WASM 데모
- SQLite의 WASM 빌드에 대한 Hacker News 대화를 계기로 NPM의 @sqlite.org/sqlite-wasm 패키지 발견
- 간단한 인터랙티브 데모 개발하여 작동 여부 확인
URL 추출 도구
- 웹 페이지 텍스트에서 링크된 URL을 추출하고 싶었음
- 아티팩트를 만들어 rich-text HTML 붙여넣기를 받아들이고 HTML 파서를 사용하여 링크 추출
클립보드 뷰어
- 브라우저 클립보드 API를 사용해 다양한 유형의 콘텐츠 붙여넣기 및 정보 확인 디버깅 도구 개발
- 일반 텍스트, rich text, 파일, 이미지 등을 복사/붙여넣고 브라우저에서 사용 가능한 정보 확인
Pyodide REPL
- CSP 헤더에서 https://cdn.jsdelivr.net/pyodide/ 발견
- Pyodide(Python compiled to WebAssembly)가 아티팩트에서 로드 가능하도록 Anthropic 개발팀이 의도적으로 설정했음을 암시
- 작동 여부 증명을 위한 간단한 데모 개발
사진 카메라 설정 시뮬레이터
- 자바스크립트로 카메라 설정 시뮬레이션이 가능한지 궁금했으나 버그가 있고 결과가 인상적이지 않았음
- Fabric.js 라이브러리 발견
LLM 가격 계산기
- Google Gemini를 사용한 비디오 스크래핑 실험의 일환으로 가격 계산기 개발
- Gemini의 저렴한 가격에 대한 자체 계산을 신뢰하지 못해 개발
YAML to JSON 변환기
- YAML 구문의 특정 측면을 상기시키기 위해 YAML을 입력하면 JSON으로 실시간 변환해주는 도구 개발
OpenAI Audio
- OpenAI의 새로운 Audio API 탐색
- 마이크 접근 권한 요청, 오디오 녹음, base64 인코딩 후 OpenAI API로 전송하는 웹 페이지 개발
- Claude Artifacts는 외부 호스트로 직접 API 요청을 할 수 없지만, 작동하는 버전을 개발한 후 다른 호스팅으로 이전하여 완성 가능
QR 코드 디코더
- QR 코드가 포함된 슬라이드를 본 회의에서 QR 코드를 일반 URL로 변환할 방법이 필요했음
- Claude Artifacts를 사용하여 QR 코드 디코더를 빠르게 개발
이미지 변환기 및 페이지 다운로더
- Hacker News에서 누군가 사진을 페이지에 드롭하면 base64 URL로 구워 넣어 "HTML로 저장"하면 갤러리가 포함된 독립형 페이지를 얻을 수 있는 도구 아이디어 제시
- 모바일 폰에서 "HTML로 저장"할 수 없는 경우 유용한 "다운로드 링크" 기능 추가 제안 및 프로토타입 개발
HTML Entity Escaper
- 휴대폰에서 텍스트 청크의 HTML 엔티티를 이스케이프해야 했기에 Claude에게 도구 제작 요청
text-wrap-balance-nav
- Terence Eden의 영감을 받아 text-wrap: balance CSS 속성 실험
- 슬라이더와 체크박스가 있는 nav bar 예제를 Claude에게 제작 요청
ARES 포네틱 알파벳 변환기
- HAM 라디오 통신 운영 자원봉사를 하면서 포네틱 알파벳 사용을 망칠까 봐 걱정되어 Claude에게 도구 제작 요청
[Claude Artifacts의 장점과 한계]
- 저자는 일주일 만에 14개의 프로젝트를 제작할 정도로 아티팩트를 대량 활용 중
- 6월 20일 출시 이후로 계속 사용해왔으며, 현재는 하루에 여러 번 새로운 인터랙티브 아티팩트 제작
- Claude Artifacts는 호기심을 충족시키고, 빠른 프로토타이핑 및 문제 해결을 위한 도구로 유용함
- 대부분의 도구는 5분 이내에 제작 가능
- 좀 더 복잡한 OpenAI Audio 도구도 첫 번째 버전에 12분, 두 번째 반복에 9분 등 총 21분밖에 걸리지 않음
- 그러나 API 호출, 폼 제출, 외부 페이지 링크 등의 기능이 제한적어서 한계에 실망
- 배운 내용을 바탕으로 자체적인 아티팩트 대안 제작을 계획중
- 결론적으로 아티팩트 사용을 권장함
- 아티팩트를 사용하지 않는다면 이 글을 통해 그 이유를 알 수 있기를 바람
- 나에게 아티팩트는 현재 가장 좋아하는 LLM 기반 도구 중 하나