📋 Claude Code 에서 새롭게 추가된 Artifacts 기능을 시작하는 9가지 유즈 케이스

이제 Claude Code 세션에서 진행한 작업을 실시간으로 업데이트되는 시각적인 웹페이지로 만들 수 있어요.

PR 워크스루, 시스템 설명서, 대시보드, 릴리스 체크리스트처럼 팀이 바로 열어보고 탐색할 수 있는 페이지가 됨!

Claude Code가 세션의 전체 맥락.. 코드베이스, 커넥터, 대화 내용을 바탕으로 페이지를 생성해요.

데이터 소스를 연결하거나 인프라를 세팅할 필요 없어요! 이렇게 시작하세요.

↓

법무 / 오픈소스:
리포지토리에서 바로 모든 의존성의 라이선스를 감사하고 copyleft 독소 조항이 있는 항목을 찾아냅니다.

"모든 서드파티 의존성과 라이선스를 나열하고, 카피레프트가 적용된 항목을 표시하는 아티팩트를 빌드해 주세요."

↓

개인정보 보호:
코드 전반에서 개인 데이터가 수집, 저장, 기록되는 위치를 보여주는 데이터 흐름도를 만듭니다.

"개인정보 보호 검토를 위해 전체 코드베이스에서 개인 데이터를 다루는 위치를 추적하여 아티팩트로 만들어 주세요."

↓

보안:
정확한 코드 라인으로 연결되는 진단 결과를 제공하여 수정 작업을 명확하게 만듭니다.

"이번 검토에서 발견된 인증 관련 문제들을 각각 해당 코드 링크와 함께 아티팩트로 빌드해 주세요."

↓

FinOps / 플랫폼 재무:
코드형 인프라(IaC)를 바탕으로 클라우드 리소스와 주요 비용 요인을 매핑합니다.

"테라폼 파일을 바탕으로 클라우드 리소스를 매핑하여 서비스별로 그룹화하고, 주요 비용 요인을 포함한 아티팩트를 만들어 주세요."

↓

소프트웨어 엔지니어:
변경 사항과 주변 코드를 추출하여 리뷰어가 쉽게 이해할 수 있는 PR 또는 버그 안내서를 만듭니다.

"이번 PR을 안내하는 아티팩트를 만들어 주세요. diff와 그 배경, 제가 테스트한 내용을 포함해 주세요."

↓

디자이너 / 프론트엔드 엔지니어:
실제 가동 중인 컴포넌트를 기반으로 제작되어 선택 즉시 바로 배포 가능한 수준의 화면 UX 시안을 여러 개 생성합니다.

"저희 컴포넌트 라이브러리를 활용해서 이 회원가입 폼의 UX 버전 5가지를 담은 아티팩트를 제공해 주세요."

↓

스태프 엔지니어 / 아키텍트:
화이트보드 낙서 대신 실제 import graph를 바탕으로 서비스가 실제로 어떻게 연결되어 있는지 지도를 그립니다.

"실제 코드를 바탕으로 결제 서비스가 어떻게 연결되어 기능하는지 매핑하여 아티팩트로 만들어 주세요."

↓

SRE 및 온콜:
조사 과정에 따라 내용이 추가되다가 결국 Postmortem 보고서가 되는 장애 대응 페이지를 만듭니다.

"이 장애 상황을 아티팩트로 전환해 주세요. 타임라인, 의심되는 커밋, 모니터링 시스템의 에러 급증 현황을 포함하고, 제가 해결 작업을 진행함에 따라 계속 업데이트하여 다시 게시해 주세요."

↓

엔지니어링 매니저:
머지된 PR을 바탕으로 실제로 어떤 기능들이 배포되었는지 정리한 페이지를 만듭니다.

"이번 주에 우리 팀에서 머지된 PR들을 바탕으로 어떤 것들이 배포되었는지 프로젝트별로 분류하여 아티팩트를 빌드해 주세요."

Claude Code가 페이지를 빌드하고 링크를 제공되는데, 앞으로 모든 업데이트는 동일한 URL에 자동으로 반영됨 👍🏻