클로드 아티팩트 — 완벽 가이드

Umbrabits · 2026년 5월 3일 · 3 분 분량

claudeartifactsguide

Anthropic의 Claude는 대부분의 다른 AI 챗봇에는 없는 기능을 제공합니다: 아티팩트(artifacts). 독립적인 코드, HTML, React 컴포넌트, Mermaid 다이어그램, SVG가 채팅 내에서 각각의 단위로 인라인 렌더링됩니다.

잘 사용하면 Claude는 일회용 프로토타이핑 도구로 변신합니다. 잘못 사용하면 그냥 예쁜 코드 블록에 불과합니다. 여기에 완벽 가이드가 있습니다.

아티팩트가 실제로 무엇인가

Anthropic의 문서에서는 아티팩트를 “사용자가 대화 밖에서 수정하거나 반복하거나 가져갈 가능성이 있는 실질적이고 독립적인 콘텐츠”라고 설명합니다. 실제로는 여섯 가지 유형을 다룹니다:

코드 — Python, TypeScript, Rust, Go 등. 구문 강조와 함께 렌더링됩니다.
Markdown 문서 — 긴 분량의 산문, 보고서, 초안.
HTML 페이지 — 단일 파일 랜딩 페이지, 대시보드, 프로토타입.
React 컴포넌트 — 완전한 반응성을 갖춘 실시간 렌더링 컴포넌트.
Mermaid 다이어그램 — 플로차트, ER 다이어그램, 시퀀스 다이어그램. 인라인 SVG로 렌더링됩니다.
SVG 이미지 — 프롬프트에서 생성된 벡터 그래픽.

Claude는 길이와 자체 포함성에 따라 언제 아티팩트로 만들지 결정합니다. “이것을 아티팩트로 만들어 줘” 또는 “독립적인 컴포넌트로”라고 말하면 결정을 유도할 수 있습니다.

아티팩트가 내보내기에 중요한 이유

아티팩트는 고유한 생애 주기를 가집니다:

대화 산문과 별도로 렌더링됩니다.
인라인으로 편집할 수 있습니다(Claude에게 “아티팩트를 반복해서 개선해 줘”라고 요청).
편집 내내 안정적인 식별자를 가집니다.

이로 인해 내보내기가 까다로워집니다. 내보내기 도구가 대화를 단순히 Markdown으로 덤프하면 아티팩트는 (a) 렌더링 가능한 형태를 잃은 인라인 코드 블록, 또는 (b) 완전히 누락된 상태로 도착합니다.

좋은 내보내기 도구는 아티팩트를 일급 객체로 취급합니다.

ChatExport AI가 아티팩트를 처리하는 방법

내보내기당 선택하는 세 가지 모드:

모드 1: 인라인 (PDF, Word 기본값)

아티팩트 콘텐츠는 나타난 위치의 대화 기록에 인라인으로 포함됩니다. 코드는 구문 강조를 유지합니다. Mermaid 다이어그램은 임베디드 SVG로 렌더링됩니다. HTML 페이지는 렌더링된 페이지의 스크린샷으로 렌더링됩니다.

가장 적합한 대상: 대화를 읽기만 하려는 사람에게 내보내기를 전달할 때.

모드 2: 별도 파일 (ZIP, Markdown 기본값)

아티팩트는 독립 파일로 저장됩니다:

코드 → chat/<artifact-name>.py (또는 .ts, .rs 등)
HTML → chat/<artifact-name>.html
React → chat/<artifact-name>.jsx
Mermaid → chat/<artifact-name>.mmd 추가로 chat/<artifact-name>.svg
SVG → chat/<artifact-name>.svg

대화 기록은 각 아티팩트를 상대 링크로 참조합니다.

가장 적합한 대상: 코드를 실행/수정하려는 개발자에게 아티팩트를 전달할 때.

모드 3: 둘 다

ZIP 모드는 두 가지를 모두 포함합니다: 읽기용으로 인라인된 대화 기록, 실행용으로 별도 파일의 아티팩트.

가장 적합한 대상: 보관용. 6개월 후에 두 가지 뷰를 모두 갖고 있으면 좋을 것입니다.

아티팩트 주의점

여러 수정본

아티팩트를 반복해서 개선하면(“버튼을 더 크게 만들어 줘”) Claude는 아티팩트를 제자리에서 업데이트합니다. 이전 수정본은 대화 보기에서 사라지지만 아티팩트의 기록 패널을 통해 검색할 수 있습니다.

ChatExport AI는 내보내기 시점에 각 아티팩트의 현재 버전을 캡처합니다. 모든 수정본을 원한다면 내보내기 전에 Claude에게 “아티팩트의 v1, v2, v3을 보여 줘”라고 요청하세요. 그러면 수정 기록이 별도의 코드 블록으로 내보내집니다.

미완성 아티팩트

내보내기를 누를 때 Claude가 스트리밍 중이면 부분적인 아티팩트가 그대로 포함됩니다. 스트리밍 표시기가 끝날 때까지 기다린 후 내보내세요.

React 아티팩트 의존성

React 아티팩트는 소규모 허용 목록(React, Tailwind(클래스명), lucide-react 아이콘)에서 import할 수 있습니다. 내보내기는 JSX 소스를 캡처합니다. 사용자가 로컬에서 실행하려면 동일한 의존성을 설정해야 합니다.

ChatExport AI의 내보내기는 React 아티팩트에 필요한 의존성을 명시한 README.md를 ZIP 안에 포함하며, 해당 아티팩트를 실행할 수 있는 Vite + React 프로젝트를 스캐폴드하는 방법을 보여주는 스니펫도 함께 제공합니다.

Mermaid 다이어그램 오프라인 렌더링

Mermaid 다이어그램의 SVG 내보내기는 완전히 독립적입니다 — 인터넷 없이도 모든 브라우저에서 열 수 있습니다. .mmd 소스 내보내기를 통해 나중에 편집하고 다시 렌더링할 수 있습니다.

워크플로: Claude 프로토타입에서 배포된 코드까지

제게 가장 효과적이었던 흐름:

Claude에게 프롬프트를 주어 React 아티팩트로 프로토타입을 구축하게 합니다. 인라인으로 2~3회 반복 개선합니다.
대화를 ZIP으로 내보냅니다. 대화 기록은 설계 결정을 설명하고, 아티팩트 파일은 실행 가능합니다.
아티팩트를 실제 Vite 프로젝트에 드롭합니다. 나열된 의존성을 추가합니다. 컴포넌트는 프로젝트에서 그대로 실행됩니다.
프롬프트 스타일의 산문 주석을 실제 JSDoc으로 교체합니다. 테스트를 추가합니다. 배포합니다.

프롬프트에서 로컬 실행까지 총 소요 시간: 약 5분. 내보내기가 이 과정을 빠르게 만듭니다 — “Claude가 만들었다”와 “내 저장소에 있다” 사이의 다리 역할을 합니다.

시도해 보세요

Claude를 엽니다. “사용자 가입 흐름의 Mermaid 다이어그램인 독립적인 HTML 페이지를 만들어 줘”라고 요청합니다. 아티팩트가 렌더링되면 ChatExport AI를 통해 대화를 ZIP으로 내보냅니다. ZIP에는 대화 기록과 독립적인 .html, .mmd 소스, 렌더링된 .svg가 포함되어 있습니다.

이것이 완전한 Claude 아티팩트 워크플로입니다.