템플릿은 코멧에서만 만나볼 수 있는 독특한 시스템이에요.
단순 줄글에서 벗어나, 마치 게임같은 몰입감 있는 화면을 직접 만들어보고 공유할 수 있어요.
1. 프로필
다른 유저 분들이 직접적으로 확인할 수 있는 부분이에요.
썸네일
템플릿의 표지를 업로드할 수 있어요. 5MB 이하의 이미지만 업로드 가능해요.
썸네일의 크기 비율은 16 : 9에요.
템플릿 공개
템플릿을 다른 사용자 분들도 쓸 수 있게 할 지를 정할 수 있어요.
템플릿을 공개하면 다른 사용자 분들도 사용할 수 있어요.
제목
템플릿의 제목이에요. 최대 20자까지 입력 가능해요.
설명
템플릿에 대한 소개, 간략한 사용 설명 등을 적어주세요. 최대 250자까지 입력 가능해요.
2. 프롬프트
템플릿의 시스템 부분을 설계하는 부분이에요.
프롬프트
어떤 변수에 어떤 데이터를 어떻게 대입할 지를 설명할 수 있어요.
최대 1000자까지 입력 가능해요.
코멧의 핵심 기능을 결정짓는 프롬프트인 만큼, 구체적으로 작성하시는 것을 추천해요.
프롬프트 예시 (1:1 롤플레잉 템플릿)
변수
AI가 사용할 수 있는 공간을 만들 수 있어요.
예외적으로 유저 입력의 경우 유저가 가장 최근에 전송한 값으로, AI가 변경할 수 없어요.
모든 변수의 이름은 서로 달라야 해요.
변수가 무엇인가요?
변수 설정
변수 박스를 클릭해 설정할 수 있어요.
변수명
이름을 지정할 수 있어요. 최대 10글자까지, 중복은 불가능해요.
자동 진행
이 변수가 바뀌면, 자동으로 이어나갈지 정해요.
설명
변수 권한
플레이어와 유저의 접근 권한을 설정해요.
설명
변수 타입
변수에 들어갈 값을 제한해요.
AI한테만 적용되는 사항으로, 제작자나 플레이어에게는 적용되지 않아요.
설명
변수명은 명시적으로, 사용 방법이 명확하도록 설정하는 것을 강력히 권장해요.
예를 들어, 대사의 변수 타입을 정수로 지정해버리면 적용되지 않을 수 있어요.
대사는 일반적으로 자유롭게 써야 하는 항목이니까요.
다른 예시로 변수명을 qwertyuiop 처럼 지어놓으면 AI가 제대로 할당하기 어려워요.
직접적으로 프롬프트랑 연계되는 부분인 만큼, 명확하게 설계해야 좋은 결과를 기대할 수 있어요.
3. 에디터
본격적으로 UI를 꾸미는 곳이에요.
에디터 페이지는 크게 미리보기, 오브젝트, 성분 3개의 창으로 구성돼요.
기본 캔버스
캔버스 크기는 1280px × 720px이에요.
왼쪽 위 꼭짓점의 좌표는 (0px, 0px)이고, 오른쪽 아래 꼭짓점의 좌표는 (1280px, 720px)이에요.
오브젝트 박스 추가
텍스트박스 추가: 
아이콘을 클릭하면 생성할 수 있어요.
아이콘을 클릭하면 생성할 수 있어요.이미지 추가: 
아이콘을 클릭하고, 5MB 이하의 이미지를 업로드하면 생성할 수 있어요.
아이콘을 클릭하고, 5MB 이하의 이미지를 업로드하면 생성할 수 있어요.프레임 추가: 
아이콘을 클릭하면 생성할 수 있어요.
아이콘을 클릭하면 생성할 수 있어요.공통 성분
x, y: 오브젝트의 왼쪽 위 꼭짓점의 좌표에요. 숫자만 입력해주세요.
width, height: 오브젝트의 가로, 세로 길이에요. 숫자만 입력해주세요.
텍스트 오브젝트 성분
assigned: 값을 표시할 변수를 지정해요.
fontSize(px): 텍스트의 크기를 지정해요. 숫자만 입력해주세요.
if: 렌더링 조건문을 지정해요. 필요없다면 비워놓아도 좋아요.
작성법
color(code): 텍스트의 색상을 지정해요. 헥스코드를 지원해요.
헥스코드를 모르겠어요
textAlign: 텍스트 정렬 방법을 정해요.
left: 좌측 정렬
center: 중앙 정렬
right: 우측 정렬
easing: 텍스트 송출 방법을 정해요. 다음으로 넘길 때에만 적용돼요.
none: 값이 변하면 즉시 변해요.
typing: 값이 변하면 한 글자씩나와요.
fade: 값이 변하면 완전히 사라지고, 서서히 등장해요.
overflow: 텍스트가 넘칠 때 스크롤 여부를 결정해요.
hidden: 넘친 텍스트는 잘라내요.
scroll: 텍스트가 넘칠 경우 스크롤할 수 있어요.
white-space: 줄바꿈 여부를 결정해요.
normal: 텍스트가 가로로 길어질 경우에만 줄을 바꿔요. (엔터 키를 무시해요.)
pre-wrap: 엔터 키를 통해 누른 줄바꿈도 같이 줄을 바꿔요.
font: 글꼴을 정해요.
font weight: 글꼴 두께를 정해요. 일반적으로 300이면 얇고, 500이면 보통, 700이면 두꺼워요.
모든 글꼴이 두께 기능을 지원하지는 않아요. 직접 테스트해 보시는 걸 추천해요.
이미지 오브젝트 성분
func: 이미지에 기능을 부여해요.
none: 아무런 기능이 없어요.
prev: 누르면 이전 대화로 돌아가요.
next: 누르면 다음 대화로 넘어가요.
프레임 오브젝트 성분
assigned: 이미지 이름으로 사용할 변수를 지정해요.
borderRadius: 꼭짓점을 둥그렇게 깎아내요. 숫자만 입력해주세요.
prefix: 변수 앞에 붙일 접두사를 정해요.
이미지 렌더링 원리
object-fit: 이미지 비율이 맞지 않을 경우, 어떻게 렌더링할 지를 정해요.
contain: 이미지를 프레임 안에 들어가도록 작게 만들어요.
cover: 이미지를 잘라 프레임이 꽉 채워지도록 만들어요.
moping: 이미지 전환 방법을 정해요.
none: 변수가 변하면 즉시 바꿔요.
fade: 변수가 변하면 기존 이미지가 서서히 사라지고, 이후 새 이미지가 서서히 등장해요.
cross-fade: 변수가 변하면 기존 이미지가 서서히 사라짐과 동시에, 새 이미지가 서서히 등장해요.
duration(ms): 등장 속도를 정해요. moping이 none인 경우 보이지 않아요. 숫자만 입력해주세요.