컴포넌트 구축, 저장 및 재사용
단순한 컴포넌트 라이브러리를 넘어, UI 블록을 만들고, AI를 활용하여 이미지와 비디오를 생성하고, 3D 장면과 GLSL 셰이더를 구축하며, 실시간 미리 보기와 버전 기록 기능을 제공합니다.
구성 요소 그룹
블록을 그룹으로 정리합니다. UI 구성 요소, 셰이더, 3D 장면, 미디어 에셋을 위한 맞춤 카테고리를 만듭니다. 모든 것을 체계적으로 정리하고 쉽게 검색할 수 있도록 합니다.
AI 기반 블록 생성
AI를 사용하여 텍스트 설명으로부터 블록을 생성합니다. Direct 또는 Variation 생성 모드를 사용하여 React, Vue, Svelte, Angular, SolidJS 또는 순수 JavaScript용 컴포넌트를 만듭니다.
GLSL 셰이더 및 3D
실시간으로 Three.js 장면, GLSL 셰이더, WebGL 콘텐츠를 만들고 미리 볼 수 있습니다. 그런 다음 이를 재사용 가능한 블록으로 저장하여 라이브러리에 보관할 수 있습니다.
실시간 미리 보기
각 블록은 실시간 미리보기 패널을 통해 렌더링됩니다. React 컴포넌트, GLSL 셰이더, 3D 장면 등 어떤 내용을 편집하든 코드 변경 사항을 즉시 확인할 수 있습니다.
다중 블록 생성
AI를 활용하여 한 번에 여러 개의 블록을 생성합니다. 단일 생성 과정에서 컴포넌트 변형, 색상 구성, 레이아웃 대안 등 다양한 요소를 일괄적으로 생성할 수 있습니다.
버전 기록
모든 블록 유형에 대한 전체 버전 기록을 제공합니다. 변경 사항을 추적하고, 이전 버전으로 되돌리고, React, Vue, Svelte, Angular, SolidJS 및 일반 JavaScript를 사용하는 컴포넌트의 변경 사항을 관리합니다.
블록 라이브러리 및 조직
블록 라이브러리는 사용자의 개인 맞춤형 구성 요소 저장소입니다. 블록을 UI 구성 요소, 페이지 섹션, 셰이더, 3D 장면 또는 사용자가 정의한 분류에 따라 그룹으로 묶어 정리할 수 있습니다. 각 블록에는 메타데이터, 코드 및 실시간 미리 보기 기능을 갖춘 세부 정보 보기 화면이 있습니다. 단일 인터페이스에서 전체 컬렉션을 찾아보고 검색하고 관리할 수 있습니다.
- 블록을 범주별로 정리하기 위해 사용자 지정 그룹을 만드세요
- 즉석 미리보기 및 메타데이터가 적용된 블록 카드
- 개별 블록을 검사하고 편집하기 위한 상세 보기
- 전체 라이브러리에서 검색하고 필터링하세요
- 와이어프레임 디자인에 블록을 드래그하여 배치하세요
AI 기반 블록 생성기
AI의 도움을 받아 새로운 블록을 만들려면 크리에이터 보기를 엽니다. AI 프롬프트 상자에 원하는 내용을 설명합니다(예: 로그인 양식, 가격표, 탐색 모음). 그러면 AI가 해당 코드를 생성합니다. 처음부터 블록을 만들려면 직접 모드를 선택하거나, 기존 블록을 기반으로 다양한 대안을 생성하려면 변형 모드를 선택합니다.
- 자연어 기반 블록 생성을 위한 AI 프롬프트 상자
- 다이렉트 모드(A) — 텍스트 설명을 바탕으로 블록 생성
- 변형 모드(V) — 기존 블록의 대체 버전을 생성합니다
- 다양한 생성 유형에 따른 AI 생성 카테고리
- 구문 강조 기능과 실시간 미리 보기 기능을 갖춘 코드 편집기
GLSL 셰이더, Three.js 및 WebGL
블록 라이브러리는 UI 구성 요소뿐만 아니라 GLSL 셰이더, Three.js 3D 장면, WebGL 실험 등 다양한 요소를 생성하고 저장하는 데 사용할 수 있습니다. 이러한 요소들은 실시간 미리 보기가 가능한 라이브 샌드박스 환경에서 렌더링됩니다. AI를 활용하여 셰이더 코드 또는 3D 장면 설정을 생성하고, 이를 재사용 가능한 블록으로 저장할 수 있습니다.
- 실시간 3D 미리보기 기능을 갖춘 Three.js 씬 생성
- 실시간 렌더링 기능을 제공하는 GLSL 셰이더 편집기
- 격리된 환경에서 WebGL 실험 진행
- AI가 생성한 셰이더 및 3D 콘텐츠
- 여러 프로젝트에서 사용하기 위해 저장하고 재활용합니다
블록 변형
단일 프롬프트를 사용하여 모든 블록의 여러 변형을 생성합니다. UI 구성 요소든 GLSL 셰이더든 AI는 다양한 스타일, 색상 팔레트 또는 구조적 접근 방식을 가진 여러 대안을 생성합니다. 이러한 변형들을 나란히 비교하여 미리 보고, 마음에 드는 변형들을 그룹으로 저장하거나, 필요 없는 변형들을 삭제할 수 있습니다.
- 하나의 텍스트 블록 또는 프롬프트에서 5개 이상의 다양한 결과물을 생성합니다
- 실시간 렌더링 기능을 제공하는 나란히 배치된 미리보기 카드
- 그룹에 추가하여 다양한 버전을 체계적으로 관리하세요
- 모든 항목을 한 번에 저장하거나 삭제하여 일괄 작업을 빠르게 처리할 수 있습니다
- UI 구성 요소, 셰이더, 3D 장면 등과 함께 작동합니다
AI 기반 이미지 및 비디오 생성
블록 라이브러리에 내장된 AI 이미지 생성기를 사용하여 ComfyUI를 로컬에서 실행하거나 6개 이상의 클라우드 서비스를 통해 텍스트-이미지 또는 이미지-이미지 변환을 수행합니다. Kling, Veo 등 AI를 활용하여 비디오를 생성합니다. 이미지를 기반으로 AI가 생성한 마크다운을 생성하여 CLI 도구와 함께 사용할 수 있습니다. 생성된 모든 미디어는 라이브러리의 블록으로 저장할 수 있습니다.
- 텍스트를 이미지로 변환하거나 이미지를 다른 이미지로 변환하는 기능은 ComfyUI를 통해 로컬에서 사용하거나 6개 이상의 클라우드 제공 업체를 통해 사용할 수 있습니다
- 클링, 소라, 비오 등 다양한 도구를 사용하여 텍스트를 비디오로, 이미지를 비디오로 변환
- CLI 도구에서 사용할 수 있도록 이미지에서 생성된 AI 기반 마크다운
- 생성된 미디어 파일을 재사용 가능한 블록으로 저장합니다
- 생성된 모든 콘텐츠에 대한 전체 버전 기록
AI로 다음 앱을 만들 준비가 되셨나요?
Kaiju Hub AI로 디자인, 코드 생성, 빠른 배포를 실현하는 수천 명의 개발자와 함께하세요. 무료 AI 앱 빌더 — 지금 시작하세요.
무료로 시작하기