Teenyapp으로 Claude Design Artifacts를 라이브 웹사이트에 배포하기
Teenyapp.com은 Claude Design을 위해 특별히 구축된 웹 호스팅 서비스입니다. Claude Design이 코드 실행, 파일 생성, 임의의 HTTP 요청을 지원하지만 호스팅 대상이 없는 문제를 해결합니다. Teenyapp 링크를 Claude Design에 붙여넣으면 에이전트가 API를 통해 아티팩트를 라이브 웹사이트에 자율적으로 게시합니다.
작동 방식
yourapp.app.teenyapp.com에서 커스텀 도메인을 요청하고 에이전트 토큰이 포함된 Teenyapp 링크를 받습니다.- 해당 링크를 Claude Design에 붙여넣습니다. 링크는 아티팩트 배포 지침이 포함된
claude.md파일을 가리킵니다. - Claude Design이
claude.md를 읽고, 에이전트 토큰을 사용하여 아티팩트를 업로드하고 사이트를 구성합니다. 모두 자율적으로 이루어집니다.
배포 예시
Claude Design에서 기본 계산기 키트 프롬프트를 사용하여 디자인 목업을 만든 후, 사용자가 Teenyapp 링크를 붙여넣고 https://calculator.app.teenyapp.com에 배포하라고 지시했습니다. Claude Design이 나머지를 처리했습니다.
지원되는 백엔드 기능
- API 요청을 처리하는 Worker
- 데이터베이스 및 파일 스토리지
- 인증 (이메일/비밀번호, Google, GitHub, Discord OAuth)
대상 사용자
채팅 인터페이스를 벗어나지 않고 프로토타입이나 소규모 앱을 빠르게 게시하려는 Claude Design 사용자 개발자.
📖 전체 소스 읽기: r/ClaudeAI
👀 See Also
ClaudyBro: Claude 코드 워크플로우를 위한 네이티브 macOS 터미널
ClaudyBro는 Claude Code 사용자를 위해 특별히 제작된 3.5MB 크기의 네이티브 Swift 터미널 앱으로, 이미지 붙여넣기, 프로세스 검사, 고아 프로세스 정리, 스마트 MCP 관리 기능을 갖추고 있습니다. 대기 상태에서 68MB, Claude 실행 시 82MB의 메모리를 사용합니다.
개발자가 Claude Code를 활용해 디자인과 SEO를 위한 AI/ML 구인 게시판을 구축했습니다
한 개발자가 선도적인 연구소와 기업의 AI/ML 채용 정보를 분류하여 제공하는 무료 사이트 MOAIJobs.com을 제작했습니다. 이 사이트는 카테고리, 지역, 급여별 필터링 기능을 제공하며, 디자인과 기술적 SEO 구현은 개발자가 제공한 참고 자료와 설명을 바탕으로 Claude Code가 담당했습니다.
테스트릴: 클로드 코드를 활용한 프로그래매틱 데모 비디오 생성
Testreel은 JSON, YAML 또는 Playwright 상호작용 설명에서 세련된 제품 데모 비디오를 생성하는 npm 패키지입니다. 커서 오버레이, 클릭 리플, 그라데이션 배경이 포함된 webm/mp4/gif 비디오를 생성합니다.
피드백 기반 순위 조정 기능이 탑재된 MCP 검색 서버 for Claude Desktop
커뮤니티에서 구축된 Claude Desktop용 MCP 검색 서버가 Exa와 Tavily 검색 엔진을 병렬로 실행하며 API 키가 필요하지 않습니다. 결과를 사용한 후 사용자는 결과 도구를 통해 작동 여부를 보고하며, 이 피드백은 순위 알고리즘에 반영되어 에이전트 성공에 도움이 되는 URL의 우선순위를 높입니다.