달콤 간식 퐁퐁!

💖 💖 💖

⏳ 30s

Fever

SCORE 0

🐱

마우스나 손가락을 좌우로 움직여 맛있는 간식을 받고 폭탄(💣)을 피하세요!

⏱️ 플레이 시간 선택

💡 게임 중 Space나 P를 누르면 일시정지됩니다

이모지 테마: 냥이 & 간식

🎯 왜 이 게임이 중학생 시연 1위일까?

• 즉시 이해되는 룰: 룰 설명 3초면 끝! 직관적인 낙하 반응형 조작
• 대세 트렌드 반영: 탕후루, 버블티 등 학생들이 좋아하는 이모지 애셋 즉시 교체 가능
• 도파민 폭발 연출: 콤보 이펙트, 화면 흔들림, 피버 모드로 보는 재미 극대화

⚡ 수업/시연용 즉시 복사 프롬프트

원클릭 복사

1단계: 초간단 뼈대 만들기

"HTML 단일 파일로 화면 위에서 과일 이모지들이 떨어지고, 마우스로 움직이는 바구니로 받으면 점수가 오르는 미니 게임 만들어줘."

2단계: 탕후루와 폭탄 추가하기

"과일 대신 탕후루(🍡), 버블티(🧋), 도넛(🍩)을 떨어뜨리고 가끔 폭탄(💣)도 섞어줘. 폭탄을 먹으면 하트가 깎이고 화면이 흔들리게 해줘."

3단계: 귀여운 UI와 피버 타임

"바구니를 귀여운 아기 고양이(🐱)로 바꾸고, 파스텔 핑크 글래스모피즘 테마로 만들어줘. 5연속 성공하면 화면이 무지개빛으로 빛나는 피버 모드가 발동하게 해줘."

💡

현장 참여 꿀팁: 학생들에게 "바구니 대신 어떤 동물로 할까?", "감점 아이템으로 뭘 넣을까?" 물어본 뒤 학생 답변을 즉석 프롬프트에 넣으면 호응이 3배로 커집니다!

Complete Prompt & UI Blueprint

중학생 심장을 저격하는 게임 UI & 프롬프트 설계서

어른들의 눈에는 작은 차이지만, 중학생들에게는 '동글동글한 파스텔 색감', '음식을 먹을 때 퐁! 하고 뜨는 파티클', 그리고 '폭탄이 터질 때의 화면 흔들림'이 코딩의 재미를 결정합니다.

🎨

1. 비주얼 컬러 & 감성 (Vibe)

어둡고 칙칙한 콘솔 스타일 대신 틱톡/인스타그램 릴스에서 자주 보이는 디저트 카페 파스텔 톤을 채택해야 합니다.

#FF6B81 (스트로베리 핑크 - 메인 강조)

#FFEAA7 (슈크림 옐로우 - 점수/골드)

#F8E8EE (소프트 라벤더 - 부드러운 배경)

👉 프롬프트 팁: "Tailwind의 rose, amber, purple 파스텔 그라데이션 적용해줘"

🍓

2. 이모지 애셋 설계

외부 이미지 링크(URL)는 깨질 위험이 큽니다. 브라우저 내장 고해상도 이모지(Emoji)를 게임 스프라이트로 활용하면 100% 안정적입니다.

🐱 🐹 플레이어 바구니 고양이, 햄스터

🍡 🧋 🍩 달콤 간식 (+10~30) 탕후루, 버블티, 도넛

💣 위험 폭탄 (-하트) 하트 차감 & 화면 진동

🌟 황금 별 (+피버) 게이지 즉시 충전

👉 프롬프트 팁: "이미지 파일 대신 최신 고화질 이모지를 캔버스에 렌더링해줘"

✨

3. '도파민 주스(Juice)' 연출

게임이 재밌으려면 무언가를 먹었을 때의 감각 피드백이 화려해야 합니다.

통통 튀는 숫자: "+20 Yummy!" 글자가 위로 떠오름
반짝이 파티클: 먹는 순간 별가루 12개가 원형으로 확산
화면 흔들림 (Screen Shake): 폭탄 피격 시 0.3초간 진동
Web Audio 사운드: 파일 없이 브라우저 내장 합성기로 경쾌한 퐁! 소리

👉 프롬프트 팁: "간식을 획득하면 파티클 효과와 텍스트 팝업 애니메이션을 넣어줘"

🪄 선생님/멘토를 위한 4단계 점진적 바이브코딩 프롬프트 레시피

처음부터 모든 걸 다 요구하면 학생들이 코드를 이해하기 어렵습니다. 단 4단계로 한 겹씩 마법처럼 변하는 과정을 보여주는 것이 수업 성공의 핵심입니다.

기본 뼈대: 떨어지고 받는 동작 만들기 (소요 시간: 30초)

HTML, CSS, JS를 분리하지 말고 단 하나의 HTML 파일로 작성해줘. 화면 위쪽에서 과일 이모지(🍓, 🍌, 🍇)들이 중력을 받아 천천히 아래로 떨어지게 해줘. 화면 아래쪽에는 플레이어 바구니(🧺)가 있고, 마우스를 좌우로 움직이면 바구니가 부드럽게 마우스를 따라오게 해줘. 바구니에 과일이 닿으면 점수가 10점씩 오르고 상단에 큰 글씨로 표시되게 해줘.

💡 해설: 게임의 본질적인 루프(낙하 -> 충돌 판정 -> 점수 획득)만 먼저 눈앞에 띄워 아이들의 호기심을 유발합니다.

재미와 긴장감: 요즘 유행 간식과 폭탄 페널티 추가 (소요 시간: 1분)

기존 코드에서 떨어지는 아이템을 학생들이 좋아하는 탕후루(🍡), 버블티(🧋), 도넛(🍩)으로 바꿔줘. 여기에 5초마다 위험한 폭탄(💣)이 섞여서 떨어지게 해줘. 플레이어에게 목숨 하트 3개(💖💖💖)를 부여하고, 폭탄을 받으면 하트가 하나 줄어들면서 화면 전체가 0.3초 동안 부들부들 흔들리는 'Screen Shake' 효과를 넣어줘. 하트가 0개가 되면 게임 오버 화면을 띄워줘.

💡 해설: 탕후루라는 단어가 나오는 순간 중학생들이 환호성을 지릅니다. 폭탄을 먹었을 때 화면 흔들림은 높은 몰입감을 줍니다.

비주얼 & 효과음 극대화: 냥이 바구니와 파티클 폭죽 (소요 시간: 1분)

바구니 대신 귀여운 아기 고양이(🐱) 이모지가 마우스를 따라 통통 튀며 다니게 해줘. 간식을 먹을 때마다 그 자리에서 색색의 별가루 파티클 12개가 팡! 터져 흩어지게 해주고, '+20 YUMMY!' 같은 글씨가 위로 솟아오르며 서서히 사라지게 해줘. 외부 mp3 링크 없이 브라우저 Web Audio API를 사용해서 간식을 먹을 땐 맑은 실로폰 소리(뾱!), 폭탄을 먹을 땐 쿵 소리가 나게 만들어줘. 전체 디자인은 Tailwind를 써서 핑크 파스텔톤 글래스모피즘으로 꾸며줘.

💡 해설: 외부 음원 파일을 찾아서 다운받을 필요 없이 브라우저 자체 오디오 신디사이저로 소리를 내는 마법을 보여줄 수 있습니다.

절정(Climax): 콤보 피버 타임 & 황금 간식 폭풍 (소요 시간: 1분)

상단에 피버(Fever) 게이지를 추가해줘. 간식을 실수 없이 연속으로 먹으면 게이지가 차오르고, 100%가 되면 5초간 '피버 모드'가 켜지게 해줘! 피버 모드 중에는: 1. 배경 화면이 환상적인 무지개 그라데이션으로 화려하게 물들고 2. 하늘에서 황금 마카롱(🌟)이 쏟아져 내리며 3. 모든 획득 점수가 2배가 되고 경쾌한 팡파레 효과음이 울려 퍼지게 해줘. 마지막으로 스마트폰에서도 화면을 터치해서 플레이할 수 있게 touchstart, touchmove 이벤트를 완벽하게 지원해줘.

💡 해설: 단순한 미니 게임이 상용 모바일 게임 수준의 연출로 진화하는 순간이며, QR 코드로 학생들 휴대폰에 띄워주기 최적의 상태가 됩니다.

달콤 간식 퐁퐁! Vibe Demo