2026 클로드 아티팩트 사용법 + 예시프롬프트 4가지
클로드 아티팩트는 대화창 옆에 별도 패널로 코드, 문서, 시각화 결과물을 실시간으로 보여주는 기능입니다. 요약 클로드 아티팩트는 텍스트 응답과 별개로 코드 실행 결과나 문서를 독립된 창에서 확인할 수 있게 해주는 기능입니다. HTML, React, SVG, 마크다운 등 다양한 형식을 지...
클로드 아티팩트는 대화창 옆에 별도 패널로 코드, 문서, 시각화 결과물을 실시간으로 보여주는 기능입니다.
요약
클로드 아티팩트는 텍스트 응답과 별개로 코드 실행 결과나 문서를 독립된 창에서 확인할 수 있게 해주는 기능입니다. HTML, React, SVG, 마크다운 등 다양한 형식을 지원하며 결과물을 바로 미리보기할 수 있습니다. 프롬프트를 어떻게 쓰느냐에 따라 아티팩트 활용도가 크게 달라지므로 기본 사용법을 익혀두면 좋습니다.
핵심 체크리스트
- 아티팩트는 claude.ai 웹과 앱에서 사용 가능
- HTML, React, SVG, 마크다운, Mermaid 등 렌더링 지원
- 대화창 오른쪽에 별도 패널로 결과물 표시
- 아티팩트 내용은 복사, 다운로드, 재편집 가능
- 코드 실행 결과를 실시간으로 미리보기 가능
- 이전 아티팩트를 이어서 수정 요청 가능
- 무료 플랜에서도 기본 아티팩트 기능 사용 가능
도입부
클로드에게 코드를 요청했는데 텍스트로만 결과가 나와서 직접 복사해 실행해본 경험이 있을 것입니다. 아티팩트 기능을 활용하면 이런 번거로움을 줄일 수 있습니다. 결과물을 대화창 옆 패널에서 바로 확인하고 수정까지 이어갈 수 있기 때문입니다.
클로드 아티팩트란
클로드 아티팩트는 대화 응답과 분리된 별도 패널에 결과물을 보여주는 기능입니다. 일반적인 채팅 응답은 텍스트로만 표시되지만 아티팩트를 통해 만들어진 결과물은 오른쪽 패널에서 렌더링된 형태로 확인할 수 있습니다. 예를 들어 HTML 코드를 요청하면 코드 자체뿐 아니라 웹페이지로 렌더링된 미리보기까지 한 화면에서 볼 수 있습니다. 아티팩트는 독립된 결과물이기 때문에 이후 대화에서 해당 아티팩트를 수정하거나 다운로드하는 것도 가능합니다.
아티팩트가 지원하는 파일 형식
클로드 아티팩트 사용법을 제대로 활용하려면 어떤 형식이 지원되는지 알아두는 것이 좋습니다. 아래 표에서 주요 지원 형식과 용도를 정리했습니다.
| 형식 | 확장자 | 주요 용도 | 렌더링 여부 |
|---|---|---|---|
| HTML | .html | 웹페이지, 인터랙티브 UI | 미리보기 가능 |
| React | .jsx | 컴포넌트, 대시보드, 앱 | 미리보기 가능 |
| SVG | .svg | 아이콘, 다이어그램 | 미리보기 가능 |
| Mermaid | .mermaid | 플로차트, 시퀀스 다이어그램 | 미리보기 가능 |
| 마크다운 | .md | 문서, 보고서, 글 | 미리보기 가능 |
| 문서 출력물 | 미리보기 가능 |
React 아티팩트에서는 Tailwind CSS, Recharts, Lucide 아이콘, D3 등 주요 라이브러리를 별도 설치 없이 바로 사용할 수 있습니다. 이 점이 간단한 프로토타입을 빠르게 만들 때 유용합니다.
요약 포인트: HTML, React, SVG, Mermaid, 마크다운 등 6가지 형식이 렌더링을 지원합니다.
아티팩트 활용 프롬프트 예시
클로드 아티팩트 사용법에서 가장 중요한 부분은 프롬프트를 어떻게 작성하느냐입니다. 아래 예시를 참고하면 원하는 형태의 아티팩트를 더 정확하게 받을 수 있습니다. 직접 제가 테스트해본 화면입니다.
프롬프트 예시1: 간단한 웹페이지 생성
HTML로 자기소개 웹페이지를 만들어줘.
이름, 직업, 간단한 소개 3줄을 포함하고
배경색은 연한 파란색으로 설정해줘.
프롬프트 예시2: React 대시보드 생성
React로 월별 매출 대시보드를 만들어줘.
1월부터 6월까지 샘플 데이터를 넣고
Recharts 라이브러리로 막대그래프를 표시해줘.
그래프 아래에 총 매출 합계도 보여줘.프롬프트 예시3: Mermaid 플로차트 생성
Mermaid로 고객 문의 처리 플로차트를 만들어줘.
문의 접수 → 유형 분류 → 담당자 배정 → 처리 → 완료 순서로 구성하고
유형 분류 단계에서 기술 문의와 일반 문의로 분기해줘.프롬프트 예시4: 기존 아티팩트 수정 요청
방금 만든 대시보드에서 그래프 색상을 초록색 계열로 바꿔줘.
그리고 각 막대 위에 수치 라벨을 추가해줘.이렇게 구체적으로 요청할수록 원하는 결과에 가까운 아티팩트를 받을 수 있습니다. 특히 수정 요청 시에는 "방금 만든"이라고 언급하면 이전 아티팩트를 기반으로 이어서 작업해 줍니다.
> 요약 포인트: 형식, 구성 요소, 스타일을 구체적으로 지정할수록 원하는 아티팩트를 얻기 쉽습니다.
아티팩트 사용 시 알아두면 좋은 점
클로드 아티팩트 사용법을 익히면서 몇 가지 주의할 점도 함께 알아두면 좋습니다. 아티팩트 패널에서 "코드 보기"와 "미리보기"를 전환할 수 있어서 코드 구조를 확인한 뒤 결과물을 보는 식으로 활용하면 됩니다. 결과물이 마음에 들면 복사 버튼이나 다운로드 버튼으로 바로 저장할 수 있습니다. 다만 아티팩트 내에서 localStorage 같은 브라우저 저장소 API는 동작하지 않으므로 데이터 저장이 필요한 경우에는 별도 방법을 사용해야 합니다. 또한 외부 API 호출이 필요한 기능은 아티팩트 환경의 네트워크 제한 때문에 정상 동작하지 않을 수 있습니다.
> 요약 포인트: 코드 보기와 미리보기 전환이 가능하고 복사 및 다운로드를 지원하지만 브라우저 저장소와 외부 API에는 제한이 있습니다.
마무리하며
이번 글에서는 ‘클로드 아티팩트 사용법’에 대해 알아보았습니다. 감사합니다.
Q&A