Claude Artifacts: 대화만으로 앱을 만드는 경험

“이거 간단한 계산기 하나만 만들어줘.” Claude에게 이렇게 말했을 뿐인데, 화면 오른쪽에 진짜 동작하는 계산기가 나타났습니다. 버튼을 누르면 숫자가 입력되고, 사칙연산도 되고, C 버튼을 누르면 초기화까지 됩니다. 코드를 한 줄도 작성하지 않았는데 말이죠 🤔

이게 바로 Claude의 Artifacts 기능입니다. 그냥 대화를 나누면서 “이런 거 만들어줘”라고 하면 Claude가 실시간으로 코드를 생성하고 바로 실행 가능한 결과물을 보여줍니다. 이 글에서는 Artifacts가 정확히 무엇인지, 어떤 것들을 만들 수 있는지, 그리고 실제로 어떻게 활용하면 좋은지 살펴보겠습니다.

Artifacts란?

Artifacts는 Claude가 대화 중에 생성한 코드, 문서, 시각화 같은 결과물을 별도의 패널에 실시간으로 렌더링해주는 기능입니다. 일반적인 챗봇은 텍스트로 코드를 보여주고 “이걸 복사해서 실행해보세요”라고 하는데, Artifacts는 그 과정을 건너뛰고 바로 실행 결과를 눈앞에 보여줍니다.

Claude 웹, 데스크톱 앱, 모바일 앱 어디서든 사용할 수 있고요. 무료 플랜에서도 쓸 수 있지만, Pro 이상의 유료 플랜에서는 세션당 만들 수 있는 Artifacts 수가 훨씬 많고 영구 저장도 지원됩니다.

Artifacts가 생성되는 기준이 있습니다. 대화 내용이 15줄 이상의 코드처럼 상당한 분량이면서 독립적으로 동작 가능한 결과물일 때, 그리고 사용자가 수정하거나 재사용할 가능성이 높을 때 Claude가 알아서 Artifacts 패널에 띄워줍니다.

무엇을 만들 수 있나요?

Artifacts로 만들 수 있는 것들이 꽤 다양합니다.

가장 많이 쓰이는 건 역시 React 컴포넌트입니다. 간단한 카운터부터 투두 리스트, 폼 검증, 심지어 미니 게임까지 대화만으로 만들 수 있어요. Claude가 생성하는 React 컴포넌트에서는 React 18, Tailwind CSS, shadcn/ui, Recharts, Lucide 아이콘 같은 라이브러리를 바로 사용할 수 있습니다.

그 외에도 HTML/CSS 페이지, SVG 그래픽, Mermaid 다이어그램, 데이터 시각화 차트 같은 것들을 만들 수 있고요. 마크다운 문서나 긴 텍스트 콘텐츠도 Artifacts로 표시됩니다.

한번 직접 해볼까요? Claude에게 이렇게 말해보세요.

할 일을 추가하고 완료 체크할 수 있는 투두 리스트를 만들어줘.
완료된 항목은 취소선으로 표시해주고, 삭제 버튼도 넣어줘.

몇 초 만에 실제로 동작하는 투두 앱이 만들어집니다. 입력 필드에 할 일을 쓰고 추가 버튼을 누르면 목록에 나타나고, 체크박스를 클릭하면 취소선이 그어지는 걸 눈으로 바로 확인할 수 있어요.

대화로 반복 수정하기

Artifacts의 진짜 매력은 대화를 계속하면서 결과물을 점점 다듬어 나갈 수 있다는 점입니다. 처음에 만든 투두 앱이 좀 밋밋하다면 이렇게 이어서 말할 수 있어요.

카테고리별로 할 일을 분류할 수 있게 해줘.
"업무", "개인", "쇼핑" 세 가지 카테고리로.

그러면 Claude가 기존 Artifacts를 업데이트해서 카테고리 선택 기능이 추가된 버전을 보여줍니다. 여기서 또 “다크 모드도 넣어줘”라고 하면 다크 모드가 추가되고, “드래그 앤 드롭으로 순서 바꾸기도 되면 좋겠어”라고 하면 그것도 됩니다.

마치 옆에 앉은 개발자에게 실시간으로 피드백을 주면서 함께 만들어가는 느낌이에요. 매번 처음부터 다시 만들 필요 없이 원하는 부분만 수정할 수 있다는 게 핵심입니다.

실전 활용 예시

Artifacts를 어떤 상황에서 쓸 수 있는지 몇 가지 시나리오를 살펴볼게요.

데이터 시각화

엑셀이나 CSV에 있는 데이터를 시각적으로 보고 싶을 때 Artifacts가 유용합니다.

아래 월별 매출 데이터를 막대 그래프와 꺾은선 그래프로 보여줘.

1월: 1200만원, 2월: 980만원, 3월: 1450만원,
4월: 1100만원, 5월: 1680만원, 6월: 1520만원

Recharts 라이브러리를 활용해서 인터랙티브한 차트가 바로 만들어집니다. 마우스를 올리면 수치가 보이고, 범례를 클릭하면 특정 데이터를 토글할 수도 있어요. 보고서에 넣을 차트가 급하게 필요할 때 따로 시각화 도구를 찾아 헤맬 필요가 없습니다.

프로토타이핑

새 서비스의 UI를 빠르게 잡아보고 싶을 때도 좋습니다.

중고거래 앱의 상품 목록 페이지를 만들어줘.
카드 형태로 상품 이미지, 이름, 가격, 위치를 보여주고,
상단에 검색바와 카테고리 필터가 있으면 좋겠어.

이런 프로토타입을 디자이너와 논의할 때 “이런 느낌으로 만들면 어때요?”라고 보여줄 수 있습니다. Figma를 열고 프레임을 잡는 것보다 훨씬 빠르게 동작하는 프로토타입을 뽑아낼 수 있죠.

학습 도구

프로그래밍 개념을 공부할 때 인터랙티브한 시각화를 만들면 이해하는 데 큰 도움이 돼요.

정렬 알고리즘 시각화를 만들어줘.
버블 정렬, 선택 정렬, 퀵 정렬을 선택할 수 있고,
각 단계마다 어떤 요소가 비교되고 교환되는지 애니메이션으로 보여줘.

이렇게 하면 알고리즘이 실제로 동작하는 과정을 한 단계씩 눈으로 따라갈 수 있는 시각화 도구가 만들어져요. 교과서에서 읽기만 하는 것보다 훨씬 직관적으로 이해됩니다.

미니 게임

가볍게 게임도 만들 수 있습니다.

벽돌 깨기 게임을 만들어줘.
패들은 마우스로 조작하고, 벽돌은 여러 줄로 배치해줘.
점수와 남은 생명도 표시해줘.

이 정도 프롬프트면 실제로 플레이할 수 있는 벽돌 깨기 게임이 나옵니다. 상용 게임 수준까지는 아니어도, “이런 게임을 만들어보고 싶다”는 아이디어를 검증하거나 프로그래밍의 재미를 느끼기에는 충분해요.

MCP 연동으로 확장하기

2026년 1월부터 Artifacts에 MCP(Model Context Protocol) 연동이 추가됐습니다. 이전까지 Artifacts는 외부 세계와 단절된 샌드박스에서만 동작했는데, MCP를 통해 외부 서비스와 소통할 수 있게 된 거예요.

예를 들어 Google Calendar MCP 서버를 연결하면 Artifacts 안에서 직접 일정을 조회하고 추가할 수 있습니다. Asana나 Slack 같은 도구도 마찬가지고요. Anthropic이 공식으로 제공하는 MCP 서버뿐 아니라 직접 만든 MCP 서버도 연결할 수 있습니다.

이 MCP Apps라는 확장 기능 덕분에 MCP 서버가 인터랙티브한 UI 컴포넌트를 Artifacts 안에 직접 렌더링할 수 있게 됐어요. 프로젝트 관리 보드나 분석 대시보드 같은 복잡한 인터페이스도 대화 안에서 바로 띄울 수 있다는 얘기입니다.

알아두면 좋은 제약사항

Artifacts가 만능은 아닙니다. 몇 가지 제약이 있어서 미리 알아두면 실망을 줄일 수 있어요.

우선 Artifacts는 브라우저의 샌드박스 환경에서 프론트엔드 코드만 실행합니다. 서버 사이드 코드를 돌리거나 데이터베이스에 연결하거나 외부 API를 직접 호출하는 건 안 돼요. Node.js 코드도 실행할 수 없습니다. 그래서 풀스택 애플리케이션을 Artifacts만으로 만드는 건 무리가 있습니다.

또한 결과물을 배포하거나 호스팅하는 기능이 없습니다. Artifacts는 어디까지나 미리보기(preview) 용도예요. 만든 걸 실제 서비스로 내보내려면 코드를 다운로드해서 직접 프로젝트에 통합해야 합니다. Publish 기능으로 공개 링크를 생성할 수는 있지만, 이건 공유용이지 프로덕션 배포와는 거리가 멀어요.

그리고 단일 파일로 제한됩니다. 여러 파일로 나뉜 프로젝트 구조를 만들 수 없기 때문에, 복잡한 애플리케이션은 결국 한 파일에 모든 컴포넌트를 담아야 해요.

Artifacts를 로컬에서 실행하기

Artifacts에서 만든 결과물이 마음에 들어서 실제 프로젝트로 가져가고 싶다면 어떻게 할까요?

가장 간단한 방법은 Artifacts 패널의 다운로드 버튼을 눌러 .tsx 파일을 받는 겁니다. 이 파일을 기존 React 프로젝트에 넣으면 바로 동작해요.

좀 더 편한 방법도 있습니다. claude-artifact-runner라는 오픈소스 프로젝트를 사용하면 Artifacts 환경과 동일한 라이브러리(shadcn/ui, Tailwind, Recharts 등)가 미리 세팅된 React 앱 골격을 제공해줍니다.

git clone https://github.com/claudio-silva/claude-artifact-runner.git
cd claude-artifact-runner
npm install && npm run dev

이렇게 개발 서버를 띄운 뒤, src/artifact-component.tsx 파일에 Claude가 생성한 코드를 붙여넣으면 됩니다. Artifacts에서 보던 것과 동일한 환경이라 별도의 설정 없이 바로 렌더링돼요.

더 나은 결과를 얻는 팁

Claude에게 프롬프트를 줄 때 몇 가지 요령이 있습니다.

구체적으로 설명할수록 좋습니다. “폼 만들어줘” 대신 “이메일과 비밀번호 입력 필드가 있고, 이메일 형식 검증과 비밀번호 8자 이상 체크를 하는 로그인 폼을 만들어줘”처럼 말하면 원하는 결과에 가까운 결과물이 나와요.

한 번에 다 요구하기보다 단계적으로 접근하는 게 효과적입니다. 처음에 기본 구조를 잡고, 그다음에 디자인을 다듬고, 마지막으로 세부 기능을 추가하는 식으로 나눠서 요청하면 결과물의 완성도가 올라가요.

디버깅이 필요하면 Claude에게 상태 값을 UI에 표시해달라고 요청하는 것도 방법입니다. 전통적인 개발 환경처럼 console.log를 찍어볼 수는 없으니까, “현재 상태를 화면 하단에 JSON으로 보여줘”라고 하면 뭐가 잘못됐는지 파악하기 쉬워져요.

GPT의 Custom GPT와 비교하면?

OpenAI의 Custom GPT도 맞춤형 AI를 만들 수 있는 기능이죠. 두 기능은 방향이 좀 달라요.

Custom GPT는 특정 역할과 지식을 가진 AI 어시스턴트를 만드는 데 초점이 있어요. “React 코드 리뷰 전문가” 같은 맞춤형 AI를 만들어서 GPT Store에 공유할 수 있습니다. 반면 Artifacts는 실시간으로 동작하는 결과물을 생성하는 데 집중합니다. 코드를 써주는 게 아니라 코드를 실행해서 보여주는 거죠.

어떤 걸 써야 할지는 목적에 따라 다릅니다. 반복적으로 같은 종류의 작업을 해야 한다면 Custom GPT가 낫고, 빠르게 눈에 보이는 결과물을 만들어야 한다면 Artifacts가 맞아요.

마치며

Artifacts는 “코드를 작성하는” 경험이 아니라 “아이디어를 실현하는” 경험에 가깝습니다. 프로그래밍을 모르는 사람도 원하는 도구를 말로 설명해서 만들 수 있고, 개발자도 프로토타이핑 속도를 크게 높일 수 있어요. MCP 연동까지 더해지면서 외부 서비스와 연결된 더 실용적인 앱도 가능해졌고요.

물론 프론트엔드 전용이라는 한계가 있고 프로덕션 배포에 바로 쓸 수는 없지만, 아이디어를 빠르게 검증하거나 누군가에게 보여줄 데모를 뚝딱 만들기에는 이만한 도구가 없습니다.

Anthropic의 AI 도구에 관심이 있다면 Claude 관련 글도 함께 살펴보세요. 디자인과 슬라이드 제작에 특화된 Claude Design도 비슷한 맥락에서 유용합니다. MCP가 궁금하다면 Model Context Protocol 소개 글에서 자세한 내용을 확인할 수 있습니다.