AIRGAP StudioAIRGAP Studio

Airgap Designer

자연어로 UI를 설계하는 AI 디자이너 확장 기능의 사용법을 알아봅니다.

개요

AIRGAP Designer는 자연어로 UI를 설계하는 확장 기능입니다. 텍스트로 화면을 요청하면 와이어프레임이나 완성도 높은 UI를 즉시 생성합니다. 로컬 AI 엔진을 사용하므로 인터넷 연결 없이 동작합니다.

디자인 모드

Designer는 요청과 환경에 따라 자동으로 최적의 디자인 모드를 선택합니다.

모드설명LLM 요구
와이어프레임내장 컴포넌트 기반의 빠른 구조 설계. 로컬 LLM에 최적화Ollama (로컬)
Hi-Fi 로컬Tailwind CSS + 아이콘으로 완성도 높은 UI 생성Ollama (로컬)
Hi-Fi 클라우드확장 리소스를 활용한 고품질 UI (네트워크 필요)외부 프로바이더

프로바이더 설정에 따라 와이어프레임/Hi-Fi 모드가 자동으로 선택됩니다. 로컬 Ollama 사용 시 와이어프레임 모드가 기본이며, 외부 프로바이더 연결 시 Hi-Fi 모드로 전환됩니다.

사용 방법

열기

Ctrl+Shift+D 단축키 또는 Activity Bar의 Designer 아이콘을 클릭합니다.

채팅으로 UI 생성

대화창에 원하는 UI를 자연어로 요청합니다.

"로그인 페이지를 만들어줘. 이메일과 비밀번호 입력 필드, 로그인 버튼이 있어야 해"
"대시보드 레이아웃을 만들어줘. 좌측 사이드바에 네비게이션, 우측에 카드형 통계"

AI가 즉시 UI를 생성하며, 캔버스 뷰에서 결과를 확인할 수 있습니다.

반복 수정

생성된 UI에 대해 추가 수정을 대화로 요청합니다. 최근 10개 대화 맥락이 유지되어 일관된 수정이 가능합니다.

"버튼 색상을 파란색으로 변경해줘"
"사이드바 너비를 좁혀줘"
"카드 레이아웃을 3열에서 2열로 바꿔줘"

캔버스 렌더링

생성된 UI는 격리된 iframe에서 실시간으로 렌더링됩니다. 6단계 오프라인 파이프라인을 통해 외부 의존성 없이 완전한 미리보기를 제공합니다.

렌더링 파이프라인:

  1. CSS 주입 — 프레임워크 스타일 적용
  2. CDN → 로컬 변환 — 외부 CDN 참조를 로컬 에셋으로 교체
  3. 폰트 로컬화 — Pretendard 등 번들 폰트 적용
  4. 외부 참조 제거 — 네트워크 의존성 제거
  5. 이미지 폴백 — 외부 이미지를 플레이스홀더로 대체
  6. 최종 렌더링 — 격리된 iframe에서 표시

캔버스에서 확대(zoom)/이동(pan)이 가능하여 세부 요소를 확인할 수 있습니다.

무드보드

.airgapdesign/moodboard/ 디렉터리에 참고 이미지를 배치하면 AI가 디자인 생성 시 참고합니다. 원하는 디자인 방향의 스크린샷이나 레퍼런스 이미지를 추가하세요.

디자인 토큰 연동

AIRGAP Bridge에서 설정한 W3C DTCG 디자인 토큰이 Designer의 생성 결과에 자동으로 반영됩니다. Bridge에서 토큰을 업데이트하면 Designer의 시스템 프롬프트에 자동 주입되어 일관된 디자인을 유지합니다.

보안 통합

Designer에서 생성된 코드에 대해 AIRGAP Security Shield의 보안 스캔을 실행할 수 있습니다. 명령 팔레트(Ctrl+Shift+P)에서 Security Shield 관련 명령을 검색하세요.

설정

Ctrl+,로 설정을 열고 airgapDesigner를 검색합니다.

설정 키설명기본값
airgapDesigner.promptMode디자인 모드 (auto/wireframe/hifi)auto
airgapDesigner.ollamaUrlOllama 서버 URLhttp://localhost:11434
airgapDesigner.ollamaModel사용할 모델qwen3:8b

관련 문서