Claude Artifacts 로컬 실행법: 설치 없는 HTML 루트(2026)
모든 Claude Artifact은 의존성을 전부 품은 단일 HTML 파일입니다. 이 가이드는 코드 복사부터 .html로 저장, 더블클릭 실행까지 전체 내보내기 과정을 다루고, 아티팩트 자체의 다운로드 버튼 지름길과 React Artifact을 Vite로 돌리는 방법까지 소개합니다.
30초 요약
- Claude Artifact의 정체는 단일 파일 HTML입니다. 왼쪽에 채팅, 오른쪽에 전체 코드 패널이 있으니, Claude 밖에서 실행하는 데 필요한 것은 이미 화면 위에 있습니다.
- 복사 루트: 코드를 전부 선택해 새 텍스트 파일에 붙여넣고, 확장자 .html로 저장한 뒤 두 번 클릭하면 기본 브라우저에서 아티팩트가 열립니다.
- 다운로드 루트: Claude의 아티팩트 카드에는 Download 버튼이 있어, 클릭 한 번으로 .html 파일이 다운로드 폴더에 저장됩니다. 복사·붙여넣기조차 필요 없습니다.
- 확장자를 확인하세요. 메모장은 기본값이 .txt이고 브라우저는 .txt를 웹페이지로 렌더링하지 않습니다. '.html로 저장'하는 이 한 단계가 진짜 실행 스위치입니다.
Make an HTML File from a Claude.ai Game File
채널:Karl Kapp1:53
이 가이드는 영상에서 시연한 작업 흐름을 독자적인 단계별 그림 튜토리얼로 재구성한 것입니다. 스크린샷은 해당 녹화에서 추출했으며 각각 촬영 시점으로 이동하는 링크가 붙어 있습니다.
FAQ의 Vite + React + shadcn/ui 루트는 Matt Palmer의 "Editing Claude Artifacts locally with Vite, React, and Shadcn/ui"에서 가져왔으며, 두 번째 출처로 표기했습니다.
단계별로, Artifact을 Claude 밖에서 실행하기
- 1
아티팩트 코드 패널 열기
Claude에서 아티팩트가 있는 대화를 열고 코드 패널을 펼쳐 채팅과 소스를 나란히 놓으세요. 찾아야 할 것은 스타일과 스크립트까지 모두 담은 하나의 연속된 HTML 문서입니다. 그 한 파일이 곧 앱 전체이기 때문입니다.
왼쪽 채팅, 오른쪽 아티팩트 HTML 소스 — 이 한 파일이 전부입니다.0:02에 보기 - 2
코드 패널의 Copy 버튼 찾기
코드 패널 머리글에는 아티팩트 이름과 HTML 태그, 그리고 Copy 버튼이 나란히 있습니다. 한 번의 클릭으로 현재 버전의 소스 전체가 복사되며, 범위를 직접 드래그할 필요가 없습니다.
Copy 한 번이면 현재 리비전의 전체 코드를 가져옵니다.0:08에 보기 - 3
내보내기 전에 미리보기로 플레이하기
미리보기로 바꿔서 앱을 실제로 조작해 보세요. 이 예제는 빛점을 모으고 적 원을 피하는 퀴즈 미니게임으로, 점수판과 문제 팝업이 붙어 있습니다. 현재 리비전의 조작감이 기대에 맞는지 확인하세요. 미리보기에서 돌아가는 것이 곧 내보낼 것입니다.
미리보기는 곧 복사할 그 리비전입니다. 먼저 여기서 테스트하세요.0:20에 보기 - 4
HTML 소스 전체 복사하기
코드 패널을 첫 DOCTYPE부터 마지막 script 태그까지 스크롤해 빠진 부분이 없는지 확인한 뒤 전부 복사하세요. 붙여넣은 뒤 실행되지 않는다면 불완전한 복사가 첫 번째 용의자입니다.
DOCTYPE부터 마지막 script 태그까지 — 복사는 완전해야 합니다.0:30에 보기 - 5
바탕화면에 새 텍스트 문서 만들기
Windows 바탕화면 빈 공간을 오른쪽 클릭하고 새로 만들기 → 텍스트 문서를 고르세요. 코드를 담을 빈 파일이 준비됩니다. 에디터 설치는 불필요하며 메모장이면 충분합니다.
바탕화면 오른쪽 클릭 → 새로 만들기 → 텍스트 문서. 이 루트에는 메모장이면 됩니다.0:47에 보기 - 6
빈 파일을 메모장으로 열기
새 문서를 두 번 클릭하면 커서가 1행 1열에 놓인 빈 상태로 메모장이 열립니다. 뒤에는 Claude 탭을 열어 두세요. 이제 1분 정도는 두 창 사이를 오가게 됩니다.
1행 1열의 빈 메모장, 뒤에는 대기 중인 Claude가 있습니다.0:55에 보기 - 7
아티팩트 코드를 파일에 붙여넣기
복사한 내용을 전부 붙여넣으세요. 파일에는 곧바로 HTML과 JavaScript가 채워집니다. 이 예제는 캔버스 게임의 그리기 헬퍼와 메인 루프입니다. 중간에 잘린 것 같으면 4단계로 돌아가 다시 복사하세요.
아티팩트 전체가 이제 여러분 PC의 텍스트 파일 하나에 담겼습니다.0:57에 보기 - 8
.html 확장자로 저장하기
파일 → 다른 이름으로 저장을 열고 .html로 끝나는 이름을 붙이세요. 대화상자의 파일 형식은 여전히 텍스트 문서여도 괜찮습니다. 결정적인 것은 이름에 직접 입력하는 .html입니다. 브라우저는 HTML이라고 인식하는 페이지만 렌더링하니까요.
이름이 전부를 결정합니다. game.html은 실행되고 game.txt는 안 됩니다.1:01에 보기 - 9
바꾸기 경고가 뜨면 이름 변경으로 해결
Windows가 파일이 이미 존재한다고 경고하면 '아니요'를 고르고 새 이름을 지정하세요. 영상에서는 game.html을 먼저 저장했기 때문에 두 번째 내보내기는 game2.html이 됩니다. 이름을 다르게 하면 모든 버전이 디스크에 남고 덮어써지지 않습니다.
바꾸기에는 '아니요', 이름은 game2.html — 앞선 내보내기가 그대로 남습니다.1:07에 보기 - 10
파일을 두 번 클릭하고 플레이
바탕화면에서 저장한 파일을 찾아 두 번 클릭하세요. file:/// 주소로 기본 브라우저가 열리고, 게임의 시작 화면·점수·적 원이 Claude 안과 똑같이 돌아갑니다. 서버도, claude.ai 탭도 필요 없습니다.
file:///...Desktop/game2.html — 아티팩트가 이제 온전히 여러분 컴퓨터에서 실행됩니다.1:32에 보기 - 11
지름길: Claude 자체 Download 버튼 활용
수동 복사만이 방법은 아닙니다. Claude는 아티팩트 카드 아래에 Download 버튼을 보여줍니다. 설정 가이드 같은 다른 파일과 Download all이 함께 붙는 경우도 있습니다. 클릭 한 번이면 .html이 다운로드 폴더로 곧장 저장되고, 메모장도 필요 없습니다.
아티팩트 카드의 Download 버튼이 .html을 바로 저장 — 복사·붙여넣기가 필요 없습니다.1:44에 보기 - 12
다운로드된 파일 확인하기
브라우저 다운로드 목록에 내보낸 파일이 표시됩니다. 여기서는 약 20 KB의 DKapp_Game_Revised.html입니다. 아무 파일이나 두 번 클릭하면 10단계와 같은 방식으로 로컬에서 실행되고, 텍스트 편집기로 열어 소스를 읽을 수도 있습니다.
다운로드 목록의 20 KB짜리 .html — 아티팩트 통째로, 오프라인 실행 준비 완료.1:50에 보기