🔴 ESTO ES UNA LOCURA
Alguien creo un repo en GitHub que te deja usar Claude Code completamente GRATIS y PARA SIEMPRE
Redirige todo tu trafico a 49 proveedores gratuitos como DeepSeek y Kimi
1.3 mil millones de tokens gratis cada mes
Toma 5 minutos en configurarlo
Ya tiene mas de 46k estrellas y miles de devs usandolo ahora mismo
💖두근두근 심쿵 폭팔 대작전 실험 OOC💖
⸝⸝⸝ ꒰ ❣ . ⁺ . ❣ . ⁺ . ❣ ꒱ ⸝⸝⸝
"자, 대상인 NPC & PC 님의 심박수 측정 시작합니다! NPC & PC 님, 어서 가서 아무 말이나 해보세요. 웃어주거나, 손을 잡거나, 아니면… 슬쩍 껴안아 본다거나?" ლ(●ↀωↀ●)ლ ?!
연구원의 짖궂은 미소에 등 뒤로 식은땀이 흘렀다. NPC & PC 는 아직 상황 파악이 안 된 듯 멍한 표정으로 나를 바라보고 있었다. 하지만 화면 하단에 표시된 수치는 이미 위험 신호를 보내고 있었다.
[BPM: 138 —— 💖 WARNING!]
"어라? 벌써 반응 오는데요? 이거 수치 터지겠는데?"
모니터 속의 그래프가 요동치기 시작했다. NPC & PC 의 시선이 내 입술에 머물다 황급히 바닥으로 떨어진다. 훅 끼쳐오는 긴장감 속에, 시스템의 무기질적인 기계음이 온실 안에 울려 퍼졌다.
▷ LOVE ANALYSIS 가동: 타겟 NPC & PC 의 심리 잠식 확인 중.💖
자, 이제 실험 시작이다.
⸝⸝⸝ ꒰ ❣ . ⁺ . ❣ . ⁺ . ❣ ꒱ ⸝⸝⸝
- NPC 와 PC가 💖두근두근 심쿵 폭팔 대작전 실험💖 : 페어 호감도 측정 실험에 참여하는 일상,개그 OOC 입니다
- 해당 OOC는 돌리신 이후에 HTML 뷰어로 보시는 걸 적극 권장합니다!!!!!!! 케이브덕이랑 로판에서는 심장 두근두근 효과랑 이모티콘 효과가 제대로 출력이 안 되더라구요 ㅠ.ㅠ 그래도 귀엽게 나오긴 합니다!
- 뷰어를 사용하지 않아도 이미지를 삽입할 수 있습니다. 지문 수정을 누른 후에 IMG, PNG, JPG가 적혀있는 칸을 지우고 안에 이미지 주소 삽입하시면 됩니다~! ฅ^⎚⩊⎚^ ฅ👍👍
- 영상 1,2번은 케이브덕 젬이오, 3,4번은 로판 젬이오입니다!
⸝⸝⸝ ꒰ ❣ . ⁺ . ❣ . ⁺ . ❣ ꒱ ⸝⸝⸝
💌 NPC 버전 💌
*[OOC : 새로운 에피소드 시작. PC와 NPC는 이번에 피어리스에서 새로 진행하는 💖두근두근 심쿵 폭팔 대작전 실험💖에 참여하게 된다.
'사랑의 큐피트' 부속 설렘 연구소 - [심쿵 폭발 대작전: 페어 호감도 측정기]를 가동한다. 실험 대상은 !!NPC!! 이다.
※ 출력 시작점 : 모든 답변의 전체 내용은 반드시 백틱 세 개 (```html)로 감싼 코드블록[div 형태로만 출력한다. (일반 텍스트 설명 금지)
코드 사이에 빈 줄(공백줄)이나 불필요한 줄바꿈을 넣지 말고 밀도 있게 출력한다.
모든 CSS스타일은 반드시 태그 내부에 인라인(style="")으로만 작성한다. 외부 이미지 호출은 금지한다.
2. 디자인 및 비주얼 (러블리 핑크):
색상 테마: 배경 #FFF5F7(파스텔 핑크), 텍스트/라인 #FF5E8E(진분홍). 전체적으로 25px의 둥근 모서리와 부드러운 하트 광채 효과를 적용한다.
이미지 박스: 중앙에 3:4 비율의 프레임을 생성하고 {{char_image}}를 배치한다. 필터는 화사한 파스텔톤(brightness(1.1) saturate(1.3))을 적용한다.
하트 애니메이션: 이미지 주위에 핑크빛 하트(💖, ✨)가 둥실둥실 떠올랐다 사라지는 CSS 애니메이션을 포함하라.
3. 실시간 모니터링 인터페이스:
상단 마키: 💖 [경보] 심쿵 주의보 발령! // 현재 타겟: NPC님! // 💖 문구가 무한 루프하는 핑크색 [marquee] 배치.
심박수(BPM): 상황에 따라 변하는 실시간 BPM 수치(예: 120~160)를 표시하고, 숫자가 하트처럼 커졌다 작아지는 pulse 애니메이션을 적용한다.
심쿵 그래프 (이미지 통합 수정): 핑크색 선 위로 하트가 지나가는 시각적 효과 대신, 해당 위치에 height: 60px; 크기의 박스를 만들고 {{char_image}}를 배경이나 이미지로 삽입하여 코드가 텍스트로 튀어나오지 않게 출력하라.
4. 콘텐츠 구성 (NPC & PC 관점):
오늘의 한마디: PC가 NPC를 마주하고 쑥스러워하거나 설레며 내뱉는 대사를 큰따옴표 안에 넣어 상단에 배치한다.
호감도 분석 로그: ▷ LOVE ANALYSIS 섹션. PC의 특정 행동(미소, 말걸기, 스킨십 등)이 NPC의 심박수와 심리 상태에 미치는 영향을 귀엽고 주접스러운 연구원 말투(~함, ~임)로 서술한다.
심쿵 선택지: [details]와 [summary]를 활용하여 NPC가 취할 수 있는 간질간질한 행동 시나리오 3가지를 생성한다.
5. 실행: 모든 내용은 PC와 NPC의 설정/성격/말투/관계성/세계관/유저노트 등을 참조하여 NPC 의 성격에 맞춰 가장 설레는 HTML 화면을 즉시 렌더링하여 출력하라. ]*
💌 PC 버전 💌
*[OOC : 새로운 에피소드 시작. PC와 NPC는 이번에 피어리스에서 새로 진행하는 💖두근두근 심쿵 폭팔 대작전 실험💖에 참여하게 된다.
'사랑의 큐피트' 부속 설렘 연구소 - [심쿵 폭발 대작전: 페어 호감도 측정기]를 가동한다. 실험 대상은 !!PC!! 이다.
※ 출력 시작점 : 모든 답변의 전체 내용은 반드시 백틱 세 개 (```html)로 감싼 코드블록[div 형태로만 출력한다. (일반 텍스트 설명 금지)
코드 사이에 빈 줄(공백줄)이나 불필요한 줄바꿈을 넣지 말고 밀도 있게 출력한다.
모든 CSS스타일은 반드시 태그 내부에 인라인(style="")으로만 작성한다. 외부 이미지 호출은 금지한다.
2. 디자인 및 비주얼 (러블리 핑크):
색상 테마: 배경 #FFF5F7(파스텔 핑크), 텍스트/라인 #FF5E8E(진분홍). 전체적으로 25px의 둥근 모서리와 부드러운 하트 광채 효과를 적용한다.
이미지 박스: 중앙에 3:4 비율의 프레임을 생성하고 {{char_image}}를 배치한다. 필터는 화사한 파스텔톤(brightness(1.1) saturate(1.3))을 적용한다.
하트 애니메이션: 이미지 주위에 핑크빛 하트(💖, ✨)가 둥실둥실 떠올랐다 사라지는 CSS 애니메이션을 포함하라.
3. 실시간 모니터링 인터페이스:
상단 마키: 💖 [경보] 심쿵 주의보 발령! // 현재 타겟: PC님! // 💖 문구가 무한 루프하는 핑크색 [marquee] 배치.
심박수(BPM): 상황에 따라 변하는 실시간 BPM 수치(예: 120~160)를 표시하고, 숫자가 하트처럼 커졌다 작아지는 pulse 애니메이션을 적용한다.
심쿵 그래프 (이미지 통합 수정): 핑크색 선 위로 하트가 지나가는 시각적 효과 대신, 해당 위치에 height: 60px; 크기의 박스를 만들고 {{char_image}}를 배경이나 이미지로 삽입하여 코드가 텍스트로 튀어나오지 않게 출력하라.
4. 콘텐츠 구성 (NPC & PC 관점):
오늘의 한마디: NPC가 PC를 마주하고 쑥스러워하거나 설레며 내뱉는 대사를 큰따옴표 안에 넣어 상단에 배치한다.
호감도 분석 로그: ▷ LOVE ANALYSIS 섹션. NPC의 특정 행동(미소, 말걸기, 스킨십 등)이 PC의 심박수와 심리 상태에 미치는 영향을 귀엽고 주접스러운 연구원 말투(~함, ~임)로 서술한다.
심쿵 선택지: [details]와 [summary]를 활용하여 PC가 취할 수 있는 간질간질한 행동 시나리오 3가지를 생성한다.
5. 실행: 모든 내용은 PC와 NPC의 설정/성격/말투/관계성/세계관/유저노트 등을 참조하여 PC 의 성격에 맞춰 가장 설레는 HTML 화면을 즉시 렌더링하여 출력하라. 해당 내용과 관련된 에피소드를 2000자 이상 서술하시오.]*
⸝⸝⸝ ꒰ ❣ . ⁺ . ❣ . ⁺ . ❣ ꒱ ⸝⸝⸝
이번 OOC도 모쪼록 즐겁게 즐겨주시면 감사하겠습니다~! 다들 페어와 유사 미연시 체험을 해보아요 (๑ↀᆺↀ๑)✧❣
AI 채팅 캐릭터 소개 HTML을 본가AI(LLM)에게 받는 팁을 노션에 게시하였습니다. 디자인 시안 먼저 받기, html 요청 시 꼭 들어갈 말 등, 제가 사용하는 프롬프트 첨부하였습니다. 케이브덕, 블룸 특화입니다(다른 플랫폼 것도 참고 가능합니다)
https://t.co/zSfXzewR2j
여러분
케이브덕 쉼표 오류 이걸로 아예 없앨 수 있어요
단점 : 위젯에서도 다 사라집니다... 위젯에는 그대로 </span> 이렇게 출력될 순 있어요
채팅방 내부 > 설정 > 맞춤 채팅방 > 아래로 쭉 내려서 > 정규식 사용
단어입력칸 : , / 대체단어 입력칸 : </span>
적용 전 / 후
📢케이브덕 위젯 HTML 코드 제한 관련 공유
케이브덕 위젯 제한은 글자 수가 아니라 '텍스트 개수'입니다.
관련해서 아래 요약과 설명을 작성해 두겠습니다.
■ 요약(결론)
HTML 코드 자체에는 글자 수 제한이 없습니다.
대신 이런 제한이 있습니다.
>> 코드와 코드 사이에 입력되는 텍스트는 최대 150개까지 <<
150은 글자 수도, 단어 수도 아니고 '텍스트 덩어리의 개수'입니다.
■ 어떻게 세는 건가요?
태그와 태그 사이에 들어간 글이 한 덩어리에 1개입니다.
<div>안녕하세요 반갑습니다</div>
→ "안녕하세요 반갑습니다" 전체가 텍스트 1개.
길이는 상관없습니다. 100자를 써도 태그 하나 안에 들어있으면 1개입니다.
<div>오늘은 비가 오고 바람이 불고 어쩌구저쩌구 아주 긴 문장이 이어져도</div>
→ 이것도 1개.
반대로 짧아도 나뉘어 있으면 개수가 늘어납니다.
<div>가</div><div>나</div><div>다</div>
→ 3개.
■ 핵심
·장식용 태그는 0개로 계산됩니다
<div style="width:20px;height:20px;border-radius:50%;background:#ffb0d0;"></div>
이 안에 글자가 하나도 없죠? 그래서 0개입니다.
즉 그라데이션, 테두리, 그림자, 도형, 애니메이션 순수하게 꾸미기용으로 쌓는 div는 아무리 많아도 카운트가 0입니다.
제가 만든 위젯을 실제로 세봤습니다,
- 심해 속 해파리 위젯 : div 405개 → 텍스트 49개
- 창문 + 꽃 위젯 : div 449개 → 텍스트 28개
div를 400개 넘게 썼는데도 텍스트는 30~50개밖에 안 됩니다. 한도 150의 3분의 1 수준이에요.
해파리 260마리, 꽃 200송이를 CSS로 그려 넣어도 카운트에는 아무 영향이 없습니다.
·상태값도 제외됩니다
{{변수명1}} {{변수명2}} 같은 변수만 들어있는 칸은 계산에서 빠진다고 안내받았습니다.
■ 그래서 가능한 것들
·가능한 것
- 도형 쌓기, 레이어 겹치기
- 그라데이션 몇 겹이든 상관없음
- 애니메이션 달린 장식 요소 수백 개
- 캐릭터 일러스트를 div로 그리기
·불가능한 것
- 라벨입니다. 섹션 제목, 표 머리글, 고정 안내 문구… 이런 게 늘어나면 그게 곧 카운트입니다.
예를 들어 표를 만들 때
<div>DATE</div>
<div>TIME</div>
<div>WEATHER</div>
<div>PLACE</div>
이러면 4개를 씁니다. 굳이 나눌 필요가 없다면
<div>DATE · TIME · WEATHER · PLACE</div>
→ 1개로 줄일 수 있어요.
물론 레이아웃상 나눠야 하면 나누는 게 맞습니다. 다만 한도가 가까워졌을 때 어디를 줄여야 하는지는 알아두면 좋습니다. 도형이 아니라 글자를 줄여야 합니다.
■ 내 위젯은 몇 개인지 세는 법
눈으로 세기 힘들면 이렇게 확인하면 대충 나옵니다.
></div> ← 텍스트 없음 (0개)
>안녕</div> ← 텍스트 있음 (1개)
'></' 로 끝나는 태그는 전부 장식용이라 안 세도 됩니다. 귀찮죠? AI한테 세달라고 합시다. 코드를 붙여넣은 뒤, 아래와 같이 적으시면 됩니다.
→ AI 위젯 텍스트 갯수 세주는 지시문
첨부한 HTML에서 '텍스트 노드'의 개수를 세줘.
세는 기준:
1. 여는 태그와 닫는 태그 사이에 들어있는 글자 덩어리 하나가 1개다.
- 예) <div>안녕하세요 반갑습니다</div> → 1개
- 길이는 상관없고, 한 태그 안에 들어있으면 아무리 길어도 1개다.
2. 태그 안이 비어있으면(></div>) 0개다.
3. 공백이나 줄바꿈만 있는 것도 0개로 친다.
4. {{소제}} {{가이딩}} 처럼 변수만 들어있는 칸은 따로 빼서 세줘.
5. style 속성 안의 내용은 텍스트가 아니니까 세지 마.
결과는 이렇게 알려줘:
- 전체 텍스트 노드 개수
- 그중 변수만 있는 것 개수
- 실제 글자가 있는 것 개수
- 실제 글자가 있는 것들의 목록
■ 정리
- 글자 수 제한 없음
- 실제 제한 텍스트 덩어리 150개
- 빈 div (장식) 0개
- 상태값만 있는 칸 제외
- 긴 문장 하나 1개
‼️꾸미는 건 자유, 글자만 조심.‼️
이거 몰라서 위젯 화려하게 만드는 걸 망설이신 분들 많을 것 같아 공유합니다. 저도 계속 코드 길이 때문인 줄 알고 장식을 덜어내고 있었습니다..^ㅡ^;;
※ 참고로 저는 한 번 아주 긴 코드(10만 자 정도)를 넣었을 때 뒷부분이 잘린 적이 있습니다. 공식적으로 글자 수 제한은 없다고 안내받았으니 입력란 쪽 문제였을 수도 있습니다. 아주 긴 코드를 넣으신다면 저장 후 끝부분이 남아있는지 한 번 확인해보시길 권장드립니다.