Astell

컴포넌트 빌더

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

컴포넌트 빌더란?

컴포넌트 빌더는 코딩 없이 GUI 환경에서 채팅에 표시할 게임적 UI 요소를 정의하는 도구입니다. 퀘스트, 선택지, 스탯 등을 직접 디자인하고, 시스템 프롬프트에서 호출할 수 있습니다.

![placeholder:컴포넌트 빌더 전체 UI](placeholder:컴포넌트 빌더 전체 UI)

사용 방법

1단계: 컴포넌트 타입 선택

11종의 컴포넌트 타입 중 원하는 것을 선택합니다.

  • Quest, Choice, System, Stat, Alert, Message, Call, Letter, Inventory, Notification, Levelup

2단계: Template ID 지정

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

  • 예: quest_main, levelup, choice_battle

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

각 컴포넌트의 필드(제목, 내용, 옵션 등)를 원하는 대로 설정합니다.

4단계: 미리보기 확인

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

![placeholder:컴포넌트 생성 단계별](placeholder:컴포넌트 생성 단계별)

프롬프트에서 호출하기

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

호출 예시

  • <QuestMain /> - 메인 퀘스트 컴포넌트 표시
  • <LevelUp /> - 레벨업 알림 컴포넌트 표시
  • <ChoiceBattle /> - 전투 선택지 컴포넌트 표시

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

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

활용 팁

  • 대화 시작 시 Quest 컴포넌트로 임무를 안내하면 몰입감이 올라갑니다.
  • 중요한 분기점에서 Choice 컴포넌트로 선택지를 제공하세요.
  • Stat 컴포넌트로 캐릭터의 상태를 시각적으로 표현할 수 있습니다.