클로드 코드 Artifacts: 세션 결과물을 링크 하나로 공유하기

터미널에서 클로드 코드로 장애 원인을 한참 파헤쳤는데, 결과를 팀에 공유하려니 막막했던 적 있으신가요? 표를 마크다운으로 옮기고 스크린샷을 찍어 슬랙에 긴 글을 올렸는데 정작 동료는 “그래서 어느 서비스가 문제라는 거야?”라고 되묻습니다 😅 터미널 텍스트는 만든 사람에게는 충분해도 받는 사람에게는 읽기 힘든 매체거든요.

Anthropic이 2026년 6월 클로드 코드에 추가한 Artifacts는 이 간극을 메우는 기능입니다. 세션에서 만든 결과물을 claude.ai에 웹 페이지로 게시해 링크 하나로 공유하고 세션이 이어지는 동안 그 페이지가 제자리에서 갱신됩니다. 이 글에서는 Artifacts가 무엇이고 어떤 결과물에 어울리는지, 만들고 공유하고 댓글을 받는 흐름은 어떤지, 그리고 MCP 커넥터(connector)로 살아 있는 데이터를 보여주는 방법까지 살펴보겠습니다.

클로드 코드 Artifacts가 뭔가요?

Artifact는 클로드 코드가 세션에서 만든 결과물을 claude.ai의 비공개 URL에 게시한 대화형 웹 페이지입니다. 브라우저에서 열어 두면 세션이 진행되는 동안 페이지가 제자리에서 바뀌고 페이지 헤더의 Share로 다른 사람에게도 보여줄 수 있어요.

이름이 같아서 헷갈리기 쉬운데, claude.ai 채팅의 Artifacts와는 별개 기능입니다. 채팅의 Artifacts는 대화창 옆 패널에 코드나 문서를 띄우는 기능이고, 클로드 코드의 Artifacts는 세션 밖으로 나가는 독립된 페이지예요. 감사 로그에서 같은 claude_artifact_* 이벤트군을 쓸 만큼 뿌리는 같지만 진입점과 용도가 다릅니다.

Artifacts는 2026년 6월 18일 Anthropic이 공식 발표한 기능으로, 클로드 코드 2.1.183 이상에서 쓸 수 있습니다. 그 밖에도 몇 가지 조건이 맞아야 해요. Pro, Max, Team, Enterprise 플랜이어야 하고 /login으로 claude.ai 계정에 로그인한 세션이어야 합니다. API 키나 게이트웨이 토큰으로 접속한 세션, Bedrock이나 Google Cloud, Microsoft Foundry를 거치는 세션에서는 게시할 수 없어요. 조직이 CMEK, HIPAA, Zero Data Retention을 켜 두었다면 역시 쓸 수 없습니다. 클로드에게 게시를 요청했는데 로컬 HTML 파일만 만들고 링크를 주지 않는다면 이 조건 중 하나가 빠진 겁니다.

어떤 결과물에 어울릴까요?

기준은 단순합니다. 한 줄씩 읽는 것보다 눈으로 보고 만져 보는 게 나은 결과물이면 Artifact가 맞습니다. 공식 문서가 드는 예를 보면 감이 옵니다.

PR 리뷰어에게 변경 이유를 diff 옆에 주석으로 달아 보여주는 워크스루(walkthrough) 페이지, 세션이 이미 끌어온 데이터로 만든 대시보드, 설정 패널 레이아웃 네 가지를 나란히 놓고 각각의 트레이드오프를 한 줄씩 적은 비교 페이지, 긴 작업이 도는 동안 채워지는 조사 타임라인 같은 것이죠. 이징(easing) 곡선과 지속 시간을 슬라이더로 조절하며 애니메이션을 바로 확인하는 페이지처럼 값을 말로 설명하는 대신 직접 만져 보게 하는 용도로도 좋습니다.

제가 특히 흥미롭게 본 패턴은 결과를 세션으로 되돌리는 방식입니다. 열린 이슈를 Now, Next, Later, Cut 열로 드래그하는 분류(triage) 보드를 만들면서 “Copy as prompt” 버튼을 함께 달아 달라고 하면, 페이지에서 정리한 순서를 텍스트로 복사해 터미널에 붙여 넣을 수 있어요. Artifact가 결과 보고서에 그치지 않고 가벼운 편집기 역할을 하는 셈이죠.

이 PR을 설명하는 artifact를 만들어줘. diff를 렌더링하고 여백에 주석을 달고,
발견한 문제는 심각도별로 색을 구분해줘.

반대로 안 맞는 경우도 분명합니다. Artifact는 백엔드가 없는 단일 페이지라 여러 라우트를 가진 내부 도구를 호스팅할 수는 없어요. 그런 건 직접 인프라에 배포하는 게 맞습니다.

만들고 갱신하기

클로드는 결과물이 페이지에 어울린다고 판단하면 알아서 게시하기도 하고, 우리가 “artifact로 만들어줘”라고 직접 요청할 수도 있습니다. 위치를 따로 지정하지 않으면 프로젝트 밖 임시 디렉토리에 HTML이나 마크다운 파일을 쓴 다음 게시해요.

새 Artifact를 게시할 때는 세션의 권한 모드를 탑니다. Auto 모드에서는 분류기(classifier)가 게시를 검토하므로 프롬프트 없이 게시될 수 있고, Manual이나 Accept edits 모드에서는 이런 식으로 물어봅니다.

Claude wants to publish deploy-failures.html, uploading it to claude.ai
(Anthropic's servers) to host as the page "Deploy failures by service",
private to you until you share it

한 번 승인하면 이후 재게시는 묻지 않습니다. 다만 페이지에 커넥터 호출이나 파일 다운로드 같은 런타임 기능을 새로 선언할 때, 그 사이에 공개 링크로 공유했을 때, 특정 사람이나 조직에 최신 버전이 보이도록 공유했을 때는 다시 물어봐요. 공유 범위가 넓어진 페이지를 조용히 덮어쓰지 않도록 하는 장치입니다.

첫 게시가 끝나면 터미널에 URL이 찍히고 브라우저가 자동으로 열립니다. 제목과 이모지는 클로드가 고르는데, 갤러리와 공유 링크에 표시되니 원하는 게 있으면 프롬프트에 적어 주세요. 브라우저가 자동으로 열리는 게 싫다면 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0을 설정하면 되고, 세션의 마지막 Artifact를 다시 열고 싶을 때는 Ctrl+]를 누르면 됩니다. 원격 제어로 폰에서 보낸 프롬프트라면 세션이 도는 컴퓨터에서 탭이 열리지 않아요.

갱신은 그냥 수정을 요청하면 됩니다. 클로드가 파일을 고쳐 같은 URL에 다시 게시하고 페이지를 열어 둔 사람은 그 자리에서 갱신된 내용을 봅니다. 게시할 때마다 버전이 하나씩 쌓이고, 페이지 헤더의 Share에서 뷰어(viewer)에게 보여줄 버전을 고를 수 있어요.

요약 차트 아래에 리전별 분석을 추가하고 다시 게시해줘.

다른 세션에서 갱신하려면 URL을 알려주거나 /artifacts로 첨부해야 합니다. 둘 다 없으면 새 세션은 새 Artifact를 만들어 버려요. /artifacts는 내가 만든 것과 공유받은 것을 모두 나열하는 명령인데, 하나를 고른 뒤 o로 브라우저에서 열고 c로 링크를 복사하고 Enter로 현재 세션에 첨부합니다. 목록을 claude.ai 계정에서 읽어오기 때문에 /clear 뒤나 새 세션에서도 링크를 되찾을 수 있습니다.

공유하고 함께 편집하기

새 Artifact는 나만 볼 수 있습니다. 공유하려면 브라우저에서 페이지를 열고 헤더의 Share를 씁니다. 헤더에는 내가 만든 모든 Artifact를 모아 놓은 갤러리(claude.ai/code/artifacts) 링크도 있어요.

공유 범위는 플랜에 따라 갈립니다. Team과 Enterprise에서는 조직의 특정 구성원이나 조직 전체에 권한을 줄 수 있고, 뷰어는 조직 구성원으로 claude.ai에 로그인해야 페이지를 볼 수 있습니다. 공개 링크는 로그인 없이 누구나 열 수 있는데, Pro와 Max에서는 이게 유일한 공유 방법이고 Team과 Enterprise에서는 Owner가 조직 설정에서 켜기 전까지 꺼져 있어요. 조직 안에서 공유하면 제목 메뉴에 게시자 이름이 보이고, 로그인하지 않고 공개 링크를 연 사람에게는 이름 대신 “Content is user-generated and unverified.”라는 표시가 나갑니다.

다만 공개 링크로 열어도 되는 건 보기까지입니다. 할 일 목록처럼 뷰어가 입력한 내용을 저장하는 페이지나 커넥터를 부르는 페이지는 로그인 없이 열면 내용은 보이지만 조작하려는 순간 Claude 계정이 필요하다는 안내가 뜹니다. 무료 계정이면 되니 큰 장벽은 아니지만, 링크만 보내면 누구나 바로 쓸 수 있다고 생각하고 만들었다면 당황할 수 있어요.

공유받은 사람은 기본적으로 뷰어입니다. Team과 Enterprise에서는 공유 다이얼로그에서 역할을 편집자(editor)로 바꿔 함께 편집할 수 있어요. 편집자는 자기 세션에서 URL을 알려주거나 /artifacts로 첨부해 새 버전을 게시하고 페이지를 열어 둔 모두가 그 갱신을 바로 봅니다.

누군가 공유해 준 Artifact를 클로드에게 읽히는 것도 됩니다. 이때 클로드는 남이 쓴 페이지를 WebFetch 도구로 웹 페이지를 읽듯 다룹니다. 원문 대신 요약을 받고, 페이지 안에 적힌 지시문은 따르지 않고 보고만 해요. 전체 소스는 로컬 파일로 따로 저장해 두었다가 편집자로서 재게시할 때처럼 정확한 내용이 필요하면 그때 엽니다.

댓글로 피드백 받기

조직 안에서 공유한 Artifact에는 뷰어가 댓글을 남길 수 있고, 클로드가 그 댓글을 읽고 답할 수 있습니다. Team이나 Enterprise 플랜과 클로드 코드 2.1.221 이상이 필요해요. 공개 링크로 공유한 페이지에는 댓글이 달리지 않습니다.

클로드가 댓글을 읽는 경로는 두 가지입니다. 하나는 우리가 URL을 주며 댓글을 읽어 달라고 하는 것이고, 다른 하나는 편집 권한이 있는 사람이 스레드에서 Send to Claude를 누르거나 @claude를 멘션하는 것입니다. 후자를 스레드 활성화라고 부르는데, 클로드는 활성화된 스레드에만 답하거나 해결 처리할 수 있어요. 나머지 스레드는 사람이 페이지에서 직접 닫을 때까지 열려 있습니다. 답글은 클로드가 나를 거쳐 쓴 것으로 표시돼요.

https://claude.ai/code/artifact/5fbea6f3-... 의 댓글을 읽고
댓글에서 요청한 대로 수정해줘.

2.1.228부터는 세션이 게시한 Artifact를 세션이 살아 있는 동안 계속 지켜봅니다. 편집자가 댓글을 클로드에게 보내면 세션에 바로 도착하고 클로드가 스스로 읽고 답할 수 있어요. 어디까지 알아서 하느냐는 역시 권한 모드가 정합니다. 답글 게시가 승인 없이 가능한 모드라면 클로드가 답하고 필요하면 페이지도 고친 뒤 Auto-replied to comment thread on Artifact: <이름> 같은 알림을 띄웁니다. 승인이 필요한 모드라면 Comments are waiting on Artifact: <이름>을 보여주고 스레드 읽기와 답글 게시를 각각 물어봐요. 계획 모드에서는 계획 모드를 나올 때까지 기다립니다.

한 Artifact에서 한 시간에 댓글 60개를 처리하면 그 뒤로는 자동 답변을 멈추고 대기 알림만 한 번 띄웁니다. 세션이 지켜보는 Artifact는 /tasks에 live-updates 작업으로 나오고, 유휴 프롬프트에서 Ctrl+C를 한 번 누르면 다음 메시지를 보낼 때까지 자동 답변이 멈춥니다. /tasks에서 작업을 정지하면 그 Artifact에는 다시 요청하기 전까지 답하지 않아요.

MCP 커넥터로 살아 있는 데이터 보여주기

Artifact는 게시 시점의 스냅샷에 머물지 않습니다. 2.1.209부터 페이지가 열릴 때마다 MCP 커넥터를 호출해 최신 데이터를 그릴 수 있어요. 프롬프트에 커넥터 이름과 원하는 데이터를 적으면 됩니다.

페이지가 열릴 때 GitHub 커넥터로 열린 PR 목록을 가져와 보여주는
대시보드 artifact를 만들어줘.

여기서 GitHub 커넥터는 claude.ai 계정에 연결한 GitHub MCP 서버를 말합니다. 클로드는 게시할 때 페이지가 호출할 수 있는 커넥터를 선언하고, 페이지는 선언 밖의 커넥터를 부를 수 없습니다. 대상은 claude.ai 계정에 연결된 커넥터뿐이에요. .mcp.json에 등록한 로컬 MCP 서버는 페이지를 만드는 동안 데이터를 공급할 수는 있지만 게시된 페이지가 호출할 수는 없습니다. 페이지는 로드될 때 데이터를 가져오고 주기적으로 또는 새로고침 버튼으로 갱신할 수 있으며, 응답은 뷰어 브라우저에 캐시됩니다.

여기서 중요한 점은 호출 주체입니다. 게시된 페이지가 커넥터를 부를 때는 게시한 사람이 아니라 보는 사람의 계정을 씁니다. 같은 대시보드를 열어도 두 사람이 다른 데이터를 볼 수 있다는 뜻이에요. claude.ai가 첫 호출 전에 뷰어에게 권한을 묻고, 거절하거나 해당 커넥터를 연결하지 않은 뷰어는 라이브 섹션이 빠진 페이지를 봅니다. 이슈를 갱신하거나 메시지를 보내는 액션 버튼도 그 버튼을 누른 사람의 계정으로 실행됩니다. 페이지가 자격 증명을 직접 다루는 일은 없고 claude.ai가 대신 호출해요.

그래서 공유할 페이지라면 라이브 섹션마다 필요한 커넥터 이름을 적은 대체 문구를 넣어 달라고 하는 게 좋습니다. 연결이 없는 뷰어가 빈 화면 대신 무엇을 연결해야 하는지 볼 수 있으니까요. 커넥터를 쓰는 Artifact는 어느 플랜에서도 공개 링크로 공유할 수 없습니다. Team과 Enterprise에서는 조직 안에서 공유하고, Pro와 Max에서는 나만 볼 수 있어요.

공유했는데 뷰어에게 라이브 섹션이 비어 보인다면 원인은 대개 넷 중 하나입니다. 뷰어가 커넥터를 연결하지 않았거나(Settings > Connectors에서 추가 후 새로고침), 권한 요청을 거절했거나(새로고침하면 다시 묻습니다), Owner가 조직 설정에서 Artifact 커넥터를 껐거나, 페이지가 커넥터에 없는 도구 이름을 부르는 경우예요. 마지막 경우는 게시자에게도 빈 섹션으로 보이니, 클로드에게 페이지가 부르는 도구 이름을 고쳐 다시 게시해 달라고 하면 됩니다.

페이지 제약과 파일 다운로드

Artifact는 자기 완결적인 한 페이지이고, 엄격한 콘텐츠 보안 정책(Content Security Policy, 이하 CSP) 아래에서 렌더링됩니다. 무엇을 만들 수 있고 없는지는 여기서 갈려요.

외부 요청부터 보면, 글꼴은 Google Fonts에서만 가져올 수 있고 스크립트는 cdnjs, Tailwind CDN, jQuery CDN, 그리고 jsDelivr의 /npm/ 같은 일부 경로에서만 로드됩니다. 그 밖의 외부 이미지, 스크립트, 스타일시트는 전부 막히고 fetch나 WebSocket도 페이지 자신의 출처와 Google Fonts 호스트로만 나갈 수 있어요. 그래서 클로드는 필요한 라이브러리를 저 CDN에서 불러오고, 나머지 CSS와 JavaScript는 인라인으로 넣고, 이미지는 data URI로 박아 넣습니다. 커넥터 호출은 예외인데, claude.ai가 대신 네트워크 요청을 하기 때문이에요.

상대 링크는 동작하지 않습니다. 페이지 옆에 배포되는 파일이 없으니 여러 섹션이 필요하면 별도 파일 대신 페이지 내 앵커를 씁니다. 게시할 파일은 .html, .htm, .md여야 하고 UTF-8로 디코딩되어야 합니다. 마크다운은 스타일이 입혀진 HTML로 렌더링돼요. 렌더링된 페이지는 16MiB 이하여야 하는데, 크기 제한으로 게시가 실패한다면 대개 큰 이미지가 원인입니다.

다운로드도 CSP의 영향을 받습니다. claude.ai의 뷰어는 페이지가 스스로 시작하는 다운로드를 전부 막기 때문에 data:나 blob: URL로 만든 링크를 눌러도 아무 일도 일어나지 않아요. 표를 CSV로 저장하거나 차트를 PNG로 내려받는 버튼을 원한다면 클로드가 downloads 기능을 선언해서 만들어야 합니다. 이건 claude.ai가 계정별로 켜 주는 런타임 기능이라 클로드가 버튼을 만들기 전에 내 계정에 있는지 확인합니다.

이 표를 CSV 파일로 다운로드하는 버튼을 추가해줘.

한 가지 더, Artifact 생성은 다른 응답과 마찬가지로 출력 토큰을 씁니다. 같은 내용이라도 스타일이 입혀진 페이지가 터미널 텍스트보다 비싸고, 인라인 CSS와 인터랙션용 JavaScript, 특히 data URI 이미지가 주된 비용이에요. 다이어그램은 래스터(raster) 이미지 대신 SVG나 HTML과 CSS로 그리고, 필요 없는 인터랙션은 빼고, 큰 데이터셋은 통째로 넣기보다 페이지에서 요약하게 하면 토큰을 아낄 수 있습니다.

우리 브랜드에 맞추기

클로드는 Artifact를 만들 때 내장 디자인 스킬을 적용합니다. 별도 지시 없이도 팔레트와 타이포그래피, 레이아웃을 나름의 기준으로 고르고 그 전에 프로젝트에 이미 디자인 시스템이 있는지 먼저 찾아봐요. 매번 만드는 페이지가 제품 브랜드와 어긋나지 않게 하려면 디자인 토큰을 클로드가 찾을 수 있는 곳에 적어 두면 됩니다. CLAUDE.md나 저장소의 테마 파일이 좋은 자리예요.

## Design system

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

우선순위는 프롬프트, 디자인 시스템, 클로드 자체 선택 순입니다. 헤딩과 형식은 예시일 뿐이고 색, 글꼴, 간격이 명확히 나열되어 있으면 어떤 형태든 괜찮아요. 글꼴은 Google Fonts에서 불러올 수 있고 다른 서체는 @font-face data URI로 인라인되며, 어느 쪽이든 폴백(fallback) 스택이 함께 들어가 글꼴이 안 떠도 페이지가 깨지지 않습니다.

/design으로 디자인 캔버스 그리기

페이지를 만드는 게 아니라 UI 목업이나 화면 흐름, 랜딩 페이지, 포스터를 그리고 싶다면 /design에 브리프를 붙여 실행합니다. 클로드가 디자인을 아트보드 여러 장으로 그려 한 캔버스에 놓고, 그 캔버스를 Claude Design의 편집기가 실행되는 Artifact로 게시해요. 클로드 코드 2.1.234 이상이 필요하고 Artifacts를 쓸 수 있는 세션이어야 합니다.

/design 모바일 뱅킹 앱의 설정 화면

게시된 캔버스에서 아트보드를 검토하고, 저장이 켜진 계정이라면 요소를 골라 고친 뒤 새 버전으로 저장할 수 있습니다. 아니면 초안을 보고 PNG나 PDF로 내보내는 것까지만 돼요. Claude Design과 무엇이 같고 다른지, 코드베이스의 디자인 시스템을 어떻게 끌어오는지는 Claude Design 글에서 따로 다뤘습니다.

끄기와 조직 관리

조직 설정과 무관하게 내 세션에서만 끄고 싶다면 방법이 넷 있습니다. /config에서 Artifacts 행을 끄면 사용자 설정에 "enableArtifact": false가 기록되고, 이 값을 설정 파일에 직접 적어도 됩니다. 예전 키인 "disableArtifact": true도 아직 동작해요. 환경 변수로는 CLAUDE_CODE_DISABLE_ARTIFACT=1을 쓰고, 권한 규칙으로는 permissions.deny에 Artifact를 추가합니다.

--settings 파일이나 환경 변수로 껐거나 관리자가 관리형 설정에서 껐다면 다른 설정 파일로 되살릴 수 없습니다. 프로젝트의 .claude/settings.json에서 끄는 것도 되는데(2.1.242 이상), 거기서 true로 적는다고 켜지지는 않아요. 참고로 domain: 없는 WebFetch 거부 규칙은 Artifact에 영향을 주지 않고, WebFetch(domain:claude.ai) 규칙만 Artifact 읽기에 적용됩니다.

Team과 Enterprise의 Owner는 claude.ai 관리자 설정에서 조직 전체를 관리합니다. Artifact 내용은 Anthropic이 운영하는 인프라에 저장되고, 공개 공유하지 않는 한 게시 조직의 인증된 구성원만 볼 수 있어요.

• 켜고 끄기: Settings > Claude Code > Capabilities의 Artifacts 토글. Enterprise의 역할 기반 접근 제어에서는 역할별로 권한을 나눌 수 있습니다.
• 커넥터 호출: Settings > Capabilities의 Enable artifact connectors 토글. claude.ai 대화의 Artifact 커넥터도 같은 토글이 담당합니다.
• 공개 공유: Artifacts 토글 아래 External sharing. 기본은 꺼짐이고, 다시 끄면 기존 공개 링크 접근이 막혔다가 켜면 되살아납니다.
• 보존 기간: Settings > Data & privacy controls에서 비공개 Artifact와 공유된 Artifact의 자동 삭제 기간을 따로 정합니다.
• 감사 로그: 게시, 공유, 삭제가 claude_artifact_* 이벤트로 남습니다.
• 네트워크 허용 목록: 뷰어가 *.claudeusercontent.com 샌드박스 출처에서 페이지를 로드하니 claude.ai와 함께 허용해야 합니다. Google Fonts 호스트는 선택이고, CDN 호스트를 막으면 라이브러리에 의존하는 부분이 동작하지 않아요. 막을 때는 조용히 버리기보다 빠르게 거부해야 페이지 첫 렌더링이 지연되지 않습니다.
• Compliance API: GET /v1/compliance/code/artifacts로 목록을, GET .../{artifact_id}/versions/{version_id}로 특정 버전 내용을 조회하고 DELETE .../{artifact_id}로 삭제합니다.

마치며

클로드 코드 Artifacts는 “결과를 어떻게 전달하지?”라는 오래된 문제를 세션 안에서 풀어 줍니다. 터미널 출력을 옮겨 적는 대신 페이지를 게시하고, 링크를 보내고, 댓글로 피드백을 받고, 커넥터로 데이터를 살아 있게 유지하는 흐름이 한 세션에서 이어져요. 처음엔 PR 워크스루나 조사 타임라인처럼 어차피 문서로 만들었을 결과물부터 Artifact로 바꿔 보시길 권합니다. 팀에서 쓰기 시작하면 공유 범위와 커넥터 토글, 보존 기간 같은 조직 설정을 먼저 정해 두는 게 좋고요.

더 자세한 내용은 Claude Code 공식 문서의 Artifacts 페이지를 참고하세요.