모든 현대적인 노트북에는 격리된 상자 안에서 신뢰할 수 없는 코드를 실행할 수 있는 브라우저 엔진이 탑재되어 있습니다. 하지만 여러분이 AI가 생성한 코드 조각을 모든 전송 내용을 기록하는 클라우드 플레이그라운드(cloud playground)에 붙여넣는 동안, 그 동일한 샌드박스(sandbox)는 유휴 상태로 방치됩니다. Off Grid AI Desktop은 네트워크 연결과 파일 접근 권한 없이 여러분의 기기에서 직접 로컬 코드 샌드박스를 실행하는 무료 오픈 소스(open-source) 앱입니다.

GitHub → 무료, 오픈 소스, 오프라인 실행.

AI 코드를 실행할 때 발생하는 문제

모델에게 작은 UI를 만들어 달라고 요청합니다. 모델은 React 코드 블록을 돌려줍니다. 이제 어떻게 해야 할까요?

옵션 1: 브라우저 콘솔이나 새로운 HTML 파일에 붙여넣습니다. 무엇을 하는 코드인지 알 수 없으므로 먼저 한 줄씩 읽어봅니다. 옵션 2: 클라우드 플레이그라운드에 넣습니다. 빠르지만, 모든 키 입력이 여러분의 기기를 떠나 다른 사람의 서버에 저장됩니다.

두 옵션 모두 정보가 유출됩니다. 클라우드 플레이그라운드는 여러분의 코드와 종종 프롬프트(prompt)까지 확인합니다. 로컬 파일은 스크립트에 파일 시스템(filesystem) 접근 권한을 부여합니다. 둘 다 여러분이 직접 작성하지 않은 코드에 대해 원하는 방식이 아닙니다.

Off Grid AI Desktop은 세 번째 경로를 제공합니다. 모델은 기기 내에서 코드를 작성합니다. 코드는 기기 내에서 실행됩니다. 샌드박스는 인터넷에 접속할 수 없으며 단 하나의 파일도 읽을 수 없습니다.

필요한 사양

이 앱은 macOS 및 Windows에서 실행됩니다. 샌드박스 자체는 가볍습니다. 코드를 작성하는 로컬 모델(local model)이 메모리를 많이 요구하는 부분입니다.

미리보기 창은 단순히 샌드박스 처리된 브라우저 프레임일 뿐입니다. 렌더링하는 데 비용이 거의 들지 않습니다. 여러분의 하드웨어 예산은 모델에 집중됩니다.

Off Grid AI Desktop이 여기서 할 수 있는 일

로컬 모델에게 컴포넌트, 차트, 또는 레이아웃을 요청하세요. 모델이 코드를 작성합니다. 앱은 이를 샌드박스화된 iframe (sandboxed iframe) 내에서 실시간으로 렌더링하며, 여러분은 소스 코드와 실행 결과 사이를 전환하며 확인할 수 있습니다.

제공되는 기능은 다음과 같습니다:

• 모델이 작성한 HTML, SVG, JS 및 React의 실시간 미리보기. 결과물에 대한 설명이 아니라, 실제로 작동하는 모습을 직접 확인합니다.
• 코드/미리보기 토글 (Code/Preview toggle). 소스 코드를 읽고, 바로 실행되는 모습을 관찰하세요. 클릭 한 번으로 두 화면을 전환할 수 있습니다.
• 다운로드. 출력물을 저장하여 원하는 곳 어디에서든 사용할 수 있습니다.
• Mermaid 다이어그램. 평이한 영어로 플로우차트(flowchart)를 요청하면, 렌더링된 다이어그램을 얻을 수 있습니다.

핵심은 엄격한 안전 경계(safety boundary)를 유지하면서 속도를 확보하는 것입니다. 여러분은 원할 때 코드를 읽을 수 있습니다. 코드를 읽지 않더라도, 해당 코드가 외부로 신호를 보내거나(phone home) 디스크에 접근할 수 없다는 사실을 신뢰할 수 있습니다.

샌드박스 작동 방식

미리보기는 샌드박스화된 iframe (sandboxed iframe) 내부에서 실행됩니다. 여기서 가장 중요한 두 가지 제한 사항이 있습니다.

네트워크 액세스 차단. 프레임은 fetch 호출을 하거나, 원격 스크립트를 로드하거나, 소켓(socket)을 열 수 없습니다. 만약 모델이 외부로 신호를 보내려는(beacon out) 코드를 작성하더라도, 해당 호출은 아무 곳에도 도달하지 못합니다.

파일 액세스 차단. 프레임은 사용자의 홈 디렉토리, 문서, 또는 디스크의 그 어떤 것에도 접근할 수 없습니다. 프레임은 뒤에 아무것도 없는 자신만의 격리된 상자(walled box) 안에서 실행됩니다.

그렇다면 모델이 React를 작성할 때, React는 어디에서 가져오는 것일까요? CDN이 아닙니다. 런타임(runtimes)이 앱 내부에 포함되어 있습니다.

오프라인 런타임, CDN 미사용

대부분의 실시간 미리보기 도구들은 렌더링 시점에 React, JSX 컴파일러, 그리고 다이어그램 라이브러리를 콘텐츠 전송 네트워크 (CDN)로부터 가져옵니다. 이는 미리보기를 할 때마다 네트워크 호출이 발생하며, 온라인 상태여야 한다는 강력한 의존성이 생김을 의미합니다.

Off Grid AI Desktop은 이러한 런타임들을 앱 리소스에 번들(bundles)로 포함합니다:

• React (UMD 빌드): 컴포넌트용.
• Babel-standalone: 브라우저 프레임 내에서 JSX를 컴파일하기 위함.
• Mermaid: 다이어그램용.

이들은 앱 내부의 디스크에 존재합니다. CDN도, fetch도, 여러분의 의도와 다르게 변경되는 버전도 없습니다. 미리보기는 비행기 안에서도 책상 앞에서도 동일한 방식으로 렌더링됩니다. 이것이 바로 네트워크 차단 규칙이 아무것도 망가뜨리지 않는 이유이기도 합니다. 애초에 프레임은 네트워크를 필요로 하지 않았기 때문입니다.

모델이 코드 작성 -> 코드/미리보기(Code/Preview) 전환 -> 샌드박스 처리된 iframe
                                                  네트워크 없음
                                                  파일 접근 불가
...

실질적인 팁: 코드를 읽고, 그 다음 박스를 신뢰하세요

AI가 생성한 코드에 대해 자연스럽게 드는 걱정은 사용자가 요청하지 않은 동작을 수행할 수 있다는 점입니다. 일반적인 샌드박스(Sandbox)는 코드를 실행하기 전에 모든 줄을 검토(Audit)할 것을 요구합니다. 하지만 이 방식은 그 순서를 뒤집습니다.

먼저 미리보기(Preview)로 전환하세요. 프레임에는 네트워크와 디스크가 없으므로, 악의적인 코드라 할지라도 작용할 대상이 없습니다. 동작을 관찰하십시오. 결과가 마음에 든다면, 코드(Code)로 전환하여 소스 코드를 읽은 뒤 다운로드하세요. 당신이 검토를 하는 이유는 코드가 무서워서가 아니라, 깨끗한 코드를 원하기 때문입니다.

React 작업을 할 때는 컴포넌트를 독립적으로 유지하세요. 번들링된 UMD 빌드가 React 자체를 포함합니다. 모델에게 모호한 제3자 패키지(Third-party package)를 사용하도록 요청하기보다는, 표준 훅(Hooks)과 JSX를 작성하도록 요청하세요.

개인정보 보호: 클라우드 플레이그라운드보다 강력한 보안

클라우드 플레이그라운드(Cloud playground)는 당신의 프롬프트, 코드, 그리고 수정 사항을 모두 확인합니다. 많은 서비스가 이를 저장합니다. 절반만 완성된 아이디어의 초안이 누군가의 데이터베이스에 한 줄의 기록으로 남게 됩니다.

Off Grid AI Desktop은 이 과정에 서버가 개입하지 않기 때문에 그 무엇도 볼 수 없습니다. 모델은 당신의 기기에서 실행됩니다. 샌드박스 또한 당신의 기기에서 실행됩니다. Off Grid AI Desktop은 AGPL-3.0 라이선스 하에 공개된 오픈 소스(Open source)이며, 계정을 요구하지 않고, 텔레메트리(Telemetry)를 전송하지 않으며, 네트워크 케이블을 뽑은 상태에서도 작동합니다. 당신이 생성한 코드는 당신의 것이며 당신의 디스크에 머뭅니다.

시작하기

1. GitHub에서 클론(Clone)하거나 다운로드하세요: https://github.com/off-grid-ai/desktop
2. macOS 또는 Windows에 앱을 설치합니다.
3. 앱을 실행하고 내장된 모델 브라우저에서 로컬 모델을 선택합니다.
4. 채팅을 열고 시각적인 것을 요청해 보세요. "작은 React 카드 컴포넌트를 만들어줘" 또는 "Mermaid를 사용하여 로그인 흐름에 대한 플로우차트를 그려줘"라고 시도해 보세요.
5. 코드가 도착하면, 미리보기(Preview)로 전환하여 실행되는 모습을 관찰한 다음, 코드(Code)로 전환하여 읽어보세요. 원한다면 다운로드하세요.

향후 계획

• 모델 출력의 더 넓은 범위를 지원할 수 있도록 더 많은 번들형 런타임 (bundled runtimes) 추가
• 다른 온디바이스 (on-device) 도구들이 동일한 미리보기를 재사용할 수 있도록 공유 로컬 API (shared local API) 제공
• 클라우드 중개자 없이 한 기기에서 구축한 샌드박스가 다른 기기에서도 나타나도록 하는 기기 간 동기화 (Cross-device sync)

FAQ

Q: 정말 무료인가요?

네. Off Grid AI Desktop은 AGPL-3.0 라이선스 하에 제공되는 무료 오픈 소스 소프트웨어입니다. 계정 생성이나 카드 등록이 필요 없습니다.

Q: 미리보기에서 AI 코드가 인터넷에 접속할 수 있나요?

아니요. 샌드박스 처리된 iframe은 네트워크 액세스 권한이 없습니다. 미리보기 내부에서 발생하는 fetch 호출이나 원격 스크립트 로드 (remote script load)는 아무런 동작도 수행할 수 없습니다.

Q: 미리보기가 제 파일을 읽을 수 있나요?

아니요. 프레임은 파일 액세스 권한이 없습니다. 사용자의 홈 폴더나 디스크의 그 어떤 파일도 읽을 수 없습니다.

Q: React를 렌더링하려면 온라인 상태여야 하나요?

아니요. React, Babel-standalone, 그리고 Mermaid가 앱 리소스에 번들링되어 있습니다. CDN 호출이 없으므로 미리보기는 완전히 오프라인 상태에서도 작동합니다.

Q: 모델이 무엇을 작성하고 미리볼 수 있나요?

HTML, SVG, 순수 JavaScript (plain JavaScript), React 컴포넌트, 그리고 Mermaid 다이어그램입니다. 코드 (Code)와 미리보기 (Preview) 사이를 전환하며 확인할 수 있고, 결과물을 다운로드할 수 있습니다.

Q: Mac인가요, Windows인가요?

둘 다 지원합니다. 이 앱은 macOS (Apple Silicon) 및 Windows (CUDA 또는 Vulkan GPU, CPU 폴백 지원)에서 실행됩니다.

네트워크나 파일을 넘겨주지 않고도 AI가 생성한 코드를 실행하세요. Off Grid AI Desktop on GitHub →