Claude Artifacts 사용법: 단계별 완전 튜토리얼
Kevin Stratvert의 12분짜리 Claude Artifacts 튜토리얼 완전 정복: CSV로 인터랙티브 대시보드를 만들고, 채팅 프롬프트로 다듬고, 어노테이션 도구로 세부 사항을 수정한 뒤, 내장 AI·데이터 저장·커넥터·Live Artifacts까지 확장합니다. 14단계, 매 단계 실제 스크린샷 포함.
핵심 요약
- Artifacts는 평이한 언어로 설명만 하면 Claude가 만들어 주는 인터랙티브 미니 앱 — 대시보드, 도구, 게임 — 입니다. 무료 Claude 계정으로도 충분히 시작할 수 있습니다.
- CSV를 업로드하면 1분 정도 후 차트에 마우스를 올리면 수치가 보이는 실동작 대시보드가 완성됩니다. 이후 변경은 전부 채팅 프롬프트만으로, 코드는 필요 없습니다.
- 어노테이션 도구로 특정 요소 하나만 정확히 수정할 수 있고, 공유는 '링크가 있는 사람 누구나' URL을 한 번의 클릭으로 생성하며, 고정해 두면 자주 쓰는 Artifact가 라이브러리 상단에 유지됩니다.
- Artifact는 Claude 자체를 호출하거나, 세션 간에 데이터를 기억하거나, MCP 커넥터로 Slack·Trello와 연결될 수도 있습니다 — 데스크톱 앱의 Live Artifacts는 스스로 최신 상태를 유지합니다.
How to Use Claude Artifacts (Full Tutorial)
채널: Kevin Stratvert · 12:42
스크린샷 안내
이 가이드의 모든 스크린샷은 위 영상에서 가져왔으며 저작권은 Kevin Stratvert에게 있습니다. 각 단계에는 영상 속 해당 장면으로 이동하는 링크가 붙어 있습니다. 단계 설명, 캡션, FAQ는 자체 제작 콘텐츠입니다.
CSV에서 대시보드까지 (1–10단계)
- 1
Artifacts 라이브러리 열기
claude.ai에 로그인(무료 계정이면 충분)하고 왼쪽 사이드바에서 Artifacts를 클릭하세요. All과 Yours 탭에는 내가 만든 모든 Artifact가, Shared with you에는 다른 사람이 공유한 Artifact가 모입니다. 검색창으로 라이브러리 전체를 필터링할 수 있습니다.
Artifacts 허브: All·Yours·Shared with you 탭, 오른쪽 위에 New artifact.0:50부터 보기 - 2
New artifact 클릭
오른쪽 위의 New artifact 버튼을 누르면 Claude가 새 작업을 시작합니다. 바로 만들지 않고 먼저 몇 가지 질문부터 합니다. 만들 것을 'web page'라고 부르는데, 놀라지 마세요. 어떤 것을 만들든 그 위에 세워지는 기반일 뿐입니다.
한 번의 클릭으로 가이드형 작업 시작 — 질문이 먼저, 코드는 나중.1:02부터 보기 - 3
시작 질문에 답하기
이 대시보드에서는 Dashboard, Bold & colorful 스타일, 그리고 중점 항목으로 Sales & revenue trends를 골랐습니다. 질문 목록은 조금 다를 수 있어도 괜찮습니다. 해당하는 것만 답하거나, 질문을 건너뛰고 한 메시지로 요구사항을 모두 설명해도 됩니다.
유형·스타일·중점: 이 답변들이 Claude의 첫 빌드 방향을 정합니다.1:40부터 보기 - 4
CSV 첨부하기
Claude가 데이터를 어디서 가져올지 묻면 직접 업로드한다고 답하세요. 메시지 상자의 + 아이콘을 눌러 Add files or photos를 선택(단축키 Ctrl U / Cmd U도 가능)하고 CSV를 고릅니다. Claude가 열 구조를 먼저 읽고 시각화 방식을 정한 뒤 만들기 시작합니다.
+ 아이콘 → Add files or photos → CSV 선택. Claude는 UI를 만들기 전에 파일을 먼저 분석합니다.2:19부터 보기 - 5
첫 버전 게시하기
1~2분 후 Claude가 Artifact를 게시합니다. 대시보드가 오른쪽에 나타나고 — 위에는 핵심 지표, 아래에는 차트 — 채팅에는 만든 결과가 요약됩니다. CSV에서 나온 그대로, 5가지 맛과 4개 지역의 총 1,207건 주문. 확장 아이콘을 누르면 크게 볼 수 있습니다.
'The Bake Sheet': CSV 하나로 만든 KPI 카드와 차트.2:42부터 보기 - 6
차트에 마우스를 올려 정확한 수치 확인
이건 이미지가 아니라 진짜 동작하는 앱입니다. 추세선 위로 커서를 움직이면 그 달의 맛별 정확한 매출이 툴팁으로 표시되고, 막대 차트와 표도 똑같이 반응합니다. 차트 코드는 한 줄도 직접 쓰지 않았습니다 — Claude가 CSV로 전부 만들었습니다.
6월 툴팁이 맛별 매출을 분해 — 첫 게시부터 인터랙티브합니다.2:58부터 보기 - 7
코딩 대신 채팅으로 다듬기
마음에 안 드는 부분은 그냥 말하세요. 'Add a dark mode toggle to the dashboard' 한마디면 Claude가 헤더에 해/달 토글이 달린 업데이트 버전을 다시 게시하고, 전체 테마를 바꾸며 선택을 기억합니다. 더 큰 변경도 같은 스레드에서 계속 요청하면 됩니다.
프롬프트 한 줄 후: 헤더에 달 아이콘 토글이 생기고 사이트 전체가 다크 테마로.4:02부터 보기 - 8
어노테이션 도구로 세부 항목 수정
한 요소만 고치고 싶을 때는 Artifact 오른쪽 위의 어노테이션 도구를 열고 해당 위치 — 여기서는 'Kevin's Cookie Company' 제목 — 를 하이라이트하세요. 댓글 상자가 열리면 무엇을 바꿀지 적고, Send to Claude로 즉시 반영하거나 Add comment로 화면은 그대로 둔 채 메모만 남깁니다.
하이라이트하고 수정 내용을 적은 뒤, 바로 적용하거나 검토 코멘트로 남기세요.4:50부터 보기 - 9
링크만 있으면 누구나 볼 수 있게 공유
Share를 누르고 General access를 Anyone with the link로 바꾸고, 게시할 버전을 고릅니다 — Claude는 모든 리비전을 보관하므로 일부러 이전 스냅샷을 공유할 수도 있습니다. Copy link로 받은 URL은 어떤 브라우저에서도 완전히 인터랙티브한 대시보드로 열립니다.
General access → Anyone with the link. 버전 선택기가 방문자가 볼 판을 결정합니다.5:10부터 보기 - 10
고정해 두고, 원래 채팅에서 계속 수정
라이브러리로 돌아가 Artifact에 커서를 올리고 점 3개 메뉴에서 Pin을 고르세요. 고정된 항목은 Pinned 섹션에 모여 원클릭으로 열립니다. 나중에 고치려면 Chat and tasks에서 원래 채팅을 다시 여세요. 그 스레드가 언제나 이 Artifact의 편집실입니다.
점 3개 메뉴로 카드를 고정하고, 원래 채팅은 열어 둔 채 언제든 수정하세요.5:42부터 보기
한 단계 더: 내장 AI, 데이터 저장, 커넥터, Live Artifacts (11–14단계)
- 11
Claude 자체를 호출하는 도구 만들기
Artifact는 Claude를 직접 호출할 수 있습니다. 새 Artifact를 만들고 Something else를 고른 뒤 도구를 설명하세요 — 이 사례는 직원이 쿠키 재료를 입력하면 Claude가 이름 아이디어 5개를 생성하는 도구입니다. API 키도 백엔드도 필요 없고, 방문자가 처음 실행하면 Artifact가 Claude 사용 권한만 요청합니다.
The Batch Namer: 재료를 입력하고 Generate 5 names를 누르면 AI가 만든 후보명이 나옵니다.7:02부터 보기 - 12
데이터를 기억하게 만들기
즐겨찾기 기능을 요청하면 Claude가 먼저 디자인 질문 하나를 합니다. 저장한 항목을 이 브라우저에만 private로 둘지, Artifact를 여는 모두와 공유할지. 여기서는 공유를 선택했습니다. 이후 별표한 이름은 저장 상태로 유지됩니다 — 오늘 탭을 닫아도 내일 열면 그대로. 추적표, 목록, 가벼운 프로젝트 도구의 기초입니다.
private 또는 shared 저장 — 이후 모든 제안에 세션이 바뀌어도 사라지지 않는 별표가 붙습니다.8:20부터 보기 - 13
Slack과 그 밖의 서비스와 연결
MCP(Model Context Protocol) 커넥터를 통해 Artifact는 Claude 밖에서도 움직일 수 있습니다. Slack 공유 버튼을 요청하고, Slack 연결을 승인하고, 채널을 고르면 저장된 각 아이디어에 팀으로 바로 보내는 버튼이 생깁니다. 네이티브 커넥터가 없는 앱도 Zapier MCP로 연결할 수 있습니다 — 수천 가지 동작이 추가됩니다.
Slack 연결 완료: 저장한 아이디어를 #new-cookie-ideation으로 바로 보냅니다.9:40부터 보기 - 14
Live Artifacts로 항상 신선하게
Claude 데스크톱 앱의 Live Artifacts는 얼려 둔 스냅샷 대신 연결된 앱과 로컬 파일에서 현재 데이터를 가져옵니다. 이 매출 대시보드는 POS 보고서와 Google Drive 스프레드시트에서 스스로 취합되며, 헤더의 Reload를 누르면 최신 숫자로 다시 그려집니다 — 한 번 만들어 두면 열 때마다 최신 뷰가 열립니다.
데스크톱 앱의 Reload 버튼이 필요할 때 연결 데이터를 다시 가져옵니다.12:04부터 보기