클로드 아티팩트: AI 생성 코드를 만들고 내보내는 완전 가이드

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

claudeartifactsguide

Anthropic의 Claude는 대부분의 AI 챗봇과 차별화되는 기능을 가지고 있습니다: 아티팩트입니다. 이것들은 독립적이고 편집 가능한 단위로 채팅 내에서 실시간으로 렌더링되는 코드, HTML, React 컴포넌트, Mermaid 다이어그램 및 SVG 그래픽의 자체 포함된 조각입니다.

아티팩트를 마스터하면 Claude는 강력한 원샷 프로토타이핑 엔진이 됩니다. 잘못 사용하면 그냥 멋진 코드 블록에 불과합니다. 여기 알아야 할 모든 것이 있습니다.

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

Anthropic은 아티팩트를 “사용자가 수정, 반복하거나 대화 밖으로 가져갈 가능성이 있는 실질적이고 자체 포함된 콘텐츠”로 정의합니다. 여섯 가지 유형이 있습니다:

코드, Python, TypeScript, Rust, Go 등 전체 구문 강조로 표시됩니다.
Markdown 문서, 긴 형식의 콘텐츠, 보고서 및 정제된 초안.
HTML 페이지, 완전한 단일 파일 랜딩 페이지, 대시보드 및 대화형 프로토타입.
React 컴포넌트, 완전히 반응형이며 실시간 렌더링되는 UI 컴포넌트.
Mermaid 다이어그램, 인라인 SVG로 렌더링되는 순서도, ER 다이어그램 및 시퀀스 다이어그램.
SVG 이미지, 텍스트 프롬프트에서 직접 생성되는 벡터 그래픽.

Claude는 길이와 자체 포함 여부에 따라 콘텐츠가 아티팩트가 되어야 하는 시점을 자동으로 결정합니다. 더 많은 제어를 원하시나요? ‘이것을 아티팩트로 만들어 줘’ 또는 ‘이것을 자체 포함 컴포넌트로 생성해 줘’라고 요청하기만 하면 됩니다.

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

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

대화 텍스트와 독립적으로 렌더링됩니다.
Claude에게 “아티팩트를 반복 개선해 줘”라고 요청하여 인라인으로 편집할 수 있습니다.
각 아티팩트는 모든 수정본에서 안정적인 식별자를 유지합니다.

이것은 내보내기 과제를 만듭니다. 내보내기 도구가 단순히 대화를 Markdown으로 덤프하면 아티팩트는 (a) 대화형 형태를 잃은 일반 코드 블록이 되거나 (b) 완전히 사라집니다.

정교한 내보내기 도구는 아티팩트를 일급 시민으로 취급합니다.

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

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, classnames를 통한 Tailwind, lucide-react 아이콘)에서 import할 수 있습니다. 내보내기는 JSX 소스를 보존합니다. 로컬에서 실행하는 사람은 동일한 종속성을 구성해야 합니다.

ChatExport AI는 React 아티팩트에 대한 ZIP 내보내기 내에 README.md를 포함하여 필요한 종속성과 아티팩트를 즉시 실행하는 Vite + React 프로젝트를 스캐폴딩하는 방법을 보여주는 시작 스니펫을 문서화합니다.

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

SVG로 내보낸 Mermaid 다이어그램은 완전히 자체 포함되어 있으며 인터넷 연결 없이 모든 브라우저에서 열립니다. .mmd 소스 파일을 사용하면 나중에 다이어그램을 편집하고 다시 렌더링할 수 있습니다.

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

가장 빠른 결과를 제공하는 워크플로는 다음과 같습니다.

Claude에게 프롬프트하여 프로토타입을 React 아티팩트로 구축하도록 합니다. 인라인으로 2-3회 반복하여 완성하세요.
대화를 ZIP으로 내보냅니다. 기록은 디자인 결정 사항을 캡처합니다. 아티팩트 파일은 즉시 실행 가능합니다.
아티팩트를 프로덕션 Vite 프로젝트로 가져옵니다. 나열된 종속성을 설치합니다. 컴포넌트는 수정 없이 실행됩니다.
프롬프트 스타일 주석을 적절한 JSDoc으로 교체합니다. 테스트를 추가합니다. 배포합니다.

초기 프롬프트에서 로컬 실행까지 총 시간: 약 5분. 내보내기는 “Claude가 이것을 구축했다”와 “이것이 내 저장소에 있다” 사이의 간격을 메워줍니다.

시도해보기

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

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