크림 종이 위에 파스텔 탭, 얇은 코코아 선, 동글동글 친구들 — "캐릭터 가이드북 · 스티커북" 느낌으로 13+20개 체험을 하나로 묶어요.
모두 새로 그린 캐릭터예요. 같은 눈·볼·입 규칙 → 어떤 친구든 한 가족처럼 보여요.
달리기·던지기·점프는 스포츠·신체활동 게임의 안내 그림과 "따라 해요" 카드에 써요. jump는 모든 캐릭터에 쓸 수 있어요.
같은 그림을 <img>로 받아 캔버스·three.js(퀘스트) 텍스처로 그려요. 파일 없이 코드만으로 그려서 오프라인에서도 돼요.
import{ mascot, mascotImage, doodle }from'./core/mascots.js'; el.innerHTML = mascot('나비콩', { size: 120, mood: 'cheer' }); el.innerHTML = mascot('깡총이', { pose: 'throw' });constimg =awaitmascotImage('글리치 킹', { size: 512 }); ctx.drawImage(img, x, y, w, h); el.innerHTML += doodle('sparkle', { size: 28 }); // mood: happy · wow · sad · think · cheer // pose: stand · run · throw · jump
제목 옆, 카드 모서리, 정답 효과에 살짝. 한 화면에 3~5개면 충분해요.
파스텔은 바탕·탭에만, 글자는 언제나 진한 코코아 → 1학년도 또렷하게.
제목은 동글동글, 말풍선은 손글씨, 본문은 굵고 또렷하게.
문제 글 · 36–58px나비는 곤충일까요?버튼 · 25–42px시작하기!본문 · 19–21px두 걸음 뒤에 서서 팔을 크게 움직여요.설명 · 15–16px선생님·보호자용 작은 안내 글 (최소 14px)카드 · 탭 · 스티커 · 말풍선 · 숫자 배지 · 단계 그림 · HUD · 토스트
아이 손가락 크기: 기본 높이 64px, 누르면 쏙 들어가요.
.btn-cute + 색
크기 · .sm · 기본 · .lg · .xl · .icon · 캐릭터 넣기
.pick (학년 · 필터 고르기)
core/common-cute.css — 지금 게임이 쓰는 클래스 그대로, 크기·배치는 1px도 안 바꾸고 색과 선만 바꿔요.
위는 실제 끝 화면 구조(.overlay.dim · .title-xl · .sub · .dg-card · .big-btn · .ghost-btn · .fb-btn)를 그대로 넣은 비교예요. 어두운 막을 쓰는 이유: 게임마다 흰 글씨를 따로 쓰는 곳이 있어서, 막을 밝게 바꾸면 글씨가 안 보일 수 있어요.
새 게임은 이렇게: 캐릭터 진행자 + 큰 문제 카드 + 크림 끝 화면. 몸짓 OX 퀴즈 전체 미리보기 →