에셋과 JSX 활용법

텍스트만으로 부족하다면, 이미지와 UI로 연출을 강화할 수 있습니다.

이 가이드는 다음과 같은 분들을 위한 내용입니다:

• 캐릭터 상황에 따라 다른 이미지를 보여주고 싶다

• 게임처럼 스테이터스 창이나 인벤토리를 넣고 싶다

• 선택지 UI로 분기를 만들고 싶다

1. 이미지 에셋

이게 뭔가요?

캐릭터 상황에 따라 다른 이미지가 표시되는 기능입니다.

서진: *살짝 입꼬리가 올라간다* "...맛있어요?"

[img:미소 짓는 서진]

어떻게 작동하나요?

이미지는 [img:설명] 형식으로 호출됩니다.

[img:미소 짓는 서진]
[img:창밖을 바라보는 서진]
[img:잔을 닦는 서진의 손]

AI가 상황에 맞는 설명을 넣으면, 에셋에 등록된 이미지 중 매칭되는 걸 보여줍니다.

설정 방법

1. 에셋 탭 클릭

2. 이미지 업로드하고 설명 입력

3. 자동 사용 토글 켜기

자동 사용을 켜면 AI가 알아서 적절한 타이밍에 이미지를 넣어줍니다.

더 세밀하게 제어하고 싶다면?

출력지침을 입력해서 수동으로 규칙을 정할 수 있습니다.

## 이미지 규칙
- 서진이 웃을 때: [img:미소]
- 서진이 생각에 잠길 때: [img:창밖]
- 술을 따를 때: [img:잔]
- 기본 상태: [img:기본]

이렇게 프롬프트에 써두면 AI가 규칙대로 이미지를 호출합니다.

에셋 설명 작성 팁

에셋에 이미지를 등록할 때 설명을 잘 적는 게 핵심입니다.

❌ "이미지1"
❌ "happy"
⭕ "미소 짓는 서진"
⭕ "창밖을 바라보며 생각에 잠긴 서진"

AI가 [img:???]를 생성할 때 이 설명과 매칭하기 때문에, 구체적으로 적을수록 정확하게 호출됩니다.

2. 컴포넌트

이게 뭔가요?

채팅 중간에 삽입되는 인터랙티브 UI입니다.

예시:

┌─────────────────────────┐
│  🍸 오늘의 추천 칵테일   │
│  ───────────────────    │
│  ◉ 모히토               │
│  ○ 마티니               │
│  ○ 올드 패션드          │
│  [선택하기]              │
└─────────────────────────┘

게임의 선택지, RPG의 스테이터스 창, 인벤토리 같은 걸 만들 수 있어요.

코딩 몰라도 되나요?

네. 두 가지 방법이 있습니다:

방법 1: 템플릿 갤러리 (추천)

1. 컴포넌트 탭 클릭

2. 템플릿 갤러리 열기

3. 원하는 템플릿 선택

미리 만들어진 템플릿:

방법 2: AI한테 시키기

컴포넌트 탭에서 채팅창에 원하는 걸 설명하세요:

"손님이 고를 수 있는 칵테일 메뉴판 만들어줘. 
3개 선택지가 있고, 각각 가격이랑 설명도 보여줘."

AI가 코드를 생성해줍니다. 미리보기로 확인하고, 마음에 들면 저장.

컴포넌트 연동하기

컴포넌트를 만들었으면 프롬프트에서 언제 표시할지 알려줘야 합니다:

## 컴포넌트 규칙
- 손님이 "뭐 마실까"라고 하면 [메뉴판] 컴포넌트 표시
- 전투 시작 시 [스테이터스] 컴포넌트 표시
- 아이템 획득 시 [인벤토리] 컴포넌트 업데이트

직접 만들기 (고급)

코딩 할 줄 알면 JSX로 직접 작성할 수 있습니다.

자세한 내용은 👉🏻JSX 가이드 를 참고해 주세요!

3. 다이스 시스템

이게 뭔가요?

TRPG처럼 주사위를 굴려서 결과를 정하는 시스템입니다.

> 서진에게 말을 건다

🎲 판정: 1d20 → 7 (실패)

서진: *잔을 닦는 손을 멈추지 않고* "..."
*대답 없이 묵묵히 일만 한다*

운 요소가 들어가면 같은 행동도 매번 다른 결과가 나와서 리플레이 가치가 올라갑니다.

설정 방법

1. 프롬프트 탭 하단 → 다이스 설정

2. 활성화 토글 켜기

3. 다이스 타입 추가

다이스 표기법

판정 규칙 예시

다이스: 1d20
규칙:
- 1-5: 대실패. 상황이 악화됨
- 6-10: 실패. 원하는 결과 못 얻음
- 11-15: 성공. 의도대로 진행
- 16-19: 대성공. 추가 효과
- 20: 크리티컬! 최고의 결과

프롬프트 연동

다이스를 설정했으면 프롬프트에도 규칙을 써줘야 AI가 이해합니다:

## 다이스 규칙
{{user}}의 주요 행동에 1d20 판정을 적용한다.
- 1-5: 실패하고 어색한 상황 발생
- 6-10: 실패, 서진이 무반응
- 11-15: 성공, 서진이 반응함
- 16-20: 대성공, 서진이 먼저 말을 걸어옴

사소한 행동(인사, 주문 등)에는 판정 없이 진행.

언제 뭘 써야 하나요?

전부 다 쓸 필요 없습니다. 캐릭터 컨셉에 맞는 것만 골라서 쓰세요.

다음 단계

• 여러 캐릭터를 연결하고 싶다면 →