Claude Artifacts: From Conversational AI to App Workspace (a no hype overview)

트위터에서 Anthropic Artifacts (Claude AI)가 어떻게 미니 앱, 게임, 심지어 Figma 플러그인까지 아주 짧은 시간 안에 만들 수 있는지 에 대한 게시물을 많이 본 후 , 정말 많은 질문이 생겼습니다! '아티팩트란 무엇인가? 이것들은 얼마나 멀리까지 갈 수 있는가? 개발자를 대체하는가? 아니면 그저 AI에 대한 과장된 선전일 뿐인가?' Artifacts가 2시간 만에 본격적인 Figma 플러그인을 만들 수 있다면, 다른 건 뭐가 가능할까? 저도 열광에 사로잡혀서 AI로 처음부터 끝까지 작은 게임을 만드는 게 가능한지 알아보기 위해 뛰어들었습니다. 제가 만든 건 다음과 같습니다. 저는 Artifacts를 기초로 사용했지만, 그 한계와 다른 도구를 사용하는 것이 더 나은 시점을 발견했습니다. 따라서 이 게시물은 과장된 광고를 걷어내고 Artifacts가 무엇인지, 언제 사용하는 것이 좋은지, 그리고 재미있는 사용 사례와 예를 많이 보여드리려고 합니다! 먼저, 아티팩트가 무엇인지 알아보겠습니다. 클로드 유물이란? 위에서 보듯이, Claude Artifacts를 사용하면 미니 앱, 게임, 웹 도구를 만들고 즉시 실행할 수 있어 작동하는 앱을 만드는 데 필요한 작업을 크게 줄일 수 있습니다. ChatGPT나 GitHub Copilot에서 제공하는 코드 조각과 조언과 달리, 여기에서는 채팅을 벗어나지 않고도 아이디어를 구축할 수 있습니다. 별도의 IDE, 프로젝트 설정 또는 복잡한 환경이 필요하지 않습니다. 아티팩트를 사용하면 클로드가 주요 대화와 별도로 전용 창에서 실질적이고 독립적인 콘텐츠를 공유할 수 있습니다. 아티팩트를 사용하면 나중에 수정, 구축 또는 참조할 수 있는 중요한 콘텐츠로 작업하기 쉽습니다. - Anthropic 생성된 코드를 실행하는 방식은 숙련된 개발자든 코딩을 처음 접하는 사람이든 누구나 소프트웨어를 만들고 실행하는 데 대한 장벽을 실제로 낮춥니다. 동시에 코드 아티팩트는 개발 프로세스의 한 형태를 채팅 인터페이스와 혼합합니다. Letter 배너 광고 기원 후 편지 콘텐츠 제작자, 디자이너, 개발자를 위한 AI 지원 뉴스레터 빌더. 본 기사는 Letter의 지원을 받았습니다. 대화와 개발을 혼합하다 아티팩트는 채팅 인터페이스 옆에 있는 전용 창에 있는 추가 콘텐츠입니다. 이런 식으로 클로드는 예전과 같은 대화 흐름을 따르지만 실제 웹 디자인 , 실행 가능한 코드 또는 문서와 같은 더 완전한 답변을 제공할 수 있습니다. AI가 단순히 스니펫을 내놓는 것이 아니라 개발 프로세스에 적극적으로 참여하는 작업 공간을 상상해보세요. 해당 기능을 켜면 사용할 수 있습니다. Artifacts는 채팅에서 바로 실행 가능한 앱을 제공하여 코딩 대화를 한 단계 더 발전시킵니다. 아이디어를 논의하고 다듬으면서 앱이 다시 빌드되어 항상 최신 버전과 상호 작용할 준비가 됩니다. 똑똑한 인터페이스 - 백그라운드에서 많은 작업을 수행합니다. Claude Artifacts 버전 제어 및 코드 미리보기가 실제로 작동 중입니다. 백그라운드에서 클로드는 많은 전형적인 개발 작업을 처리하고, 코더에게 친숙한 요소를 채팅 인터페이스에 통합합니다. IDE는 아니지만, 대화의 맥락 내에서 버전 제어와 같은 기능이 있습니다. 이러한 측면 중 일부는 다음과 같습니다. 종속성 설치 – 코드 아티팩트는 React, Framer Motion, Shadcn 등과 같은 필요한 종속성을 설치합니다. 버전 기록 – 아티팩트에는 버전 기록이 있으므로 이전 반복 작업으로 돌아갈 수 있습니다. 특히 코드를 다듬을 때 유용합니다! 게시 및 리믹스 – 커뮤니티에서 대화형 코드 아티팩트를 찾아 자신의 계정에서 실행하세요. 몇 가지 질문을 더 하고 다른 사람의 아티팩트를 사용자 지정하세요. 자세한 내용은 블로그에서 확인하세요. 클로드 3.5 소네트 소개 Claude 3.5 Sonnet을 소개합니다. 지금까지 가장 지능적인 모델입니다. Sonnet은 이제 주요 평가에서 경쟁 모델과 Claude 3 Opus보다 두 배 빠른 속도로 더 나은 성과를 보입니다. 아티팩트 예시 아티팩트는 대시보드, SVG, 양식(날짜 선택기나 볼륨 슬라이더와 같은 작은 구성 요소 포함), 시각화 및 이 모든 것의 조합과 같은 작은 단일 용도 애플리케이션에 이상적입니다. 몇 가지 예를 들어보겠습니다. 디자인 생성기 앱 특히 디자이너들에게 인기 있는 사용 사례는 SVG 생성기와 같은 것입니다. 여기서 Kevin Cannon은 PJ Onori의 원본을 기반으로 'Dieter Dots 웹 앱'을 만듭니다 . ???? 디터 도츠 Kevin Cannon의 @pjonori의 Dieter Dots 각색 여기에서 Artifact를 가지고 놀 수 있습니다 . Twitter 주변에는 이와 비슷한 것이 더 있지만, 리믹스 가능한 Artifact를 공유하는 것이 가장 멋진 것 중 하나입니다. Daniel Destefanis는 이것을 Figma 플러그인으로 만들기까지 했습니다. 하지만 여기서 Claude가 사용되는지는 확실하지 않습니다. ???? 웹사이트 컬러 팔레트 생성기 색상 팔레트에 대한 또 다른 생성기 예가 있습니다. 저는 10분 만에 이것을 빠르게 생각해냈고, 텍스트 색상을 조정하여 접근성을 유지하는 색상 견본 선택기를 포함했습니다. 이것은 3-4개의 프롬프트만 필요했습니다. 색상 팔레트 생성기 앱: 여기에서 아티팩트 보기 PDF를 대시보드로 Artifacts의 또 다른 멋진 사용 사례는 PDF나 긴 형식의 콘텐츠를 대화형 대시보드로 변환하는 것입니다. 다음 예에서 저는 Henri Bergson의 Dreams (Project Gutenberg에서 사용 가능)라는 책 전체를 붙여넣고 대시보드를 생성하도록 요청했습니다. ???? 베르그송의 꿈 대시보드 이 대시보드는 베르그송의 꿈 이론의 다양한 측면을 시각화하여 깨어 있는 상태와 잠자는 상태를 비교합니다. 베르그송의 꿈 대시보드 내 프롬프트에는 앱을 흥미롭고 더 유용하고 유익하게 만들어 줄 몇 가지 기능이 요청되었습니다. 야간 토글: 사람의 꿈과 깨어 있는 상태 사이를 전환합니다(다크 모드를 라이트 모드로 변경하는 것도 가능) 설명: 앱에서 사용하는 척도는 베르그송의 책을 기반으로 한 추정치이므로 설명과 면책 조항이 중요합니다. 인용문: 또한 저는 베르그송의 책과 시각화를 실제로 연결하기 위해 몇 가지 인용문을 요청했습니다. 여기서 시도해 보세요 . 작은 재미있는 디자인 세부 구성 요소 또 다른 재밌는 일은 더 작은 대화형 구성 요소를 만드는 것입니다. 터널 베어 비밀번호 필드 를 기반으로 한 예가 있습니다 . 곰의 눈은 입력 필드의 텍스트 위치를 따르고 사용자가 비밀번호를 입력할 때 닫힙니다. ???? 곰 입력 필드 애니메이션 곰의 눈은 입력 필드를 따라가며 비밀번호 필드에 들어가면 닫힙니다. 원본(아래 참조)의 그래픽은 훨씬 나았지만, Artifact의 기능은 몇 가지 프롬프트 내에서 입력 필드를 따르는 데 있어 인상적입니다. Design Spells의 TunnelBear 상호 작용 ???? 구글리 아이볼 더 작게 만들고 단일 구성 요소만 만들 수도 있습니다. Jess Rosenberg 의 구글리 아이 아티팩트가 있는데, 실제로 제가 위의 터널 베어 상호작용을 시도하게 된 계기가 되었습니다(말장난은 아닙니다). 시각화 및 설명자 아티팩트는 또한 데이터와 이론을 다양한 방식으로 표현하는 시각화에 좋습니다. 간단한 차트에서 더 복잡한 것까지. 너무나 많은 다른 이론을 대화형으로 설명할 수 있지만, 아마도 우리가 설명해야 할 가장 중요한 것은 div를 가운데 정렬하는 방법일 것입니다 . 1. div를 가운데 정렬하는 방법 ???? 저는 몇 번의 반복을 통해 이걸 만들었어요. 메서드에 대한 드롭다운과 데모, 코드, 설명 간을 전환하는 탭이 추가된 게 꽤 멋지네요. div를 가운데 정렬하는 가장 효과적인 방법을 보여주는 순위 섹션도 있습니다. 여기에서 시도하고 리믹스해 보세요 . 2. VC 청산 시뮬레이션 ???? div를 가운데 정렬하는 것과 비교해서, Ethan의 이 예는 여러 변수가 있는 더 복잡한 이론에 대한 설명을 보여줍니다. VC 관련 사항의 보상 차이를 시각적으로 설명하는 대화형 시뮬레이션 꽤 멋지지만, 스포츠 팬을 위해 제가 축구 통계를 바탕으로 만든 더 간단한 예시를 아래에 소개합니다. 3. 호날두 vs 메시 통계 비교 ⚽ 저는 Ronaldo와 Messi의 통계를 붙여넣고 몇 가지 비교 차트를 요청했습니다. 그다지 예쁘지는 않지만 Artifacts는 React에서 recharts를 사용하여 만든 몇 가지 레이블이 지정된 시각화를 제공했습니다. messivsronaldo.app 에서 얻은 통계를 Artifacts로 시각화 여기에서 게시된 Artifact를 시도해 보세요 . messivsronaldo.app에서 붙여넣은 데이터를 포함한 프롬프트는 다음과 같습니다. . 이것은 예시일 뿐이며 다른 사이트의 정보를 붙여넣는 것이 허용되는지 확실하지 않습니다. 4. 엘비스의 딥러닝 시각화 ???? 다음은 아티팩트의 한계를 강조하는 또 다른 시각화입니다 . Twitter/X 토론에서 제작자는 Claud의 메시지 Capacity를 쳤다고 언급하고, 프로젝트에서 확장하기 위해 최종 HTML 코드를 Gemini 1.5 Pro와 GPT-4o로 옮겼다고 말합니다. 이는 제가 직접 경험한 일이기 때문에 아티팩트는 단일 페이지 앱이어야 하며 더 큰 앱은 아니라는 것을 알아두는 것이 중요합니다. 제한 사항: 아티팩트가 작고 자체적으로 포함되어 있습니다. 처음에 모든 과장된 광고를 봤을 때(그리고 심지어 제가 미니 앱을 직접 만든 후에도) 저는 무엇이든 가능하다고 생각했습니다. 개발자가 더 필요 없잖아요? 하지만 프로젝트가 4~5개 질문을 넘어서면서 아티팩트의 한계가 더욱 분명해졌습니다. 예를 들어: 크기 제한 : 단일 메시지 응답에는 문자 제한이 있으므로 매우 긴 코드를 생성할 수 없으며 코드 아티팩트가 더 작은 앱으로 제한됩니다. 타사 모듈에 대한 제한된 액세스 : 가끔 Claude가 종속성을 설치할 수 없어 앱이 채팅 내에서 실행되지 않아 오류가 표시됩니다. 매번 다시 작성 : 변경을 요청할 때마다 전체 앱을 다시 작성하여 종종 새로운 문제와 버그를 도입합니다. 실제로 무엇이 나올지 알 수 없습니다. 입력 제한: 베르그송의 꿈 대시보드에 책 전체를 붙여넣을 수 없었습니다. 이러한 제약 조건은 추가 컨텍스트가 필요 없이 각 아티팩트가 독립적이고 자체적으로 포함될 수 있도록 보장합니다. 이 범위는 아티팩트를 명확하고 집중적으로 유지하므로 쉽게 공유하고 리믹스할 수 있습니다. 기본적으로 단일 프롬프트 내에서 Artifact의 코드 전체 내용을 얻을 수 있어야 합니다. - Toms Guide 저는 Artifacts가 정말 좋은 시작점이자 스크래치패드로 작동 코드의 일부를 라이브로 만들어내고(실제로 볼 수 있도록) 하는 데 도움이 되었다고 생각합니다. 하지만 하나의 아이디어를 더 발전시키기 위해, 저는 다른 AI 도구로 뛰어들어야 했는데, 단어 제한 때문에 Claude가 실행 가능한 Artifacts를 생산하지 못했기 때문입니다. 유용성의 한계 전반적으로 많은 AI 도구와 마찬가지로 결과는 인상적입니다(특히 잘 구성된 데모에서는). 하지만 결과는 만족스럽지 않을 수도 있습니다. 아티팩트를 사용하면 앱이나 게임에서 더 많은 사용자 정의가 필요한 지점에 도달하면 여전히 단어 수가 있는 채팅에 연결되어 있기 때문에 환경이 제한적이 됩니다. 아래에 표시된 대로 아티팩트의 유용성에는 만드는 것에 따라 한계가 있습니다. 유용성 차트(Artifacts로 만든) Claude가 대화형 AI에서 협업 작업 환경으로 전환하는 것을 목표로 하면서 새로운 기능이 등장함에 따라 이 곡선이 바뀔 수도 있습니다. 이 미리보기 기능은 대화형 AI에서 협업 작업 환경으로의 Claude의 진화를 보여줍니다. 이는 곧 팀 협업을 지원하도록 확장될 Claude.ai 에 대한 더 광범위한 비전의 시작일 뿐입니다 . 가까운 미래에 팀과 결국 전체 조직은 Claude가 주문형 팀원 역할을 하는 한 공유 공간에서 지식, 문서 및 진행 중인 작업을 안전하게 중앙 집중화할 수 있게 될 것입니다. 지금으로서는 약간의 창의성을 발휘하면 메시징 제한 내에서 새롭고 놀라운 일을 할 수 있습니다(아래의 Heather의 예처럼). 하지만 일반적으로는 POC와 소규모 양식 기반 앱으로 제한됩니다. 개발자라면 랜딩 페이지나 드롭다운, 날짜 선택기와 같은 대화형 구성 요소를 위한 Vercel의 v0 에 대한 대안으로 볼 수도 있습니다. Vercel의 v0 간단한 텍스트 프롬프트로 UI를 생성합니다. 복사, 붙여넣기, 발송. 클로드 너머로 갈 곳 하지만 폼 관련(입력 -> 출력)을 넘어서는 것이라면, 직접 코드를 탐색해야 합니다(또는 AI에게 요청해야 합니다!). 채팅 인터페이스를 넘어서는 기능을 사용하기 위해 코드 편집기로 돌아가야 했습니다. 사운드, 이미지/아이콘 업로드 새로운 파일과 구성 요소 추가 파일을 탐색하고 함께 연결합니다 이 글의 맨 처음에 보여드린 게임에서 저는 Cursor를 사용했습니다. Cursor는 Claude를 계속 활용하거나 다른 AI 모델을 결합할 수도 있는 AI 기반 IDE입니다. Websim은 Claude Artifacts의 범위를 훨씬 넘어서는 대규모 웹사이트와 대화형 환경을 만드는 데 사용할 수 있는 또 다른 도구입니다.