기능 소개

기획에서 구현, 보안까지 — 하나의 흐름으로 연결되는 5개 핵심 구성요소.
모든 기능은 오프라인 환경에서 완벽하게 동작합니다.

01AI UI 디자이너

Airgap Designer

기획에서 화면 초안까지

기획 단계에서 화면의 목적과 구성을 빠르게 정리하고, 와이어프레임과 UI 초안을 생성합니다. 대화형 인터페이스로 요청을 입력하면 AI가 즉시 화면을 구성하고, 결과는 디자이너가 마무리할 수 있도록 Figma로 바로 전달됩니다.

대화형 화면 생성 — 자연어 요청으로 와이어프레임·UI 초안 즉시 구성
반복 수정 — "버튼 위치 변경", "레이아웃 조정" 등 대화로 즉시 반영
Figma 연계 — 생성된 결과를 디자이너 작업 환경으로 바로 전달
디자인 토큰 반영 — Bridge에서 설정한 디자인 토큰이 생성 결과에 자동 적용
실시간 미리보기 — 생성 중인 UI를 캔버스에서 바로 확인

기반 기술	SecureDesign 포크, Vercel AI SDK v6
AI 모델	Qwen3:8b (Ollama 네이티브 도구 호출)
출력	HTML/CSS/JavaScript
설정	temperature 0.1 (안정적 출력)

Designer 대화 화면 + 캔버스 미리보기

02디자인 토큰 파이프라인

Airgap Bridge

디자인에서 코드로의 연결

디자인 결과를 구현 단계로 옮기는 연결 지점입니다. 3개 탭(Prototype, Production, Style Guide)으로 구성된 사이드바에서 디자인 워크플로우를 관리합니다.

디자인 → 코드 자동 변환 — 수작업 퍼블리싱 시간 대폭 단축
~95% 충실도 — Auto-layout → Flexbox 1:1 매핑, 결정론적 변환
디자인 토큰 동기화 — W3C DTCG 표준, 디자인 기준이 코드에 자동 반영
KRDS 지원 — 한국 정부 표준 디자인 시스템 프리셋 내장 (표준형 + 확장형)
Cline 연계 — 생성 코드 → Assistant에 전달 → 비즈니스 로직 주입

변환 엔진	VibeFigma CLI (결정론적) + fig2json+Qwen3 (AI 폴백)
토큰 표준	W3C DTCG (Design Token Community Group)
토큰 빌더	Style Dictionary v5.2.0
출력 포맷	Tailwind v4 @theme / CSS Variables / SCSS / JS Module

Bridge 3탭 인터페이스 + 코드 변환 결과

03오프라인 컴포넌트 라이브러리

Airgap UI Library

조직의 UI 기준을 유지하는 컴포넌트 라이브러리

조직의 표준 컴포넌트와 기준을 관리합니다. 프로젝트가 달라져도 UI의 기준과 방식은 유지됩니다. 버튼, 입력 폼, 모달, 테이블 등 85개 표준 컴포넌트를 카테고리별로 탐색하고, 미리 보고, 바로 코드에 삽입할 수 있습니다.

85개 표준 컴포넌트 — 8개 카테고리(Layout, Navigation, Forms, Content, Overlay, Feedback, Media, Styling)로 체계적 분류
실시간 미리보기 — 코드 삽입 전 실제 렌더링 결과를 즉시 확인
원클릭 코드 복사/삽입 — 선택한 컴포넌트를 작업 중인 파일에 바로 삽입
테마 커스터마이저 — 15가지 색상, 모서리, 그림자, 글꼴, 다크/라이트 모드
실시간 검색 — 컴포넌트 이름으로 빠르게 검색
100% 오프라인 — Pretendard 한국어 폰트까지 로컬 번들, LLM 불필요

기반	Franken UI (UIkit)
컴포넌트 수	85개 (8개 카테고리)
번들 크기	~8MB (CSS + JS + 폰트 + 이미지)
기술 스택	Vanilla JS (프레임워크 의존 없음)

Library 컴포넌트 브라우저 + 미리보기 + 코드 패널

04AI 코딩 어시스턴트

Airgap Assistant

맥락을 이해하는 AI 작업 파트너

작업 맥락을 이해하고, 계획과 실행을 나누어 단계별 작업을 지원합니다. 코드를 대신 만드는 도구가 아니라, 어떻게 작업할지를 함께 정리하고 실행하는 협력 파트너입니다.

Ollama 네이티브 도구 호출 — 파일 생성/편집, 터미널 명령 실행 등 실질적 개발 작업 수행
맥락 기반 지원 — 열린 파일 파악 → 수정 필요 부분 탐색 → 변경 제안 → 적용 전 미리보기
멀티 프로바이더 — Ollama(기본) 외 OpenAI, Anthropic, Google Gemini 전환 가능
자동 컴팩트 모드 — 긴 대화도 맥락을 유지하며 관리
한국어 기본 인터페이스 — UI와 AI 응답 모두 한국어 지원

기반 기술	Cline 포크 (Apache 2.0)
AI 모델	Qwen3 8B (기본) / GPT-OSS 20B (고급) 선택 가능
VRAM 사용	5-6GB
언어 지원	119개 언어 (한국어 네이티브)

Assistant 채팅 인터페이스 + Diff 미리보기

05통합 보안 플랫폼

Airgap Security Shield

인터넷 없이도 보안까지 지키는 보호 체계

AI가 코드를 생성하면서 동시에 보안 취약점을 검사하고, 개인정보가 AI 모델에 유입되는 것을 원천 차단합니다. 모든 AI 활동은 감사 로그로 추적 가능하며, 이 모든 것이 오프라인에서 동작합니다.

Audit Core — 모든 AI 활동 감사 로그 + 모델/확장 무결성 검증
Data Guard — 한국형 개인정보(주민번호, 전화번호, 계좌번호 등) 자동 탐지·마스킹
Code Scanner — KISA 보안약점 47개 항목 정적 분석 (Semgrep + ESLint)
Supply Chain — 오프라인 CVE 스캔 + SBOM 생성 (CycloneDX/SPDX)
AI Quick Fix — 보안 취약점 발견 시 AI가 자동 수정 코드 제안

기반	Semgrep OSS (LGPL-2.1 CLI) + ESLint security plugins
KISA 커버리지	Phase 1: 15개, Phase 2: 30개+
PII 탐지	주민번호, 전화번호, 계좌번호 등 10종 한국형 패턴
동작	100% 오프라인, 추가 네트워크 불필요

Security Shield 보안 스캔 결과 + Quick Fix 인터페이스

Bridge 경쟁 비교

Design-to-Code 도구와의 핵심 기능 비교

비교 항목	Locofy.ai	Anima	Builder.io	Airgap Bridge
Figma 연동	O	O	O	O
결정론적 변환	O	O	X (LLM)	O (VibeFigma)
로컬 AI	X 클라우드	X 클라우드	X 클라우드	O (Qwen3)
디자인 토큰 관리	X	X	X	O (W3C DTCG)
한국어/KRDS	X	X	X	O
망분리 동작	X	X	X	O

보조 기능

Airgap Autocomplete

입력 중인 코드에 대해 인라인 고스트 텍스트로 자동완성을 제공합니다. 기존 Qwen3:8b 인스턴스를 공유하므로 추가 VRAM이 필요하지 않습니다.

300ms 디바운스
3초 타임아웃과 AbortController
LRU 캐시 (50 엔트리)
추가 VRAM 0
상태바에서 토글 가능

Airgap License

ED25519 서명 기반의 완전 오프라인 라이선스 검증 시스템입니다. 1키 = 1디바이스 원칙으로, 하드웨어 핑거프린트와 시간 조작 방지 기능을 포함합니다. 디바이스 변경은 연 2회까지 지원됩니다.

ED25519 서명 검증
하드웨어 핑거프린트
시간 조작 방지 (Clock Guard)
만료 D-30/D-7 경고 알림
번들 크기 ~13KB

확장 간 통합 아키텍처

모든 LLM 의존 확장은 단일 Ollama 인스턴스를 공유합니다. Qwen3 8B(기본)와 GPT-OSS 20B(고급) 중 선택 가능합니다.
Bridge에서 생성한 디자인 토큰은 Designer의 시스템 프롬프트에 자동 주입되어 일관된 디자인을 보장합니다.

토큰 플로우

Bridge buildTokens() → CSS 변수
→ vscode.commands 'airgapdesigner.updateTokenContext'
→ Designer 시스템 프롬프트 주입

오픈소스 기반

Airgap Studio는 검증된 오픈소스 기술을 기반으로 구축되었습니다.

컴포넌트	라이선스	상용 배포
VSCodium	MIT	O
Cline	Apache 2.0	O
SecureDesign	MIT	O
Qwen3:8b	Apache 2.0	O
Ollama	MIT	O
Vercel AI SDK	MIT	O
VibeFigma	AGPL-3.0	O (CLI 독립 호출)
Franken UI	MIT	O
Style Dictionary	Apache 2.0	O
Semgrep OSS	LGPL-2.1	O (CLI 독립 호출)
cyclonedx-npm	Apache 2.0	O

지금 시작하세요

Airgap Studio의 모든 기능을 직접 체험해 보세요.

다운로드 문의하기