Claude Artifacts 활용법 — 코드·문서를 옆 창에서 미리보기

Artifacts가 뭔가

Claude가 만든 결과물(코드·HTML·SVG·차트·문서)을 채팅 본문이 아닌 별도 창에서 보여주는 기능. 길이가 긴 결과를 깔끔히 분리.

자동 활성화 조건

• 코드 20줄 이상
• 자체 실행되는 HTML·React 컴포넌트
• SVG·다이어그램
• 1,500자 이상 문서

활용 시나리오

1. 인터랙티브 데모 즉시 만들기 "To-do 리스트 만들어줘" → React 컴포넌트가 Artifacts에 즉시 렌더링. 클릭·입력까지 동작.

2. SVG 다이어그램 "데이터 흐름도 만들어줘" → SVG 결과물이 화면에 표시. PNG로 다운로드 가능.

3. 데이터 시각화 CSV 붙여넣기 + "막대 차트로 보여줘" → 즉시 차트 생성. Recharts 기반.

4. 긴 문서 작성 블로그 초안·기획서 등 긴 글은 Artifacts로 분리되어 편집·복사 편리.

워크플로 팁

• 반복 수정 — "색을 더 진하게" 같은 자연어 수정 지시
• 버전 비교 — Artifacts는 버전 히스토리 자동 저장
• 공유 — Artifacts URL로 동료에게 공유 가능 (claude.ai)
• 다운로드 — 코드는 .tsx/.html 파일, 이미지는 SVG/PNG로 저장

한계

• 외부 API 호출 안 됨 (보안)
• Node 환경 라이브러리는 일부만 지원
• 매우 큰 코드(1만 줄+)는 부적합

추천 사용

프로토타입·랜딩 페이지·다이어그램 같은 "보여주기 위한" 결과물에 강력. 실제 서비스 코드는 Artifacts에서 시작 → Cursor/VS Code로 옮겨 발전.