클로드 아티팩트 정리: AI 앱을 만들면 요금은 누가 내나 (2026)
아티팩트는 “코드가 옆 창에 뜨는 기능”으로만 알려져 있는데, 실제로 흥미로운 건 다른 데 있다 — AI 기능이 들어간 아티팩트를 남에게 공유했을 때 요금을 누가 내는가. 이 구조를 알면 아티팩트를 배포 수단으로 볼 수 있게 된다. 공식 문서 기준으로 정리했다.
아래 내용은 Anthropic 공식 지원 문서와 claude.com 블로그를 2026-07-28에 확인한 값이다. 아티팩트는 기능이 빠르게 붙는 영역이라 설정 직전에 재확인하는 편이 안전하다.
아티팩트가 정확히 뭔가
채팅 흐름과 분리된 창에 표시되는, 독립적이고 재사용 가능한 산출물이다. 판단 기준은 두 가지 — 분량(대략 15줄 이상)과 재사용 가능성(나중에 수정하거나 다시 쓸 만한 것).
자동으로 아티팩트가 되는 유형:
| 유형 | 예 |
|---|---|
| 문서 | 마크다운·일반 텍스트 |
| 코드 | 스크립트, 함수, 설정 파일 |
| HTML 웹사이트 | 단일 파일 웹페이지 |
| SVG 이미지 | 아이콘, 도형 |
| 다이어그램 | 플로차트, 구조도 |
| React 컴포넌트 | 인터랙티브 UI |
짧은 스니펫은 아티팩트가 되지 않는다. “아티팩트가 안 뜬다”는 문제의 절반은 내용이 짧아서다.
채팅 텍스트로는 못 하는 것
아티팩트가 별도 창인 이유가 있다. 텍스트 출력에는 없는 기능이 붙는다.
| 기능 | 설명 |
|---|---|
| 인라인 편집 | ”Edit with Claude”로 해당 부분만 수정 |
| 버전 관리 | 반복 수정한 이력 사이를 오갈 수 있음 |
| 상태 저장 | 상태를 가진 앱, 20MB 한도 (Pro 이상) |
| MCP 연결 | 외부 서비스 연동 (Pro 이상) |
| 내보내기 | 파일로 다운로드 |
| 리믹스 | 남이 공개한 아티팩트 코드를 복사해 원본 손대지 않고 발전 |
MCP를 아티팩트에 붙일 수 있다는 점이 의외로 큰데, MCP 설정 자체는 클로드 MCP 연결하기에 따로 정리해뒀다.
핵심: 요금을 쓰는 사람이 낸다
여기가 이 글의 본론이다. 아티팩트 안에서 Claude를 호출하는 “AI 앱”을 만들어 공유하면, 요금 구조가 이렇게 된다.
사용자의 API 사용량은 그들의 구독에서 차감되고, 만든 사람은 그들의 사용량에 대해 아무것도 내지 않는다.
이게 왜 중요한지는 일반적인 AI 서비스 배포와 비교하면 드러난다.
| 직접 만들어 배포 | AI 아티팩트 공유 | |
|---|---|---|
| API 키 | 내가 발급·관리 | 불필요 |
| 사용자 인증 | 내가 구현 | 사용자의 Claude 계정 |
| 서버·배포 | 내가 준비 | 불필요 (링크 하나) |
| 사용자가 쓴 요금 | 내가 부담 | 사용자 부담 |
직접 배포하면 사용자가 늘어날 때마다 내 API 비용이 늘어난다. 그래서 무료로 뿌리기 어렵다. 아티팩트는 그 부담이 사용자에게 넘어가므로, 쓰는 사람이 많아져도 내 비용이 늘지 않는다.
정확히 해두자. 내가 만들고 테스트하는 동안의 사용량은 내 플랜에서 빠진다. 남이 쓸 때만 그쪽으로 넘어간다. 그리고 Team·Enterprise에서 조직 내부에 공유하면 구성원이 쓸 때 만든 사람에게 추가 비용이 발생하지 않는다.
내 플랜 사용량 구조가 어떻게 되는지는 Pro와 Max 요금제 글에, API를 직접 쓸 때의 단가는 API 요금 글에 정리해뒀다.
만드는 법
claude.ai에서
특별한 설정이 필요 없다. 충분히 긴 내용을 요청하면 알아서 아티팩트로 만든다. 안 된다면 설정 > Capabilities에서 “코드 실행 및 파일 생성”이 켜져 있는지 확인하자. 조직 계정이라면 관리자가 조직 설정 > Capabilities에서 막아둔 경우도 있다(소유자 권한 필요).
Free 플랜부터 쓸 수 있다. 상태 저장과 MCP 연결만 Pro 이상이다. 무료 플랜에 그 외에 뭐가 들어있는지는 무료로 어디까지 되나에 정리해뒀다.
실제로 만들어보기 — 자체 완결 HTML
아티팩트가 어떤 형태여야 하는지는 코드로 보는 게 빠르다. 외부 파일을 하나도 안 부르는 단일 HTML이면 된다. 이 계산기는 실제로 브라우저에 띄워 값을 검증한 것이다:
<!doctype html>
<meta charset="utf-8" />
<title>토큰 비용 계산기</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 480px; margin: 2rem auto; }
label { display: block; margin: .75rem 0 .25rem; font-size: .9rem; color: #555; }
input, select { width: 100%; padding: .5rem; font-size: 1rem; box-sizing: border-box; }
output { display: block; margin-top: 1.5rem; font-size: 1.6rem; font-weight: 700; }
</style>
<h1>Claude 토큰 비용 계산기</h1>
<label>모델</label>
<select id="model">
<option value="5,25">Opus 5 ($5 / $25)</option>
<option value="2,10">Sonnet 5 도입가 ($2 / $10)</option>
<option value="1,5">Haiku 4.5 ($1 / $5)</option>
</select>
<label>입력 토큰</label>
<input id="inTok" type="number" value="5000" min="0" />
<label>출력 토큰</label>
<input id="outTok" type="number" value="1000" min="0" />
<label>호출 횟수</label>
<input id="calls" type="number" value="1" min="1" />
<output id="result"></output>
<script>
const $ = (id) => document.getElementById(id);
function calc() {
const [inRate, outRate] = $("model").value.split(",").map(Number);
const cost =
((+$("inTok").value * inRate + +$("outTok").value * outRate) / 1e6) *
+$("calls").value;
$("result").textContent = "$" + cost.toFixed(4);
}
document.querySelectorAll("select, input").forEach((el) =>
el.addEventListener("input", calc)
);
calc();
</script>
Opus 5로 5,000/1,000 토큰 1건이면 $0.0500, 1,000건이면 $50.0000이 나온다. API 요금 글의 계산과 같은 값이다.
여기서 지켜야 하는 규칙이 아티팩트의 성격을 그대로 보여준다. 이 파일은 CDN 스크립트도, 외부 폰트도, fetch도 쓰지 않는다. 계산이 전부 브라우저 안에서 끝난다. 외부 API를 못 부른다는 제약 때문인데, 뒤집어 보면 이 제약을 지키는 종류의 도구는 배포 인프라 없이 링크 하나로 뿌릴 수 있다는 뜻이다.
공유하려면 Publish를 눌러야 한다
이걸 모르면 “만들었는데 공유가 안 된다”가 된다. 대화 중에 만든 아티팩트는 자동으로 공개되지 않는다. 아티팩트를 열고 Publish를 눌러야 내 아티팩트 섹션에 추가되고 공유할 수 있는 상태가 된다.
Claude Code에서
개발자에게는 이쪽이 더 유용하다. 세션에서 시각적인 걸 요청하면 된다:
- “이 PR을 설명하는 아티팩트 만들어줘”
- “서드파티 의존성과 라이선스를 정리한 아티팩트로 만들어줘”
- “Terraform에서 클라우드 리소스 구조를 아티팩트로 그려줘”
핵심은 세션 컨텍스트 전체(코드베이스, 커넥터, 대화 내용)를 재료로 쓴다는 점이다. 데이터를 따로 연결해줄 필요가 없다. 공유 링크가 생기고, 갱신하면 같은 URL로 반영되며 버전 이력이 남는다.
단 제약이 뚜렷하다:
- 기본적으로 작성자에게만 비공개
- 조직의 인증된 구성원만 열람 가능
- 공개로 전환 불가
- Claude Team·Enterprise 조직 대상 베타
즉 Claude Code 아티팩트는 팀 내부 문서·대시보드용이고, 외부 공개 배포 수단이 아니다. 외부에 보여줄 거라면 claude.ai 쪽 Publish 경로를 써야 한다.
제약
| 제약 | 내용 |
|---|---|
| 외부 API 호출 | 직접 호출 불가 |
| Claude 호출 | 텍스트 기반 completion 형태 |
| 상태 저장 | 20MB, Pro 이상 |
| Claude Code 아티팩트 | 조직 전용, 공개 불가 |
외부 API를 직접 못 부른다는 게 가장 큰 제약이다. 외부 데이터가 필요하면 MCP 연결(Pro 이상)을 경유해야 한다.
[확인 필요] AI 아티팩트 최초 공개 시점의 안내에는 “영구 저장 없음”이 제약으로 적혀 있었는데, 현재 지원 문서에는 20MB 상태 저장이 기능으로 올라와 있다. 그 사이에 추가된 것으로 보이지만, 정확히 어떤 형태의 상태 저장이 어디까지 되는지는 실제로 만들어보고 확인하는 편이 안전하다.
스킬·MCP와 뭐가 다른가
세 개가 헷갈리기 쉬운데 역할이 완전히 다르다.
| 무엇인가 | 누가 쓰나 | |
|---|---|---|
| MCP | 외부 시스템으로 가는 통로 | Claude가 도구를 호출 |
| 스킬 | 그 도구를 쓰는 절차서 | Claude가 절차를 따름 |
| 아티팩트 | Claude가 만든 산출물 | 사람이 열어서 씀 |
앞의 두 개는 Claude를 더 잘 일하게 만드는 입력이고, 아티팩트는 결과물이다. 스킬 구조는 클로드 스킬 정리에 따로 썼다.
정리
| 하려는 일 | 답 |
|---|---|
| 아티팩트가 안 뜸 | 설정 > Capabilities 확인 + 내용이 15줄 이상인지 |
| 공유하기 | 아티팩트 열고 Publish (자동 아님) |
| AI 앱 무료로 배포 | AI 아티팩트 — 사용자가 자기 구독으로 부담 |
| 팀 내부 문서·대시보드 | Claude Code 아티팩트 (조직 전용) |
| 외부 공개 배포 | claude.ai에서 Publish (Claude Code는 공개 불가) |
| 외부 데이터 쓰기 | MCP 연결 경유 (Pro 이상) |
아티팩트를 “코드 미리보기 창”으로만 쓰고 있었다면, 요금 부담이 사용자에게 넘어간다는 한 가지 사실만으로도 쓸 곳이 늘어난다. 배포 인프라 없이 도구를 뿌릴 수 있는 경로이기 때문이다.
자주 묻는 질문
내가 만든 AI 아티팩트를 100명이 쓰면 제 요금이 100배 나오나요?
아니요. 공식 안내 기준으로 사용자의 API 사용량은 그 사용자 본인의 구독에서 빠지고, 만든 사람은 그들의 사용량에 대해 아무것도 내지 않습니다. 다만 본인이 만들고 테스트하는 동안의 사용량은 본인 플랜에서 빠집니다.
아티팩트를 쓰려면 사용자도 Claude 계정이 필요한가요?
네. 사용자는 기존 Claude 계정으로 인증합니다. 그래서 만든 사람이 API 키를 발급하거나 관리할 필요가 없습니다.
아티팩트가 안 만들어지고 채팅에 코드가 그냥 나옵니다.
두 가지를 확인하세요. 첫째, 설정 > Capabilities에서 '코드 실행 및 파일 생성'이 켜져 있는지. 둘째, 내용이 충분히 긴지 — 아티팩트는 대략 15줄 이상의 독립적인 내용에서 생성되므로, 짧은 스니펫은 채팅 안에 그대로 표시됩니다.
Claude Code에서 만든 아티팩트를 외부에 공개할 수 있나요?
아니요. Claude Code 아티팩트는 기본적으로 작성자에게만 비공개이며, 조직의 인증된 구성원만 볼 수 있고 공개로 전환할 수 없습니다. 접근 권한은 관리자가 조직 단위 토글로 제어합니다.