Astell

컴포넌트 빌더

비주얼 GUI로 채팅에 삽입할 커스텀 컴포넌트를 정의하는 컴포넌트 빌더를 안내합니다.

컴포넌트 빌더란?

컴포넌트 빌더는 코딩 없이 GUI 환경에서 채팅에 표시할 인터랙티브 UI 요소를 정의하는 도구입니다. 퀘스트, 선택지, 스탯, 호감도 등을 직접 디자인하고, AI가 응답에서 자동으로 삽입합니다.

탭 구성

컴포넌트 탭은 세 개의 서브탭으로 구성됩니다.

서브탭설명
메인내 컴포넌트 관리 + 프리셋/AI 위저드
커뮤니티다른 크리에이터가 공개한 컴포넌트 탐색
직접 편집폼/코드 에디터로 직접 편집

사용 방법

1단계: 프리셋 선택 또는 새로 만들기

메인 탭의 갤러리에서 프리셋 컴포넌트를 선택하거나, AI 위저드를 통해 대화형으로 새 컴포넌트를 만들 수 있습니다.

2단계: Template ID 지정

컴포넌트를 프롬프트에서 호출할 때 사용할 고유 ID를 설정합니다.

  • 예: QuestCard, MyCustomChoice, BattleStatus

3단계: 필드 커스터마이징

각 컴포넌트의 필드(제목, 내용, 옵션 등)를 원하는 대로 설정합니다. 직접 편집 탭에서 코드 레벨로 수정할 수도 있습니다.

4단계: 미리보기 확인

설정한 컴포넌트가 채팅에서 어떻게 보이는지 미리 확인합니다.

프리셋 컴포넌트

다양한 장르와 용도에 맞는 프리셋이 제공됩니다. 아래는 주요 프리셋 목록입니다.

기본 프리셋

프리셋설명
QuestCard퀘스트/임무 알림 카드
ChoiceButtons선택지 버튼 (클릭 시 자동 전송)
DialogueChoice대화형 선택지
StatusBar스탯/상태 바 표시
AlertBanner긴급 알림/경고 배너
InfoCard정보 카드 (장소, 아이템 등)
InventoryGrid아이템 인벤토리 그리드
PollButtons투표/설문 버튼
EmotionDisplay감정 상태 표시
TimerDisplay타이머/카운트다운 표시

장르 특화 프리셋

프리셋설명
AffinityGauge호감도 게이지 (로맨스 장르)
GuildQuest길드 퀘스트 카드 (판타지)
SkillTree스킬 트리 표시
MagicBook마법서 UI
DataStream데이터 스트림 (SF/사이버펑크)
HackProgress해킹 진행 표시
NeonStatBar네온 스탯 바 (사이버펑크)
DiaryCard일기 카드 (일상/감성)
ClassNote수업 노트 (학원물)
ScrollLetter두루마리 편지 (판타지)
SpaceLog우주 항해 로그 (SF)

분위기 특화 프리셋

프리셋설명
SweetChoice달콤한 분위기의 선택지 (로맨스)
BloodChoice어두운 분위기의 선택지 (다크)
GlitchChoice글리치 효과 선택지 (호러/SF)
CreepyAlert소름끼치는 알림 (호러)
CursedJournal저주받은 일지 (다크 판타지)

빌트인 모듈

프리셋 컴포넌트 외에도 빌트인 모듈이 제공됩니다. 빌트인 모듈은 시스템에 내장된 특수 기능으로, 별도의 설정 없이 바로 사용할 수 있습니다.

모듈설명
스테이터스(상태)캐릭터의 현재 상태를 실시간으로 표시
호감도유저와의 호감도를 게이지로 시각화

컴포넌트 카테고리

AI 모드에서 컴포넌트를 만들 때 네 가지 카테고리로 분류할 수 있습니다.

카테고리설명기본 사용 조건
선택지유저에게 선택지를 제시유저에게 선택지를 제시할 때 사용
알림/경고중요한 정보를 강조중요한 정보를 강조할 때 사용
퀘스트퀘스트 제시/진행퀘스트를 제시하거나 진행할 때 사용
정보/상태캐릭터나 게임 상태 표시캐릭터나 게임 상태를 표시할 때 사용

AI 컴포넌트 위저드

AI 위저드를 사용하면 대화형으로 컴포넌트를 생성할 수 있습니다.

  1. 메인 탭에서 AI 위저드 버튼을 클릭합니다.
  2. 원하는 컴포넌트를 자연어로 설명합니다 (예: "퀘스트 알림 카드를 만들어주세요").
  3. AI가 컴포넌트를 생성하면 미리보기를 확인합니다.
  4. 마음에 들면 저장하고, 수정이 필요하면 추가 요청을 합니다.

기존 컴포넌트를 수정할 때도 AI 위저드에 진입하여 "이 컴포넌트를 수정해주세요"라고 요청할 수 있습니다.

프롬프트에서 호출하기

AI가 응답에서 JSX 형식으로 컴포넌트를 호출합니다. 시스템 프롬프트에 컴포넌트 사용법을 안내하면 AI가 적절한 상황에서 자동으로 삽입합니다.

호출 예시

<QuestCard />
<ChoiceButtons />
<AlertBanner />

Props를 전달할 수도 있습니다:

<QuestCard title="마법의 숲 탐험" description="숲 깊은 곳의 비밀을 찾아라" />

컴포넌트 자동 삽입

컴포넌트 탭 상단의 "컴포넌트 자동 삽입" 토글을 켜면, 활성화된 컴포넌트의 사용 규칙이 AI 설정에 자동으로 추가됩니다. 토글을 끄면 시스템 프롬프트에서 직접 컴포넌트 호출 규칙을 작성해야 합니다.

활성화/비활성화

캐릭터에 연결된 컴포넌트는 개별적으로 활성화/비활성화할 수 있습니다. 비활성화된 컴포넌트는 AI 설정에 포함되지 않으며, 대화에서 사용되지 않습니다.

활용 팁

  • 대화 시작 시 QuestCard로 임무를 안내하면 몰입감이 올라갑니다.
  • 중요한 분기점에서 ChoiceButtons로 선택지를 제공하세요. 클릭하면 자동으로 메시지가 전송됩니다.
  • StatusBar로 캐릭터의 상태를 시각적으로 표현할 수 있습니다.
  • 프리셋을 기반으로 필드를 수정하여 나만의 컴포넌트를 만들 수 있습니다.
  • 커뮤니티 탭에서 다른 크리에이터의 컴포넌트를 참고하세요.

나만의 캐릭터 제작하기

상세정보 (시스템 프롬프트)

나만의 캐릭터 제작하기

테마 스튜디오