본문으로 건너뛰기

아티팩트

아티팩트는 모델이 생성한 파일과 코드 블록을 미리 볼 수 있는 측면 패널로 전환합니다. 게임, 다이어그램, HTML 데모, JSON 페이로드, 스크립트와 생성된 자산에 유용합니다.

아티팩트는 Work와 다릅니다. 아티팩트는 일반 채팅 응답에서 생성되어 브라우저에서 렌더링되며, 모델에 영구 파일 시스템이나 셸을 제공하지 않습니다. Work 작업은 영구 프로젝트 파일과 대화 기록을 유지하며, 작업 범위 Docker 컨테이너 안에서 모델 도구를 실행합니다.

지원되는 입력​

Libre WebUI는 다음 항목을 감지합니다.

  • 명시적인 <artifact> 블록
  • 아티팩트에 적합한 언어의 코드 펜스 블록
  • 독립적인 전체 HTML 문서
  • index.html, CSS, JavaScript 블록으로 만든 다중 파일 HTML 번들
  • JSX 및 TSX 컴포넌트
  • Mermaid 다이어그램
  • SVG 블록
  • JSON 블록
  • 코드 및 텍스트 조각

아티팩트 유형​

유형미리 보기 동작
HTML스크립트와 상호작용이 활성화된 샌드박스 iframe 미리 보기
ReactTailwind와 라이브러리 세트를 사용해 JSX 또는 TSX를 컴파일하고 마운트
Mermaid애플리케이션 테마를 적용해 샌드박스에서 다이어그램 렌더링
SVG인라인 시각적 미리 보기
JSON서식이 적용된 코드 보기
코드/텍스트구문 강조 코드 보기

다중 파일 HTML 번들​

모델이 서로 연관된 HTML, CSS, JavaScript 블록을 반환하면 Libre WebUI는 이를 실행 가능한 HTML 아티팩트로 병합하려고 합니다. 로컬 스타일시트/스크립트 참조를 제거하고 일치하는 생성 CSS와 JavaScript를 인라인으로 삽입합니다.

가장 안정적인 결과를 얻으려면 모델에 자체 완결형 HTML 파일 하나를 요청하세요.

Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.

뷰어 제어 기능​

아티팩트는 크기를 조절할 수 있는 측면 패널에서 열리며 다음 기능을 제공합니다.

  • 미리 보기 및 코드 탭
  • 복사
  • 다운로드
  • 새 창에서 열기
  • 사용 가능한 경우 확장/전체 화면 제어

대화형 아티팩트에 키보드 입력이 필요하면 먼저 미리 보기 안을 클릭하거나 새 창에서 여세요.

샌드박스 동작​

HTML 아티팩트는 미리 보기를 호스팅하는 작은 백엔드 문서인 GET /api/artifacts/sandbox를 통해 로드됩니다. 이 간접 계층은 중요합니다. srcdoc 프레임은 삽입하는 문서의 Content Security Policy를 상속하고 애플리케이션 정책은 인라인 스크립트를 금지하므로, 이 방식으로 렌더링한 아티팩트는 프로덕션에서 차단됩니다. 대신 샌드박스 호스트를 네트워크를 통해 가져오므로 호스트 자체의 정책이 적용되고, 이 호스트가 만드는 미리 보기 프레임도 그 정책을 상속합니다.

아티팩트는 본질적으로 인라인 스크립트와 eval을 사용하므로 아티팩트 정책은 이 둘을 허용하지만 이 애플리케이션 외의 호스트는 지정하지 않습니다. 아티팩트는 렌더링하고 계산할 수 있지만 CDN에서 데이터를 가져오거나 외부로 통신할 수는 없습니다.

프레임 자체는 스크립트, 양식, 모달, 팝업, 포인터 잠금, 다운로드를 허용하지만 allow-same-origin은 절대 허용하지 않습니다. 따라서 아티팩트는 애플리케이션의 쿠키, 저장소 또는 DOM에 접근할 수 없는 불투명 출처에서 실행됩니다. 기능 정책은 클립보드 접근, 전체 화면과 게임패드 입력을 허용합니다.

아티팩트 런타임​

생성된 아티팩트는 라이브러리를 사용할 수 있다고 가정합니다. 애플리케이션은 아티팩트가 CDN에 접근하도록 두는 대신 요청하는 라이브러리를 자체 포함합니다.

아티팩트에서 사용 가능접근 방식
React, ReactDOM, Framer Motionimport ... from 'react'
JSX 및 TSX프레임에서 Babel로 컴파일
Tailwind 유틸리티빌드 없이 마크업에서 생성
Recharts, Chart.js, Plotly, D3import ... from '<name>'
제어, 로더, 환경 및 추가 애드온을 포함한 Three.jsTHREE.OrbitControls 또는 import
Lucide 아이콘, Lodash, MathJS, Papa Parse, Tone.jsimport ... from '<name>'
Mermaidmermaid 아티팩트 또는 import

이 세트에 없는 라이브러리를 요청하는 아티팩트에는 빈 미리 보기와 콘솔 정책 오류 대신 해당 라이브러리 이름이 포함된 알림이 표시됩니다.

프레임은 어떤 라이브러리도 직접 가져오지 않습니다. 사용자 세션을 가진 애플리케이션 페이지가 필요한 번들을 로드해 아티팩트 문서에 인라인으로 넣고, 아티팩트 자체의 import 문은 네트워크 모듈 확인으로 남지 않고 작은 레지스트리 조회로 컴파일됩니다.

이 간접 계층은 우연히 생긴 것이 아닙니다. 샌드박스 프레임은 불투명 출처를 사용하므로 브라우저는 해당 요청을 교차 사이트 요청으로 취급하고 세션 쿠키를 보내지 않습니다. Cloudflare Access, Authelia, oauth2-proxy 같은 인증 프록시 뒤에서는 이런 요청이 로그인 페이지 리디렉션으로 돌아오고, 샌드박스 정책은 이를 로드하지 않아 아티팩트가 Content Security Policy 오류로 실패합니다. 인라인 방식은 요청 자체를 없애므로 아티팩트가 노트북에서도 기업 접근 게이트 뒤에서도 똑같이 작동합니다.

React 아티팩트는 샌드박스에서 컴파일되고 마운트됩니다. 컴포넌트를 모듈 기본값으로 내보내면 렌더링됩니다. 모든 라이브러리가 같은 레지스트리에서 React를 확인하므로 React 인스턴스는 하나이고 훅도 정상적으로 동작합니다.

CDN에서 라이브러리를 로드하는 HTML 아티팩트도 계속 작동합니다. Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React 또는 Babel을 가리키는 <script>나 <link>는 같은 문서 위치에서 자체 포함 빌드로 대체되므로 인라인 스크립트가 실행될 때도 Chart, d3, React를 찾을 수 있습니다. 이 세트에 없는 라이브러리는 사용할 수 없으므로 직접 인라인으로 넣어야 합니다.

프레임은 불투명 출처를 사용하므로 실제 localStorage, sessionStorage, document.cookie는 오류를 발생시킵니다. 샌드박스는 메모리 내 대체 구현을 제공해 이를 사용하는 아티팩트도 계속 실행되도록 합니다. 내용은 미리 보기가 유지되는 동안만 지속되며 애플리케이션과 공유되지 않습니다.

아티팩트는 생성된 코드를 실제로 실행합니다. 신뢰할 수 없는 HTML을 미리 보기 외부에서 다운로드하거나 재사용하기 전에 검사하고, 아티팩트에 비밀 값을 넣지 마세요.

더 좋은 프롬프트​

게임용:

Build a complete browser game as one HTML file.
Use canvas.
Inline all CSS and JavaScript.
Show controls on screen.
Avoid external assets unless they are optional.

대시보드용:

Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.

React 컴포넌트용:

Return one React component in a single jsx block.
Export it as the default export.
Style it with Tailwind classes.
Import anything you need from react, recharts, or lucide-react.

SVG용:

Return only one valid SVG code block with width, height, and viewBox.

관련 문서​