📝 사용자 별도 설명 가이드

사용자 별도 설명은 캐릭터 소개 페이지에서 사용자에게 보여 줄 내용을 자유롭게 꾸미는 기능이에요.

별도 설명을 작성하면 기존 세계관·캐릭터 설명 대신 이 내용이 표시돼요. 공개하고 싶은 정보만 따로 정리하거나, 마크다운과 HTML을 활용해 캐릭터의 분위기에 맞는 소개 페이지를 만들 수 있어요.

별도 설명에 작성한 내용은 캐릭터의 프롬프트에 포함되지 않아요. AI가 기억하거나 대화에 반영해야 하는 설정은 세계관·캐릭터 설명 등 설정 영역에 작성해 주세요.

아래 내용은 캐릭터의 사용자 별도 설명을 기준으로 안내하고 있어요. 채팅 메시지나 위젯은 사용할 수 있는 코드와 처리 방식이 다를 수 있으니 구분해 주세요.

• 별도 설명은 최대 15,000자까지 작성할 수 있어요.

• 화면에 보이는 문장뿐 아니라 마크다운 기호, HTML 태그, 스타일, 이미지 주소, 공백, 줄바꿈도 모두 글자 수에 포함돼요.

• 일부 이모지와 특수문자는 화면에서 한 글자로 보여도 여러 글자로 계산될 수 있어요. 최종 글자 수는 입력창에 표시되는 수치를 확인해 주세요.

• AI로 작성한다면 문장만 계산하지 않도록, 입력창에 붙여 넣을 최종 내용 전체를 기준으로 글자 수를 확인해 달라고 요청해 주세요. JavaScript로 계산할 때는 문자열의 length를 기준으로 확인하면 돼요.

수정하거나 번역할 때를 고려해 여유를 남겨 두는 것을 권장해요. 예를 들어 처음에는 14,000자 안팎으로 작성하고, 필요한 내용을 보완할 수 있어요.

Q. 소개글에 넣을 내용이 너무 많아요.

이용 안내나 제작자 메시지는 크리에이터 코멘트로 나누어 작성할 수 있어요. 크리에이터 코멘트는 별도로 최대 30,000자까지 입력할 수 있어요.

두 칸에 HTML을 나누어 작성할 때는 각각 완성된 HTML을 넣어 주세요. 별도 설명에서 연 태그를 크리에이터 코멘트에서 닫는 방식은 사용할 수 없어요.

마크다운은 간단한 기호로 제목, 강조, 목록 등을 표현하는 작성 방식이에요. 배경색이나 복잡한 배치 없이 내용을 읽기 좋게 정리하고 싶을 때 사용할 수 있어요.

별도 설명에서는 아래 마크다운 문법을 사용할 수 있어요.

제목은 #을 1개부터 6개까지 사용해 구분할 수 있어요. 제목, 목록, 인용문을 작성할 때는 기호 뒤에 공백을 한 칸 넣어 주세요.

일반 본문에서는 엔터를 한 번 누르면 줄바꿈이 반영돼요. 문단을 나누고 싶다면 빈 줄을 넣어 주세요. 제목·목록·인용문·구분선 앞뒤에도 빈 줄을 넣으면 구분하기 쉬워요.

표는 아래처럼 작성할 수 있어요.

| 항목 | 내용 |\n| --- | --- |\n| 이름 | 캐릭터 이름 |\n| 직업 | 캐릭터의 직업 |

여러 줄의 코드를 그대로 보여 주고 싶다면, 내용의 앞뒤를 각각 별도의 줄에 적은 백틱 세 개로 감싸 주세요. 이 방식은 코드를 실행하거나 디자인으로 적용하는 기능이 아니라, 코드 자체를 보여 주는 기능이에요.

아래 예시를 복사해 캐릭터에 맞게 수정해 주세요. 입력창에는 코드 블록 안의 내용만 붙여 넣으면 돼요.

마크다운만으로는 배경색, 테두리, 글자 크기, 여러 열의 배치 등을 세밀하게 지정하기 어려워요. 이런 디자인이 필요하다면 HTML 작성 방식을 이용해 주세요.

HTML을 사용하면 배경색, 여백, 테두리, 이미지 배치 등을 직접 설정해 소개 페이지를 꾸밀 수 있어요.

다만 HTML은 허용된 태그와 속성으로 정리한 뒤 표시되기 때문에, 일반 웹페이지에서 작동하는 코드가 모두 적용되는 것은 아니에요.

이 HTML 작성 방식은 사용자 별도 설명뿐 아니라 크리에이터 코멘트에도 동일하게 적용돼요. style 속성에 CSS를 작성하는 인라인 스타일 방식으로 디자인을 적용할 수 있어요.

HTML을 직접 작성할 때는 아래 태그를 사용해 주세요.

다음 태그는 직접 작성하는 HTML의 허용 목록에 포함되지 않아요.

<section>, <article>, <header>, <footer>\n<h1>, <h2>, <h3>, <h4>, <h5>, <h6>\n<table>, <ul>, <ol>, <li>\n<details>, <summary>\n<button>, <input>\n<svg>, <canvas>

제목이나 표처럼 보이는 구성을 만들고 싶다면 <div>와 <span>에 스타일을 적용해 주세요. <details>와 <summary>를 사용하는 접기·펼치기 기능은 별도 설명에서 지원하지 않아요.

마크다운으로 작성한 제목·목록·표는 별도로 처리돼요. 마크다운으로 표시할 수 있는 요소라도, 같은 모양의 HTML 태그를 직접 사용할 수 있다는 뜻은 아니에요.

Q. 유튜브 영상을 넣을 수 있나요?

유튜브 임베드는 예외적으로 지원해요. 아래 형식의 주소를 사용하는 정상적인 <iframe> 코드는 전용 플레이어로 변환돼요.

• https://www.youtube.com/embed/영상ID

• https://www.youtube-nocookie.com/embed/영상ID

일반 웹페이지를 넣는 <iframe>은 지원하지 않아요. 유튜브 임베드도 원본 코드의 스타일이나 옵션이 그대로 유지되지는 않을 수 있어요.

배경색, 여백, 테두리 등 디자인을 적용하려면 각 태그의 style 속성 안에 CSS를 작성해 주세요. 이 방식을 인라인 스타일이라고 해요.

<div style="background:#f5f1eb;color:#302b26;padding:20px;border-radius:12px;">내용을 입력해 주세요.</div>

인라인 스타일로 색상, 배경, 여백, 테두리, 둥근 모서리, 그림자, 글자 크기, 행간 등을 설정할 수 있어요. Flex나 Grid를 활용한 배치도 가능해요.

position, transform, filter도 일괄적으로 금지된 속성은 아니에요. 다만 속성에 따라 브라우저나 앱에서 보이는 모습이 달라질 수 있으니 실제 화면에서 확인해 주세요.

다음 방식은 사용할 수 없어요.

• <style> 태그나 외부 CSS 파일로 스타일을 정의하는 방식

• <script>, onclick, onmouseover 등 JavaScript 실행이 필요한 방식

• React·JSX, Tailwind·Bootstrap 등 별도의 실행 환경이나 외부 라이브러리가 필요한 방식

• @media, @font-face, @keyframes, :hover, ::before처럼 별도의 CSS 규칙을 정의해야 하는 방식

class 이름만 작성하면 디자인이 자동으로 적용되는 것은 아니에요. 플랫폼 내부 클래스에 의존하지 말고, 필요한 스타일을 각 태그의 style 속성에 작성해 주세요.

Q. 원하는 글꼴을 사용할 수 있나요?

font-family로 글꼴을 지정할 수는 있어요. 다만 글꼴 이름을 적는 것만으로 해당 글꼴이 다운로드되지는 않아요.

지정한 글꼴이 없는 환경에서도 읽을 수 있도록 기본 글꼴이나 대체 글꼴을 함께 지정해 주세요.

별도 설명은 마크다운 처리도 함께 거쳐요. 따라서 코드에 들어간 들여쓰기나 줄바꿈에 따라 HTML이 디자인으로 표시되지 않고, 코드 자체가 보일 수 있어요.

HTML을 작성할 때는 아래 내용을 참고해 주세요.

• 태그 사이에는 엔터를 한 번씩 넣어 주세요. 코드를 한 줄로 모두 붙이지 않아도 괜찮아요.

• 줄 앞에 탭이나 공백 네 칸 이상의 들여쓰기를 넣지 말아 주세요. 특히 빈 줄 다음에 들여쓴 코드는 마크다운 코드 블록으로 인식될 수 있어요. AI에 요청할 때는 줄 앞 들여쓰기 없이 작성해 달라고 안내하는 것이 좋아요.

• HTML 안에 불필요한 빈 줄을 여러 번 넣지 말아 주세요. 빈 줄이 항상 오류를 일으키는 것은 아니지만, 마크다운이 해석되는 구간에 영향을 줄 수 있어요.

• AI가 HTML을 코드 블록으로 제공했다면 그 안의 HTML만 복사해 주세요. 디자인을 적용하려면 시작과 끝에 붙은 백틱 세 개와 html 표시는 입력창에 붙여 넣지 않아요.

• 태그 앞에 역슬래시를 붙인 \\<div>나, 태그를 문자로 바꾼 <div>를 사용하지 말아 주세요. 실제 HTML 태그는 <div>처럼 작성해요.

• 따옴표와 태그는 빠짐없이 닫아 주세요. 속성값에는 일반 따옴표 " 또는 '를 사용해 주세요.

• HTML 안에서는 **강조** 같은 마크다운 대신 <strong>강조</strong>를 사용해 주세요. HTML 내부의 마크다운은 변환되지 않고 그대로 보일 수 있어요.

HTML 코드를 읽기 위한 줄바꿈과 화면에 표시할 줄바꿈은 달라요.

HTML 코드에서 엔터를 눌렀다고 화면에서도 반드시 줄이 바뀌는 것은 아니에요. 화면에서 문장을 줄바꿈하려면 <br>를 사용하고, 문단을 나누려면 <p> 또는 <div>를 사용해 주세요.

여는 태그의 속성과 스타일은 한 줄에 작성하고, 태그와 태그 사이에서 줄을 바꾸는 방식을 권장해요.

이미지를 넣을 때는 <img> 태그의 src에 다른 사용자도 접근할 수 있는 이미지 URL을 입력해 주세요. 케이브덕에 업로드한 이미지 주소를 사용하는 것을 권장해요.

내 컴퓨터의 파일 경로나 file:// 주소, 로컬 미리보기 주소는 다른 사용자에게 이미지를 보여 주는 용도로 사용할 수 없어요. 이미지를 Base64 문자열로 코드에 직접 넣으면 글자 수가 크게 늘어나므로 피하는 것이 좋아요.

마크다운으로 이미지를 넣을 때도 다른 사용자가 접근할 수 있는 이미지 URL을 사용해야 해요.

PC뿐 아니라 모바일에서도 읽기 편하도록 아래 내용을 함께 확인해 주세요.

• 전체 너비가 화면에 맞춰 줄어들도록 작성해 주세요. 예를 들어 바깥 영역에 width:100%;max-width:640px;box-sizing:border-box;를 적용할 수 있어요. 여기서 640px은 예시이며 정해진 규격은 아니에요.

• 이미지는 display:block;max-width:100%;height:auto;를 기본으로 사용하면 영역 밖으로 넘치는 것을 줄일 수 있어요.

• 본문 영역의 높이를 고정하거나 넘치는 글자를 숨기지 않는 것을 권장해요. 자동 번역으로 문장이 길어지면 내용이 잘릴 수 있어요.

• 여러 열로 배치할 때는 좁은 화면에서도 줄바꿈되도록 구성해 주세요.

• 가독성을 위해 본문은 12~14px 이상, 작은 보조 글자도 10px 이상을 권장해요. 이는 권장 크기이며 플랫폼의 필수 제한은 아니에요. 앱에서도 크기와 줄바꿈을 확인해 주세요.

• 번역할 문장은 이미지 안에 넣거나 글자마다 태그를 나누기보다, 문장이나 의미 단위로 묶어서 작성해 주세요.

• {{char}}, {{user}} 같은 치환 키워드를 사용할 때는 철자와 중괄호를 그대로 유지해 주세요.

아래는 허용된 태그와 인라인 스타일로 작성한 간단한 예시예요. 입력창에는 코드 블록 안의 HTML만 복사해 주세요.

<div style="width:100%;max-width:640px;margin:0 auto;padding:20px;box-sizing:border-box;background:#f5f1eb;color:#302b26;font-size:14px;line-height:1.8;">\n<p style="margin:0 0 12px;font-size:20px;font-weight:700;">캐릭터 이름</p>\n<p style="margin:0 0 16px;">캐릭터를 소개하는 문장이에요.<br>이어서 보여 줄 내용을 작성해 주세요.</p>\n<div style="padding:14px;border:1px solid #d7cfc4;border-radius:10px;">\n<p style="margin:0;"><strong>기본 정보</strong><br>나이, 직업 등 공개할 정보를 입력해 주세요.</p>\n</div>\n</div>

일반 브라우저에서 HTML 파일을 열었을 때와 케이브덕에 적용했을 때의 모습은 다를 수 있어요. 완성 후에는 제작 화면의 미리보기를 확인하고, 저장한 소개글도 PC와 모바일에서 확인해 주세요.

AI에 제작을 요청할 때는 마크다운과 HTML 중 어떤 방식으로 작성할지 먼저 알려 주세요.

간단한 제목과 목록으로 내용을 정리하고 싶다면 마크다운을, 배경색과 테두리 등 세부적인 디자인을 적용하고 싶다면 HTML을 요청하면 돼요.

캐릭터의 분위기, 사용할 색상, 공개할 내용, 이미지 URL도 함께 알려 주면 원하는 소개글을 만드는 데 도움이 돼요.

아래 작성 조건은 HTML로 제작을 요청할 때 원하는 디자인 설명과 함께 전달해 주세요.

케이브덕 캐릭터의 사용자 별도 설명에 붙여 넣을 HTML을 작성해 주세요.

• 최종 HTML 코드 전체를 JavaScript 문자열의 length 기준으로 15,000자 이내로 작성하고, 수정할 여유를 남겨 주세요. 태그, 스타일, 이미지 URL, 공백, 줄바꿈도 글자 수에 포함해 주세요.

• 사용할 수 있는 HTML 태그는 div, p, span, b, strong, i, em, br, hr, img, a예요.

• 스타일은 각 태그의 style 속성에만 작성해 주세요.

• 전체 웹문서 구조, <style>·<script> 태그, 외부 CSS·글꼴 로딩, JavaScript, React·JSX, 사용자 정의 CSS 클래스는 사용하지 말아 주세요.

• @media, @font-face, @keyframes, :hover, ::before 등 별도의 CSS 규칙이 필요한 방식은 사용하지 말아 주세요.

• <table>, <details>, <summary>, <svg> 등 허용 목록에 없는 태그는 사용하지 말아 주세요.

• 여는 태그의 속성과 스타일은 한 줄에 작성하고, 태그 사이에는 실제 엔터를 한 번씩 넣어 주세요. 불필요한 빈 줄과 줄 앞 들여쓰기는 넣지 말아 주세요.

• HTML 안에 마크다운을 섞지 말고, 화면에 표시할 줄바꿈은 <br>로 처리해 주세요.

• 모바일에서 화면 너비를 넘지 않도록 작성하고, 번역으로 문장이 길어져도 내용이 잘리지 않게 해 주세요.

• 기본적으로 본문은 12~14px 이상, 작은 보조 글자는 10px 이상으로 작성해 주세요.

• 번역할 텍스트는 글자별로 태그를 나누지 말고 문장이나 의미 단위로 묶어 주세요.

• 이미지 주소는 제가 제공한 URL만 사용하고, {{char}}·{{user}} 키워드는 변경하지 말아 주세요.

• 최종 답변에는 바로 붙여 넣을 수 있도록 백틱 코드 펜스나 설명 문구 없이 HTML만 출력해 주세요.