▲

GN⁺: 이번 주 Claude Artifacts로 구축한 모든 것

 (simonwillison.net)
18P by neo 2달전 | favorite | 댓글 1개
  • 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 기반 도구 중 하나
▲
neo 2달전  [-]
Hacker News 의견

  • 기존 코드베이스에 도구를 통합하는 것이 어렵다는 의견이 있음. 독립적인 페이지로 만들 수 있지만, 기존 코드베이스와 호환되도록 코드 검토 및 수정에 많은 시간이 소요됨. 직접 코드를 작성하는 것이 더 나은 선택임.

    • 컴퓨터가 스스로 의미 있는 코드를 작성하는 것이 불가능하다고 생각했던 시절에서 이제는 흔한 일이 되었다는 점이 흥미로움.
    • 새로운 Sonnet 버전은 코드 작성에 뛰어나지만 Claude 앱에서 출력 크기 제한에 자주 부딪힘. 출력 제한이 개선되기를 바람.

  • 2000년대 초 웹 개발을 중단하고 웹 비즈니스에 집중했지만, 이제는 LAMP를 사용하여 창의적인 작업을 할 수 있게 되어 기쁨. 예를 들어, 원하는 마케팅 사이트를 20분 이내에 배포할 수 있음.

  • LLM을 로컬 코드베이스와 함께 사용하는 최선의 방법에 대한 블로그 게시물이나 "최고의 실천"을 찾고 있음. 커뮤니티에서 추천할 만한 자료가 있을 것이라 기대함.

  • 현재 시대가 놀랍다는 의견. 주말에 Rust를 배우기 시작했으며, ChatGPT 4가 실시간으로 지원해주는 훌륭한 교사 역할을 함.

  • Anthropic이 WeChat과 같은 슈퍼 앱 상태에 가까워지고 있음. 게시된 아티팩트를 쉽게 사이드바에 표시할 수 있는 방법이 필요함. Elon이 이 모델에 관심이 많으므로, xAI가 Claude의 기능을 갖춘다면 그 방향으로 나아갈 것임.

  • Anthropic이 소개한 새로운 패러다임은 콘텐츠가 호스팅된다는 점임. LLM의 출력이 소비자가 사용할 수 있는 자체 호스팅 앱으로 만들어짐. 이는 개인 사이트를 구축하는 것과 크게 다르지 않음.

답변달기