Anthropic의 두 기능이 이제 모두 "artifacts"라는 이름을 쓰지만, 작동 방식은 전혀 다릅니다. 하나는 채팅 창 안에서 렌더링되고, 다른 하나는 터미널에서 실제 웹 주소를 발행합니다. 둘을 혼동하면 애초에 찾던 위치에 나타날 리 없는 출력을 디버깅하느라 오후를 통째로 날리기 쉽습니다.
무엇이 다른가: Claude.ai의 분할 화면 렌더러와 Claude Code의 게시 출력
Claude.ai 채팅 artifact는 앱 안의 분할 패널이고, Claude Code artifact는 비공개로 공유 가능한 claude.ai URL입니다. 같은 단어지만, 트리거와 허용 타입, 샌드박스 규칙이 서로 다른 두 표면입니다. 채팅 버전은 2024년 중반부터 존재했습니다 ; Claude Code 버전은 2026년 6월 18일 v2.1.178–v2.1.183 릴리스에 걸쳐 출시되었습니다 .
채팅 artifact는 "Code" 탭과 실시간 "Preview" 탭이 있는 사이드 패널을 열고, HTML 페이지, React/JSX 컴포넌트, SVG, Mermaid 다이어그램, Markdown, 일반 코드 스니펫이라는 여섯 가지 고정 출력 타입을 렌더링합니다 . 사용자의 브라우저 샌드박스에서 로컬로 실행되며, 북마크할 수 있는 주소를 만들지는 않습니다.
Claude Code artifact는 정반대로 작동합니다. Claude가 프로젝트 안에 .html, .htm, 또는 .md 파일을 작성하고, 이를 HTML 셸로 감싼 뒤, 세션이 계속되는 동안 제자리에서 업데이트되는 비공개 claude.ai URL로 게시합니다 . 그 URL은 앱 안의 패널이 아니라, 실제로 공유 가능한 페이지입니다.
서드파티 가이드는 이 둘을 자주 섞어 설명하는데, 디버깅할 때 특히 문제가 됩니다. 공유 가능한 링크를 요청했는데 미리보기 패널이 나왔다면 채팅 렌더러를 쓰고 있는 것이고, 인라인 React 샌드박스를 기대했는데 URL 프롬프트가 나왔다면 Claude Code에 있는 것입니다. 지금 어느 표면을 쓰고 있는지 알아야 적용되는 규칙도 알 수 있습니다.
두 표면에서 지원되는 타입: 무엇이 렌더링되고 무엇이 안 되는가
두 표면은 서로 다른 입력을 받으며, 대부분의 가이드는 바로 이 지점에서 틀립니다. Albato의 artifacts 가이드에 따르면 Claude.ai 채팅 렌더러는 분할 패널 미리보기에서 HTML 페이지(text/html), React 컴포넌트(application/vnd.ant.react, 즉 .jsx), SVG 그래픽(image/svg+xml), Mermaid 다이어그램(application/vnd.ant.mermaid), Markdown 문서라는 다섯 가지 콘텐츠 타입을 실시간 렌더링합니다. 반면 Claude Code는 공식 문서 기준으로 .html, .htm, .md 세 가지 소스 타입만 받으며, Markdown은 스타일이 적용된 HTML로 렌더링합니다.
핵심 차이는 실행 여부입니다. 채팅 렌더러에서는 HTML, React, SVG, Mermaid가 실시간으로 렌더링되지만, Python, SQL, 셸 코드는 실행되지 않습니다. 문법 강조가 적용된 복사 가능한 블록으로만 표시됩니다 . 채팅 샌드박스에서 실제로 로직을 실행하려면 JavaScript를 내장한 HTML artifact를 요청해야 합니다. 인라인으로 코드를 실행하는 유일한 경로입니다. Claude Code는 언어 문제를 아예 우회합니다. 출력물이 "a single HTML page, so anything you can express in HTML, CSS, and inline JavaScript is in scope"이기 때문입니다 .
| 기능 | Claude.ai 채팅 렌더러 | Claude Code 게시 |
|---|---|---|
| 실시간 렌더링 | HTML, React(.jsx), SVG, Mermaid, Markdown | .html, .htm, .md(Markdown → 스타일 적용 HTML) |
| 코드 실행 | HTML + 인라인 JS만 가능(Python/SQL/셸은 복사 가능하지만 실행되지 않음) | HTML, CSS, 인라인 JS |
| 출력 형태 | 앱 안의 분할 패널 미리보기 | claude.ai URL의 단일 독립 페이지 |
| 크기 제한 | 단일 파일, 문서화된 명시적 상한 없음 | 렌더링 기준 ≤16 MiB |
Claude Code에서는 크기 상한을 주의해야 합니다. 렌더링된 페이지 전체가 16 MiB 이하로 유지되어야 합니다 . CSP가 외부 이미지를 차단하기 때문에 Claude는 래스터 이미지를 데이터 URI로 임베드하며, 그 바이트도 16 MiB 한도에 포함됩니다. 이것이 가장 흔한 크기 제한 실패 원인입니다. Anthropic은 임베드된 래스터 대신 SVG나 HTML/CSS 다이어그램을 선호하고, 큰 데이터셋은 원시 행을 인라인으로 넣기보다 요약하라고 안내합니다 . 각 표면이 어떤 타입을 받는지 알면 토큰을 들여 만들기 전에 무엇이 렌더링될지 판단할 수 있습니다.
Claude Code 아티팩트 실행하기: 프롬프트, 승인, 다시 열기
Claude Code 아티팩트 발행은 프롬프트로 시작되지만, 먼저 사용 자격을 통과해야 합니다. /login으로 시작한 claude.ai 인증 세션, Pro, Max, Team 또는 Enterprise 플랜, 그리고 Claude Code CLI v2.1.183+ 또는 Claude 데스크톱 v1.13576.0+가 필요합니다 . 이 기능은 Anthropic API 제공자에서만 작동합니다. Amazon Bedrock, Google Vertex, Microsoft Foundry에서는 사용할 수 없고, CMEK, HIPAA, Zero Data Retention이 활성화되어 있으면 차단됩니다. API 키, 게이트웨이 토큰, 클라우드 제공자 자격 증명으로 인증한 세션은 아예 발행할 수 없습니다 .
자격을 갖춘 뒤에는 채팅 화면과 Claude Code가 서로 다른 방식으로 실행됩니다. Claude.ai 채팅에서는 출력이 충분히 크고(대략 15줄 이상), 독립적으로 완결되어 있으며, 반복 수정될 가능성이 높을 때 아티팩트가 자동으로 나타납니다. "Build this as an artifact" 또는 "Show me a live preview"처럼 명시적으로 요청할 수도 있습니다 . 아티팩트가 전혀 나타나지 않는다면 Settings → Capabilities → Artifacts에서 활성화하세요 .
Claude Code에서는 자연어로 요청하면 됩니다. "Make an artifact that walks through this PR with the diff annotated inline" 또는 "Build a dashboard of last week's deploy failures by service and keep it updated as you investigate" 같은 프롬프트는 Claude에게 파일을 작성하고 발행하라는 뜻을 전달합니다. 출력이 터미널 텍스트보다 페이지 형태에 가까울 때는 Claude가 스스로 자동 발행하기도 합니다 .
기본 권한에서는 Claude가 새 아티팩트를 처음 발행하기 전에 제목과 원본 파일을 보여주며 승인을 요청합니다. 예를 들어 Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai처럼 표시됩니다. 한 번 승인하면 URL을 출력하고 브라우저를 엽니다. 이미 승인된 아티팩트를 다시 발행할 때는 다시 묻지 않습니다 .
기억해둘 만한 명령은 두 가지입니다. 터미널에서 가장 최근 아티팩트를 다시 열려면 Ctrl+]를 누르고, Claude가 매번 브라우저를 자동으로 여는 것을 막으려면 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0을 설정하세요 . 업데이트도 프롬프트로 진행됩니다. Claude에게 수정해 달라고 요청하면, Claude가 기반 파일을 편집하고 같은 URL에 새 버전을 발행합니다.
가장 흔한 함정은 세션을 넘나들 때 생깁니다. 아티팩트 URL은 그것을 만든 세션에 묶여 있으므로, 다른 세션에서 같은 주소를 업데이트하려면 그 세션에 기존 아티팩트 URL을 전달해야 합니다. 이 단계를 건너뛰면 Claude는 새 URL에 새 아티팩트를 만들고, 원래 페이지는 오래된 상태로 남습니다 .
인라인 CSS, fetch 금지, 래스터보다 SVG: 아티팩트 CSP 다루기
이 오래된 URL 함정은 페이지가 샌드박스 처리되는 방식에서 비롯되는 여러 제약 중 하나입니다. 모든 Claude Code 아티팩트는 외부 스크립트, 스타일시트, 폰트, 이미지, 그리고 fetch, XHR, WebSocket을 포함한 모든 네트워크 호출을 차단하는 엄격한 Content Security Policy 아래에서 실행됩니다 . 페이지가 오프라인에서도 작동하도록 Claude는 모든 CSS와 JavaScript를 인라인으로 넣고 이미지는 data URI로 임베드합니다. 16 MiB 상한에 걸려 실패하는 가장 흔한 원인은 래스터 이미지이므로, Anthropic은 임베드된 래스터 대신 SVG/HTML/CSS 다이어그램을 쓰고, 큰 데이터셋은 그대로 인라인 처리하기보다 요약하라고 권장합니다 .
"아티팩트는 하나의 HTML 페이지이므로 HTML, CSS, 인라인 JavaScript로 표현할 수 있는 것은 모두 범위 안에 있습니다." — Anthropic, Claude Code 문서 (source: code.claude.com/docs/artifacts)
단일 페이지 모델이라는 점은 백엔드가 없다는 뜻이기도 합니다. 폼 제출 저장소도, 여러 라우트도 없으며, 상대 링크도 해석되지 않습니다. 대신 페이지 안 앵커를 사용하세요 . 네트워크 금지 규칙의 유일한 예외는 MCP 커넥터입니다. Claude Code v2.1.209+에서는 커넥터 기반 아티팩트가 뷰어의 own claude.ai 계정 커넥터를 호출할 수 있습니다. 로드 시점, 일정 간격, 또는 새로고침 컨트롤을 통해 호출할 수 있으므로, 두 명의 뷰어가 각자 계정에 따른 서로 다른 데이터를 볼 수 있습니다 . 이전 버전에서는 아티팩트가 발행되기는 하지만, 빌드 중 세션이 수집한 데이터만 포함됩니다.
이 기능을 끄려면 설정에 "disableArtifact": true를 지정하거나, CLAUDE_CODE_DISABLE_ARTIFACT=1을 export하거나, permission-deny 규칙을 추가하면 됩니다 . 발행 흐름을 직접 연결하지 않고도 완성도를 얻고 싶다면 Anthropic-Verified /project-artifact 플러그인을 사용할 수 있습니다. 크롤링 당시 설치 수는 693건이었으며, 탭이 있는 프로젝트 상태 페이지를 생성하고 "refresh the artifact" 요청 시 변경 요약과 함께 같은 URL로 다시 배포합니다 .
실무적인 결론은 이렇습니다. 첫 프롬프트부터 샌드박스를 전제로 설계하세요. SVG 다이어그램, 인라인 데이터, 페이지 안 앵커를 요청하고, 렌더링된 페이지를 16 MiB 아래로 유지하며, 뷰어별 데이터가 정말 필요한 페이지에만 커넥터를 남겨두세요. 그렇게 하면 비공개 claude.ai URL은 조용히 깨지는 페이지가 아니라 오래 유지되고 공유 가능한 화면이 됩니다.
자주 묻는 질문
Claude Code 아티팩트는 Amazon Bedrock이나 Google Vertex에서 작동하나요?
아니요. 아티팩트 게시에는 /login을 통해 claude.ai로 인증된 Anthropic 호스팅 세션이 필요하며, Anthropic API 제공자에서만 실행됩니다. Amazon Bedrock, Google Vertex/Agent Platform, Microsoft Foundry에서는 사용할 수 없습니다 . API 키, 게이트웨이 토큰, 클라우드 제공자 자격 증명을 사용하는 세션은 게시할 수 없고, 조직에서 CMEK, HIPAA, Zero Data Retention이 활성화된 경우에도 이 기능은 차단됩니다 .
아티팩트를 요청했는데 왜 표시되지 않나요?
해결 방법은 어떤 화면을 말하는지에 따라 달라집니다. Claude.ai 채팅 아티팩트라면 Settings → Capabilities → Artifacts에서 기능이 켜져 있는지 확인하세요 . Claude Code 아티팩트라면 CLI v2.1.183 이상인지, 해당 세션이 Pro, Max, Team, Enterprise 중 지원되는 플랜에서 /login으로 인증되었는지, 그리고 CLAUDE_CODE_DISABLE_ARTIFACT가 설정되어 있지 않은지 확인하세요 . 또한 소스가 .html, .htm, .md인지도 확인해야 합니다. 다른 파일 형식은 게시되지 않습니다 .
Claude Code 아티팩트에서 React 컴포넌트를 렌더링하거나 Python을 실행할 수 있나요?
둘 다 불가능합니다. Claude Code 아티팩트는 .html, .htm, .md 소스만으로 만들어지는 단일 HTML 페이지이므로 React 컴포넌트는 지원되지 않습니다. React는 분할 창 샌드박스에서 렌더링되는 별도의 Claude.ai 채팅 아티팩트 유형입니다 . Python은 어느 쪽에서도 실행 환경이 없습니다. 시각적 결과가 아닌 코드는 실행되지 않고, 복사 가능한 구문 강조 코드 블록으로 표시됩니다 . 로직을 실행하려면 HTML 아티팩트 안에 인라인 JavaScript를 넣으세요.
다른 세션에서 Claude Code 아티팩트를 업데이트하려면 어떻게 하나요?
기존 아티팩트 URL을 새 세션에 명시적으로 전달하세요. 업데이트는 프롬프트로 진행됩니다. Claude에게 수정을 요청하면, Claude가 기반 파일을 편집하고 같은 URL에 새 버전을 다시 게시합니다 . 그 URL이 없으면 새 세션은 원본을 참조할 수 없어 새 주소에 새 아티팩트를 만듭니다. 이미 승인된 같은 세션 안에서 다시 게시할 때는 승인을 다시 요청하지 않습니다 .
렌더링된 페이지 16MiB 제한에는 무엇이 포함되고, 어떻게 피할 수 있나요?
렌더링된 페이지는 16MiB 이하여야 하며, 이 제한에는 단일 파일 안에 인라인으로 들어간 모든 것이 포함됩니다. CSS, JavaScript, 데이터 URI로 인코딩된 모든 이미지가 여기에 해당합니다 . 래스터 이미지는 이 제한을 가장 빨리 초과하게 만드는 요소이므로, Anthropic은 임베드된 PNG나 JPEG 파일보다 SVG 또는 HTML/CSS 다이어그램을 권장하고, 큰 데이터셋은 원시 행을 그대로 인라인으로 넣기보다 요약하라고 권장합니다 . 첫 프롬프트부터 이런 제약을 고려해 설계하면 페이지를 용량 한도 안에 유지할 수 있습니다.
이 글이 도움이 되셨다면, 새 글이 올라올 때마다 이메일로 받아보세요.
