GN⁺: 이번 주 Claude Artifacts로 구축한 모든 것
(simonwillison.net)- 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 기반 도구 중 하나
Hacker News 의견
-
기존 코드베이스에 도구를 통합하는 것이 어렵다는 의견이 있음. 독립적인 페이지로 만들 수 있지만, 기존 코드베이스와 호환되도록 코드 검토 및 수정에 많은 시간이 소요됨. 직접 코드를 작성하는 것이 더 나은 선택임.
- 컴퓨터가 스스로 의미 있는 코드를 작성하는 것이 불가능하다고 생각했던 시절에서 이제는 흔한 일이 되었다는 점이 흥미로움.
- 새로운 Sonnet 버전은 코드 작성에 뛰어나지만 Claude 앱에서 출력 크기 제한에 자주 부딪힘. 출력 제한이 개선되기를 바람.
-
2000년대 초 웹 개발을 중단하고 웹 비즈니스에 집중했지만, 이제는 LAMP를 사용하여 창의적인 작업을 할 수 있게 되어 기쁨. 예를 들어, 원하는 마케팅 사이트를 20분 이내에 배포할 수 있음.
-
LLM을 로컬 코드베이스와 함께 사용하는 최선의 방법에 대한 블로그 게시물이나 "최고의 실천"을 찾고 있음. 커뮤니티에서 추천할 만한 자료가 있을 것이라 기대함.
-
현재 시대가 놀랍다는 의견. 주말에 Rust를 배우기 시작했으며, ChatGPT 4가 실시간으로 지원해주는 훌륭한 교사 역할을 함.
-
Anthropic이 WeChat과 같은 슈퍼 앱 상태에 가까워지고 있음. 게시된 아티팩트를 쉽게 사이드바에 표시할 수 있는 방법이 필요함. Elon이 이 모델에 관심이 많으므로, xAI가 Claude의 기능을 갖춘다면 그 방향으로 나아갈 것임.
-
Anthropic이 소개한 새로운 패러다임은 콘텐츠가 호스팅된다는 점임. LLM의 출력이 소비자가 사용할 수 있는 자체 호스팅 앱으로 만들어짐. 이는 개인 사이트를 구축하는 것과 크게 다르지 않음.