채팅 화면 가이드: 위젯, 변수, JSX

스튜디오의 채팅 화면 단계에서 상태창, 선택지, 직접 만든 화면을 채팅 안에 띄울 수 있어요. 선택 단계라서 안 써도 작품은 완성돼요.

릴리 밀러 채팅에 뜬 업무용 태블릿 화면: 물리 진입 분석 목록과 장애, 주의, 진행 중, 정상 표시

공식 캐릭터 릴리 밀러에게 태블릿을 보여 달라고 하면 이렇게 릴리의 업무용 태블릿 화면이 채팅에 떠요. 스플릿이 직접 만든 JSX예요.

무료 모델을 포함해 모든 모델에서 되고, 추가 과금은 없어요.

3층 건물로 생각하면 쉬워요

채팅 화면 단계: 3층 내 화면(JSX), 2층 변수(서버가 기억), 1층 기본 위젯(스플릿 제공)과 "2층 변수는 아래 1층 위젯과 위 3층 내 화면이 같이 읽어요" 안내

단계 안은 3층 건물처럼 생겼어요. 필요한 층만 쓰면 돼요.

1층 기본 위젯: 스플릿이 만든 위젯을 켜기만 해요.
2층 변수: 체력, 골드 같은 숫자를 서버가 기억해요.
3층 내 화면(JSX): 직접 만든 컴포넌트를 붙여 넣어요.

2층 변수는 1층 위젯과 3층 내 화면이 같이 읽어요. 숫자가 바뀌면 둘 다 같은 값을 그려요. JSX 컴포넌트가 있는 작품은 3층이 먼저 열리고, AI도 기본 위젯보다 제작자 화면을 먼저 써요.

켜는 곳

스튜디오에서 작품 편집을 열어요.
위쪽에서 상세를 눌러요.
단계 줄에서 채팅 화면을 눌러요. 대화 다음, 갤러리 앞에 있어요.

층을 누르면 그 층을 고칠 수 있어요. 오른쪽 테스트 채팅에서 그 층이 채팅 어디를 만드는지 칠해져요. 쓰지 않으려면 건너뛰기를 누르면 돼요.

저장하면 새로 시작하는 대화부터 적용돼요.

1층 기본 위젯

위젯을 켜고 언제 쓸지 한 줄만 적으면 돼요. 켜 둔 위젯만 AI가 써요.

상태 막대: 변수를 막대로 보여 줘요.
능력치 표: 변수를 표로 보여 줘요.
선택지: 누르면 입력창에 채워지는 버튼 2~4개예요.
주식 차트: 이야기 속 종목의 가격 흐름을 선 그래프로 보여 줘요.
날씨: 이야기 속 날씨를 하늘 카드로 보여 줘요. 누르면 시간별·날짜별 예보가 열려요.

상태 막대와 능력치 표는 2층 변수가 하나 이상 있어야 해요.

「언제 쓸까요?」 적는 법

AI는 이 문장을 보고 위젯을 띄울 때를 정해요. 장면이나 사건을 짧게 적으면 충분해요. 이런 문장이 좋아요.

전투나 부상이 끝났을 때
장소나 시간이 바뀔 때
관계가 크게 바뀌었을 때

3층 내 화면에서는 이 세 문장이 칸 아래 예시 칩으로 있어요. 누르면 그대로 채워져요.

2층 변수

긴 대화에서는 AI가 숫자를 자주 까먹어요. 여기에 숫자를 등록하면 서버가 그 값을 기억해서 화면은 정확하게 그려져요.

키(영문): 영문 소문자로 시작하고 영문 소문자·숫자·_ 만 써요(16자까지). prop 이름과 맞출 때 쓰는 이름이에요.
표시 이름: 화면에 보이는 이름이에요. 예: 체력(1~20자)
최솟값, 최댓값: 숫자가 움직이는 범위예요. 넘으면 끝 값에 맞춰져요.
시작값: 새 대화를 시작할 때의 값이에요.
한 턴 최대 변화: 답 한 번에 바뀔 수 있는 크기예요. 이보다 크게 바뀌면 그 턴의 변화는 반영되지 않아요.

변수는 작품당 20개까지, 정수만 쓸 수 있어요.

숫자는 서버가 기억해요

2층 변수와 이름이 같은 prop은 AI가 쓴 값 대신 서버가 기억하는 값으로 채워요. 재생성, 수정, 되감기, 분기에도 그 시점의 값이 따라가요.

3층 내 화면(JSX)

붙여 넣기 규칙

React 컴포넌트 함수 하나를 붙여 넣어요.
export default가 없어도 돼요. 등록한 이름과 같은 함수를 찾아요.
이름은 대문자로 시작하는 영문, 숫자 2~30자예요. 만든 뒤에는 바꿀 수 없어요.
작품당 10개, 하나에 64KB까지예요.
import는 react, lucide-react, 같은 작품의 다른 컴포넌트(./이름)만 돼요.

그대로 되는 것

lucide-react 아이콘
Tailwind 클래스, 인라인 style
import 없이 쓰는 useState, useEffect
sendMessage, showNotification
rollDice('2d6+3'), randomInt, getCurrentTime
같은 작품 안의 import X from './X'

표본 7개를 붙여 넣어 보니 전부 그대로 그려졌어요.

예시에서 시작하기

처음 열면 예시 카드 3개(상태창, 호감도 카드, 장면 카드)가 있어요. 누르면 그 코드로 시작해요. 처음부터 쓰려면 새 컴포넌트를 눌러요.

props 설명과 「채우기」

코드를 붙여 넣으면 스튜디오가 코드의 기본값을 읽어 "props N개를 찾았어요" 상자를 띄워요. 채우기를 누르면 props 설명 초안이 채워져요. AI는 이 설명을 보고 값을 넘겨요.

「변수로 등록」

숫자 prop 옆의 변수로 등록을 한 번 누르면 2층 변수가 생겨요. 범위는 2층에서 고칠 수 있고, 작품을 저장하면 반영돼요.

미리보기

미리보기는 처음부터 열려 있어요. 채팅과 같은 분리된 칸에서 저장한 코드를 그려요. 코드를 고쳤다면 저장해야 미리보기도 바뀌어요. 값 바꿔 보기에서 미리보기용 props를 바꿔 볼 수 있어요.

「항상 띄우기」

항상 띄우기를 켜면 그 화면이 매 답 끝에 붙어요. 상태창에 알맞아요.

편집기: 항상 띄우기 칸과 작품 화면 · LilyTablet 미리보기에 뜬 릴리의 처리 대기열(탕비실 커피머신 점검 긴급)

AI가 어떤 답에서 빼먹어도 가장 최근 값으로 마지막 답 밑에 계속 보여요. 그 대화에서 AI가 한 번은 띄운 적이 있어야 해요. 작품당 2개까지예요.

AI가 넘기는 props는 JSON이에요

문자열은 따옴표로 감싸요: title="야간 경비"
숫자, 목록, 객체는 중괄호 안에 JSON으로 써요: hp={40}, items={["열쇠","지도"]}
목록과 객체는 6단계 깊이까지, 목록은 60개까지, 문자열은 200자까지예요.

예를 들면 <HpBar title="전투 후" hp={40} maxHp={100} /> 처럼 넘어와요.

다른 곳에서 쓰던 JSX 옮겨 오기

외부 이미지는 안 보여요. 이미지를 스플릿에 올리고 그 주소로 바꿔 주세요.
t('key') 번역은 다음 판에서 지원해요. 지금은 키 글자가 그대로 보여요.
외부 통신(fetch)은 안 돼요. 필요한 값은 props나 2층 변수로 받아 주세요.
import는 react, lucide-react, 같은 작품의 다른 컴포넌트만 돼요.

이용자님 쪽 안전

제작자 코드는 분리된 칸(샌드박스)에서만 돌아요. 이용자님의 로그인, 쿠키, 다른 화면에 닿지 못해요.
밖으로 통신할 수 없고, 이미지는 스플릿에 올린 주소만 보여요.
sendMessage는 입력창을 채우기만 해요. 보내기는 이용자님이 눌러요. 쓰던 글은 덮지 않아요.
제작자 화면이 띄우는 알림에는 작품 화면 표시가 붙어서 스플릿 알림과 구별돼요.
화면이 멈추거나 오류가 나면 그 칸만 내려가고 채팅은 그대로예요.
공개, 전연령 작품이면 로그인하지 않은 이용자님도 이 화면을 볼 수 있어요.

자주 묻는 질문

화면 대신 태그 글자가 그대로 보여요. 예전 버전에서는 AI가 넘긴 값이 JSON 모양이 아니거나 너무 깊으면 화면 대신 태그 글자가 그대로 보였어요. 지금은 고쳐졌어요. 그래도 보이면 props 설명의 표기가 위 「AI가 넘기는 props는 JSON이에요」와 맞는지 확인해 주세요. 계속되면 문의하기로 알려 주세요.

상태창을 항상 보이게 하고 싶어요. 그 컴포넌트의 항상 띄우기를 켜 주세요.

화면의 숫자가 이야기와 달라요. prop 이름이 2층 변수의 키와 같아야 서버가 기억한 값이 들어가요. 이름이 다르면 AI가 쓴 값이 그대로 들어가요. 변수로 등록으로 만들면 이름이 맞춰져요.