Skip to content
푸땡로그
Go back

Claude Code Artifacts: 코딩 세션을 팀 공유용 라이브 페이지로 만들기

Claude Code가 만든 결과물은 보통 터미널 로그, Markdown 요약, PR 설명, 임시 HTML 파일로 남습니다. 혼자 작업할 때는 이것으로 충분합니다. 하지만 팀원에게 “에이전트가 어디까지 봤고, 어떤 근거로 판단했고, 무엇이 남았는지”를 보여주기에는 부족합니다.

Claude Code Artifacts ↗는 코딩 세션에서 나온 내용을 라이브 인터랙티브 웹 페이지로 만들고, 팀원이 열어볼 수 있는 비공개 링크로 공유할 수 있습니다.

이 글은 작성 시점 2026-06-19 · Claude 공식 블로그 ↗와 Claude Help Center ↗ 스냅숏 기준으로 정리했습니다.

기준 Claude Code Artifacts는 현재 Claude Team 및 Enterprise 조직에서 베타로 제공됩니다. Claude Code CLI와 데스크톱 앱에서 만들 수 있고, 페이지는 일반 브라우저에서 볼 수 있습니다.

세션을 문서 대신 화면으로 공유합니다

기존에도 Claude Code에게 “PR 설명 써줘”, “작업 요약 만들어줘”, “HTML 리포트로 정리해줘”라고 요청할 수 있었습니다. 이 방식은 결과물이 파일로 남습니다. 하지만 세션이 계속 진행되면 사람이 다시 생성하고 다시 공유해야 합니다.

Artifacts는 이 결과물을 Claude Code 안에서 관리되는 공유 페이지로 바꿉니다. 예를 들어 다음과 같은 페이지를 만들 수 있습니다.

상황Artifact로 만들 수 있는 화면팀원이 얻는 것
PR 리뷰변경 파일, 핵심 diff, 테스트 결과, 위험도 요약리뷰어가 빠르게 맥락을 잡음
장애 조사타임라인, 의심 커밋, 에러율 차트, 원인 후보스탠드업 전에 같은 화면을 보고 논의
릴리즈 준비체크리스트, 남은 작업, 배포 전 검증 상태진행 상황을 반복해서 물어보지 않음
아키텍처 분석실제 import graph와 서비스 경계화이트보드가 아니라 코드 기준으로 봄
보안 리뷰발견 항목, 심각도, 해당 코드 위치수정 지점이 애매하지 않음

공식 블로그에 따르면 Artifacts는 세션 진행 상황을 여러 형태로 보여줍니다. PR walkthrough, system explainer, dashboard, release checklist 등입니다.

flowchart TD
    A[Claude Code 세션] --> B[코드베이스]
    A --> C[대화와 추론]
    A --> D[연결된 도구와 데이터]
    B --> E[Artifact 생성]
    C --> E
    D --> E
    E --> F[비공개 라이브 페이지]
    F --> G[팀원이 브라우저에서 확인]
    A --> H[세션 계속 진행]
    H --> E

팀원은 요약을 받아 보는 대신, 작업이 진행되는 화면을 함께 봅니다.


전체 세션 맥락을 사용한다

공식 설명에 따르면 Claude Code는 현재 답변만이 아니라 코드베이스, 연결된 도구, 대화 자체를 포함한 세션 전체 맥락으로 artifact를 만듭니다.

사람이 수동으로 대시보드를 만들려면 GitHub, 모니터링, 로그, diff, 테스트 결과를 따로 연결해야 합니다. Artifacts는 이미 세션 안에 들어온 맥락을 바탕으로 페이지를 만듭니다.

예를 들어 장애 조사 세션에서는 다음 정보가 한 페이지에 모일 수 있습니다.

  1. 실패한 테스트와 관련 함수
  2. 모니터링 도구에서 본 에러 스파이크
  3. 최근 의심 커밋
  4. Claude가 세운 원인 후보
  5. 다음 확인 작업

이런 페이지는 최종 보고서보다 공동 작업판에 가깝습니다. 결론이 나기 전에도 팀원이 현재까지의 판단 근거를 볼 수 있습니다.


같은 링크에서 계속 갱신된다

Artifact 페이지는 같은 URL에서 갱신됩니다. 세션이 계속 진행되면 Claude Code가 artifact를 다시 publish하고, 열린 페이지는 제자리에서 새 버전을 보여줍니다.

공식 블로그에 따르면 각 publish는 같은 링크의 새 버전으로 남고, version history에서 이전 버전으로 되돌릴 수 있습니다. 공유한 링크가 금방 낡는 문제가 줄어듭니다.

sequenceDiagram
    participant Dev as 개발자
    participant CC as Claude Code
    participant Art as Artifact 페이지
    participant Team as 팀원

    Dev->>CC: PR walkthrough artifact 만들어줘
    CC->>Art: v1 publish
    Dev->>Team: 비공개 링크 공유
    Team->>Art: v1 확인
    CC->>CC: 테스트 실패 원인 추가 조사
    CC->>Art: v2 publish
    Team->>Art: 같은 링크에서 v2 확인

작업이 길수록 효과가 커집니다. 리팩터링, 마이그레이션, 장애 분석, 릴리즈 검증처럼 중간 상태를 계속 공유해야 하는 작업에서 상태 업데이트 메시지를 줄일 수 있습니다.


비공개가 기본이고 조직 안에서 공유된다

Claude Code Artifacts는 공유 기능이지만 공개 웹 배포 기능은 아닙니다. 공식 Help Center는 Claude Code의 artifact가 private URL에 게시되고, 게시한 조직의 구성원만 볼 수 있다고 설명합니다.

공식 블로그도 모든 artifact가 기본적으로 작성자에게만 비공개이며, 준비됐을 때 팀원이나 조직에 공유할 수 있다고 밝힙니다. 공개 페이지로 만들 수 없고, 인증된 조직 멤버만 볼 수 있습니다.

주의 비공개 링크라고 해도 세션 맥락에는 코드, 내부 URL, 로그, 이슈 내용, 연결 도구의 데이터가 섞일 수 있습니다. 공유 전에 민감 정보가 포함됐는지 확인합니다.

관리자 관점에서도 제어 지점이 있습니다. 공식 블로그에 따르면 조직 단위 토글, 역할 기반 범위 지정, retention policy, compliance API를 통한 조직 가시성이 제공됩니다. Team이나 Enterprise 관리자는 도입 전에 이 설정을 확인합니다.


기존 HTML artifact와 무엇이 다른가

이 블로그에서 예전에 Claude Code에서 Markdown 대신 HTML을 써야 할 때를 다뤘습니다. 그 글의 HTML artifact는 Claude Code가 로컬 파일로 만든 “검토용 HTML”에 가까웠습니다.

이번 Claude Code Artifacts는 제품 기능입니다. 차이는 다음과 같습니다.

구분로컬 HTML 리포트Claude Code Artifacts
위치저장소나 로컬 파일Claude가 관리하는 비공개 페이지
갱신다시 생성해서 공유같은 링크에서 새 버전 publish
공유파일 첨부, 배포, gist 등조직 멤버에게 링크 공유
맥락요청 시 넣은 정보 중심코드베이스, 대화, 도구 맥락
보안 모델사용자가 직접 관리조직 인증과 관리자 제어

두 방식은 용도가 다릅니다. 저장소에 남길 검토 산출물은 HTML 파일로 만듭니다. 팀원과 진행 상황을 같이 볼 임시 작업판은 Claude Code Artifacts로 만듭니다.


어떻게 요청하면 좋을까

공식 블로그는 “artifact를 만들어줘”라고 직접 요청하거나, 원하는 시각적 결과를 설명하면 된다고 안내합니다. 실무에서는 페이지를 읽을 사람의 역할과 판단 목적을 함께 적습니다.

현재 브랜치의 변경 내용을 리뷰어가 5분 안에 이해할 수 있는 artifact로 만들어줘.

포함할 것:
- 변경 파일을 기능 영역별로 묶기
- 핵심 diff와 설계 의도 요약
- 테스트한 명령과 결과
- 위험도가 높은 부분을 먼저 보여주기
- 리뷰어가 확인해야 할 질문 목록

세션이 진행되면서 테스트 결과나 수정 사항이 바뀌면 같은 artifact를 갱신해줘.

장애 조사라면 이렇게 요청할 수 있습니다.

이번 결제 장애 조사를 artifact로 정리해줘.

포함할 것:
- 시간순 타임라인
- 모니터링에서 확인한 증상
- 의심 커밋과 근거
- 아직 확인하지 않은 가설
- 지금 바로 할 수 있는 완화 조치

조사를 계속하면서 artifact를 최신 상태로 republish해줘.

요청에는 디자인보다 “누가 어떤 판단을 해야 하는가”를 적습니다. 리뷰어, SRE, PM, 보안 담당자처럼 독자를 지정하면 페이지 구조가 판단에 맞게 정리됩니다.


언제 쓰면 좋은가

Artifacts는 팀 협업 비용이 큰 작업에 맞습니다. 다음 조건 중 하나라도 있으면 효과가 큽니다.

  1. 세션이 길고 중간 상태를 공유해야 한다.
  2. 여러 도구에서 가져온 정보를 한 화면에 묶어야 한다.
  3. 팀원이 세션 로그 전체를 읽기 어렵다.
  4. PR, 장애, 릴리즈처럼 같은 맥락을 여러 사람이 봐야 한다.
  5. 텍스트 요약보다 필터, 표, 타임라인, 체크리스트가 더 적합하다.

반대로 혼자 끝낼 작은 수정, 짧은 코드 설명, 영구 문서로 남겨야 하는 ADR에는 과합니다. 그런 경우에는 Markdown이나 PR 본문이 더 단순합니다.


마무리

Claude Code Artifacts는 에이전트가 만든 결과물을 터미널 로그에서 팀이 같이 보는 라이브 작업 화면으로 옮깁니다.

  1. 세션 전체 맥락을 바탕으로 인터랙티브 페이지를 만든다.
  2. 세션이 계속되면 같은 링크에서 최신 상태로 갱신된다.
  3. 공개 배포가 아니라 조직 안에서 공유되는 비공개 협업 화면이다.

AI 코딩 에이전트가 길고 복잡한 작업을 맡을수록, 병목은 코드 생성에서 여러 사람이 같은 맥락을 이해하는 일로 옮겨 갑니다. Artifacts는 이 병목을 줄입니다.


참고 자료


Share this post on:

Previous Post
Claude Code /goal: 조건이 만족될 때까지 계속 일하게 만드는 방법
Next Post
OpenAI Codex Record & Replay: 한 번 보여준 업무를 재사용 가능한 스킬로 만들기