- 아티팩트를 사용할 시기 결정
- 아티팩트 생성, 업데이트, 공유
- 더 풍부한 페이지를 위한 프롬프팅 패턴 적용
- 시각적 디자인 개선으로 아티팩트가 제품 브랜딩과 일치하도록 설정
- 페이지 제약 및 가용성 요구사항 이해
- 아티팩트 비활성화 또는 조직의 아티팩트 관리
아티팩트를 사용할 시기
Claude가 생성한 출력이 터미널 텍스트로는 부적절한 경우 아티팩트를 사용하십시오. 즉, 한 줄씩 읽는 것보다 보고 상호작용하기가 더 쉬운 출력입니다. Claude는 코드베이스와 연결된 도구를 통해 가져오는 데이터를 포함하여 세션이 도달할 수 있는 모든 것에서 페이지를 구축하므로, 페이지는 설명하는 데 여러 문단이 필요한 것들을 표시할 수 있습니다. 예를 들어 Claude에 다음을 요청하십시오:- 주석이 달린 diff로 풀 요청을 검토자에게 설명
- 세션이 이미 가져온 데이터에서 대시보드 렌더링
- 여러 디자인 또는 구현 옵션을 나란히 배치
- 긴 작업이 실행되는 동안 채워지는 조사 타임라인 유지
- Slack에 출력을 붙여넣는 대신 팀원에게 링크 전송
아티팩트가 아닌 것
아티팩트는 작업의 캡처이지 애플리케이션이 아닙니다. 백엔드가 없는 하나의 자체 포함 페이지이므로 양식 입력을 저장하거나, 보기 시간에 API를 호출하거나, 여러 경로를 제공할 수 없습니다. 백엔드가 있는 호스팅된 내부 도구의 경우 자신의 인프라에 배포하십시오. 전체 제한 사항 목록은 페이지 제약을 참조하십시오.아티팩트 생성
Claude는 출력이 페이지에 적합할 때 자동으로 아티팩트를 게시하거나 직접 요청할 수 있습니다. 요청하려면 원하는 기능이나 시각적 출력을 일반 언어로 설명하십시오. 좋은 후보는 텍스트로 읽는 것보다 보기가 더 쉬운 모든 것입니다. 예를 들어 주석이 달린 diff, 차트 또는 비교할 옵션 집합입니다. 아래 프롬프트는 두 가지 예입니다. 더 많은 패턴은 빌드할 수 있는 것을 참조하십시오.Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai와 같은 내용이 표시될 수 있습니다. 이미 승인한 아티팩트를 다시 게시하면 다시 묻지 않습니다.
예를 선택하여 게시하십시오. Claude는 URL을 인쇄하고 브라우저가 새 페이지로 열립니다. 터미널에서 언제든지 Ctrl+]를 눌러 가장 최근 아티팩트를 다시 열 수 있습니다.
Claude는 아티팩트의 제목과 브라우저 탭 아이콘용 이모지를 선택합니다. 둘 다 claude.ai의 아티팩트 갤러리와 공유 링크에 나타나므로, 특정 제목이나 아이콘을 원하면 Claude에 사용하도록 요청하십시오.
새 아티팩트가 게시될 때 브라우저가 자동으로 열리지 않도록 하려면 환경에서 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0을 설정하십시오.
Claude가 게시할 수 없다고 응답하거나 링크 없이 로컬 HTML 파일을 작성하면 도구가 세션에 대해 활성화되지 않은 것입니다. 가용성 요구사항을 확인하십시오.
아티팩트 업데이트
Claude에 페이지를 수정하도록 요청하거나 진행 상황을 다시 게시하는 장기 실행 작업을 허용하십시오. Claude는 기본 파일을 편집하고 동일한 URL로 다시 게시합니다.아티팩트 공유
새 아티팩트는 사용자에게만 표시됩니다. 브라우저에서 열고 페이지 헤더의 공유 컨트롤을 사용하여 조직의 특정 사람 또는 모든 사람에게 액세스 권한을 부여하십시오. 헤더는 사용자를 아티팩트의 작성자로 표시하므로 공유하는 모든 사람이 페이지를 게시한 사람을 볼 수 있습니다. 또한 claude.ai/code/artifacts의 갤러리에 링크되어 생성한 모든 아티팩트를 나열합니다. 공유는 조직에서 중지됩니다. 뷰어는 아티팩트를 게시한 동일한 조직의 구성원으로 claude.ai에 로그인해야 하며, 조직 외부에서 볼 수 있도록 하는 옵션이 없습니다. 기본 콘텐츠를 조직 외부의 누군가에게 보내려면 Claude에 HTML 파일을 요청하고 해당 파일을 직접 공유하십시오. 아티팩트는 보기 가능하지만 공동 편집은 불가능합니다. 공유하는 사람들은 게시하는 각 버전을 보지만 페이지를 변경할 수 없습니다. 사용자만이 유일한 작성자입니다.빌드할 수 있는 것
아티팩트는 단일 HTML 페이지이므로 HTML, CSS 및 인라인 JavaScript로 표현할 수 있는 모든 것이 범위 내입니다. 아래 패턴이 가장 자주 나타납니다.변경 사항 설명
diff 또는 디자인 변경을 관련 줄 옆에 주석과 함께 렌더링하는 페이지를 요청하여 검토자가 설명에서 재구성하는 대신 코드 옆에서 추론을 읽을 수 있도록 하십시오.대안 비교
한 페이지에 여러 변형을 요청하여 서로 평가할 수 있도록 하십시오. 이는 레이아웃, 복사, API 모양 또는 구현 계획에 적합합니다.인터랙티브 컨트롤로 조정
조정 중인 것에 바인딩된 슬라이더, 토글 또는 입력 필드를 요청하여 설명하는 대신 값을 직접 탐색할 수 있도록 하십시오.결과를 세션으로 다시 가져오기
아티팩트는 Claude에 다시 전달하는 결정을 위한 경량 편집기로 작동할 수 있습니다. 페이지와 상호작용한 결과가 페이지에 남아 있는 대신 세션으로 흐르도록 터미널에 붙여넣을 수 있는 텍스트를 생성하는 내보내기 컨트롤을 요청하십시오.진행 중인 작업 추적
Claude가 긴 작업이 실행되는 동안 아티팩트를 최신 상태로 유지하도록 요청하여 링크가 있는 모든 사람이 터미널을 읽지 않고도 따라갈 수 있도록 하십시오.시각적 디자인 개선
Claude는 아티팩트를 구축할 때 기본 제공 디자인 기술을 적용하므로 페이지는 추가 프롬프팅 없이 의도적인 팔레트, 타이포그래피 및 레이아웃을 얻습니다. 해당 기술은 또한 자신의 기술을 선택하기 전에 프로젝트의 기존 디자인 시스템을 찾습니다. 아티팩트를 제품 브랜딩과 일치시키려면 Claude가 찾을 수 있는 위치(예: 프로젝트의 CLAUDE.md 또는 저장소의 테마 파일)에 디자인 토큰을 기록하십시오:페이지 제약
각 아티팩트는 하나의 자체 포함 페이지입니다. Claude Code는 게시하는 파일을 HTML 문서 셸로 래핑하고 엄격한 콘텐츠 보안 정책(CSP) 아래에서 제공하며, 이는 페이지가 할 수 있는 것을 형성합니다.| 제약 | 효과 |
|---|---|
| 외부 요청 없음 | CSP는 다른 호스트에서 로드된 스크립트, 스타일시트, 글꼴 및 이미지와 fetch, XHR 및 WebSocket 호출을 차단합니다. Claude는 CSS 및 JavaScript를 인라인하고 이미지를 데이터 URI로 포함하여 페이지가 외부 요청 없이 렌더링되도록 합니다. |
| 백엔드 없음 | 아티팩트는 정적 페이지입니다. 양식을 통해 제출된 데이터를 저장하거나, 뷰어를 자체 인증하거나, 보기 시간에 API를 호출할 수 없습니다. |
| 단일 페이지 | 상대 링크는 페이지와 함께 배포된 것이 없기 때문에 해결되지 않습니다. 다중 섹션 콘텐츠의 경우 Claude는 별도 파일 대신 페이지 내 앵커를 사용합니다. |
| 소스 파일 유형 | 게시된 파일은 .html, .htm 또는 .md여야 합니다. Markdown 파일은 스타일이 지정된 HTML로 렌더링됩니다. |
| 렌더링된 크기 | 렌더링된 페이지는 16 MiB 이하여야 합니다. 큰 포함된 이미지는 게시가 크기로 인해 실패할 때 일반적인 원인입니다. |
- 포함된 래스터 이미지보다 다이어그램에 SVG 또는 HTML 및 CSS를 선호합니다.
- 필요하지 않은 상호작용을 생략합니다.
- 페이지가 전체를 인라인하는 대신 큰 데이터 세트를 요약하도록 합니다.
가용성
아티팩트는 아래의 모든 조건이 필요합니다. 하나가 충족되지 않으면 Claude는 로컬 HTML 파일을 작성하거나 게시할 수 없다고 말합니다.| 요구사항 | 사용 가능한 경우 |
|---|---|
| 플랜 | Team 또는 Enterprise. Team 플랜에서는 아티팩트가 기본적으로 켜져 있습니다. Enterprise 플랜에서는 관리자가 claude.ai 관리 설정에서 활성화합니다. |
| 인증 | /login으로 claude.ai에 로그인했습니다. API 키, 게이트웨이 토큰 또는 클라우드 공급자 자격증명을 사용하는 세션은 게시할 수 없습니다. |
| 모델 공급자 | Anthropic API. Amazon Bedrock, Google Cloud Vertex AI 또는 Microsoft Foundry에서는 사용할 수 없습니다. |
| 조직 정책 | 고객 관리 암호화 키(CMEK), HIPAA 및 Zero Data Retention이 조직에 대해 활성화되지 않습니다. |
| 표면 | Claude Code CLI 또는 Claude 데스크톱 앱 버전 1.13576.0 이상. Agent SDK, GitHub Action 및 MCP 서버 컨텍스트에서 기본적으로 꺼져 있으며 CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC이 설정된 경우입니다. |
아티팩트 비활성화
조직의 설정에 관계없이 자신의 세션에 대해 아티팩트를 끄려면 다음 중 하나를 사용하십시오:조직의 아티팩트 관리
Team 및 Enterprise 플랜의 관리자는 claude.ai 관리 설정에서 아티팩트를 제어합니다. 아티팩트 콘텐츠는 Anthropic 운영 인프라에 저장되며 게시 조직의 인증된 구성원에게만 표시됩니다.아티팩트 활성화 또는 비활성화
전체 조직에 대해 아티팩트를 활성화하거나 비활성화하려면 설정 > Claude Code > 기능으로 이동하여 아티팩트 토글을 사용하십시오. 역할 기반 액세스 제어가 있는 Enterprise 플랜에서는 추가로 아티팩트를 특정 역할로 범위 지정할 수 있습니다. 설정 > 역할로 이동하여 역할을 편집하고 Claude Code 그룹 아래에서 아티팩트 권한을 설정하십시오.보존 정책 설정
아티팩트가 자동 삭제 전에 유지되는 기간을 설정하려면 설정 > 데이터 및 개인정보 보호 제어로 이동하십시오. 작성자에게만 비공개인 아티팩트와 공유된 아티팩트에 대해 별도의 보존 기간을 설정할 수 있습니다.감사 로그 검토
아티팩트 게시, 공유 및 삭제는 각각 조직의 감사 로그에claude_artifact_* 이벤트 유형 아래에 나타나며, 이는 claude.ai 대화에서 생성된 아티팩트에 사용되는 동일한 제품군입니다.
뷰어 도메인 허용 목록
claude.ai의 뷰어는 샌드박스된*.claudeusercontent.com 원본에서 각 아티팩트를 로드합니다. 조직이 아웃바운드 네트워크 액세스를 제한하는 경우 claude.ai와 함께 해당 도메인을 허용 목록에 추가하십시오. 전체 목록은 네트워크 액세스 요구사항을 참조하십시오.
Compliance API를 사용하여 아티팩트 나열 및 삭제
Compliance API는 조직의 아티팩트를 나열하고, 특정 버전의 콘텐츠를 검색하고, 아티팩트를 삭제하는 엔드포인트를 제공합니다:| 메서드 | 엔드포인트 |
|---|---|
GET | /v1/compliance/code/artifacts |
GET | /v1/compliance/code/artifacts/{artifact_id}/versions/{version_id} |
DELETE | /v1/compliance/code/artifacts/{artifact_id} |
관련 리소스
- 아티팩트와 쌍을 이루는 프롬프팅 패턴 및 워크플로우 찾아보기
- 재사용하는 아티팩트 프롬프트를 기술로 변환하여 명령으로 호출할 수 있도록 하기
- MCP 서버 연결하여 Claude가 라이브 데이터를 아티팩트로 가져올 수 있도록 하기