Claude Code의 Artifacts: 운영자 가이드

6월 18일, Anthropic은 코딩 세션의 작업물을 실시간으로 공유 가능한 웹 페이지로 변환해 주는 기능인 Claude Code의 Artifacts를 출시했습니다. 이틀 전에는 Claude Design이 대대적인 개편을 거쳤습니다. 여기에는 디자인 시스템 임포트(import), 캔버스 편집, 그리고 디자인과 코드 사이의 간극을 메워주는 /design-sync 명령어가 포함되었습니다. Claude Code의 제작자인 Boris Cherny는 Artifacts를 [

가용성 (Availability): Team 및 Enterprise 플랜에서 Beta 버전으로 제공됩니다. 로그인이 필요합니다 (Claude Code에서 /login 실행). 개인용 (Individual) 플랜은 아직 접근할 수 없습니다.

개인정보 보호 (Privacy): Artifacts는 기본적으로 비공개입니다. 팀원들과 명시적으로 공유해야 하며, 인증된 조직 구성원만 볼 수 있습니다. 관리자(Admins)는 조직 수준의 토글, 역할 기반 스코핑 (role-based scoping), 보존 정책 (retention policies) 및 컴플라이언스 API 가시성을 제어할 수 있습니다.

Claude Code에서 Artifacts를 사용하는 방법

설정은 매우 간단합니다. Team 또는 Enterprise 플랜을 사용 중이라면:

1. 로그인: 아직 로그인하지 않았다면 Claude Code 세션에서 /login을 실행합니다.
2. Artifact 요청: Claude Code에게 시각화하고 싶은 내용을 말합니다 — "테스트 결과 대시보드를 만들어줘", "이 diff에 대한 PR 워크스루 (walkthrough)를 구축해줘", 또는 "방금 변경한 인증 흐름 (auth flow)을 다이어그램으로 그려줘"
3. Claude가 페이지 구축: Claude가 세션 컨텍스트 (session context)를 바탕으로 독립적인 HTML 페이지를 생성합니다.
4. 링크 공유: 페이지 헤더에 있는 공유 버튼을 클릭하여 팀원들이 접근할 수 있도록 합니다.

구성해야 할 별도의 인프라가 없습니다. Docker 컨테이너도 필요 없고, 호스팅 설정도 필요 없습니다. Artifact는 귀하의 조직과 연결된, Anthropic이 호스팅하는 비공개 URL에 저장됩니다.

잘 작동하는 기능

초기 운영자 보고와 VentureBeat의 보도에 따르면:

• PR 리뷰 (PR reviews): 귀하의 브랜치를 클론(clone)하고 싶지 않은 리뷰어가 워크스루, diff, 그리고 근거(rationale)를 한 페이지에서 확인할 수 있습니다.
• 장애 대응 (Incident response): 디버깅을 진행하면서 실시간 장애 페이지를 구축할 수 있습니다. 이해관계자들은 Slack 업데이트를 요청하는 대신 해당 페이지를 지켜볼 수 있습니다.
• 아키텍처 문서화 (Architecture documentation): 오래된 Confluence 페이지가 아니라, 실제로 작업 중인 코드베이스로부터 생성되는 시스템 다이어그램을 제공합니다.
• 스프린트 보고서 (Sprint reports): 세션의 git 컨텍스트에서 추출한 주간 배포 작업 요약본을 제공합니다.

아직은 안 되는 것 (What Doesn't (Yet))

아직은 안 되는 것 (What Doesn't (Yet))

• 공개 공유 불가. Artifacts는 조직(org) 전용입니다. 외부 이해관계자들과 공유하려면 여전히 내보내기(export)가 필요합니다.
• 영구 데이터 연결 불가. 웹 Claude의 2026년 4월 'Live Artifacts'와 달리, Claude Code artifacts는 외부 데이터베이스가 아닌 세션 상태를 반영합니다.
• 팀/엔터프라이즈 전용. Individual 및 Pro 플랜에서는 제공되지 않으며, Anthropic은 확장 시점에 대한 일정을 발표하지 않았습니다.

Claude Design: 이야기의 나머지 절반 (The Other Half of the Story)

Artifacts 출시가 고립되어 이루어진 것은 아닙니다. 이틀 전, Anthropic은 세 가지 기능을 통해 Claude Design을 개편했으며, 이는 Claude Code 워크플로우와 직접 연결됩니다:

1. 디자인 시스템 가져오기 (Design System Imports)

이제 GitHub 리포지토리, 디자인 파일 또는 직접 업로드를 통해 디자인 시스템을 Claude Design으로 가져올 수 있습니다. 한 번 가져오면, Claude Design은 사용자의 컴포넌트를 사용하여 에셋을 생성하고, 출력물을 디자인 시스템과 비교하며, 결과를 보여주기 전에 수정합니다.

2. /design-sync 명령어

이것이 통합 지점입니다. Claude Code 터미널에서 다음을 실행합니다:

/design-sync

이 명령어는 디자인 시스템을 리포지토리로 가져오거나(pulls), 구축한 내용을 다시 Claude Design으로 밀어 넣습니다(pushes). 이 흐름은 양방향으로 작동합니다:

• 디자인 → 코드: Claude Design에서 프로토타입을 시작하고, 이를 Claude Code에 전달합니다.
• 코드 → 디자인: Claude Code에서 구축했지만 시각적 다듬기가 필요한 것이 있나요? 캔버스 편집을 위해 Claude Design으로 다시 밀어 넣으세요.

Engadget은 Anthropic이 동일한 AI 시스템이 디자인과 코드를 모두 처리할 때 그 간극이 사라지도록 베팅하고 있다고 언급했습니다.

3. 캔버스 편집 (Canvas Editing)

사용자는 이제 Claude에게 다시 생성해달라고 요청하지 않고도 Claude Design 캔버스에서 요소를 드래그, 크기 조정 및 정렬할 수 있습니다. 패딩(padding)을 미세하게 조정하거나 레이아웃 순서를 변경하는 것과 같은 작은 시각적 수정 사항의 경우, 모델 호출(model turn)을 낭비하는 대신 직접 편집할 수 있습니다.

운영자 설정 체크리스트 (The Operator's Setup Checklist)

Artifacts를 위한 설정:

• 조직(org)이 Team 또는 Enterprise 플랜을 사용 중인지 확인합니다.
• 각 개발자의 Claude Code 세션에서 /login을 실행합니다.
• 조직 수준의 공유 정책을 수립합니다 (관리자 패널 → Artifacts → 공유 제어).
• Artifact 페이지에 대한 보존 정책(retention policies)을 설정합니다.

/design-sync를 위한 설정:

• 디자인 시스템을 Claude Design으로 가져옵니다 (GitHub 리포지토리 URL → 디자인 시스템 가져오기).
• Claude Code에서 /design-sync를 실행하여 디자인 시스템을 로컬 프로젝트로 가져옵니다.
• 내보내기 대상(PDF, PowerPoint, Adobe, Canva, Lovable, Replit, Vercel, Wix)을 구성합니다.

실제 운영 패턴 (Real-World Operator Patterns)

"말하지 말고 보여주기" 방식의 PR 리뷰. PR(Pull Request) 설명을 작성하는 대신, 코드 리뷰 중에 Artifact를 생성하세요. Artifact에는 차이점(diff), 근거(rationale), 그리고 대화형 다이어그램이 포함됩니다. 리뷰어는 브랜치를 클론(clone)하지 않고도 전체 컨텍스트를 확인할 수 있습니다.

라이브 장애 페이지 (The Live Incident Page). 운영 환경의 문제를 디버깅할 때, 진행 과정에 맞춰 Artifact를 구축하세요. 이해관계자들은 Slack 스레드에 참여하는 대신 Artifact URL을 북마크하여 상황을 파악합니다.

스프린트 가시성 대시보드 (The Sprint Visibility Dashboard). Claude Code가 여러 하위 에이전트(subagents)를 오케스트레이션(orchestrate)한 동적 워크플로 실행이 끝날 때, 각 에이전트가 수행한 작업, 변경된 파일, 통과된 테스트를 요약하는 Artifact를 생성하세요.

디자인 핸드오프 루프 (The Design Handoff Loop). Claude Design에서 시작 → /design-sync → Claude Code에서 빌드 → 리뷰를 위한 Artifact 생성 → 다듬기(polish)를 위해 다시 Claude Design으로 푸시(push). 전체 루프가 하나의 AI 시스템 내부에서 유지됩니다.

에이전트 스택에서의 위치 (Where This Fits in the Agent Stack)

Artifacts와 디자인 동기화(design sync)는 특정 문제에 대한 Anthropic의 해답입니다. 즉, AI 코딩 세션의 결과물이 해당 세션에 참여하지 않은 다른 모든 사람에게는 보이지 않는다는 문제입니다.

Artifacts가 도입되기 전, 운영자 패턴은 다음과 같았습니다: Claude Code가 작업을 수행함 → 개발자가 터미널에서 검토함 → 개발자가 Slack/Notion/Jira에 결과를 작성함. Artifacts는 마지막 단계, 즉 작업 결과물 자체가 커뮤니케이션 산출물(communication artifact)이 되게 함으로써 이 단계를 축소시킵니다.

Boris Cherny의 Fortune 프로필은 맥락을 더해줍니다. Claude Code의 제작자는 한 번에 수만 개의 AI 에이전트(AI agents)를 관리하는 날도 있다고 말합니다. Artifacts와 디자인 동기화(design sync)는 그러한 규모의 운영을 위한 가시성 계층(visibility layer)입니다.

경쟁사들이 (아직) 갖추지 못한 것

Codex, Cursor, Windsurf 모두 에이전트 기반 코딩(agentic coding) 기능을 출시하고 있습니다. 하지만 이들 중 세션 출력물을 공유 가능한 웹 페이지로 변환하는 라이브 Artifact 시스템을 갖춘 곳은 없습니다. 또한 동일한 AI 백본(AI backbone)을 공유하는 퍼스트 파티 디자인 도구로 직접 연결되는 파이프라인을 가진 코딩 에이전트도 없습니다.

결론

Artifacts와 /design-sync는 하나의 동일한 베팅에 대한 두 가지 측면입니다. 즉, AI 코딩 에이전트가 디자인부터 배포, 커뮤니케이션에 이르는 전체 루프(full loop)를 소유해야 한다는 것입니다.

이미 Claude Code를 사용 중인 운영자들에게 설정 비용은 거의 제로에 가깝습니다. 로그인하고, Artifact를 요청하고, 링크를 공유하면 됩니다. 실질적인 질문은 디자인-코드-Artifact로 이어지는 루프가 팀의 기본 워크플로우(default workflow)가 될 수 있느냐 하는 것입니다.

Cherny 본인의 사용 방식 — "저는 Claude Code에서 모든 것에 Artifacts를 사용해 왔습니다" — 에 기반할 때, Anthropic은 분명히 전체 루프를 내부적으로 직접 사용(dogfooding)하고 있습니다. 이는 대개 좋은 선행 지표가 됩니다.

원문은 AgentConn에 게시되었습니다.