젤로 대화 위젯 가이드

날짜 · 장소 · 호감도처럼 매 턴 바뀌는 값 을 대화방에 보여 주는 작은 판이에요. 1단계 · 세계관의 추가 설정에서 만들어요. 1. 만드는 법 세 가지 템플릿 인물별 직접 쓰기 이렇게 만들어요 모음에서 골라요 캐릭터마다 보여 줄 항목을 골라요 (호감도 · 속마음 · 지금 상태 · 옷차림 · 관계) 보일 모양을 글로 적어요 개수 2개까지, 고른 차례대로 위에서 아래로 쌓여요 항목 6개까지, 직접 더할 수도 있어요 글자 수 500자 안에서 자유롭게 템플릿 모음 분류 템플릿 상황 상태표 · 장소 · 시간 띠 · D-day 플립 시계 · 하늘 띠 관계 관계 단계 · 긁어 보는 비밀 · 알림 카드 · 속마음 카드 이야기 퀘스트 · 단서 목록 · 챕터 진행 · 선택 기록 - 다양한 신규 위젯이 추가될 수 있어요. 2. 직접 쓰기 보이는 모양 그대로 적고, 값이 들어갈 자리에만 {{ }} 를 써주세요. {{ }} 안의 내용만 바뀌어서 표시돼요. - 괄호 안 설명 을 더 상세하게 설정하고 싶다면 아래 변수 설정을 통해 값을 더 구체적으로 작성할 수 있어요. - {{user}} · {{char}} 를 사용할 수도 있어요. 설명 안에 써도 돼요. - 한 줄에 로 이어 쓰면 대화방에서도 한 줄로 보여요. - 꾸밈 글자(━━━ 같은 줄)는 그대로 보여요. 3. 상세 변수 설정 (선택) 직접 쓰기 밑의 상세 변수 설정 을 열면 칸마다 더 정할 수 있어요. 항목 기준 변수 설명 200자. 비우면 괄호 안 설명을 써요 예시 (첫 값) 30자. 첫 답에 이 값으로 시작해요 변수 구간 설정 6개까지. 구간(예: 0-20)마다 캐릭터가 할 행동(120자) 칸 수 20개까지 - 구간을 적으면 값에 맞춰 캐릭터의 태도가 달라져요. 예: 호감도 0-20 › 차갑게, 말을 아낀다 4. 위치 · 빈도 항목 고르는 것 위치 대화 첫 부분 (위에 고정) · 대화 끝 부분 (마지막 문장 밑) 빈도 매턴 · 변할 때 (값이 바뀐 턴에만) - 미리보기의 ‹ › 로 다음 턴을 넘겨 보며 값이 바뀔 때 모양을 확인해보세요. 5. HTML로 꾸미기 HTML을 아는 분은 코드 수정하기 에서, 직접 쓰기 위젯은 스타일 수정하기 에서 고쳐요. 값 넣는 자리 다른 곳에서 만든 HTML을 그대로 붙여 넣으세요. 아래 셋 중 하나면 그 자리에 값이 들어가요. 괄호는 {{ }} 두 겹이에요. 이렇게 적으면 값이 들어가는 곳 {{날짜}} 그 자리 <span 📅날짜</span (태그 안이 항목 이름뿐) 그 태그, 이모지는 값 앞에 남아요 <div 관계성: ❤️관계</div (쌍점 뒤가 항목 이름) 쌍점 뒤 예) 항목이 날짜 · 장소일 때 - 항목 이름은 직접 쓰기 목록의 이름과 같아야 해요. 이모지 · 띄어쓰기 · 밑줄(_)은 달라도 괜찮아요. - {{user}} · {{char}} 는 대화방에서 유저 · 캐릭터 이름으로 바뀌어요. - 값 자리를 못 찾은 항목은 스타일 수정하기 밑에 알려 드려요. 되는 것 · 안 되는 것 위젯은 대화방과 떨어진 칸에서 돌아요. HTML · CSS · 스크립트는 거의 다 되고, 바깥 주소에서 무언가를 불러오는 것만 막혀 있어요. 되는 것 태그 div · span · p · table · details · summary · svg 등 모두 CSS style 태그 · style 속성 · flex · grid · 그라데이션 · 애니메이션 · 블러 모두 스크립트 돼요. 값은 zello.on(function (s) { s.fields['날짜'] }) 로 읽어요 글꼴 구글 폰트 · jsdelivr 글꼴 이미지 코드 안에 넣은 이미지( data: 로 시작하는 주소) 안 되는 것 대신 이렇게 바깥 주소 이미지( https://… 의 img · background) 이미지를 data: 주소로 바꿔 코드에 넣어요 구글 폰트 · jsdelivr 밖의 글꼴 구글 폰트에서 비슷한 글꼴을 써요 영상 · 소리(video · audio) 움직임은 CSS 애니메이션으로 바깥 스크립트( <script src="https://…" ) 스크립트는 코드 안에 직접 써요 링크로 새 창 열기 · 입력 폼 보내기 위젯 안에서만 열고 닫히게(details 등) 알림창(alert · confirm) · 저장(localStorage) 쓰지 않아요 이상하게 나올 때 이렇게 보이면 확인할 것 값이 안 들어가고 글자 그대로 보여요 항목 이름이 목록과 같은지, 괄호가 {{ }} 두 겹인지 이미지가 안 보여요 바깥 주소 이미지예요. data: 로 바꿔요 글꼴이 안 바뀌어요 구글 폰트 · jsdelivr 글꼴인지 글자가 안 보여요 대화방 바탕이 어두워 기본 글색이 밝아요. 바탕색을 정했으면 글색도 같이 정해요 옆으로 잘려요 폰 화면 폭이에요. 너비를 px 대신 100% 로 아래가 잘려요 높이는 1,200px까지예요. 넘치면 위젯 안에서 스크롤돼요 - 미리보기의 ‹ › 로 예시 값을 넘겨 보며 확인한 뒤 저장해 주세요. - 코드는 위 항목 목록과 합쳐 20,000자, 스타일 수정하기는 5,000자까지예요. 6. 알아 둘 내용 - 위젯이 많을수록 캐릭터 채팅이 짧아져요. 꼭 필요한 내용만 보여 주세요. - 대화를 시작한 뒤에 위젯을 고쳐도, 이미 열린 대화는 시작할 때의 위젯으로 이어 가요.