JSX 스크립트 가이드

JSX 스크립트로 캐릭터 상태창과 게이지를 만드는 방법을 알아봅니다. 컴포넌트와 프롭 작성, AI 호출 지침과 테스트 채팅 확인까지 안내합니다.

이전 페이지로 돌아가기

JSX 스크립트는 채팅 중 AI가 호출할 수 있는 커스텀 UI 컴포넌트입니다. 문자로 표시하던 상태창, 수치, 선택지 등의 정보를 게이지, 카드, 버튼과 같은 화면 요소로 표현할 수 있습니다.

JSX 스크립트란?

기존의 텍스트 상태창과 JSX 컴포넌트는 다음과 같은 차이가 있습니다.

방식표현 예시
텍스트[호감도: 42/100]
JSX진행률이 표시되는 게이지, 색상 변화, 버튼 등의 UI

작동 방식

  1. 컴포넌트 작성: 제작 화면의 JSX 스크립트 탭에서 컴포넌트를 작성합니다. 컴포넌트 하나는 상태창, 스탬프 카드, 선택지 상자처럼 화면에 표시할 하나의 UI를 의미합니다.
  2. 호출 지침 작성: 프롬프트나 로어북에 컴포넌트를 출력할 조건을 작성합니다. 예를 들어 ‘호감도가 변할 때 <AffinityMeter />를 출력해라.’ 같은 방식으로 지시할 수 있습니다.
  3. 채팅에서 호출: AI가 대화 흐름에 맞춰 컴포넌트 태그를 출력하면 해당 위치에 UI가 표시됩니다.

💡
JSX 코드를 작성하는 것만으로는 채팅에 자동으로 표시되지 않습니다.
프롬프트나 로어북에 컴포넌트를 언제 호출해야 하는지 함께 작성해 주세요.

기본 작성 방법

다음은 호감도를 표시하는 간단한 JSX 컴포넌트 예시입니다.

function AffinityMeter() {
	const [love, setLove] = useState(42);
	return (
		<div style={{ padding: 12 }}>
			<p>엘린의 호감도 · {love}</p>
			<progress value={love} max={100} />
			<button onClick={() => setLove(love + 5)}>더 대화하기</button>
		</div>
	);
}

기본 구성

  • function 컴포넌트이름(): 컴포넌트의 이름을 정의합니다. 컴포넌트 이름은 대문자로 시작해야 합니다. 소문자로 시작하면 일반 HTML 태그로 인식되어 정상적으로 작동하지 않을 수 있습니다.
  • useState(초기값): 변경되는 값을 저장합니다. [현재 값, 값을 변경하는 함수] 형태로 사용합니다. 위 예시에서는 호감도가 42에서 시작하고 setLove로 값을 변경합니다.
  • return (...): 화면에 실제로 표시할 내용을 작성합니다.
  • {}: JSX 안에 값이나 코드를 입력하는 영역입니다. {love}는 해당 위치에 love의 현재 값을 표시합니다.
  • onClick: 버튼을 클릭했을 때 실행할 동작을 설정합니다.

HTML과 다른 점

  • class 대신 className을 사용합니다.
  • 스타일은 문자열이 아니라 style={{ padding: 12, color: 'red' }}와 같은 객체 형태로 작성합니다.
  • 내용이 없는 태그도 <img />처럼 닫아야 합니다.
  • 반환하는 요소가 여러 개라면 하나의 최상위 태그로 감싸야 합니다.

프롭 활용하기

프롭(props)은 컴포넌트 밖에서 이름이나 수치 등의 값을 전달받는 기능입니다. 프롭을 사용하면 하나의 컴포넌트를 여러 캐릭터와 상황에 재사용할 수 있습니다.

function AffinityMeter({ name, value }) {
	return <p>{name}의 호감도 · {value}</p>;
}

AI는 다음과 같이 컴포넌트를 호출할 수 있습니다.

<AffinityMeter name="엘린" value={42} />

문자 값은 따옴표로, 숫자나 코드 값은 중괄호로 전달합니다.

  • 문자: name="엘린"
  • 숫자: value={42}

AI 가이드로 코드 작성하기

JSX 코드를 직접 작성하기 어렵다면 제작 화면의 AI 가이드를 이용할 수 있습니다. 원하는 결과를 구체적으로 설명할수록 목적에 맞는 코드를 생성하기 쉬워집니다.

AI 가이드에 요청할 때는 다음 내용을 함께 작성하는 것을 권장합니다.

  • 표시할 정보: 호감도, 현재 위치, 소지품 목록 등
  • 표시 형태: 게이지, 카드, 표, 버튼 등
  • 변경되는 값: AI가 매번 다른 값을 넣어야 한다면 프롭으로 전달하도록 요청
  • 작성 조건: 외부 라이브러리 사용 여부, 상태 관리 방식, 스타일 작성 방식 등

요청 예시

캐릭터의 호감도를 0부터 100까지 표시하는 게이지를 만들어 줘. 캐릭터 이름과 호감도는 프롭으로 전달받고, 외부 라이브러리 없이 인라인 스타일로 작성해 줘.

작성 시 주의사항

  • 실제로 사용할 컴포넌트만 작성하는 것을 권장합니다. 컴포넌트가 많아지면 프롬프트에 작성해야 하는 호출 지침도 함께 늘어납니다.
  • 실시간 미리보기에서는 코드의 레이아웃과 디자인을 확인할 수 있습니다.
  • AI가 컴포넌트를 적절한 시점에 호출하는지는 테스트 채팅에서 확인해야 합니다.
  • 미리보기에서는 정상적으로 표시되지만 채팅에서 호출되지 않는다면 컴포넌트 코드보다 프롬프트나 로어북의 호출 지침을 먼저 확인해 주세요.

작성 전 확인하기

  • [ ] 컴포넌트 이름이 대문자로 시작하나요?
  • [ ] 모든 태그가 올바르게 닫혀 있나요?
  • [ ] 여러 요소가 하나의 최상위 태그 안에 있나요?
  • [ ] 변경되는 값이 필요한 경우 프롭으로 전달되나요?
  • [ ] 프롬프트나 로어북에 호출 조건을 작성했나요?
  • [ ] 테스트 채팅에서 의도한 시점에 컴포넌트가 표시되나요?

이전 페이지로 돌아가기

함께 보면 좋은 글

관련 게시물