크러쉬팝에서 처음 상세설명을 작성하시나요? 아래 예시를 따라 내 작품을 소개해보세요. 상세설명은 어떤 캐릭터와, 어떤 관계와 이야기를 즐길 수 있는지 보여주는 공간이에요. 코딩은 하나도 몰라도 괜찮아요. 복사하고 붙여넣는 게 전부거든요.
01무엇을 쓰면 좋을까요?
처음에는 아래 순서로 구성해보세요. 작품에 맞게 순서를 바꾸거나 필요한 항목만 사용해도 좋아요.
| 구성 | 작성 팁 |
|---|---|
| 이름과 한 줄 소개 | 이름, 나이, 핵심 키워드와 함께 캐릭터를 짧게 소개해주세요. |
| 이미지와 대표 대사 | 캐릭터의 말투와 나를 대하는 태도가 드러나는 대사를 골라주세요. |
| 성격과 관계 | 어떤 성격인지, 나와 어떤 사이인지 알려주세요. 성격이 드러나는 행동을 덧붙이면 더 생생해져요. |
| 주요 설정과 명령어 | 첫 대화를 시작할 때 알아야 하는 배경과 현재 상황을 소개해주세요. 주변 인물은 필요할 때만 추가해요. |
| 플레이 안내 | 추천 플레이 방식이나 실제 구현된 명령어가 있다면 사용 방법을 안내해주세요. |
💡 첫 화면에서 “누구와 어떤 관계로 시작하는지” 알 수 있게 해주세요. 긴 세계관 설명은 뒤에 배치하면 읽기 편해요.
02이렇게 써볼 수 있어요
아래는 구성을 설명하기 위한 가상 예시예요. 내 작품의 실제 설정에 맞게 바꿔주세요.
작성할 때 기억해주세요도윤 · 25세
#소꿉친구 #무뚝뚝 #다정함
무심한 말투와 달리, 내가 흘리듯 한 말까지 기억하는 소꿉친구.
“안 기다렸어. 네 우산 두고 갔길래.”
다정한 말을 하는 데는 서툴지만, 필요한 순간에는 늘 먼저 움직여요. 나와는 오래 알고 지낸 친구 사
오늘은 비가 오는 저녁. 약속 장소 앞에 도윤이 우산을 들고 서 있어요.
이렇게 시작해보세요
우산을 챙겨준 이유를 물어보거나, 함께 걸으며 오늘 있었던 일을 이야기해
- ‘다정하다’는 설명에 다정함이 드러나는 행동이나 대사를 더해보세요.
- 소개 문구와 이미지는 실제 캐릭터 설정과 같은 매력을 보여줘야 해요.
- 명령어는 입력어 → 실행 결과로 안내해주세요. 예를 들어
!카톡 → 카톡 UI 출력처럼 적을 수 있어요. 해당 기능이 작품에 구현되어 있을 때만 사용해주세요.
03AI에 전달할 자료를 준비해요
소개할 내용이 정해졌다면, AI에 아래 다섯 가지 자료를 한 번에 전달해주세요.
| 순서 | 준비할 자료 | 어떻게 준비하나요? |
|---|---|---|
| ① | HTML 작성 규칙 | 아래 4번의 규칙을 그대로 복사해주세요. |
| ② | 캐릭터 전체 프롬프트 | 성격, 관계, 세계관 등이 포함된 최종 프롬프트를 첨부해주세요. |
| ③ | 상세설명 구성안 | 넣고 싶은 소개 문구와 배치 순서를 적어주세요. 공개하지 않을 설정도 표시해두면 좋아요. |
| ④ | 사용할 이미지 코드 | 이미지의 ‘코드 복사’로 가져온 코드와 사용 위치를 함께 적어주세요. |
| ⑤ | 디자인 레퍼런스 | 원하는 디자인 이미지나 링크에 색감과 분위기 설명을 덧붙여주세요. |
💡 이미지 파일을 첨부할 때도 ‘코드 복사’로 가져온 코드를 꼭 함께 보내주세요. 복사한 내용은 수정하지 말고 그대로 붙여넣어주세요.
디자인은 이렇게 설명해주세요
원하는 분위기: 청춘 / 대학교 / 여름방학 / 활기찬 느낌
색감: 밝은 바탕에 파란색 포인트
배치: 세로로 읽기 쉽게, 이미지와 짧은 설명을 번갈아 배치
참고 이미지 또는 링크: 여기에 첨부💡 “예쁘게 만들어줘”보다 원하는 색감과 배치를 구체적으로 알려주면 좋아요. 레퍼런스가 있다면 함께 첨부해도 좋아요.
04AI와 함께 HTML로 만들어요
HTML은 글과 이미지의 배치를 지정하는 코드예요. 직접 작성하기 어렵다면, 준비한 자료와 아래 요청을 AI에 함께 전달해주세요.
HTML 작성 규칙 — 그대로 복사해주세요React dangerouslySetInnerHTML에 넣을 HTML 조각을 생성한다. <body> 태그만 출력하고 <head>, <style>, <link>, <script>, <meta>, <title>은 금지한다. 모든 CSS는 각 요소의 inline style=""로 작성한다. class/id 선택자, 전역 선택자(*, body, html), pseudo-element(::before/::after), @media, @font-face, @keyframes는 사용하지 않는다. pseudo-element가 필요하면 실제 span/div 요소로 만든다. min-width와 min-height는 어떤 요소의 style에도 사용하지 않는다. 너비/높이가 필요하면 width, height, max-width, max-height, padding, margin 등을 사용하되 반응형을 해치지 않도록 작성한다.한 줄 코드로 요청해주세요
마크다운 줄바꿈이 전혀 없는 완벽한 한 줄 코드로 달라고 부탁해야 오류가 적습니다.함께 전달할 요청문
첨부한 자료를 바탕으로 캐릭터 상세설명을 만들어줘.
캐릭터의 성격, 유저와의 관계, 플레이의 핵심 재미가 잘 드러나게 구성해줘.
전체 프롬프트는 설정 확인용으로 참고하고, 공개할 내용은 상세설명 구성안을 따라줘.
새로운 설정이나 명령어는 추가하지 마.
이미지는 전달한 코드를 지정된 위치에 그대로 사용하고, 코드를 임의로 바꾸거나 새로 만들지 마.
공백 포함 20,000자 이내의 HTML로 작성해줘.
위 HTML 작성 규칙을 지키고, 마크다운 코드블록이나 설명 없이 줄바꿈 없는 한 줄 HTML 코드만 출력해줘.
② 캐릭터 전체 프롬프트:
[여기에 붙여넣기]
③ 상세설명 구성안:
[소개할 내용과 순서]
④ 사용할 이미지 코드:
[사용 위치 / 캐릭터명 / ‘코드 복사’로 가져온 코드]
⑤ 디자인 레퍼런스:
[참고 이미지 또는 링크 / 원하는 색감과 분위기]05수정이 필요할 때
한 번에 완성하지 않아도 괜찮아요. 내 상황에 맞는 문장을 복사해 AI와의 대화에 이어서 보내주세요.
📏 너무 길어요내용은 그대로 두고, 반복되는 장식 요소와 큰 여백만 줄여줘.🔤 태그가 글자로 보여요
style 태그를 빼고 모든 CSS를 inline style로 바꿔줘. HTML 태그를 글자로 변환하지 말고, 마크다운 코드블록과 설명 없이 실제 HTML 코드만 출력해줘.🌙 다크모드에서 글자가 안 보여요
글자색을 지정한 모든 요소에 배경색도 함께 지정해줘. 글자와 배경이 충분히 대비되게 해줘.📱 모바일에서 옆으로 넘쳐요
고정된 px 가로 너비를 없애고 %와 max-width:100%를 사용해줘. 테두리와 여백까지 포함해 화면 밖으로 넘치지 않게 해줘.🎨 원하는 분위기와 달라요
캐릭터 설정과 소개 문구는 유지하고, 디자인 키워드를 [새 키워드]로 바꿔서 다시 만들어줘.[새 키워드]에는 ‘청량한 여름 / 밝은 파랑 / 사진첩 느낌’처럼 원하는 분위기를 적어주세요.
이미지가 안 보여. 아래 코드를 해당 위치의 이미지 코드로 바꿔줘. 복사한 코드는 수정하지 말고 그대로 사용해줘.
사용 위치: [바꿀 이미지의 위치]
이미지 코드: [제작실의 ‘코드 복사’로 다시 가져온 내용]06다 됐어요, 마지막으로
준비하고, 부탁하고, 붙여넣고, 확인하면 끝이에요.
처음 한 번만 해보면 다음부터는 5분이면 충분할 거예요. 🎉