아티팩트로 만들기 · Claude 101

아티팩트란 무엇인가요?

아티팩트는 대화와 함께 전용 창에서 Claude가 생성하는 독립적이며 인터랙티브한 결과물입니다. 채팅에 묻힌 긴 코드나 텍스트 블록 대신, 렌더링되어 바로 사용할 수 있는 콘텐츠를 확인할 수 있습니다—작동하는 웹사이트, 인터랙티브 차트, 즉시 다운로드 가능한 문서 등입니다.

Claude는 콘텐츠가 특정 기준을 충족할 때 자동으로 아티팩트를 생성합니다:

중요하고 독립적이며, 일반적으로 15줄 이상입니다
편집하거나 반복하거나 재사용할 가능성이 있는 콘텐츠입니다
대화 맥락 없이도 독립적으로 이해할 수 있는 복잡한 콘텐츠입니다
나중에 참조하거나 활용할 콘텐츠입니다

일반적인 아티팩트 유형

Claude는 다양한 유형의 아티팩트를 생성할 수 있으며, 각 유형은 서로 다른 용도에 적합합니다:

문서(마크다운 및 일반 텍스트): 텍스트가 많아 내보내거나 계속 편집하고 싶은 콘텐츠에 적합합니다—회의록, 보고서, 프로젝트 계획, 블로그 게시물 및 기타 문서 콘텐츠 등.
코드 스니펫: 모든 프로그래밍 언어로 작성된 실행 가능한 코드—Python, JavaScript, C++ 등. 코드를 확인하거나 복사하거나 다운로드하여 프로젝트에 활용할 수 있습니다.
HTML 페이지: HTML, CSS, JavaScript를 단일 파일로 포함하는 완전한 웹 페이지입니다. 랜딩 페이지, 양식, 인터랙티브 데모, 빠른 프로토타입 제작에 최적입니다.
SVG 이미지: 로고, 아이콘, 일러스트레이션 및 기타 시각적 요소를 위한 확장 가능한 벡터 그래픽입니다. 아티팩트 창에서 직접 렌더링되므로 정확히 무엇을 얻는지 확인할 수 있습니다.
Mermaid 다이어그램: 플로차트, 시퀀스 다이어그램, 간트 차트, 조직도 등. 시각화하려는 관계를 설명하면 Claude가 다이어그램을 생성하며, 이를 세밀하게 다듬을 수 있습니다.
React 컴포넌트: 실제 기능을 갖춘 인터랙티브 UI 요소입니다—계산기, 대시보드, 게임, 데이터 시각화. 단순한 목업이 아니라 실제 로직을 포함하며 사용자 입력에 반응합니다.

Word 문서, Excel 스프레드시트, PowerPoint 프레젠테이션, PDF는 다르게 작동합니다. Claude는 이러한 파일을 아티팩트가 아닌 별도의 파일 생성 기능을 통해 만들며, 다운로드할 수 있는 파일로 제공합니다.

첫 아티팩트 만들기

아티팩트 만들기는 대화만큼 간단합니다. 원하는 내용을 설명하면 Claude가 아티팩트로 표시할지 결정합니다.

예를 들어 다음과 같이 말할 수 있습니다:

“고객 온보딩 프로세스를 보여주는 플로차트 만들어줘”참고: Claude는 이제 코드 기반 아티팩트 외에도 Imagine을 사용해 플로차트 같은 시각적 다이어그램을 HTML로 생성할 수 있습니다.
“월별 지출을 입력하고 내역을 확인할 수 있는 인터랙티브 대시보드 만들어줘”
“히어로 섹션과 기능 목록이 포함된 생산성 앱 랜딩 페이지 디자인해줘”
“새로운 이니셔티브에 재사용할 수 있는 프로젝트 개요 템플릿 작성해 줘”

Claude가 예상했던 아티팩트를 자동으로 생성하지 않는 경우, 명시적으로 요청할 수 있습니다: "이걸 아티팩트로 만들어 줘" 또는 "이걸 아티팩트로 보여 줘."

Claude가 아티팩트를 생성하면 대화창 오른쪽에 전용 창으로 표시됩니다. 여기에서 다음을 할 수 있습니다:

다양한 형식 보기: 미리보기(실제 표시 형태)와 기본 코드 간 전환
콘텐츠 복사: 복사 아이콘을 클릭하여 다른 곳에서 사용할 콘텐츠 가져오기
파일 다운로드: 아티팩트를 파일로 컴퓨터에 저장
코드 보기: Claude가 내부적으로 생성한 정확한 내용 확인

유용한 무언가를 만든 후에는 공유할 수 있는 몇 가지 방법이 있습니다.

복사 또는 다운로드: 개인 사용이나 다른 채널을 통한 공유를 위해서는 아티팩트 창 오른쪽 하단의 복사 또는 다운로드 버튼을 사용하세요.

조직 내 공유(Claude for Work): Team 및 Enterprise 사용자는 조직 내에서 동료들과 아티팩트를 공유할 수 있습니다. 공유된 아티팩트는 조직 내에 유지되며, 액세스 시 팀 인증이 필요합니다.

공개 게시: Free, Pro 및 Max 사용자는 아티팩트를 게시하여 링크가 있는 모든 사용자가 액세스할 수 있도록 할 수 있습니다. 게시할 경우:

선택한 버전만 공개됩니다(대화 내용은 비공개로 유지됨)
Claude 계정 없이도 누구나 아티팩트를 보고 상호작용할 수 있습니다

게시하려면 아티팩트 오른쪽 상단의 "공유" 또는 "게시" 버튼을 클릭하세요. 언제든지 해당 아티팩트로 돌아가 공개 액세스를 제거하여 게시를 취소할 수 있습니다. 참고: 아티팩트를 게시하면 링크를 통해 공개적으로 액세스할 수 있습니다—Claude 계정이 없어도 누구나 볼 수 있습니다. 게시된 아티팩트는 검색 엔진에 색인되지 않으므로 Google 검색 결과에 표시되지 않습니다.

아티팩트를 최대한 활용하기 위한 팁

원하는 것을 구체적으로 명시하세요. "예산 추적기 만들기"도 좋지만, "카테고리별로 지출을 입력하고 원형 차트로 세부 내역을 확인하며 예산 초과 시 경고를 받을 수 있는 월별 예산 추적기 만들기"가 더 좋습니다.

최종 사용자를 설명하세요. 아티팩트를 사용할 대상을 Claude에게 알려주면 Claude가 적절한 디자인 선택을 하는 데 도움이 됩니다. "이 순서도는 신입 사원을 위한 것입니다"와 "이 순서도는 엔지니어링 팀을 위한 것입니다"는 서로 다른 결과로 이어집니다.

점진적으로 반복하세요. Claude에게 한 번에 하나의 기능을 추가하거나 하나의 변경 사항을 적용하도록 요청하세요. 이렇게 하면 무엇이 작동하는지 파악하고 문제를 조기에 발견하기가 더 쉬워집니다.

필요할 때 아티팩트를 요청하세요. 상당한 분량의 작업을 요청했는데 Claude가 아티팩트를 생성하지 않고 채팅으로 응답하는 경우, "아티팩트로 생성해 주세요"라고 말하면 됩니다.

수업 성찰

다음으로 넘어가기 전에 고려하세요:

재사용 가능한 인터랙티브 아티팩트를 보유하면 효과를 볼 수 있는 반복 업무는 무엇인가요?
순서도나 다이어그램으로 표현하면 더 명확해질 업무 프로세스가 있나요?
아이디어를 빠르게 테스트하는 데 어떤 프로토타입이나 도구가 도움이 될까요?

다음은 무엇인가요

다음 수업에서는 스킬에 대해 알아봅니다—Claude에게 특화된 워크플로우를 가르치는 재사용 가능한 지침 세트입니다.