로컬 Artifacts: 클라우드 없이 기기 내에서 HTML, React, SVG 및 Mermaid 렌더링하기

브라우저 엔진을 사용하면 인터넷 연결이 전혀 없는 상태에서도 React를 실행하고, SVG를 렌더링하며, Mermaid 다이어그램을 그릴 수 있습니다. 런타임(Runtimes)은 단지 JavaScript 파일일 뿐입니다. 하지만 대부분의 AI artifact 기능은 사용자의 프롬프트를 서버로 전송하고, 자신들의 방식대로 클라우드에서 결과를 렌더링합니다.

Off Grid AI Desktop은 네트워크에 접속할 수 없는 샌드박스(Sandbox) 환경 내에서, 사용자의 기기 상에 모델의 출력을 실시간으로 렌더링하는 캔버스(Canvas)를 갖추고 있습니다.

GitHub →

무료이며, 오픈 소스이고, 오프라인에서 작동합니다. 계정, API 키, 텔레메트리(Telemetry)가 필요 없습니다.

기능 설명

로컬 모델이 HTML, SVG, Mermaid 또는 React (JSX) 블록을 작성하면, Off Grid AI Desktop은 이를 실시간으로 렌더링합니다. 코드는 채팅창에 단순한 텍스트로 머물러 있지 않습니다. 코드가 실행되며, 그 결과물을 옆에서 바로 확인할 수 있습니다.

클라우드 채팅 도구의 artifact 기능을 사용해 보셨다면 그 느낌을 아실 겁니다. 대시보드를 요청하면 작동하는 대시보드를 얻고, 플로우차트(Flowchart)를 요청하면 플로우차트를 얻습니다. 여기서의 차이점은 실행되는 위치입니다. 모든 것은 앱 내에서, 사용자의 하드웨어 위에서 일어납니다.

요구 사항

캔버스는 가볍습니다. 코드를 작성하는 모델이 무거운 부분입니다.

최소 사양: 모든 Apple Silicon Mac (M1 이상) 또는 8 GB RAM과 최신 CPU를 갖춘 Windows PC.

권장 사양: 16 GB RAM 및 코드 작성에 능숙한 채팅 모델. 더 강력한 코드 모델일수록 더 깔끔한 컴포넌트를 작성하며 렌더링 오류가 적습니다.

렌더링 자체는 모든 컴퓨터에 이미 탑재되어 있는 브라우저 엔진을 사용합니다.

네 가지 블록 유형

캔버스는 네 가지 종류의 출력을 인식합니다.

HTML은 스타일을 포함한 페이지 또는 단편(Fragment)을 렌더링합니다. 랜딩 페이지, 서식이 지정된 레이아웃, 빠른 목업(Mockup) 제작에 좋습니다.

SVG는 벡터 그래픽을 그립니다. 로고, 아이콘, 간단한 일러스트레이션, 직접 만든 차트 등에 사용됩니다.

Mermaid는 텍스트를 다이어그램으로 변환합니다. 플로우차트(Flowcharts), 시퀀스 다이어그램(Sequence diagrams), 조직도(Org charts), 상태 머신(State machines) 등이 해당됩니다. 모양을 말로 설명하면 그려줍니다.

**React (JSX)**는 실제 컴포넌트를 실행합니다. 인터랙티브 위젯, 작은 도구, 상태(State)와 버튼이 있는 모든 것이 가능합니다.

샌드박스: 네트워크 없음, 파일 없음

렌더링은 샌드박스(sandboxed) 처리된 iframe 내부에서 발생합니다. 이 샌드박스는 네트워크 액세스 권한과 파일 액세스 권한이 없습니다. 모델이 작성한 코드는 외부로 신호를 보낼 수 없고(phone home), 사용자의 디스크를 읽을 수 없으며, 자체 프레임 외부의 그 어떤 것에도 도달할 수 없습니다.

이는 AI가 작성한 코드가 여전히 사용자가 한 줄씩 검토하지 않은 코드라는 점에서 매우 중요합니다. 밀봉된 상자 안에서 코드를 실행한다는 것은, 잘못된 fetch 요청이나 수상한 스크립트가 어디로도 향할 수 없음을 의미합니다. 모델에게 사용자의 기기에 대한 권한을 넘겨주지 않고도 렌더링된 결과물을 얻을 수 있습니다.

CDN 없음, 인터넷 없음

브라우저 기반의 React 도구들은 보통 실행 시점에 CDN으로부터 React, JSX 컴파일러, 그리고 다이어그램 라이브러리를 가져옵니다. 이는 매번 네트워크 호출이 발생함을 의미하며, 오프라인 상태에서는 아무것도 렌더링되지 않음을 의미합니다.

Off Grid AI Desktop은 이러한 런타임(runtimes)을 앱 자체 리소스에 포함합니다. React (UMD), JSX를 위한 Babel-standalone, 그리고 Mermaid가 모두 앱 내부에 탑재되어 있습니다. 캔버스(canvas)는 이들을 로컬에서 로드합니다. CDN도, 인터넷도 필요 없으며, 타인의 서버가 가동될 때까지 기다릴 필요도 없습니다.

네트워크를 꺼도 캔버스는 여전히 모든 것을 렌더링합니다.

코드와 미리보기, 그리고 다운로드

각 아티팩트(artifact)에는 코드(Code)와 미리보기(Preview) 토글이 있습니다. 미리보기로 전환하여 실행 중인 결과를 확인하세요. 코드로 전환하여 모델이 실제로 무엇을 작성했는지 읽어보고, 신뢰하기 전에 검토할 수 있습니다.

결과물이 마음에 들면 다운로드하세요. 아티팩트는 프로젝트에 바로 넣거나, 브라우저에서 열거나, 다른 사람에게 전달할 수 있는 실제 파일입니다.

사람들이 이것으로 만드는 것들

캔버스로 수행하기 좋은 몇 가지 작업들입니다.

대시보드 (Dashboards). 카드와 레이아웃이 포함된 지표 뷰를 요청하면, 사용자의 수치로 채울 수 있는 작동 가능한 HTML 또는 React 대시보드를 얻을 수 있습니다.

차트 (Charts). 데이터와 차트 유형을 설명하세요. SVG 또는 React 차트가 즉석에서 렌더링됩니다.

다이어그램 (Diagrams). 흐름이나 시스템을 평이한 언어로 설명하세요. Mermaid가 이를 그려냅니다. 설명을 수정하면 다시 그려집니다.

미니 앱 (Mini-apps). 단위 변환기, 타이머, 작은 계산기 등입니다. 샌드박스 내에서 실행되는 실제 상호작용이 가능한 React 컴포넌트입니다.

랜딩 페이지 (Landing pages). 히어로 섹션, 몇몇 섹션, 그리고 콜 투 액션 (Call to action)을 스케치해 보세요. HTML이 이를 실시간으로 렌더링하여 페이지가 형성되는 모습을 볼 수 있습니다.

더 깔끔한 렌더링을 위한 팁

몇 가지 도움이 되는 방법이 있습니다.

코딩에 강한 모델을 선택하세요. 컴포넌트 (Component) 출력물은 이를 작성하는 모델의 성능에 좌우되며, 코드에 최적화된 모델 (Code-tuned model)은 오류가 덜 발생합니다.

원하는 바를 구체적으로 명시하세요. 차트 유형, 레이아웃, 색상을 지정하세요. 모호한 프롬프트 (Prompt)는 모호한 컴포넌트를 만듭니다.

문제를 파악하기 위해 코드 보기 (Code view)를 사용하세요. 렌더링이 이상해 보인다면 코드를 읽어보세요. 종종 모델에게 수정을 요청할 수 있는 명확한 해결책 하나가 발견되곤 합니다.

React의 경우, 단일 자립형 컴포넌트 (Self-contained component)를 요청하세요. 가동되는 부품이 적을수록 샌드박스 (Sandbox) 내에서 렌더링 오류가 줄어듭니다.

개인정보 보호: 클라우드 Artifacts보다 강력함

클라우드 Artifacts 기능은 사용자의 프롬프트를 서버로 전송하고, 해당 환경에서 렌더링하며, 복사본을 보관합니다. 사용자의 대시보드, 다이어그램, 미완성된 아이디어 모두 사용자가 제어할 수 없는 인프라를 통과하게 됩니다.

Off Grid AI Desktop은 이를 사용자의 기기에 그대로 유지합니다. 모델은 로컬 (Locally)에서 실행됩니다. 런타임 (Runtimes)은 가져오는 방식이 아니라 번들 (Bundled)로 포함되어 있습니다. 샌드박스에는 외부 네트워크 연결이 없습니다. 이 앱은 AGPL-3.0 라이선스이므로 소스 코드를 읽고 모든 것을 확인할 수 있습니다. 계정도, 텔레메트리 (Telemetry)도 없습니다.

시작하기

https://github.com/off-grid-ai/desktop에서 앱을 받거나, 클론 (Clone)하여 빌드하세요.
설치 후 실행합니다.
내장된 브라우저에서 채팅 모델을 다운로드하세요. 가급적 코드에 능숙한 모델이 좋습니다.
모델에게 차트, 다이어그램, 또는 작은 컴포넌트를 요청하세요.
캔버스 (Canvas)에서 렌더링되는 것을 지켜보고, 코드로 전환하여 확인한 뒤 다운로드하세요.

향후 계획

더 많은 렌더링 가능한 블록 유형과 풍부한 다이어그램 지원.
Artifact를 제자리에서 편집하고 즉시 재렌더링하는 기능.
문서와 함께 프로젝트 내에 Artifact를 저장하는 기능.

FAQ

Q: 정말 무료인가요?

네. 이 앱은 AGPL-3.0 라이선스 하에 무료이며 오픈 소스입니다. 계정, 구독, API 키가 필요 없습니다.

Q: 캔버스는 오프라인에서도 작동하나요?

네. React, Babel, 그리고 Mermaid 런타임 (runtimes)이 앱에 번들링되어 있습니다. CDN 호출이 없으므로 네트워크가 꺼진 상태에서도 렌더링됩니다.

Q: AI가 작성한 코드를 실행하는 것이 안전한가요?

렌더링은 네트워크 및 파일 접근 권한이 없는 샌드박스 (sandboxed) iframe 내에서 이루어집니다. 코드는 사용자의 디스크나 인터넷에 접근할 수 없습니다. 또한, 먼저 코드 보기 (Code view)를 통해 내용을 확인할 수도 있습니다.

Q: 무엇을 렌더링할 수 있나요?

HTML, SVG, Mermaid 다이어그램 (diagrams), 그리고 React (JSX) 컴포넌트 (components)를 렌더링할 수 있습니다. 대시보드 (dashboards), 차트 (charts), 다이어그램 (diagrams), 미니 앱 (mini-apps), 그리고 랜딩 페이지 (landing pages) 등이 가능합니다.

Q: 생성된 결과물을 내보낼 수 있나요?

네. 각 아티팩트 (artifact)에는 다운로드 기능이 있어, 다른 곳에서 사용할 수 있는 실제 파일을 얻을 수 있습니다.

Q: 제 데이터는 비공개로 유지되나요?

네. 모델은 로컬 (locally)에서 실행되고, 런타임 (runtimes)은 번들링되어 있으며, 샌드박스 (sandbox)는 외부 네트워크 연결이 차단되어 있습니다. 텔레메트리 (telemetry)는 없으며 소스 코드는 공개되어 있습니다.

차트, 다이어그램, 또는 미니 앱을 요청하고 여러분의 기기에서 직접 렌더링되는 것을 확인해 보세요.