AIRGAP StudioAIRGAP Studio

Airgap UI Library

85개 오프라인 컴포넌트를 탐색하고 코드에 삽입하는 UI Library 사용법을 알아봅니다.

개요

AIRGAP UI Library는 85개 오프라인 컴포넌트를 탐색, 미리보기, 코드 삽입할 수 있는 컴포넌트 브라우저입니다. LLM 없이 동작하며, 전체 에셋 크기는 약 8MB입니다.

열기

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

컴포넌트 탐색

카테고리

85개 컴포넌트가 10개 카테고리로 분류되어 있습니다.

카테고리컴포넌트 수예시
Layout12Container, Grid, Section, Flex 등
Navigation10Navbar, Tab, Breadcrumb, Pagination 등
Forms & Input13Input, Select, Textarea, Button 등
Content10Card, Table, List, Badge 등
Overlay & Popup7Modal, Offcanvas, Tooltip, Notification 등
Feedback7Spinner, Progress, Meter, Countdown 등
Media & Motion11Slideshow, Lightbox, Parallax, Animation 등
Styling15Utility, Visibility, Position, Transition 등

내장 라이브러리

3개의 내장 컴포넌트 라이브러리를 제공합니다. 좌측 TreeView 사이드바에서 라이브러리를 선택하고 컴포넌트를 탐색합니다.

검색

상단 검색 바에서 컴포넌트 이름으로 빠르게 검색할 수 있습니다.

미리보기

선택한 컴포넌트는 격리된 iframe에서 렌더링됩니다. 스타일 충돌 없이 정확한 미리보기를 확인할 수 있습니다.

  • 라이트/다크 모드 전환 버튼으로 두 모드에서의 모습을 확인
  • 전체 소스 코드 보기 지원

코드 삽입

미리보기에서 원하는 컴포넌트를 선택한 후 코드를 삽입합니다.

방법설명
코드 복사클립보드에 코드 복사
커서 삽입현재 편집기의 커서 위치에 직접 삽입

출력 형식은 HTML, JSX, Vue 중에서 선택할 수 있습니다.

테마 커스터마이저

컴포넌트의 시각적 스타일을 실시간으로 조정할 수 있습니다.

  • 색상 — 15가지 색상 속성 실시간 조정
  • 모서리 반경 — 컴포넌트의 라운드 처리
  • 그림자 — 그림자 효과 조정
  • 글꼴 크기 — 텍스트 크기 설정
  • 다크/라이트 모드 전환

변경 사항은 즉시 모든 컴포넌트 미리보기에 반영됩니다.

TreeView 사이드바

좌측 사이드바에서 라이브러리와 카테고리를 계층적으로 탐색할 수 있습니다. 트리 구조로 컴포넌트를 빠르게 찾을 수 있습니다.

기술 사양

항목값
전체 에셋 크기~8MB
LLM 요구불필요
GPU/VRAM 요구불필요
한국어 폰트Pretendard 로컬 번들 포함

관련 문서