Claude Code 아티팩트: 세션 결과물을 비공개 페이지로 낸다

Claude Code 공식 문서 가운데 아티팩트 페이지를 정리했다. 아티팩트는 Claude Code가 세션 안에서 만든 결과물을 claude.ai의 비공개 URL에 라이브 인터랙티브 웹 페이지로 게시하는 기능이다. 브라우저에서 열어 두면 세션이 이어지는 동안 같은 자리에서 갱신되고, 페이지 헤더에서 다른 사람에게 공유할 수 있다. 문서 자체에는 발행일이 없어서, 아티팩트 위에서 동작하는 /design 스킬이 리서치 프리뷰로 발표된 2026년 8월 17일(미국 시간 기준, 한국 시간으로는 18일 새벽)을 이 글의 날짜로 잡았다.

언제 쓰고, 무엇이 아닌가

터미널 텍스트로 한 줄씩 읽는 것보다 눈으로 보고 상호작용하는 편이 나은 결과물이 아티팩트의 자리다. 문서가 드는 예는 다음과 같다.

주석이 달린 diff로 풀 리퀘스트를 리뷰어에게 설명한다
세션이 이미 가져온 데이터로 대시보드를 그린다
여러 디자인이나 구현 선택지를 나란히 놓고 비교한다
긴 작업이 실행되는 동안 채워지는 조사 타임라인을 유지한다
Slack에 출력을 붙여 넣는 대신 링크 하나를 보낸다
MCP 커넥터로 새 데이터를 받아 오는 상태 보드를 게시한다

반대로 아티팩트는 애플리케이션이 아니다. 백엔드가 없는 자체 포함 페이지 한 장이라서 폼 입력을 저장하거나 여러 경로를 제공할 수 없다. 누군가 페이지를 볼 때 외부 데이터로 가는 길은 MCP 커넥터 호출 하나뿐이다. 백엔드가 필요한 사내 도구라면 자기 인프라에 배포하라고 안내한다.

만들고, 고치고, 다시 연다

Claude가 출력이 페이지에 어울린다고 판단하면 스스로 게시하고, 직접 요청해도 된다. 요청은 일반 문장으로 하면 된다.

이 PR을 인라인 주석이 달린 diff로 설명하는 아티팩트를 만들어 줘.

지난주 배포 실패를 서비스별로 보여 주는 대시보드 아티팩트를 만들고, 조사하는 동안 계속 갱신해 줘.

Claude는 프로젝트 안에 HTML이나 Markdown 파일을 쓴 다음 게시한다. 새 아티팩트를 처음 게시할 때는 권한을 묻고, 이미 승인한 아티팩트를 다시 게시할 때는 묻지 않는다. 승인하면 URL을 출력하고 브라우저가 새 페이지를 연다. 터미널에서는 Ctrl+]로 가장 최근 아티팩트를 언제든 다시 열 수 있고, 브라우저가 자동으로 열리는 것이 싫으면 환경 변수 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0을 둔다. 제목과 브라우저 탭 아이콘용 이모지는 Claude가 고르는데, 갤러리와 공유 링크에 그대로 나가므로 원하는 것이 있으면 요청하면 된다.

수정은 같은 파일을 고쳐 같은 URL에 다시 게시하는 방식이다. 페이지를 열어 둔 모든 사람이 제자리에서 갱신을 보고, 게시 한 번이 버전 하나가 되어 헤더의 공유 컨트롤에서 뷰어가 볼 버전을 고를 수 있다. 다른 세션에서 기존 아티팩트를 고치려면 URL을 함께 건네야 한다. URL이 없으면 새 세션은 항상 새 아티팩트를 만든다.

Claude가 게시할 수 없다고 답하거나 링크 없이 로컬 HTML 파일만 남기면, 그 세션에서 도구가 켜져 있지 않다는 뜻이다. 아래 가용성 조건을 확인하면 된다.

공유 범위는 플랜이 정한다

새 아티팩트는 처음에는 만든 사람에게만 보인다. 브라우저에서 헤더의 공유 컨트롤로 범위를 넓히고, 헤더에는 작성자가 표시되어 받는 사람이 누가 게시했는지 알 수 있다. 만든 아티팩트 전체는 claude.ai/code/artifacts 갤러리에 모인다.

조직 안에서: Team과 Enterprise 플랜에서는 조직의 특정 사람이나 조직 전체에 접근 권한을 줄 수 있다. 뷰어는 조직 구성원으로 claude.ai에 로그인해서 본다
공개로: 로그인 없이 누구나 열 수 있는 링크를 낸다. Pro와 Max 플랜에서는 공개 링크가 유일한 공유 방법이다. Team과 Enterprise 플랜에서는 Owner가 조직 설정에서 공개 공유를 켜기 전까지 꺼져 있다

공유받은 사람은 기본적으로 뷰어라서 버전을 볼 수는 있지만 페이지를 바꿀 수 없다. Team과 Enterprise 플랜에서는 공유 대화 상자에서 역할을 편집자로 바꿀 수 있다. 편집자는 자기 세션의 Claude에게 아티팩트 URL을 주고 고치게 하는 방식으로 새 버전을 게시한다.

라이브 데이터는 보는 사람의 커넥터로 들어온다

아티팩트는 누군가 볼 때마다 MCP 커넥터를 호출할 수 있어서, 만든 세션의 스냅샷이 아니라 현재 데이터를 보여 줄 수 있다. Claude Code v2.1.209 이상이 필요하고 Pro, Max, Team, Enterprise 플랜에서 쓸 수 있다.

Build a dashboard artifact of our open pull requests that pulls the live list through my GitHub connector when the page loads.

작동 방식에서 눈여겨볼 점이 셋 있다.

호출할 수 있는 커넥터는 게시할 때 선언한다. 페이지는 선언에 없는 커넥터를 부를 수 없다. claude.ai 계정의 커넥터만 대상이고, .mcp.json처럼 Claude Code에 설정한 로컬 MCP 서버는 페이지를 만드는 동안 데이터를 줄 수는 있어도 게시된 페이지가 호출할 수는 없다
호출은 게시한 사람이 아니라 보는 사람의 계정으로 나간다. 같은 대시보드를 열어도 두 사람이 다른 데이터를 볼 수 있다. 페이지는 어느 쪽의 자격 증명도 보지 않고, claude.ai가 대신 호출한다. 첫 호출 전에 보는 사람에게 권한을 묻고, 거부하거나 커넥터를 연결하지 않은 사람도 라이브 구간만 빈 채로 페이지를 볼 수 있다. 메시지 게시나 이슈 업데이트처럼 부작용이 있는 동작도 버튼을 누른 사람의 계정으로 실행된다
응답은 보는 사람의 브라우저에 캐시된다. 다시 열면 캐시로 먼저 그리고 새 결과로 갱신한다. 페이지는 로드 시점에 데이터를 가져오고, 주기적으로 혹은 새로 고침 컨트롤로 다시 가져올 수 있다

커넥터를 부르는 아티팩트는 어떤 플랜에서도 공개 링크로 공유할 수 없다. Team과 Enterprise에서는 조직 안에서만 공유하고, Pro와 Max에서는 공개 링크가 유일한 공유 수단이므로 결국 비공개로 남는다. 공유할 계획이면 라이브 구간마다 어떤 커넥터가 필요한지 적은 폴백 메시지를 넣어 두라고 권한다. 라이브 구간이 비어 보인다면 보는 사람이 커넥터를 연결하지 않았거나, 권한 요청을 거부했거나, 조직에서 아티팩트 커넥터 호출이 꺼져 있는 경우다.

문서가 드는 다섯 가지 패턴

아티팩트는 HTML 한 장이라서 HTML, CSS, 인라인 JavaScript로 표현되는 것은 다 만들 수 있다. 문서는 자주 나타나는 패턴 다섯을 프롬프트 예와 함께 든다.

변경 설명: diff나 디자인 변경을 관련 줄 옆에 주석과 함께 렌더링해서 리뷰어가 코드 옆에서 근거를 읽게 한다
대안 비교: 레이아웃, 문구, API 형태, 구현 계획을 한 페이지에 여러 변형으로 놓고 서로 평가한다
인터랙티브 컨트롤로 조정: 이징 곡선이나 지속 시간처럼 조정 중인 값에 슬라이더나 토글을 묶어 직접 탐색한다
결과를 세션으로 되돌리기: 트리아지 보드처럼 페이지에서 조작한 결과를 “프롬프트로 복사” 버튼으로 텍스트로 뽑아 터미널에 붙인다
진행 상황 추적: 마이그레이션 계획을 체크리스트로 바꾸고 작업이 진행되는 동안 항목을 체크해서, 링크가 있는 사람은 누구나 터미널 없이 따라온다

디자인은 기본 스킬이 맡고, 디자인 토큰은 저장소에 적어 둔다

Claude Code v2.1.183부터는 아티팩트를 만들 때 기본 제공 디자인 스킬이 붙어서, 별도 프롬프트 없이도 의도된 팔레트와 타이포그래피, 레이아웃을 얻는다. 그 스킬은 자체 선택을 하기 전에 프로젝트의 기존 디자인 시스템을 먼저 찾는다. 제품 브랜딩과 맞추려면 CLAUDE.md나 저장소의 테마 파일처럼 Claude가 찾을 수 있는 곳에 디자인 토큰을 적어 두면 된다.

## Design system

- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius

우선순위는 프롬프트가 가장 높고, 그다음이 디자인 시스템, 마지막이 Claude 자신의 선택이다. 형식은 예시일 뿐이고 색상, 글꼴, 간격이 명확히 나열되어 있으면 된다.

페이지 제약과 토큰 비용

게시한 파일은 HTML 문서 셸로 감싸져 엄격한 콘텐츠 보안 정책(CSP) 아래에서 제공된다. 그래서 페이지가 할 수 있는 일이 정해진다.

제약	효과
외부 요청 없음	다른 호스트의 스크립트, 스타일시트, 글꼴, 이미지와 `fetch`, XHR, WebSocket이 막힌다. Claude는 CSS와 JavaScript를 인라인하고 이미지를 데이터 URI로 넣는다. 커넥터 호출만 예외인데, 페이지가 claude.ai에 넘기고 claude.ai가 네트워크 호출을 대신 수행한다
백엔드 없음	정적 페이지라서 폼 데이터를 저장하거나 뷰어를 직접 인증할 수 없다
단일 페이지	함께 배포되는 파일이 없어 상대 링크가 풀리지 않는다. 여러 절이 필요하면 페이지 안 앵커를 쓴다
소스 파일 유형	`.html`, `.htm`, `.md`만 게시할 수 있고, Markdown은 스타일이 적용된 HTML로 렌더링된다
렌더링 크기	16 MiB 이하여야 한다. 크게 포함된 이미지가 게시 실패의 흔한 원인이다

아티팩트도 다른 응답처럼 출력 토큰을 쓰고, 같은 내용을 터미널 텍스트로 내는 것보다 더 많이 쓴다. 인라인 CSS와 인터랙션용 JavaScript, 특히 데이터 URI로 넣은 이미지가 비용의 대부분이다. 줄이려면 래스터 이미지보다 SVG나 HTML/CSS로 다이어그램을 그리고, 필요 없는 인터랙션은 빼고, 큰 데이터 세트는 전체를 인라인하지 말고 요약하게 한다.

가용성 조건과 끄는 방법

아래 조건이 모두 맞아야 한다. 하나라도 빠지면 Claude는 로컬 HTML 파일을 쓰거나 게시할 수 없다고 말한다.

플랜: Pro, Max, Team, Enterprise. Pro와 Max에서는 본인에게만 비공개이고 관리자 관리가 붙지 않는다. Team은 기본으로 켜져 있고, Enterprise는 Owner가 관리 설정에서 켠다
인증: /login으로 로그인한 claude.ai 계정 세션이어야 한다. API 키, 게이트웨이 토큰, 클라우드 공급자 자격 증명으로 실행되는 세션은 게시할 수 없다. Claude Tag 세션은 에이전트 신원으로 이미 로그인되어 있다
모델 공급자: Anthropic API만 가능하다. Amazon Bedrock, Google Cloud의 Agent Platform, Microsoft Foundry에서는 쓸 수 없다
조직 정책: 고객 관리 암호화 키(CMEK), HIPAA, Zero Data Retention이 켜진 조직에서는 쓸 수 없다
표면: Claude Code CLI 2.1.183 이상 또는 Claude 데스크톱 앱 1.13576.0 이상. Agent SDK, GitHub Action, MCP 서버 컨텍스트에서는 기본으로 꺼져 있고, CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC이 설정되어 있어도 꺼진다

조직 설정과 무관하게 내 세션에서만 끄려면 설정 파일에 "disableArtifact": true를 두거나, 환경 변수 CLAUDE_CODE_DISABLE_ARTIFACT=1을 주거나, 권한 규칙 permissions.deny에 Artifact를 넣는다.

조직 관리자가 제어하는 것

Team과 Enterprise 관리자는 claude.ai 관리 설정에서 아티팩트를 통제한다. 콘텐츠는 Anthropic 운영 인프라에 저장되고, 공개 공유되지 않는 한 게시한 조직의 인증된 구성원에게만 보인다.

켜고 끄기: 설정 > Claude Code > 기능의 아티팩트 토글로 조직 전체를 켜고 끈다. 역할 기반 접근 제어가 있는 Enterprise에서는 역할별로 권한을 좁힐 수 있다
커넥터 호출: 아티팩트 토글과 별개인 아티팩트 커넥터 활성화 토글이 설정 > 기능 아래에 있다. claude.ai 대화에서 만든 아티팩트의 커넥터 호출도 같은 토글이 관리하기 때문에 Claude Code 메뉴가 아니라 그 자리에 있다
공개 공유: 기본은 꺼짐이고 아티팩트 토글 아래 외부 공유로 켠다. 다시 끄면 각 아티팩트의 대상 설정은 그대로 둔 채 기존 공개 링크만 막히고, 다시 켜면 접근이 다시 허용된다
보존 기간: 설정 > 데이터 및 개인정보 보호 제어에서 비공개 아티팩트와 공유된 아티팩트에 각각 다른 보존 기간을 둘 수 있다
감사 로그: 게시, 공유, 삭제가 claude_artifact_* 이벤트로 남는다. claude.ai 대화의 아티팩트와 같은 이벤트군이다
도메인 허용 목록: 뷰어는 샌드박스된 *.claudeusercontent.com 원본에서 아티팩트를 불러오므로, 아웃바운드를 제한하는 조직은 claude.ai와 함께 이 도메인을 허용해야 한다
Compliance API: /v1/compliance/code/artifacts 아래 엔드포인트로 조직의 아티팩트를 나열하고, 특정 버전의 콘텐츠를 받고, 삭제할 수 있다

영문 문서에는 더 있다

같은 페이지의 영문판은 한국어판보다 절이 여럿 많다. /artifacts 명령으로 내 아티팩트와 공유받은 아티팩트를 나열해 열거나 링크를 복사하거나 현재 세션에 붙이는 기능(v2.1.208 이상), 조직 안에서 공유한 아티팩트에 달린 댓글을 Claude가 읽고 답하는 기능(v2.1.221 이상, 자동 응답은 v2.1.228 이상), 그리고 /design 스킬로 아트보드 캔버스를 그리는 절(v2.1.234 이상)이 그렇다. 끄는 방법도 영문판은 "enableArtifact": false가 기본이고 "disableArtifact": true는 폐기된 키로 적혀 있다. 한국어판에는 이 내용이 아직 반영되지 않은 것으로 보인다.

읽고 남는 것

아티팩트의 정체는 세션이 쓴 HTML 파일 한 장을 같은 URL에 계속 다시 게시하는 것이고, 나머지는 그 한 장을 어디까지 열어 둘지 정하는 규칙이다. 그래서 백엔드가 없다는 제약을 받아들이는 편이 빠르고, 살아 있는 데이터가 필요하면 페이지가 아니라 보는 사람의 커넥터가 가져오게 설계해야 한다. 공유 범위와 커넥터 호출과 공개 링크가 플랜과 관리자 토글로 갈리는 부분은 팀에 도입하기 전에 한 번 표로 정리해 두면 좋겠다.

원문: 아티팩트로 세션 출력 공유 (Claude Code Docs. 문서에 발행일이 없어 /design 스킬이 발표된 2026-08-17을 미국 시간 기준으로 글의 날짜로 정했다)