생성기 뷰
레이아웃 개요
생성기 뷰는 컴포넌트 영역의 아무 그룹이나 더블 클릭하여 여는 세 패널 편집 환경입니다. 왼쪽에 블록 목록, 중앙에 코드 편집기, 오른쪽에 라이브 미리보기가 있으며, 하단에 AI 프롬프트 박스가 있습니다.
블록 목록 패널
왼쪽 패널에는 현재 그룹의 모든 블록이 표시됩니다. 각 블록에는 블록 이름과 번호가 매겨진 파일 목록이 있는 카드 미리보기가 표시됩니다. 상단 도구 모음을 사용하여 뒤로 이동하거나 목록 보기와 분할 보기를 전환하거나 + 버튼을 클릭하여 새 블록을 추가합니다.
코드 편집기
중앙 패널은 블록 콘텐츠를 작성하고 편집하는 탭형 코드 편집기입니다. 탭은 파일 유형별로 정리됩니다:
텍스트
블록을 위한 문서, markdown 또는 일반 텍스트 콘텐츠를 작성합니다.
HTML
컴포넌트의 HTML 구조를 편집합니다.
CSS
컴포넌트에 스타일을 추가합니다.
JavaScript
컴포넌트에 인터랙티비티와 로직을 추가합니다.
라이브 미리보기
오른쪽 패널에는 컴포넌트의 실시간 미리보기가 렌더링됩니다. 편집기에서 HTML, CSS, JavaScript를 추가하면 미리보기가 컴파일된 결과를 보여주도록 업데이트됩니다. 파일을 드래그 앤 드롭하거나 콘텐츠를 미리보기 영역에 직접 붙여넣기(Ctrl+V)하여 블록에 추가할 수도 있습니다. 눈 아이콘을 사용하여 미리보기를 전환하고 BG 토글로 미리보기 배경을 변경합니다.
AI 프롬프트 박스
하단 바는 AI 프롬프트 상자입니다. 변경 사항을 설명하고 AI가 블록 콘텐츠를 생성하거나 수정하도록 합니다. 모델 선택기, 텍스트 입력 필드, 음성 및 이모지 입력, 생성 버튼이 포함되어 있습니다. 두 개의 모드 토글 — A와 V — 로 직접 AI 모드와 변형 모드를 전환합니다.
AI 생성 카테고리
AI 모델 선택기에서 AI가 생성하는 콘텐츠 종류를 결정하는 생성 카테고리가 나타납니다:
텍스트 생성
코드, 문서, 마크업과 같은 텍스트 기반 콘텐츠를 생성하거나 편집합니다.
이미지 생성
텍스트 프롬프트에서 이미지를 생성하거나 AI로 기존 이미지를 편집합니다 (텍스트-이미지 및 이미지-이미지).
비디오 생성
텍스트 설명에서 비디오를 생성하거나 정지 이미지를 비디오로 애니메이션화합니다 (텍스트-비디오 및 이미지-비디오).
직접 AI 모드 (A)
A 토글이 활성화되면 AI가 컴포넌트를 직접 수정합니다. 필드 텍스트에 "컴포넌트에 적용할 변경 사항을 설명하세요"가 표시되고 수정될 파일을 나타내는 배지가 표시됩니다(예: "수정 대상: text"). 이 모드는 현재 선택된 파일에 대한 빠르고 구체적인 편집에 이상적입니다.
변형 모드 (V)
V 토글이 활성화되면 AI가 컴포넌트를 직접 편집하는 대신 여러 변형을 생성합니다. 필드 텍스트가 "생성할 변형을 설명하세요"로 변경되고 생성할 변형 수를 선택할 수 있는 − / + 컨트롤이 있는 카운터가 나타납니다. 생성된 변형은 전용 패널에 표시되어 검토하고 선호하는 버전을 그룹에 추가할 수 있습니다.