Claude Artifacts 사용법: 문서·코드·앱을 한 화면에서 만드는 방법

Photo of author

By 요담

Claude Artifacts 사용법을 알면 문서와 코드, 앱을 채팅과 나란히 보며 바로 고칠 수 있습니다. 클로드 아티팩트는 긴 산출물을 전용 창에 고정해 미리보기와 재사용을 쉽게 합니다. 대화 창만으로는 분량이 큰 결과물을 검토하기 어렵습니다. 전용 창이 열리면 복사와 다운로드로 산출물을 바로 가져갈 수 있습니다.

아래에서는 Claude Artifact 만들기의 설정 위치, 유형별 요청, 수정과 오류 점검을 순서대로 안내합니다. 화면에서 바로 따라 할 수 있도록 켜는 조건과 창 동작을 중심으로 설명합니다. 권한을 먼저 확인하고 한 건씩 요청하면 전용 창이 열리기 쉽습니다.

Claude Artifacts란 무엇인가요

Claude Artifacts 사용법 관련 화면
(사진 출처: claude.com)

Claude Artifacts는 대화와 분리된 전용 창에서 앱·도구·시각화 같은 독립 콘텐츠를 보여 주고 수정·재사용할 수 있게 합니다. 생성되면 채팅 오른쪽 전용 창에 표시됩니다. 이후 수정 요청은 그 창에 바로 반영됩니다. 채팅 왼쪽에는 대화가 그대로 남습니다.

Artifacts는 Claude와 Claude Desktop에서 쓰이며 Claude Code의 Artifacts는 Team·Enterprise에서 제공됩니다. 보통 15줄이 넘는 독립적이고 재사용 가능한 복잡한 콘텐츠일 때 창을 엽니다. 독립 콘텐츠란 다른 메시지에 기대지 않고 그 자체로 쓸 수 있는 산출물을 말합니다.

Artifacts를 켜고 생성하는 기본 사용법

(출처: 감자나라ai)

Code execution and file creation이 꺼져 있으면 Artifacts는 더 이상 지원되지 않습니다. Free·Pro·Max는 Settings의 Capabilities에서 해당 기능을 켭니다. Team·Enterprise는 Owner가 Organization settings의 Capabilities에서 켭니다.

기능을 켠 뒤에는 대화를 새로 시작하는 편이 안전합니다. 독립 결과물을 요청해야 Claude Artifact 만들기가 진행됩니다. Capabilities 토글을 저장한 뒤 화면을 새로고침하면 반영이 빨라질 수 있습니다.

프롬프트로 Artifact 요청하기

프롬프트에는 결과 유형과 분량, 재사용 목적을 분명히 적습니다. 회의록 마크다운이나 계산기 페이지, 흐름도처럼 창에 남을 산출물을 지정합니다. 제목과 독자, 출력 형식까지 한 문장에 넣으면 창에 붙을 내용이 분명해집니다.

짧은 질문만 던지면 대화 버블에만 답이 남습니다. 15줄을 넘기고 단독으로 쓸 범위를 정해 달라고 요청하는 편이 안전합니다. 산출물 하나당 메시지 하나로 나누어 요청합니다. 재사용할 템플릿이 있으면 그 형식을 예시로 붙여 넣습니다.

미리보기와 복사·다운로드

아티팩트 미리보기는 채팅 오른쪽 창에서 렌더링 결과를 바로 보여 줍니다. 코드와 문서는 복사할 수 있습니다. HTML과 파일은 다운로드해 로컬에서 확인할 수 있습니다. Artifacts 공유는 화면의 공유 버튼을 사용합니다.

미리보기가 비어 있으면 생성 중이거나 렌더 오류일 수 있습니다. 창을 닫지 말고 같은 대화에서 다시 그려 달라고 요청하면 됩니다. 복사 전에 레이아웃이 깨지지 않았는지 확인합니다. 클로드 문서 작성 결과는 마크다운으로 남는 경우가 많습니다.

문서·코드·차트 등 활용 유형별 만드는 법

대표 유형은 Markdown·일반 문서, 코드, 단일 HTML 사이트, SVG, 다이어그램·플로차트, 인터랙티브 React 컴포넌트입니다. 클로드 코드 생성은 스니펫을 창에 고정합니다. 클로드 문서 작성은 긴 글을 읽기 쉽게 붙입니다. 유형 이름은 프롬프트 앞머리에 두면 찾기 쉽습니다.

유형요청 포인트
문서·Markdown분량과 목차, 재사용 목적을 함께 적습니다
코드언어와 실행 예를 명시합니다
HTML·React단일 페이지 범위로 한정합니다
SVG·다이어그램단계와 데이터를 프롬프트에 넣습니다

차트와 흐름도는 데이터와 단계를 프롬프트에 넣고 다이어그램으로 그려 달라고 하면 됩니다. React 컴포넌트는 한 화면에서 동작하는 범위만 정해 요청합니다. 여러 파일을 한 메시지에 섞으면 창이 열리지 않을 수 있습니다. SVG는 색과 라벨을 함께 지정하면 이후 수정이 수월합니다.

수정·버전 관리와 재사용 팁

수정 요청을 보내면 오른쪽 창 내용이 바로 바뀝니다. Markdown은 텍스트를 강조한 뒤 Edit with Claude로 해당 위치를 바로 고칠 수 있습니다. 전체 재작성보다 위치 지정이 빠릅니다. 코드 Artifact도 같은 창에서 함수 단위로 고쳐 달라고 요청할 수 있습니다.

이전 형태는 대화 맥락에 남으므로 되돌려 달라고 하면 됩니다. 재사용할 때는 완성본을 복사하거나 파일로 받아 다른 작업에 붙입니다. 같은 유형을 반복할 때는 이전 Artifact 대비 달라질 점만 적습니다. 부분 수정이 반복되면 마지막 완성본만 파일로 저장합니다.

자주 발생하는 오류와 해결 방법

생성이 막히면 권한과 요청 길이부터 점검합니다. Code execution과 file creation이 꺼져 있으면 Artifacts가 동작하지 않습니다. 너무 짧거나 대화에만 적합한 내용은 전용 창으로 보내지 않습니다. 같은 프롬프트를 반복하기 전에 새 대화 여부를 먼저 결정합니다.

플랜마다 켜는 메뉴가 다르므로 개인 Settings와 조직 Organization settings를 혼동하지 않습니다. 기능을 켠 직후 이전 대화에서는 창이 열리지 않을 수 있습니다. 새 대화를 연 뒤 다시 요청합니다. 오류 문구가 보이면 권한부터 다시 확인합니다.

생성이 안 될 때 점검할 점

Settings 또는 Organization settings의 Capabilities에서 코드 실행과 파일 생성이 켜져 있는지 확인합니다. Free·Pro·Max는 개인 설정입니다. Team·Enterprise는 Owner 권한이 필요합니다.

요청이 15줄 미만이거나 여러 산출물을 한 메시지에 섞으면 창이 열리지 않을 수 있습니다. 대화를 새로 열고 한 가지 독립 결과물만 다시 요청합니다. 네트워크 오류면 같은 프롬프트를 한 번 더 보냅니다. 브라우저 확장 프로그램이 미리보기를 가리는지도 함께 확인합니다.

Claude Artifacts 사용 정리와 실무 마무리

Claude Artifacts 사용법은 기능을 켠 다음 15줄이 넘는 독립 콘텐츠를 요청하는 일로 시작합니다. 오른쪽 창에서 고치고 복사하는 순서로 정리됩니다. 문서·코드·HTML·차트는 유형을 명시할수록 아티팩트 미리보기가 안정적으로 열립니다.

실무에서는 설정 확인, 한 건씩 생성, Edit with Claude로 부분 수정, 파일 저장을 반복하면 됩니다. 권한과 분량 기준만 지키면 클로드 아티팩트를 업무 산출물 창으로 계속 쓸 수 있습니다. 같은 산출물을 여러 업무에 쓸 때는 복사본을 기준으로 세부만 고칩니다. 설정 위치만 기억해도 다음 작업에서 시간을 줄일 수 있습니다.

요담

글쓴이

요담

AI를 실무에 활용할 수 있도록 도움드리는 요담입니다.