수치를 화면에 보여 주고 싶을 때 · 상태창

상태창은 AI 답변 아래에 붙는 작은 창이에요. 호감도 막대, 지금 있는 장소와 시각, 캐릭터가 하고 있는 행동 같은 걸 게임 화면처럼 보여 줘요.

이럴 때 필요해요

• 호감도가 얼마나 올랐는지 유저가 직접 보고 싶어 해요.
• 캐릭터 프롬프트에 "답변 끝에 [호감도: 00]을 적어"라고 써 뒀는데 가끔 빠지거나 형식이 흐트러져요.
• 작품 분위기에 맞는 스탯창을 꾸미고 싶어요.

상태창은 변수의 값을 보여 주는 창이에요. 값이 언제 오르내릴지는 변수에서 정하고, 상태창은 그걸 어떻게 보여 줄지만 정해요. 그래서 변수가 하나 이상 있어야 상태창을 꾸밀 수 있어요.

두 가지 방법

• 기본형: 아무것도 안 해도 돼요. 숨김이 아닌 변수의 이름과 값이 줄마다 깔끔하게 나와요. 처음이라면 이걸로 충분해요.
• 직접 꾸미기: 원하는 분위기를 말로 적으면 AI로 만들기가 꾸며 주고, HTML을 다룰 줄 안다면 직접 고쳐도 돼요.

유저가 대화방마다 상태창을 끄기도 해요.

좋은 예와 아쉬운 예

AI로 만들 때는 장르, 색, 보여 줄 방식을 함께 적어요.

좋은 예

"이세계 게임 스탯창 느낌, 어두운 남색 배경에 금색 글씨, 호감도는 막대로"

아쉬운 예

"예쁘게." 어떤 모양을 원하는지 AI가 알 수 없어요.

이렇게 해요

1. 세 번째 단계 로어북의 상태창에서 직접 꾸미기를 골라요.
2. AI에게 어떻게 꾸밀지 알려주세요 칸에 원하는 모양을 적고 AI로 만들기를 눌러요.
3. 미리보기로 확인해요. 미리보기를 한 번 봐야 저장돼요.
4. 마음에 안 들면 적은 말을 바꿔 다시 만들거나, 아래 HTML을 직접 고쳐요.

직접 꾸미기

HTML 안에 아래처럼 중괄호 두 개로 이름을 적으면, 대화 중에 실제 값으로 바뀌어요.

.max와 .delta는 게이지 변수에만 있어요. 텍스트 변수(예: {{지금행동}})는 이름만 쓰면 되고, .max·.delta를 붙이면 빈칸으로 나와요.

복사해서 고쳐 쓸 수 있는 예시예요. 변수의 연애물 세트(호감도, 지금행동)와 짝이 맞아요.

<div class="sw">
  <div class="sw-row">
    <span class="sw-label">📍 {{scene.location}}</span>
    <span class="sw-value">{{scene.time}}</span>
  </div>
  <div class="sw-row">
    <span class="sw-label">💗 호감도</span>
    <span class="sw-value">{{호감도}} / {{호감도.max}} <small>{{호감도.delta}}</small></span>
  </div>
  <progress value="{{호감도}}" max="{{호감도.max}}"></progress>
  <div class="sw-row sw-muted">{{char}}: {{지금행동}}</div>
</div>

sw, sw-row, sw-label, sw-value처럼 sw로 시작하는 이름을 쓰면 기본 모양이 잡혀요.

아래에서 직접 고쳐 보세요. 토큰 이름을 틀리게 쓰거나 url(을 넣으면 어떻게 되는지도 바로 보여요.

알아두면 좋아요

• 프롬프트에 남은 상태창 지시는 지워 주세요. 예전처럼 캐릭터 프롬프트에 "답변 끝에 상태를 적어"라고 남겨 두면 상태창이 두 번 나와요. 저장할 때 경고가 뜨면 그 부분을 지우면 돼요.
• 변수 이름에 띄어쓰기가 있으면 {{ }}로 불러올 수 없어요. 호감 도가 아니라 호감도로 지어 주세요.
• 장소·시각은 AI가 장면을 보고 채우는 값이라, 첫 답변 전에는 비어 있을 수 있어요.
• 외부 이미지나 글꼴은 불러올 수 없어요. url(, @import, @font-face가 들어 있으면 저장되지 않아요.

이럴 땐

{{호감도}}가 글자 그대로 보여요

• 변수 이름과 중괄호 안 이름이 똑같은지, 이름에 띄어쓰기가 없는지 보세요.

저장이 안 돼요

• 미리보기를 한 번 눌러 봤는지 보세요.
• 외부 이미지·글꼴을 불러오는 부분이 있는지 보세요.