기능 소개

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

01AI UI 디자이너

Airgap Designer

기획에서 화면 초안까지

자연어로 화면을 요청하면 AI가 즉시 와이어프레임이나 완성도 높은 UI를 생성합니다. 3가지 디자인 모드, 6단계 오프라인 렌더링 파이프라인, Bridge 연동 디자인 토큰까지 — 인터넷 없이도 기획자와 디자이너가 화면 초안을 빠르게 만들 수 있습니다.

3가지 디자인 모드

와이어프레임 모드 — 내장 컴포넌트 기반, 빠른 구조 설계에 최적화
Hi-Fi 로컬 모드 — Tailwind CSS + 아이콘으로 완성도 높은 UI 생성
Hi-Fi 클라우드 모드 — 확장 UI 키트 + 이미지 라이브러리 등 리소스 활용 (네트워크 시)

대화형 UI 생성

자연어 요청으로 와이어프레임·UI 초안 즉시 생성
"버튼 위치 변경", "레이아웃 조정" 등 반복 수정을 대화로 즉시 반영
최근 10개 대화 맥락을 유지하여 일관된 수정 지원
한국어 기본 인터페이스

오프라인 캔버스 렌더링

6단계 파이프라인: CSS 주입 → 프레임워크 → CDN→로컬 → 폰트 → 외부 참조 제거 → 이미지 폴백
CSS 프레임워크, 아이콘, Pretendard 폰트 로컬 번들
격리된 iframe에서 실시간 미리보기 — 생성 중인 UI를 바로 확인

디자인 토큰 & Figma 연동

Bridge에서 설정한 W3C DTCG 디자인 토큰이 생성 결과에 자동 반영
KRDS(한국 정부 표준 디자인 시스템) 프리셋 지원
생성 결과를 Figma로 전달하여 디자이너가 마무리

02디자인 토큰 파이프라인

Airgap Bridge

디자인에서 코드로의 연결

3개 탭(Prototype, Production, Style Guide)으로 구성된 디자인-코드 변환 파이프라인입니다. Figma 실시간 연결부터 ~95% 충실도의 결정론적 코드 변환, W3C DTCG 표준 디자인 토큰 관리까지 — 디자인과 개발 사이의 간극을 제거합니다.

Prototype 탭 — Figma 실시간 연결

Figma MCP 프로토콜로 실시간 노드 속성 조회
Quick Actions: 컴포넌트 스캐폴드 → Assistant 전달, CSS 추출, 에셋 다운로드
오프라인 폴백: .fig 파일 드래그 앤 드롭 → 내장 파서로 오프라인 파싱

Production 탭 — 디자인→코드 변환

결정론적 변환 엔진: ~95% 충실도
Auto-layout → Flexbox 1:1 매핑으로 정확한 레이아웃 재현
AI 폴백 엔진: 오프라인 파서 + Qwen3 변환, ~70-80% 충실도 (완전 오프라인)
React/HTML/CSS 프로덕션 코드 즉시 생성

Style Guide 탭 — 디자인 토큰 관리

W3C DTCG 표준 토큰 가져오기 (JSON 또는 Figma Variables API)
W3C 표준 토큰 변환 엔진
출력 형식: Tailwind v4 @theme · CSS Custom Properties · SCSS · JS 모듈
KRDS 프리셋 내장: 표준형 + 확장형

통합 연동

Designer에 토큰 컨텍스트 자동 푸시 → UI 생성에 디자인 토큰 반영
Assistant에 컴포넌트 스캐폴드 전달 → 비즈니스 로직 주입
Figma Personal Access Token: VS Code SecretStorage 암호화 저장

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

Airgap UI Library

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

85개 표준 컴포넌트를 8개 카테고리로 분류하여 탐색, 미리보기, 코드 삽입까지 원스톱으로 제공합니다. 테마 커스터마이저로 색상, 폰트, 다크 모드를 조정하면 모든 미리보기에 즉시 반영됩니다. AI(LLM) 없이 동작하며, 전체 에셋이 ~8MB로 경량입니다.

85개 컴포넌트 · 8개 카테고리

Layout (12): Container, Grid, Section, Flex, Width, Height 등
Navigation (10): Navbar, Tab, Breadcrumb, Pagination, Dropdown 등
Forms & Input (13): Input, Select, Textarea, Button, Checkbox 등
Content (10): Card, Table, List, Badge, Description List 등
Overlay & Popup (7): Modal, Offcanvas, Tooltip, Notification 등
Feedback (7): Spinner, Progress, Meter, Countdown 등
Media & Motion (11): Slideshow, Lightbox, Parallax, Animation 등
Styling (15): Utility, Visibility, Position, Transition 등

미리보기 & 코드 삽입

격리된 iframe 렌더링 — 스타일 충돌 없는 정확한 미리보기
원클릭 코드 복사 또는 커서 위치에 직접 삽입
실시간 검색 — 컴포넌트 이름으로 빠르게 탐색
전체 소스 코드 보기 지원

테마 커스터마이저

15가지 색상 속성 실시간 조정
모서리 반경, 그림자, 글꼴 크기 설정
다크/라이트 모드 전환
변경 즉시 모든 컴포넌트 미리보기에 반영

100% 오프라인 · LLM 불필요

AI 모델 없이 동작하는 순수 컴포넌트 브라우저
Pretendard 한국어 폰트 로컬 번들 포함
~8MB 경량 에셋: 스타일시트 + 스크립트 + 폰트 + 미디어
추가 GPU/VRAM 불필요

04AI 코딩 어시스턴트

Airgap Assistant

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

멀티파일 리팩토링까지 — AI가 파일 생성·편집, 터미널 명령을 직접 실행합니다. 인라인 코드 자동완성(Autocomplete)이 내장되어 있어 추가 VRAM 없이 19개 언어에서 실시간 코드 제안을 받을 수 있습니다.

AI 코딩 지원

파일 생성·편집, 터미널 명령을 직접 실행 — 실질적인 개발 작업 수행
변경 사항 Diff 미리보기 후 적용 (Auto-approve 기본 활성화)
멀티파일 리팩토링, 에러 디버깅, 코드 리뷰 지원
자동 컴팩트 모드 — 긴 대화에서도 맥락 유지

한국어 슬래시 커맨드

/newtask — 새 작업 시작, 맥락 초기화
/smol — 간결 모드, 짧은 응답
/newrule — 프로젝트 규칙 추가
/deep-planning — 심층 계획 수립
/explain-changes — 변경사항 상세 설명

인라인 코드 자동완성 (Autocomplete)

19개 언어: JS, TS, Python, Java, C/C++, C#, Go, Rust, HTML, CSS, SQL 등
300ms 디바운스 + 3초 타임아웃으로 쾌적한 반응 속도
LRU 캐시(50 엔트리)로 반복 패턴 즉시 완성
추가 VRAM 0 — 기존 Qwen3:8b 인스턴스 공유
상태바 실시간 표시: 준비 · 처리 중 · 오프라인

유연한 설정

Auto-approve 기본 활성화 — 망분리 네트워크 격리로 안전 보장
조직별 커스텀 지침: .airgap/prompts/ 디렉토리에 정책 파일 배치
멀티 프로바이더: Ollama(기본) · OpenAI · Anthropic · Gemini
한국어 기본 인터페이스 — UI와 AI 응답 모두 한국어

05통합 보안 플랫폼

Airgap Security Shield

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

감사 로그(Audit), 한국형 개인정보 DLP(Data Guard), KISA 보안약점 분석(Code Scanner), 공급망 보안(Supply Chain), AI 출력 검증(Output Validator)의 5중 보호 체계를 제공합니다. npm 의존성 제로, 100ms 이내 DLP 처리를 보장하며, 모든 것이 오프라인에서 동작합니다.

Shield-1: Audit Core — 감사 로그

모든 AI 활동 JSONL 형식 자동 기록 (일별 파일)
SHA-256 해시로 로그 위변조 탐지
모델 및 확장 기능 무결성 검증
프롬프트 해시만 기록 — 전문 미저장으로 프라이버시 보호

Shield-2: Data Guard — 한국형 개인정보 DLP

10가지 한국형 PII 패턴: 주민번호, 전화번호, 계좌번호, 카드번호, 이메일, 사업자등록번호, 여권번호, 내부 IP, 운전면허번호 등
AI 입력/출력 양방향 자동 탐지·마스킹
코드 컨텍스트 인식 — 코드 비율 높을 시 오탐 자동 완화
100ms 이내 처리 보장

Shield-3: Code Scanner — KISA 보안약점 분석

KISA 보안약점 47개 항목 정적 분석 (단계적 확대)
정적 분석 도구 이중 스캔
VS Code 문제 패널에 결과 통합 표시
AI Quick Fix — 취약점 발견 시 자동 수정 코드 제안

Shield-4/5: Supply Chain & Output Validator

오프라인 CVE 데이터베이스(~50MB)로 의존성 취약점 스캔
표준 형식 SBOM 자동 생성
AI 생성 터미널 명령의 위험 패턴 사전 차단
악성 스크립트 패턴 인식 및 경고

Bridge 경쟁 비교

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

비교 항목	Locofy.ai	Anima	Builder.io	Airgap Bridge
Figma 연동	O	O	O	O
결정론적 변환 (~95%)	O	O	X	O
AI 폴백 변환	O	X	O	O
오프라인 .fig 파싱	X	X	X	O
W3C DTCG 디자인 토큰	X	X	X	O
KRDS 프리셋	X	X	X	O
로컬 AI 코드 생성	X	X	X	O
망분리 환경 동작	X	X	X	O

확장 간 통합 아키텍처

모든 LLM 의존 확장은 단일 Ollama 인스턴스를 공유합니다. 기본 모델은 Qwen3 8B이며, GPT-OSS 20B 등 다른 모델로 교체할 수 있습니다. 확장 간 데이터가 자동으로 흐르며 일관된 결과를 보장합니다.

확장	LLM 사용	컨텍스트	연동 방향
Designer	Ollama LLM	16K	Bridge → 토큰 수신 · Figma → 결과 전달
Bridge	Ollama LLM	16K	Designer → 토큰 푸시 · Assistant → 스캐폴드 전달
Library	불필요	—	Designer → UI 컴포넌트 제공
Assistant	Ollama LLM	16K	Bridge → 스캐폴드 수신 · 전체 코드 편집
Autocomplete	Ollama LLM	4K	독립 동작 · 추가 VRAM 0
Security Shield	불필요	—	전체 확장 → DLP + 감사 로그 + SAST

디자인 토큰 플로우

Bridge buildTokens() → W3C DTCG JSON → CSS 변수 → vscode.commands 'airgapdesigner.updateTokenContext' → Designer 시스템 프롬프트 주입 → 토큰 반영된 UI 생성

보조 기능

Airgap License

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

ED25519 서명 검증 — 공개키만으로 오프라인 인증
하드웨어 핑거프린트 — 디바이스 바인딩
Clock Guard — 시간 조작 방지
만료 D-30/D-7 사전 경고 알림
디바이스 변경 연 2회 지원
번들 크기 ~13KB

시스템 요구 사항

로컬 AI 모델 실행에 필요한 최소 사양입니다. GPU가 없어도 Library, Bridge(결정론적 변환), Security Shield는 동작합니다.

OS: Windows 10/11 64-bit
GPU: Vulkan 지원 GPU 권장 (6GB+ VRAM, 없어도 CPU 모드 동작)
RAM: 16GB 이상 (32GB 권장)
저장 공간: 10GB 이상 (20GB SSD 권장)
성능: GPU 시 30-45 tokens/s, CPU 시 8-15 tokens/s

지금 시작하세요

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

다운로드 문의하기