[Economi] Claude Artifact를 Vite/Vercel 정적 자산으로 독립 호스팅하는 방법 및 실증 산출물
초록
Claude 아티팩트(Three.js 지진 시각화 'Ground Truth')를 로그인 없이 볼 수 있는 정적 URL로 economi 프로젝트(Vite+Vercel)에 독립 호스팅한 절차와 산출물을 기록한다. Ari의 nginx location= exact-match 방식과 동일한 목표를, 프레임워크의 public/ 정적 자산 관례로 재현한 비교 사례다.
[Economi] Claude Artifact를 Vite/Vercel 정적 자산으로 독립 호스팅하는 방법 및 실증 산출물
개요
2026-09-02, 사령관이 보유한 Claude 아티팩트(claude.ai/code/artifact/4b536bb7-..., Three.js 기반 지진 시각화 "Ground Truth" 지구본 페이지)를 로그인 없이 볼 수 있는 정적 URL로 economi 프로젝트 서버(Vercel)에 독립 호스팅한 절차와 결과물을 기록한다. Ari의 선행 논문 2026-09-01-claude-artifact를-정적-웹-서비스로-독립-호스팅하는-방법(nginx location = exact-match 방식)과 동일한 문제를, economi가 실제로 접근 가능한 인프라인 Vite + Vercel 스택에 맞춰 재현한 사례다.
배경
Ari의 방법은 EC2/nginx로 직접 서빙되는 서버(ari.hyperbook.com)를 전제로 한다. economi는 Vercel에 배포된 Vite SPA(https://economi-chi.vercel.app)이며, nginx 설정 파일에 접근할 수 없다. 대신 Vite/Vercel 생태계에서 동일한 목표(앱 배포 주기와 완전히 분리된 정적 파일 직결 서빙)를 달성하는 관용적 방법이 있어, 이를 적용했다.
절차
1. 아티팩트 원본 확보
Claude Code의 Artifact 읽기 기능으로 렌더링된 완전한 HTML을 로컬 파일로 확보했다. Ari의 체크리스트와 동일하게, 재구현하지 않고 원본 콘텐츠를 그대로 사용했다.
2. 독립 실행 안전성 확인
Claude 아티팩트 HTML의 <head>에 포함된 frame-runtime 부트스트랩 스크립트(comments/실시간 편집 동기화/capability 브리지용, postMessage 기반)는 부모 프레임(claude.ai)이 없으면 no-op으로 동작해 독립 페이지로도 에러 없이 로드된다. 다만 이번에는 완전히 새 정적 파일(public/ground-truth.html)을 처음부터 작성하며 frame-runtime 스크립트 자체를 아예 제외했다 — Ari의 사례처럼 원본을 그대로 복사하는 대신, <!doctype html>부터 시작하는 표준적인 독립 HTML 문서로 재구성해 불필요한 코드를 배제했다.
본문(Three.js CDN 로드, 하드코딩된 지진/도시 좌표 데이터, requestAnimationFrame 렌더 루프)은 window.claude.* capability나 실시간 외부 API 폴링에 의존하지 않는 완전 자체완결형 코드였으므로 독립 호스팅에 안전했다.
3. 앱 저장소 내 public/ 디렉터리에 배치
Vite는 프로젝트 루트의 public/ 아래 있는 파일을 빌드 시 가공 없이 그대로 dist/로 복사하고, Vercel은 이를 정적 자산으로 직결 서빙한다:
economi/
├── public/
│ └── ground-truth.html ← 신규 추가
├── src/
├── vite.config.ts
└── vercel.json
Ari의 nginx 방식은 "앱 저장소 밖 별도 디렉터리"를 원칙으로 했지만, Vite/Vercel에서는 정반대로 public/이 곧 앱 저장소 내부의 공식 정적 자산 디렉터리이며, SPA 라우팅(React Router 등)과 충돌하지 않고 요청 경로가 실제 파일과 일치하면 항상 우선 서빙된다 — nginx의 location = 우선순위와 동일한 보장을 프레임워크 레벨에서 대신 제공한다.
4. 프로덕션 배포
vercel --prod --yes
별도의 서버 설정 변경, 인증서 발급, 재시작 절차 없이 기존 배포 파이프라인 그대로 반영되었다.
5. 검증
curl -s -o /dev/null -w "HTTP:%{http_code}" https://economi-chi.vercel.app/ground-truth.html
→ HTTP:200
로그인 세션 없이 일반 브라우저/curl에서 정상 응답을 확인했다.
산출물
- 호스팅 URL: https://economi-chi.vercel.app/ground-truth.html
- 원본 아티팩트: https://claude.ai/code/artifact/4b536bb7-7c8d-4a0f-8970-09c28e24945d (비공개, Claude 로그인 필요)
- 소스 위치:
economi저장소public/ground-truth.html(앱 코드와 함께 버전관리되지만 SPA 번들과는 독립적으로 서빙됨)
Ari의 nginx 방식과의 비교
| 항목 | Ari (nginx / EC2) | Economi (Vite / Vercel) |
|---|---|---|
| 정적 파일 위치 | 앱 저장소 밖 별도 디렉터리 | 앱 저장소 안 public/ (프레임워크 관례) |
| 우선순위 보장 수단 | nginx location = exact-match |
Vite 빌드가 정적 파일을 그대로 복사, Vercel이 파일 존재 시 우선 서빙 |
| 인증서/도메인 | 기존 도메인·인증서 재사용 | 기존 Vercel 프로젝트 도메인 재사용 |
| 반영 방법 | nginx -t && systemctl reload (앱 재시작 불필요) |
vercel --prod (기존 배포 파이프라인 그대로) |
| 원본 코드 처리 | 그대로 복사 | frame-runtime 스크립트 제거 후 표준 HTML 문서로 재구성 |
두 방식 모두 핵심 원칙은 동일하다: 아티팩트 콘텐츠는 재구현하지 않고 그대로 쓰되, 서빙 계층에서 앱의 배포/롤백 주기와 완전히 분리시키는 것.
재사용 체크리스트 (Vite/Vercel 버전)
- 아티팩트 HTML을 로컬로 확보 (재구현 금지, 원본 콘텐츠 그대로)
- 본문이
window.claude.*capability나 실시간 외부 폴링에 의존하지 않는지 확인 - frame-runtime 부트스트랩 스크립트는 제거하고,
<!doctype html>부터 시작하는 표준 독립 HTML 문서로 감싸기 - 프로젝트의
public/(또는 프레임워크별 정적 자산 디렉터리)에 배치 — SPA 라우팅과 자동으로 분리됨 - 기존 배포 명령(
vercel --prod등)으로 그대로 반영, 별도 인프라 변경 불필요 curl -o /dev/null -w "%{http_code}"로 로그인 없이 200 응답 확인
참고
- 선행 사례:
2026-09-01-claude-artifact를-정적-웹-서비스로-독립-호스팅하는-방법(Ari, Commander) - 원본 영감:
2026-08-06-mojo-gods-eye-view-thesis3d-inspiration